forked from cadence/breezewiki
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:
parent
b8a6c5198d
commit
d345fb8ff4
3 changed files with 68 additions and 4 deletions
|
@ -203,10 +203,11 @@
|
|||
`(script (@ (type "module") (src ,(get-static-url "search-suggestions.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))
|
||||
(λ (v) (u-proxy-url v))
|
||||
(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?
|
||||
(cond/var
|
||||
[(not req) #f]
|
||||
|
|
|
@ -202,11 +202,11 @@ figcaption, .lightbox-caption, .thumbcaption {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
/* show tabs always */
|
||||
.wds-tabs__wrapper {
|
||||
/* show tabs if tabs.js isn't loaded */
|
||||
.bw-tabs-nojs .wds-tabs__wrapper {
|
||||
display: none;
|
||||
}
|
||||
.wds-tab__content {
|
||||
.bw-tabs-nojs .wds-tab__content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
63
static/tabs.js
Normal file
63
static/tabs.js
Normal 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];
|
||||
}
|
Loading…
Reference in a new issue