breezewiki/static/tabs.js
blankie 9773e62c46
Add better support for tabs
Some pages break without actual tab support, such as
https://breezewiki.com/ben10/wiki/Ultimatrix_(Original)#Modes

This change aims to work with old browsers (such as Firefox for Android 68)
and browsers with Javascript disabled (by showing all tab contents and hiding
the tab bar, i.e. how tabs work before this change).
2023-11-06 20:15:15 +11:00

63 lines
1.5 KiB
JavaScript

"use strict";
function handleTabber(tabber) {
let [tabs, contents] = getTabs(tabber);
for (let i in tabs) {
let tab = tabs[i];
let content = contents[i];
tab.addEventListener("click", function(e) {
let [currentTab, currentContent] = getCurrentTab(tabber);
if (currentTab) {
currentTab.classList.remove("wds-is-current");
}
if (currentContent) {
currentContent.classList.remove("wds-is-current");
}
tab.classList.add("wds-is-current");
content.classList.add("wds-is-current");
e.preventDefault();
});
}
}
for (let tabber of document.body.querySelectorAll(".wds-tabber")) {
handleTabber(tabber);
}
document.body.classList.remove("bw-tabs-nojs");
function getTabs(tabber) {
let tabs = [];
let contents = [];
for (let i of tabber.querySelector(".wds-tabs__wrapper").querySelectorAll(".wds-tabs__tab")) {
tabs.push(i);
}
for (let i of tabber.children) {
if (!i.matches(".wds-tab__content")) {
continue;
}
contents.push(i);
}
return [tabs, contents];
}
function getCurrentTab(tabber) {
let tab = null;
let content = null;
tab = tabber.querySelector(".wds-tabs__wrapper").querySelector(".wds-tabs__tab.wds-is-current");
for (let i of tabber.children) {
if (!i.matches(".wds-tab__content.wds-is-current")) {
continue;
}
content = i;
break;
}
return [tab, content];
}