forked from cadence/breezewiki
41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
"use strict";
|
|
|
|
const tabFromHash = location.hash.length > 1 ? location.hash.substring(1) : null
|
|
|
|
for (const tabber of document.body.querySelectorAll(".wds-tabber")) {
|
|
for (const [tab, content] of getTabberTabs(tabber)) {
|
|
// set up click listener on every tab
|
|
tab.addEventListener("click", e => {
|
|
setCurrentTab(tabber, tab, content)
|
|
e.preventDefault()
|
|
})
|
|
|
|
// re-open a specific tab on page load based on the URL hash
|
|
if (tab.dataset.hash === tabFromHash) {
|
|
setCurrentTab(tabber, tab, content)
|
|
tab.scrollIntoView()
|
|
}
|
|
}
|
|
}
|
|
|
|
function getTabberTabs(tabber) {
|
|
// need to scope the selector to handle nested tabs. see /unturned/wiki/Crate for an example
|
|
const tabs = [...tabber.querySelectorAll(":scope > .wds-tabs__wrapper .wds-tabs__tab")]
|
|
const contents = [...tabber.querySelectorAll(":scope > .wds-tab__content")]
|
|
return tabs.map((_, index) => [tabs[index], contents[index]]) // transpose arrays into [[tab, content], ...]
|
|
}
|
|
|
|
function setCurrentTab(tabber, tab, content) {
|
|
// clear currently selected tab
|
|
getTabberTabs(tabber).flat().forEach(e => e.classList.remove("wds-is-current"))
|
|
|
|
// select new tab
|
|
tab.classList.add("wds-is-current")
|
|
content.classList.add("wds-is-current")
|
|
if (tab.dataset.hash) {
|
|
history.replaceState(null, "", `#${tab.dataset.hash}`)
|
|
}
|
|
}
|
|
|
|
document.body.classList.remove("bw-tabs-nojs")
|