SpaceTour/tabs.js at main · VictorManzanilla/SpaceTour · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

const tabList = document.querySelector('[role="tablist"]');
const tabs = tabList.querySelectorAll('[role="tab"]');


tabs.forEach((tab) => {
    tab.addEventListener('click', changeTabPanel);

});


let tabFocus = 0;

// The numbers are the keycodes for the right and left keys. To that
// do console.log(e.keycode)
tabList.addEventListener('keydown', (e) => {
    // console.log(e.keyCode)
    const keydownLeft = 37;
    const keydownRight = 39;

    //change the tabindex of the current tab to -1
    if (e.keyCode === keydownLeft || e.keyCode === keydownRight) {
        tabs[tabFocus].setAttribute("tabindex", -1);
    }

    //if the right key is pushed, move to the next tab on the right
    if (e.keyCode === keydownRight) {
        tabFocus++;
         if (tabFocus >= tabs.length) {
            tabFocus = 0;
         }
        // console.log(tabFocus)
    }
    //if the left key is pushed, move to the next tab on the left
    if (e.keyCode === keydownLeft) {
        tabFocus = tabFocus - 1;
        if (tabFocus < 0) {
            tabFocus = tabs.length - 1;
        }
        // console.log(tabFocus)
    }
//its set to zero
    tabs[tabFocus].setAttribute("tabindex", 0);
    tabs[tabFocus].focus();
})


function changeTabPanel(e) {
    const targetTab = e.target;
    const targetPanel = targetTab.getAttribute("aria-controls");
    const targetImage = targetTab.getAttribute("data-image");

    const tabContainer = targetTab.parentNode;
    const mainContainer = tabContainer.parentNode;

    tabContainer
        .querySelector('[aria-selected="true"]')
        .setAttribute("aria-selected", false);

    targetTab.setAttribute("aria-selected", true);

    hideContent(mainContainer, '[role="tabpanel"]');
    showContent(mainContainer, [`#${targetPanel}`]);

    hideContent(mainContainer, 'picture');
    showContent(mainContainer, [`#${targetImage}`]);
}

function hideContent(parent, content) {
    parent
        .querySelectorAll(content)
        .forEach((item) => item.setAttribute("hidden", true));
}

function showContent(parent, content) {
     parent.querySelector(content).removeAttribute('hidden');
}


// function changeTabPanel(e) {
//     const targetTab = e.target;
//     const targetPanel = targetTab.getAttribute("aria-controls");
//     const targetImage = targetTab.getAttribute("data-image");

//     const tabContainer = targetTab.parentNode;
//     const mainContainer = tabContainer.parentNode
//     // const picture = document.getElementById("rock")
//     // console.log(picture)


//     mainContainer
//         .querySelectorAll('article')
//         .forEach((article) => article.setAttribute("hidden", true));

//     mainContainer.querySelector([`#${targetPanel}`]).removeAttribute('hidden');

//      mainContainer
//         .querySelectorAll('picture')
//         .forEach((picture) => picture.setAttribute("hidden", true));

//         mainContainer.querySelector([`#${targetImage}`]).removeAttribute('hidden');


// }