cadence/breezewiki
2
4
Fork 4
Code Issues Pull requests 1 Releases Wiki Activity

Tabber code size and quality

Browse source
This commit is contained in:
Cadence Ember 2024-06-05 23:07:05 +12:00
parent 47d92d3a37
commit 755efe3cd6
2 changed files with 30 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/application-globals.rkt
View file

@ -172,7 +172,7 @@
(define styles (define styles
(list (list
(format "~a/wikia.php?controller=ThemeApi&method=themeVariables&variant=~a" origin (user-cookies^-theme user-cookies)) (format "~a/wikia.php?controller=ThemeApi&method=themeVariables&variant=~a" origin (user-cookies^-theme user-cookies))
(format "~a/load.php?lang=en&modules=site.styles%7Cskin.fandomdesktop.styles%7Cext.fandom.PortableInfoboxFandomDesktop.css%7Cext.fandom.GlobalComponents.CommunityHeaderBackground.css%7Cext.gadget.site-styles%2Csound-styles&only=styles&skin=fandomdesktop" origin))) (format "~a/load.php?lang=en&modules=site.styles%7Cskin.fandomdesktop.styles%7Cext.fandom.PortableInfoboxFandomDesktop.css%7Cext.fandom.GlobalComponents.CommunityHeaderBackground.css%7Cext.fandom.photoGallery.gallery.css%7Cext.gadget.site-styles%2Csound-styles&only=styles&skin=fandomdesktop" origin)))
(if (config-true? 'strict_proxy) (if (config-true? 'strict_proxy)
(map u-proxy-url styles) (map u-proxy-url styles)
styles)] styles)]

92
static/tabs.js
View file

@ -1,74 +1,40 @@
"use strict"; "use strict";
let tabToFind = location.hash.length > 1 ? location.hash.substring(1) : null; const tabFromHash = 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) { for (const tabber of document.body.querySelectorAll(".wds-tabber")) {
let tab = tabs[i]; for (const [tab, content] of getTabberTabs(tabber)) {
let content = contents[i]; // set up click listener on every tab
tab.addEventListener("click", e => {
setCurrentTab(tabber, tab, content)
e.preventDefault()
})
tab.addEventListener("click", function(e) { // re-open a specific tab on page load based on the URL hash
setCurrentTab(tabber, tab, content); if (tab.dataset.hash === tabFromHash) {
e.preventDefault(); setCurrentTab(tabber, tab, content)
}); tab.scrollIntoView()
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) { function getTabberTabs(tabber) {
let tab = null; // need to scope the selector to handle nested tabs. see /unturned/wiki/Crate for an example
let content = null; const tabs = [...tabber.querySelectorAll(":scope > .wds-tabs__wrapper .wds-tabs__tab")]
const contents = [...tabber.querySelectorAll(":scope > .wds-tab__content")]
tab = tabber.querySelector(".wds-tabs__wrapper").querySelector(".wds-tabs__tab.wds-is-current"); return tabs.map((_, index) => [tabs[index], contents[index]]) // transpose arrays into [[tab, content], ...]
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) { function setCurrentTab(tabber, tab, content) {
let [currentTab, currentContent] = getCurrentTab(tabber); // clear currently selected tab
if (currentTab) { getTabberTabs(tabber).flat().forEach(e => e.classList.remove("wds-is-current"))
currentTab.classList.remove("wds-is-current");
}
if (currentContent) {
currentContent.classList.remove("wds-is-current");
}
tab.classList.add("wds-is-current"); // select new tab
content.classList.add("wds-is-current"); tab.classList.add("wds-is-current")
if (tab.dataset.hash) { content.classList.add("wds-is-current")
let fragment = "#" + tab.dataset.hash; if (tab.dataset.hash) {
if (location.hash !== fragment) { history.replaceState(null, "", `#${tab.dataset.hash}`)
history.pushState(null, "", fragment); }
}
}
} }
document.body.classList.remove("bw-tabs-nojs")