Prevent linking to tabs with no IDs

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).

src/application-globals.rkt

@@ -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]

static/main.css

@@ -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;
 }
 

static/tabs.js

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