Tabber code size and quality

ben10/wiki/Alien_X_(Classic)#Appearances

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)]
@@ -200,10 +200,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]

static/main.css

@@ -202,11 +202,11 @@ figcaption, .lightbox-caption, .thumbcaption {
     padding: 0;
 }
 
-/* show tabs always */
+/* show tabs if tabs.js isn't loaded */
-.wds-tabs__wrapper {
+.bw-tabs-nojs .wds-tabs__wrapper {
     display: none;
 }
-.wds-tab__content {
+.bw-tabs-nojs .wds-tab__content {
     display: block;
 }
 

static/tabs.js

@@ -0,0 +1,40 @@
+"use strict";
+
+const tabFromHash = location.hash.length > 1 ? location.hash.substring(1) : null
+
+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()
+		})
+
+		// 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 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) {
+	// clear currently selected tab
+	getTabberTabs(tabber).flat().forEach(e => e.classList.remove("wds-is-current"))
+
+	// 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")