Fix: Tabpane shows multiple tabs at the same time google#1271

ouhft · Oct 21, 2022 · cfa70e3 · cfa70e3
1 parent abb7307
commit cfa70e3
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 30 deletions.
diff --git a/assets/scss/shortcodes/tabbed-pane.scss b/assets/scss/shortcodes/tabbed-pane.scss
@@ -1,22 +1,25 @@
 .tab-content {
-  .highlight {
-    margin: 0rem 0 2rem 0;
+  .tab-pane {
+    pre {
+      margin: 0rem 0 0rem 0;
+    }
   }
 }
+
 .tab-content {
   .tab-pane {
     .highlight {
-    margin: 0rem 0 0rem 0;
-    border: none;
-    max-width: 100%;
+      margin: 0rem 0 0rem 0;
+      border: none;
+      max-width: 100%;
     }
     margin-top: 0rem;
     margin-bottom: 1.5rem;
     max-width: 80%;
     border-left: 1px solid rgba(0, 0, 0, 0.125);
     border-right: 1px solid rgba(0, 0, 0, 0.125);
     border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-    }
+  }
 }
 
 .tab-body {
@@ -27,10 +30,9 @@
   padding: 1.5rem;
 
   @each $color, $value in $theme-colors {
-      &-#{$color} {
-
-          border-style: solid;
-          border-color: $value;
-      }
+    &-#{$color} {
+      border-style: solid;
+      border-color: $value;
+    }
   }
 }
diff --git a/layouts/shortcodes/tabpane.html b/layouts/shortcodes/tabpane.html
@@ -1,26 +1,26 @@
 {{/* Check parameter types */ -}}
 {{ with .Get "langEqualsHeader" -}}
-{{ if ne ( printf "%T" . ) "bool" -}}
-{{ errorf "shortcode tabpane: parameter 'langEqualsHeader' must be either true or false" -}}
-{{ end -}}
+  {{ if ne ( printf "%T" . ) "bool" -}}
+    {{ errorf "shortcode tabpane: parameter 'langEqualsHeader' must be either true or false" -}}
+  {{ end -}}
 {{ end -}}
 
 {{ with .Get "text" -}}
-{{ if ne ( printf "%T" . ) "bool" -}}
-{{ errorf "shortcode tabpane: parameter 'text' must be either true or false" -}}
-{{ end -}}
+  {{ if ne ( printf "%T" . ) "bool" -}}
+    {{ errorf "shortcode tabpane: parameter 'text' must be either true or false" -}}
+  {{ end -}}
 {{ end -}}
 
 {{ with .Get "persistLang" -}}
-{{ if ne ( printf "%T" . ) "bool" -}}
-{{ errorf "shortcode tabpane: parameter 'persistLang' must be either true or false" -}}
-{{ end -}}
+  {{ if ne ( printf "%T" . ) "bool" -}}
+    {{ errorf "shortcode tabpane: parameter 'persistLang' must be either true or false" -}}
+  {{ end -}}
 {{ end -}}
 
 {{ with .Get "right" -}}
-{{ if ne ( printf "%T" . ) "bool" -}}
-{{ errorf "shortcode tabpane: parameter 'right' must be either true or false" -}}
-{{ end -}}
+  {{ if ne ( printf "%T" . ) "bool" -}}
+    {{ errorf "shortcode tabpane: parameter 'right' must be either true or false" -}}
+  {{ end -}}
 {{ end -}}
 
 {{/* Set values given defined within tabpane */ -}}
@@ -30,15 +30,22 @@
 {{ $langEqualsHeader := default false ($.Get "langEqualsHeader") -}}
 {{ $persistLang := default true ($.Get "persistLang") -}}
 {{ $rightPane := default false ($.Get "right") -}}
-{{ $disabled := false -}}
-{{ $rightpush := false -}}
 {{ $activeSet := false -}}
 {{- /* Scratchpad gets populated through call to .Inner */ -}}
 {{- .Inner -}}
 
+{{ $langs := slice -}}
+{{ $duplicate := false -}}
+{{ $duplicateLang := "" -}}
+
 <ul class="nav nav-tabs{{ if $rightPane }} justify-content-end{{ end }}" id="tabs-{{- $.Ordinal -}}" role="tablist">
   {{ range $index, $element := $.Scratch.Get "tabs" -}}
 
+    {{ $disabled := false -}}
+    {{ with $element.disabled -}}
+      {{ $disabled = . -}}
+    {{ end -}}
+
     {{ $lang := $langPane -}}
     {{ if $langEqualsHeader -}}
       {{ $lang = $element.header -}}
@@ -47,9 +54,15 @@
       {{ $lang = $element.language -}}
     {{ end -}}
 
-    {{ $disabled := false -}}
-    {{ with $element.disabled -}}
-      {{ $disabled = . -}}
+    {{/* Check for duplicate languages */ -}}
+    {{ if and $persistLang (not $duplicate) -}}
+      {{ if and (not $disabled) (ne $lang "") -}}
+        {{ $langs = $langs | append $lang -}}
+      {{ end -}}
+      {{ if ne $langs (uniq $langs) -}}
+        {{ $duplicate = true -}}
+        {{ $duplicateLang = $lang -}}
+      {{ end -}}
     {{ end -}}
 
     {{ $rightpush := false -}}
@@ -64,9 +77,9 @@
       {{ $tabid := printf "tabs-%02v-%v-tab" $.Ordinal $index | anchorize -}}
       {{ $entryid := printf "tabs-%02v-%v" $.Ordinal $index | anchorize -}}
 
-      <a class="nav-link{{ if and ( not $activeSet ) ( not $disabled ) }} active{{ end }}{{ if $disabled }} disabled{{ end }}{{ if ne $lang "" }}{{ if $persistLang }} persistLang-{{- $lang -}}{{ end }}{{ end }}"
+      <a class="nav-link{{ if and ( not $activeSet ) ( not $disabled ) }} active{{ end }}{{ if $disabled }} disabled{{ end }}{{ if ne $lang "" }}{{ if and $persistLang (not $duplicate) }} persistLang-{{- $lang -}}{{ end }}{{ end }}"
           id="{{ $tabid }}" data-toggle="tab" href="#{{ $entryid }}" role="tab"
-          {{ if ne $lang "" }}{{ if $persistLang }}onclick="persistLang({{ $lang }});"{{ end }}{{ end -}}
+          {{ if ne $lang "" }}{{ if and $persistLang (not $duplicate) }}onclick="persistLang({{ $lang }});"{{ end }}{{ end -}}
           aria-controls="{{- $entryid -}}" aria-selected="{{- and ( not $activeSet ) ( not $disabled ) "true" "false" -}}">
         {{ index . "header" | markdownify }}
       </a>
@@ -79,6 +92,11 @@
   {{- end }}
 </ul>
 
+{{ if $duplicate -}}
+  {{ warnf "Tabpane on page '%s': duplicate language '%s' detected, disabling persistance of language to avoid multiple tab display." .Page.Title $duplicateLang  -}}
+{{ end -}}
+{{ $duplicate = false -}}
+{{ $langs = slice -}}
 {{ $activeSet = false -}}
 
 {{/* Inner content */ -}}