XF/neptune
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix all tab content being changed at once

Browse Source
This commit is contained in:
Mark Veidemanis
2022-08-29 17:23:33 +01:00
parent b6ca84c7a5
commit ae2004090c
10 changed files with 90 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/static/tabs.css
View File

@@ -1,7 +0,0 @@
#tab-content div {
display: none;
}
#tab-content div.is-active {
display: block;
}

71
core/static/tabs.js
View File

@@ -1,35 +1,36 @@
// tabbed browsing for the modal
function initTabs() {
TABS.forEach((tab) => {
tab.addEventListener('click', (e) => {
let selected = tab.getAttribute('data-tab');
updateActiveTab(tab);
updateActiveContent(selected);
})
})
}
function updateActiveTab(selected) {
TABS.forEach((tab) => {
if (tab && tab.classList.contains(ACTIVE_CLASS)) {
tab.classList.remove(ACTIVE_CLASS);
}
});
selected.classList.add(ACTIVE_CLASS);
}
function updateActiveContent(selected) {
CONTENT.forEach((item) => {
if (item && item.classList.contains(ACTIVE_CLASS)) {
item.classList.remove(ACTIVE_CLASS);
}
let data = item.getAttribute('data-content');
if (data === selected) {
item.classList.add(ACTIVE_CLASS);
}
});
}
var TABS = [...document.querySelectorAll('#tabs li')];
var CONTENT = [...document.querySelectorAll('#tab-content div')];
var ACTIVE_CLASS = 'is-active';
initTabs();
function initTabs(unique) {
var tabs_selector = '#tabs-'+unique+' li';
var TABS = [...document.querySelectorAll(tabs_selector)];
var CONTENT = [...document.querySelectorAll('#tab-content-'+unique+' div')];
var ACTIVE_CLASS = 'is-active';
TABS.forEach((tab) => {
tab.addEventListener('click', (e) => {
let selected = tab.getAttribute('data-tab');
updateActiveTab(TABS, ACTIVE_CLASS, tab);
updateActiveContent(CONTENT, ACTIVE_CLASS, selected);
})
})
}
function updateActiveTab(TABS, ACTIVE_CLASS, selected) {
TABS.forEach((tab) => {
if (tab && tab.classList.contains(ACTIVE_CLASS)) {
tab.classList.remove(ACTIVE_CLASS);
}
});
selected.classList.add(ACTIVE_CLASS);
}
function updateActiveContent(CONTENT, ACTIVE_CLASS, selected) {
CONTENT.forEach((item) => {
if (item && item.classList.contains(ACTIVE_CLASS)) {
item.classList.remove(ACTIVE_CLASS);
}
let data = item.getAttribute('data-content');
if (data === selected) {
item.classList.add(ACTIVE_CLASS);
}
});
}
// initTabs();