tabpane: use data- attribute instead of class name (#1607)

google · Jul 5, 2023 · 397c5d4 · 397c5d4
1 parent ff188ef
commit 397c5d4
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 26 deletions.
diff --git a/layouts/shortcodes/tabpane.html b/layouts/shortcodes/tabpane.html
@@ -1,4 +1,7 @@
 {{/* Check parameter types */ -}}
+
+{{ $tpPersistAttrName := "data-td-tp-persist" -}}
+
 {{ with .Get "langEqualsHeader" -}}
   {{ if ne ( printf "%T" . )  "bool" -}}
     {{ errorf "Shortcode %q: boolean value expected for parameter %q, but got %s. Error position: %s" $.Name "langEqualsHeader" (printf "%T" .) $.Position  -}}
@@ -81,6 +84,7 @@
     {{ else if eq $persistKeyKind "header" -}}
       {{ $persistKey = $element.header -}}
     {{ end -}}
+    {{ $persistKey = $persistKey | lower -}}
 
     {{/* Check for duplicate tab-persistence keys */ -}}
     {{ if and $persistTab $persistKey -}}
@@ -98,22 +102,18 @@
       {{ $rightpush = . -}}
     {{ end -}}
 
-    {{/* Replace by "-" all chars that are not valid in a CSS class name: */ -}}
-    {{ $persistKey = replaceRE "[^a-zA-Z0-9_-]" "-" $persistKey | lower -}}
     <li class="nav-item{{ if $rightpush }} ms-auto{{ end -}}">
       {{/* Generate the IDs for the <a> and the <div> elements */ -}}
       {{ $tabid := printf "tabs-%02v-%v-tab" $Ordinal $index | anchorize -}}
       {{ $entryid := printf "tabs-%02v-%v" $Ordinal $index | anchorize -}}
 
       <button class="nav-link
         {{- if and ( not $activeSet ) ( not $disabled ) }} active{{ end -}}
-        {{ if $disabled }} disabled{{ end -}}
-        {{ with $persistKey -}}
-          {{ if $persistTab }} persistLang-{{ . }}{{ end -}}
-        {{ end }}"
+        {{ if $disabled }} disabled{{ end -}}"
           id="{{ $tabid }}" data-bs-toggle="tab" data-bs-target="#{{ $entryid }}" role="tab"
-          {{ with $persistKey -}}
-            {{ if $persistTab }}onclick="persistLang({{ . }});" {{ end -}}
+          {{ if and $persistTab $persistKey -}}
+            onclick="tdPersistActiveTab({{ $persistKey }});" {{/* */ -}}
+            {{ printf "%s=%q " $tpPersistAttrName $persistKey | safeHTMLAttr -}}
           {{ end -}}
           aria-controls="{{- $entryid -}}" aria-selected="{{- cond ( and ( not $activeSet ) ( not $disabled ) ) "true" "false" -}}">
         {{ index . "header" | markdownify }}

diff --git a/static/js/tabpane-persist.js b/static/js/tabpane-persist.js
@@ -1,20 +1,30 @@
-if (typeof Storage !== 'undefined') {
-    const activeLanguage = localStorage.getItem('active_language');
-    if (activeLanguage) {
-        document
-            .querySelectorAll('.persistLang-' + activeLanguage)
-            .forEach((element) => {
-                new bootstrap.Tab(element).show();
-            });
-    }
+// Storage key name also used as a data-* attribute suffix:
+const storageKeyName = 'td-tp-persist';
+
+function tdActivateTabsWithKey(key) {
+  if (!key) return;
+  document
+    .querySelectorAll(`[data-${storageKeyName}="${key}"]`)
+    .forEach((element) => {
+      new bootstrap.Tab(element).show();
+    });
 }
-function persistLang(language) {
-    console.log("Klicked persistlang");
-    if (typeof Storage !== 'undefined') {
-        localStorage.setItem('active_language', language);
-        document.querySelectorAll('.persistLang-' + language)
-            .forEach((element) => {
-                new bootstrap.Tab(element).show();
-        });
-    }
+
+function tdPersistActiveTab(activeTabKey) {
+  if (!tdSupportsLocalStorage()) return;
+
+  try {
+    localStorage.setItem(storageKeyName, activeTabKey);
+    tdActivateTabsWithKey(activeTabKey);
+  } catch (error) {
+    console.error(`Unable to save active tab '${activeTabKey}' to localStorage:`, error);
+  }
+}
+
+const tdSupportsLocalStorage = () => typeof Storage !== 'undefined';
+
+// On page load, activate tabs
+if (tdSupportsLocalStorage()) {
+  const activeTabKey = localStorage.getItem(storageKeyName);
+  tdActivateTabsWithKey(activeTabKey);
 }