Shortcodes for tabbed panes: improvements (allow textual content)

assets/scss/main.scss

@@ -28,6 +28,7 @@
 @import "pageinfo";
 @import "taxonomy";
 @import "drawio";
+@import "shortcodes";
 
 @if $td-enable-google-fonts {
     @import url($web-font-path);

assets/scss/shortcodes.scss

@@ -0,0 +1,2 @@
+@import "shortcodes/tabbed-pane.scss";
+@import "shortcodes/cards-pane.scss";

assets/scss/shortcodes/cards-pane.scss

@@ -0,0 +1,19 @@
+.card-deck {
+	max-width: 83%;
+}
+.card {
+	max-width: 80%;
+	.highlight {
+		border: none;
+	}
+}
+.card-body.code {
+	background-color: #f8f9fa;
+	padding: 0 0 0 1ex;
+}
+.card-body {
+	pre {
+		margin: 0;
+		padding: 0 1rem 1rem 1rem;
+	}
+}

assets/scss/shortcodes/tabbed-pane.scss

@@ -0,0 +1,39 @@
+.td-content {
+  .highlight {
+    margin: 0rem 0 2rem 0;
+  }
+}
+.tab-content {
+  .tab-pane {
+    .highlight {
+      border: none;
+      max-width: 100%;
+    }
+    pre {
+      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);
+    }
+    margin: 0rem;
+    max-width: 80%;
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+  }
+}
+
+.tab-body {
+  font-weight: $font-weight-medium;
+  background: $gray-100;
+  color: inherit;
+  border-radius: 0;
+  padding: 1.5rem;
+
+  @each $color, $value in $theme-colors {
+      &-#{$color} {
+
+          border-style: solid;
+          border-color: $value;
+      }
+  }
+}

layouts/shortcodes/tab.html

@@ -1,28 +1,39 @@
 <!-- Make sure that we are enclosed within a tabpane shortcode block -->
 {{ with $.Parent }}
-{{- if ne $.Parent.Name "tabpane" -}}
-{{- errorf "tab must be used within a tabpane block" -}}
-{{- end -}}
+  {{- if ne $.Parent.Name "tabpane" -}}
+    {{- errorf "shortcode 'tab' must be used within a 'tabpane' block" -}}
+  {{- end -}}
 {{- end -}}
 
-<!-- Prefill header if not given as parameter -->
-{{ $header := default (printf "Tab %v" ( add $.Ordinal 1)) (.Get "header") }}
+{{ $header := "Tab" }}
+{{ if and (not .IsNamedParams) (.Get 0) }}
+  {{ $header = (.Get 0) }}
+{{ else }}
+  <!-- Prefill header if not given as named or unnamed parameter -->
+  {{ $header = default (printf "Tab %v" ( add $.Ordinal 1)) (.Get "header") }}
+{{ end }}
 
 <!-- store all tab info in dict tab -->
 {{ $tab := dict "header" $header }}
 {{ with $.Get "lang" }}
-{{ $tab = merge $tab (dict "language" ($.Get "lang")) }}
+  {{ $tab = merge $tab (dict "language" ($.Get "lang")) }}
 {{ end }}
 {{ with $.Get "highlight" }}
-{{ $tab = merge $tab (dict "highlight" ($.Get "highlight")) }}
+  {{ $tab = merge $tab (dict "highlight" ($.Get "highlight")) }}
+{{ end }}
+{{ with $.Get "code" }}
+  {{ $tab = merge $tab (dict "code" ($.Get "code")) }}
+{{ end }}
+{{ with $.Get "disabled" }}
+  {{ $tab = merge $tab (dict "disabled" ($.Get "disabled")) }}
 {{ end }}
 {{ with $.Inner }}
-<!-- Trim any leading and trailing newlines from .Inner, this avoids
-     spurious lines during syntax highlighting -->
-{{ $tab = merge $tab (dict "content" (trim $.Inner "\n")) }}
+  <!-- Trim any leading and trailing newlines from .Inner, this avoids
+       spurious lines during syntax highlighting -->
+  {{ $tab = merge $tab (dict "content" $.Inner ) }}
 {{ end }}
 
 <!-- add dict tab to parent's scratchpad -->
 {{ with .Parent }}
