breezewiki/static/tabs.js

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