Compare commits

...

6 commits

Author SHA1 Message Date
6c5a4019cc
Hide slideshows 2023-12-23 13:37:51 +11:00
ce773b059e
Fix scrolling to sections if a tab's hash coincides with one
ben10/wiki/Alien_X_(Classic)#Appearances
2023-12-23 13:37:51 +11:00
b60e000513
Prevent making duplicate history entries 2023-12-23 13:37:51 +11:00
d6b8e16e4f
Prevent linking to tabs with no IDs 2023-12-23 13:37:50 +11:00
cc9954832c
Add the ability to specify/open the last open tab in the URL 2023-12-23 13:37:50 +11:00
7e871ad0fd
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-12-23 13:37:50 +11:00
3 changed files with 86 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 "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]

View file

@ -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;
}
@ -218,6 +218,13 @@ a.ext-audiobutton { /* see hearthstone/wiki/Diablo_(Duels_hero) */
display: inline !important;
}
/* hide slideshows since they're broken
* example: ben10/wiki/Celestialsapien_(Classic)#Powers_and_Abilities
*/
.wikia-slideshow {
display: none;
}
/* animated slots */
#mw-content-text .animated > :not(.animated-active), #mw-content-text .animated > .animated-subframe > :not(.animated-active) {
display: inline-block;

74
static/tabs.js Normal file
View file

@ -0,0 +1,74 @@
"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) {
let fragment = "#" + tab.dataset.hash;
if (location.hash !== fragment) {
history.pushState(null, "", fragment);
}
}
}