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).
This commit is contained in:
blankie 2023-05-29 23:02:28 +07:00
parent b8ccd6cc3e
commit 9773e62c46
Signed by: blankie
GPG key ID: CC15FC822C7F61F5
3 changed files with 68 additions and 4 deletions

View file

@ -203,10 +203,11 @@
`(script (@ (type "module") (src ,(get-static-url "search-suggestions.js")))) `(script (@ (type "module") (src ,(get-static-url "search-suggestions.js"))))
"") "")
(script (@ (type "module") (src ,(get-static-url "countdown.js")))) (script (@ (type "module") (src ,(get-static-url "countdown.js"))))
(script (@ (defer) (src ,(get-static-url "tabs.js"))))
(link (@ (rel "icon") (href ,(u (λ (v) (config-true? 'strict_proxy)) (link (@ (rel "icon") (href ,(u (λ (v) (config-true? 'strict_proxy))
(λ (v) (u-proxy-url v)) (λ (v) (u-proxy-url v))
(head-data^-icon-url head-data)))))) (head-data^-icon-url head-data))))))
(body (@ (class ,(head-data^-body-class head-data))) (body (@ (class ,(head-data^-body-class head-data) " bw-tabs-nojs"))
,(let ([extension-eligible? ,(let ([extension-eligible?
(cond/var (cond/var
[(not req) #f] [(not req) #f]

View file

@ -202,11 +202,11 @@ figcaption, .lightbox-caption, .thumbcaption {
padding: 0; padding: 0;
} }
/* show tabs always */ /* show tabs if tabs.js isn't loaded */
.wds-tabs__wrapper { .bw-tabs-nojs .wds-tabs__wrapper {
display: none; display: none;
} }
.wds-tab__content { .bw-tabs-nojs .wds-tab__content {
display: block; display: block;
} }

63
static/tabs.js Normal file
View file

@ -0,0 +1,63 @@
"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];
}