Tabber code size and quality
This commit is contained in:
parent
47d92d3a37
commit
755efe3cd6
2 changed files with 30 additions and 64 deletions
|
@ -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)]
|
||||||
|
|
|
@ -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")
|
||||||
|
|
Loading…
Reference in a new issue