From e79663706cc2a8c1bdb1de17aa3f0cf2d8bdccaa Mon Sep 17 00:00:00 2001
From: blankie <blankie@nixnetmail.com>
Date: Mon, 29 May 2023 23:02:28 +0700
Subject: [PATCH] Add better support for tabs

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 |  3 +-
 static/main.css             |  6 ++--
 static/tabs.js              | 63 +++++++++++++++++++++++++++++++++++++
 3 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 static/tabs.js

diff --git a/src/application-globals.rkt b/src/application-globals.rkt
index 10b4530..dcab81c 100644
--- a/src/application-globals.rkt
+++ b/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]
diff --git a/static/main.css b/static/main.css
index 3d3ed5a..af82a50 100644
--- a/static/main.css
+++ b/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;
 }
 
diff --git a/static/tabs.js b/static/tabs.js
new file mode 100644
index 0000000..589261d
--- /dev/null
+++ b/static/tabs.js
@@ -0,0 +1,63 @@
+"use strict";
+
+function handleTabber(tabber) {
+    let [tabs, contents] = getTabs(tabber);
+
+    for (let i in tabs) {
+        let tab = tabs[i];
+        let content = contents[i];
+        tab.addEventListener("click", function(e) {
+            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");
+            e.preventDefault();
+        });
+    }
+}
+
+for (let tabber of document.body.querySelectorAll(".wds-tabber")) {
+    handleTabber(tabber);
+}
+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];
+}