From 755efe3cd65968b626c3d661d83c44e468428322 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cadence@disroot.org>
Date: Wed, 5 Jun 2024 23:07:05 +1200
Subject: [PATCH] Tabber code size and quality

---
 src/application-globals.rkt |  2 +-
 static/tabs.js              | 92 ++++++++++++-------------------------
 2 files changed, 30 insertions(+), 64 deletions(-)

diff --git a/src/application-globals.rkt b/src/application-globals.rkt
index ff0e81f..e574707 100644
--- a/src/application-globals.rkt
+++ b/src/application-globals.rkt
@@ -172,7 +172,7 @@
        (define styles
          (list
           (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)
            (map u-proxy-url styles)
            styles)]
diff --git a/static/tabs.js b/static/tabs.js
index a077efe..718b48e 100644
--- a/static/tabs.js
+++ b/static/tabs.js
@@ -1,74 +1,40 @@
 "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);
+const tabFromHash = location.hash.length > 1 ? location.hash.substring(1) : null
 
-    for (let i in tabs) {
-        let tab = tabs[i];
-        let content = contents[i];
+for (const tabber of document.body.querySelectorAll(".wds-tabber")) {
+	for (const [tab, content] of getTabberTabs(tabber)) {
+		// set up click listener on every tab
+		tab.addEventListener("click", e => {
+			setCurrentTab(tabber, tab, content)
+			e.preventDefault()
+		})
 
-        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];
+		// re-open a specific tab on page load based on the URL hash
+		if (tab.dataset.hash === tabFromHash) {
+			setCurrentTab(tabber, tab, content)
+			tab.scrollIntoView()
+		}
+	}
 }
 
-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 getTabberTabs(tabber) {
+	// need to scope the selector to handle nested tabs. see /unturned/wiki/Crate for an example
+	const tabs = [...tabber.querySelectorAll(":scope > .wds-tabs__wrapper .wds-tabs__tab")]
+	const contents = [...tabber.querySelectorAll(":scope > .wds-tab__content")]
+	return tabs.map((_, index) => [tabs[index], contents[index]]) // transpose arrays into [[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");
-    }
+	// clear currently selected tab
+	getTabberTabs(tabber).flat().forEach(e => e.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);
-        }
-    }
+	// select new tab
+	tab.classList.add("wds-is-current")
+	content.classList.add("wds-is-current")
+	if (tab.dataset.hash) {
+		history.replaceState(null, "", `#${tab.dataset.hash}`)
+	}
 }
+
+document.body.classList.remove("bw-tabs-nojs")