breezewiki/static/tabs.js

40 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")