public/static/scripts/tabs.js


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

function displayTab(category, id) {
    const tabs = document.querySelectorAll(`#${category} .tab`);
    tabs.forEach((tab) => {
        let tabId = tab.getAttribute('id');
        tabId = tabId.substring(0, tabId.length - 4);

        tab.setAttribute('show-disabled', tabId != id);

        const content = document.getElementById(tabId);
        if (content) {
            let display = 'flex';
            if (content.classList.contains('grid')) {
                display = 'grid';
            }
            content.style.display = tabId == id ? display : 'none';
        }
    });
}

function enableTab(id) {
    document.getElementById(`${id}-tab`).style.display = 'flex';
}

function disableTab(id) {
    document.getElementById(`${id}-tab`).style.display = 'none';
}

function hideTab(id) {
    disableTab(id);
    document.getElementById(id).style.display = 'none';
}

function showTab(id) {
    enableTab(id);
    const content = document.getElementById(id);
    if (content) {
        content.style.display = content.classList.contains('grid') ? 'grid' : 'flex';
    }
}

window.addEventListener('load', () => {
    const categories = document.querySelectorAll('.tab-category');

    categories.forEach((c) => {
        const category = c.getAttribute('id');
        const tabs = document.querySelectorAll(`#${category} .tab>button`);
        tabs.forEach((tab) => {
            let id = tab.parentElement.getAttribute('id');
            id = id.substring(0, id.length - 4);

            tab.addEventListener('click', () => displayTab(category, id));

            console.log(id);
        });
    });
});