From 302ea923ed6d17e4ccacc490d5cf17149015c738 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Sun, 29 Jan 2023 16:45:42 +0100
Subject: [PATCH] tabs: remove jQuery #452

---
 layouts/partials/shortcodes/tabs.html | 11 +++++++----
 static/js/theme.js                    | 16 +++++++++++-----
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html
index 6a35b70b5b..dc1a910b0f 100644
--- a/layouts/partials/shortcodes/tabs.html
+++ b/layouts/partials/shortcodes/tabs.html
@@ -3,20 +3,23 @@
 {{- $groupid := .groupid | default "default" }}
 {{- $direction := T "Reading-direction" | default "ltr" }}
 {{- with $context }}
-<div class="tab-panel">
+<div class="tab-panel" data-tab-group="{{ $groupid }}">
   <div class="tab-nav">
   {{- range $idx, $tab := $tabs }}
     <button
       data-tab-item="{{ .name }}"
-      data-tab-group="{{ $groupid }}"
       class="tab-nav-button direction-{{ $direction }} {{ cond (eq $idx 0) "active" ""}}"
       onclick="switchTab('{{ $groupid }}','{{ .name }}')"
-      ><span>{{ .name }}</span></button>
+    >
+      <span>{{ .name }}</span></button>
   {{- end }}
   </div>
   <div class="tab-content">
     {{- range $idx, $tab := $tabs }}
-    <div data-tab-item="{{ .name }}" data-tab-group="{{ $groupid }}" class="tab-item {{ cond (eq $idx 0) "active" ""}}">
+    <div
+      data-tab-item="{{ .name }}"
+      class="tab-item {{ cond (eq $idx 0) "active" ""}}"
+    >
 {{ .content | safeHTML }}
     </div>
     {{- end }}
diff --git a/static/js/theme.js b/static/js/theme.js
index a2d8c31a3c..aa6c78e84b 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -55,9 +55,15 @@ function adjustContentWidth(){
 }
 
 function switchTab(tabGroup, tabId) {
-    var tabs = jQuery(".tab-panel").has("[data-tab-group='"+tabGroup+"'][data-tab-item='"+tabId+"']");
-    var allTabItems = tabs.find("[data-tab-group='"+tabGroup+"']");
-    var targetTabItems = tabs.find("[data-tab-group='"+tabGroup+"'][data-tab-item='"+tabId+"']");
+    var tabs = Array.from( document.querySelectorAll( '.tab-panel[data-tab-group="'+tabGroup+'"]' ) ).filter( function( e ){
+        return !!e.querySelector( '[data-tab-item="'+tabId+'"]' );
+    });
+    var allTabItems = tabs && tabs.reduce( function( a, e ){
+        return a.concat( Array.from( e.querySelectorAll( '.tab-nav-button, .tab-item' ) ) );
+    }, [] );
+    var targetTabItems = tabs && tabs.reduce( function( a, e ){
+        return a.concat( Array.from( e.querySelectorAll( '[data-tab-item="'+tabId+'"]' ) ) );
+    }, [] );
 
     // if event is undefined then switchTab was called from restoreTabSelection
     // so it's not a button event and we don't need to safe the selction or
@@ -69,8 +75,8 @@ function switchTab(tabGroup, tabId) {
       var yposButton = event.target.getBoundingClientRect().top;
     }
 
-    allTabItems.removeClass("active");
-    targetTabItems.addClass("active");
+    allTabItems && allTabItems.forEach( function( e ){ e.classList.remove( 'active' ); });
+    targetTabItems && targetTabItems.forEach( function( e ){ e.classList.add( 'active' ); });
 
     if(isButtonEvent){
       // reset screen to the same position relative to clicked button to prevent page jump