Compare commits

...

3 commits

Author SHA1 Message Date
9ff6d3b9a8
Prevent linking to tabs with no IDs 2023-05-30 14:01:14 +07:00
458cce1c5c
Add the ability to specify/open the last open tab in the URL 2023-05-30 13:49:57 +07:00
3f94452de6
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-05-29 23:17:37 +07:00
3 changed files with 77 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;
} }

72
static/tabs.js Normal file
View file

@ -0,0 +1,72 @@
"use strict";
let tabToFind = location.hash.length > 1 ? location.hash.substring(1) : null;
for (let tabber of document.body.querySelectorAll(".wds-tabber")) {
let [tabs, contents] = getTabs(tabber);
for (let i in tabs) {
let tab = tabs[i];
let content = contents[i];
tab.addEventListener("click", function(e) {
setCurrentTab(tabber, tab, content);
e.preventDefault();
});
if (tab.dataset.hash === tabToFind) {
setCurrentTab(tabber, tab, content);
}
}
}
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];
}
function setCurrentTab(tabber, tab, content) {
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");
if (tab.dataset.hash) {
location.hash = "#" + tab.dataset.hash;
history.pushState(null, "", "#" + tab.dataset.hash);
}
}