Skip to content

Commit

Permalink
Fix: Tabpane shows multiple tabs at the same time google#1271
Browse files Browse the repository at this point in the history
  • Loading branch information
deining authored and geriom committed Oct 21, 2022
1 parent abb7307 commit cfa70e3
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 30 deletions.
24 changes: 13 additions & 11 deletions assets/scss/shortcodes/tabbed-pane.scss
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
}
}
}
56 changes: 37 additions & 19 deletions layouts/shortcodes/tabpane.html
Original file line number Diff line number Diff line change
@@ -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 */ -}}
Expand All @@ -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 -}}
Expand All @@ -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 -}}
Expand All @@ -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>
Expand All @@ -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 */ -}}
Expand Down

0 comments on commit cfa70e3

Please sign in to comment.