hugo-theme-terminal

commit fd6d1e1772e6501a3805f6a1bf9a4b09821b4521
parent a52b53d960f05577c62eb3f62d494db3057f37fc
Author: lou woell <lou@repetitions.de>
Date:   Sun, 27 Sep 2026 00:01:17 +0200

refactor tabbed container

this should make it easier to style it somewhat nicely when no javascript is
available.

Diffstat:
M
assets/js/tabbedContainer.js
 | 
77
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------
M
layouts/_shortcodes/tabbed.html
 | 
10
----------

2 files changed, 66 insertions(+), 21 deletions(-)
diff --git a/assets/js/tabbedContainer.js b/assets/js/tabbedContainer.js
@@ -1,18 +1,73 @@
-function clickTab (evt) {
+class TabContainer {
 
-    const tabName = evt.target.getAttribute("tabName");
-    const container = evt.currentTarget.parentElement;
-    const tabContent = container.getElementsByClassName("tabContent");
-    const tabLink = container.getElementsByClassName("tabLink");
+    constructor(id) {
+        this.container = id;
+        this.tabContents = Array.from(
+            this.container.getElementsByClassName("tabContent")
+        );
 
-    for (let element of tabContent){
-        element.classList.remove("active");
+        this.makeTabs();
     }
 
-    for (let element of tabLink){
-        element.classList.remove("active");
+    makeTabs(){
+
+        this.bar = document.createElement("div");
+        this.bar.classList.add("tabBar")
+
+        this.body = document.createElement("div");
+        this.body.classList.add("tabs");
+
+        for (var tab of this.tabContents) {
+            this.bar.appendChild(this.makeTabButton(tab));
+            this.body.appendChild(tab);
+        }
+
+        this.container.replaceChildren(
+            this.bar,
+            this.body,
+        )
     }
 
-    tabContent.namedItem(tabName).classList.add("active");
-    evt.target.classList.add("active");
+    makeTabButton(tab){
+
+        const button = document.createElement("button");
+
+        button.tabName = tab.id;
+        button.innerText = tab.id;
+        button.classList.add("tabLink");
+        button.addEventListener("click", TabContainer.clickTab);
+
+        if (tab.classList.contains("active")) {
+            button.classList.add("active");
+        }
+
+        return button;
+    }
+
+    static clickTab (evt) {
+
+        // when used as event handler THIS is bound to element that is clicked.
+
+        const tabName = this.tabName;
+        const tabBar  = this.parentElement;
+        const container = tabBar.parentElement;
+        const tabContent = container.getElementsByClassName("tabContent");
+        const tabLink = container.getElementsByClassName("tabLink");
+
+        for (let element of tabContent){
+            element.classList.remove("active");
+        }
+
+        for (let element of tabLink){
+            element.classList.remove("active");
+        }
+
+        tabContent.namedItem(tabName).classList.add("active");
+        this.classList.add("active");
+    }
 }
+
+// Initialize containers on site.
+Array.from(document.getElementsByClassName('tabContainer')).forEach(
+    x => new TabContainer(x)
+)
diff --git a/layouts/_shortcodes/tabbed.html b/layouts/_shortcodes/tabbed.html
@@ -1,19 +1,9 @@
 {{ with .Inner }}{{/* don't do anything, just call it */}}{{ end }}
 <div class="tabContainer">
-  <div class="tabBar" onclick="javascript:clickTab(event);">
-    {{ range $idx, $tab := .Scratch.Get "tabs" -}}
-      <button tabName="{{ .name }}"
-              class="tabLink {{ cond (eq $idx 0) "active" ""}}">
-        {{- .name }}
-      </button>
-    {{- end }}
-  </div>
-  <div class="tabs">
     {{ range $idx, $tab := .Scratch.Get "tabs" -}}
       <div class="tabContent {{- cond (eq $idx 0) " active" "" -}}"
            id="{{ .name }}">
         {{ .content }}
       </div>
     {{- end }}
-  </div>
 </div>