-{{- $.Parent.Scratch.SetInMap "tabs" (printf "%v" $.Ordinal) $tab -}}
+  {{- $.Parent.Scratch.SetInMap "tabs" (printf "%v" $.Ordinal) $tab -}}
 {{ end }}

layouts/shortcodes/tabpane.html

@@ -1,46 +1,123 @@
-<!-- Scratchpad gets populated through call to .Inner -->  
+<!-- Check parameter types -->
+{{ with .Get "langEqualsHeader"  }}
+{{ if ne ( printf "%T" . ) "bool" }}
+{{- errorf "shortcode tabpane: parameter 'langEqualsHeader' must be either true or false" -}}
+{{ end }}
+{{ end }}
+
+{{ with .Get "code"  }}
+{{ if ne ( printf "%T" . ) "bool" }}
+{{- errorf "shortcode tabpane: parameter 'code' 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 }}
+{{ end }}
+
+<!-- Set values given defined within tabpane -->
+{{- $langPane := default "" ($.Get "lang") -}}
+{{- $hloptionsPane := default "" ($.Get "highlight") -}}
+{{- $codePane := default true ($.Get "code") -}}
+{{- $langEqualsHeader := default false ($.Get "langEqualsHeader") -}}
+{{- $persistLang := default true ($.Get "persistLang") -}}
+{{- $disabled := false -}}
+{{- $activeSet := false -}}
+
+<!-- Scratchpad gets populated through call to .Inner -->
 {{- .Inner -}}
 
 <ul class="nav nav-tabs" id="tabs-{{- $.Ordinal -}}" role="tablist">
   {{- range $index, $element := $.Scratch.Get "tabs" -}}
+
+    {{- $lang := $langPane -}}
+    {{- if $langEqualsHeader -}}
+      {{- $lang = $element.header -}}
+    {{end}}
+    {{- with $element.language -}}
+      {{- $lang = $element.language -}}
+    {{- end -}}
+
+    {{- $disabled := false -}}
+    {{- with $element.disabled -}}
+      {{ if ne ( printf "%T" . ) "bool" }}
+        {{- errorf "shortcode tab: parameter 'disabled' must be either true or false" -}}
+      {{ end }}
+      {{- $disabled = . }}
+    {{- end -}}
+
+    <!-- Replace space and +, not valid for css selectors -->
+    {{- $lang := replaceRE "[\\s+]" "-" $lang -}}
+
     <li class="nav-item">
       <!-- Generate the IDs for the <a> and the <div> elements -->
       {{- $tabid := printf "tabs-%v-%v-tab" $.Ordinal $index | anchorize -}}
       {{- $entryid := printf "tabs-%v-%v" $.Ordinal $index | anchorize -}}
-      <!-- Replace space and + from tabname to set class -->
-      {{- $tabname := replaceRE "(\\s)" "-" $element.header -}}
-      {{- $tabname := replaceRE "(\\+)" "-" $tabname -}}
-      <a class="nav-link{{ if eq $index "0" }} active{{ end }} tab-{{ $tabname }}"
-        id="{{ $tabid }}" data-toggle="tab" href="#{{ $entryid }}" role="tab" onclick="handleClick({{ $tabname }});"
-        aria-controls="{{ $entryid }}" aria-selected="{{- cond (eq $index "0") "true" "false" -}}">
-        {{ index . "header" }}
+
+      <a class="nav-link{{ if and ( not $activeSet ) ( not $disabled ) }} active{{ end }}{{ if eq $disabled true }} disabled{{ end }}{{ if ne $lang "" }}{{ if $persistLang }} persistLang-{{- $lang -}}{{ end }}{{ end }}" 
+          id="{{- $tabid -}}" data-toggle="tab" href="#{{ $entryid }}" role="tab"
+          {{ if ne $lang "" }}{{- if $persistLang -}}onclick="persistLang({{- $lang -}});"{{end}}{{end}}
+        aria-controls="{{- $entryid -}}" aria-selected="{{- cond (eq $index "0") "true" "false" -}}">
+        {{- index . "header" | markdownify -}}
       </a>
     </li>
+
+    {{ if not $disabled }}
+      {{ $activeSet = true }}
+    {{ end }}
+
   {{- end -}}
 </ul>
 
+{{ $activeSet = false }}
+
 <!-- Inner content -->
 <div class="tab-content" id="tabs-{{- $.Ordinal -}}-content">
   {{- range $index, $element := $.Scratch.Get "tabs" -}}
 
-    {{- $lang := default $.Site.Language.Lang ($.Get "lang") -}}
-    {{with $.Get "langEqualsHeader"}}
-        {{ if $.Get "langEqualsHeader"}}
-          {{ $lang = $element.header }}
-        {{end}}
+    {{- $lang := $langPane -}}
+    {{- if $langEqualsHeader -}}
+      {{- $lang = $element.header -}}
     {{end}}
-    {{- $hloptions := default "" ($.Get "highlight") -}}
     {{- with $element.language -}}
-      {{  $lang = $element.language }}
+      {{- $lang = $element.language -}}
     {{- end -}}
+
+    {{- $disabled := false -}}
+    {{- with $element.disabled -}}
+      {{- $disabled = . }}
+    {{- end -}}
+
+    {{- $hloptions := $hloptionsPane -}}
     {{- with $element.highlight -}}
-      {{  $hloptions = $element.highlight }}
+      {{- $hloptions = $element.highlight -}}
     {{- end -}}
+
+    {{- $code := $codePane -}}
+    {{- with $element.code -}}
+      {{ if ne ( printf "%T" . ) "bool" }}
+        {{- errorf "shortcode tab: parameter 'code' must be either true or false" -}}
+      {{ end }}
+      {{- $code = . }}
+    {{- end -}}
+
     {{- $tabid := printf "tabs-%v-%v-tab" $.Ordinal $index | anchorize -}}
     {{- $entryid := printf "tabs-%v-%v" $.Ordinal $index | anchorize -}}
-    <div class="tab-pane fade{{ if eq $index "0" }} show active{{ end }}"
+
+    <div class="{{ if not $code }}tab-body {{end}}tab-pane fade{{ if and ( not $activeSet ) ( not $disabled ) }} show active{{ end }}"
         id="{{ $entryid }}" role="tabpanel" aria-labelled-by="{{ $tabid }}">
-      {{- highlight (index . "content") $lang $hloptions -}}
+        {{ if $code }}
+          {{- highlight (trim (index . "content") "\n") $lang $hloptions -}}
+        {{- else -}}
+            {{- index . "content" -}}
+        {{- end -}}
     </div>
+
+    {{ if not $disabled }}
+      {{ $activeSet = true }}
+    {{ end }}
+
   {{ end }}
 </div>

package.json

@@ -17,6 +17,6 @@
     "bootstrap": "^4.6.1"
   },
   "devDependencies": {
-    "hugo-extended": "0.98.0"
+    "hugo-extended": "0.99.1"
   }
 }

static/js/tabpane-persist.js

@@ -2,16 +2,16 @@ if (typeof Storage !== 'undefined') {
     const activeLanguage = localStorage.getItem('active_language');
     if (activeLanguage) {
         document
-            .querySelectorAll('.tab-' + activeLanguage)
+            .querySelectorAll('.persistLang-' + activeLanguage)
             .forEach((element) => {
               $('#' + element.id).tab('show');
             });
     }
 }
-function handleClick(language) {
+function persistLang(language) {
     if (typeof Storage !== 'undefined') {
         localStorage.setItem('active_language', language);
-        document.querySelectorAll('.tab-' + language)
+        document.querySelectorAll('.persistLang-' + language)
           .forEach((element) => {
             $('#' + element.id).tab('show');
         });