automatically set the height of the tabs across the languages

Author: titusfortner

website_and_docs/layouts/shortcodes/tabpane.html

@@ -30,7 +30,7 @@
 <!-- Scratchpad gets populated through call to .Inner -->
 {{- .Inner -}}
 
-<ul class="nav nav-tabs" id="tabs-{{- $.Ordinal -}}" role="tablist">
+<ul class="nav nav-tabs{{ if $persistLang }} persist{{ end }}" id="tabs-{{- $.Ordinal -}}" role="tablist">
   {{- range $index, $element := $.Scratch.Get "tabs" -}}
 
     {{- $lang := $langPane -}}
@@ -75,7 +75,7 @@
 {{ $activeSet = false }}
 
 <!-- Inner content -->
-<div class="tab-content" id="tabs-{{- $.Ordinal -}}-content">
+<div class="tab-content{{ if $persistLang }} persist{{ end }}" id="tabs-{{- $.Ordinal -}}-content">
   {{- range $index, $element := $.Scratch.Get "tabs" -}}
 
     {{- $lang := $langPane -}}

website_and_docs/static/js/tabpane-persist.js

@@ -10,11 +10,35 @@ if (typeof Storage !== 'undefined') {
         activeLanguage = params.language;
         localStorage.setItem('active_language', activeLanguage);
     }
-    if (activeLanguage) {
+    var tabContents = document.querySelectorAll('.tab-content.persist');
+    if (activeLanguage && tabContents.length > 1) {
+        const persistTab = document.querySelector('ul.persist').querySelectorAll('.nav-link');
+        var heightMap = {};
+
+        // select each persist tab and store calculated heights
+        persistTab.forEach((langTab) => {
+            langTab.click();
+            tabContents.forEach((tabContent) => {
+                heightMap[tabContent.id] ||= [];
+                heightMap[tabContent.id].push(tabContent.clientHeight);
+            })
+            // everything ends up active unless classes removed
+            document.querySelectorAll('.active.show').forEach((activeTab) => {
+                activeTab.classList.remove('active');
+                activeTab.classList.remove('show');
+            })
+        })
+        // need to make something active/shown again
+        persistTab[0].click();
+
+        tabContents.forEach((tabContent) => {
+                tabContent.style.height = Math.max.apply( Math, heightMap[tabContent.id]).toString() + 'px';
+        })
+
         document
             .querySelectorAll('.persistLang-' + activeLanguage)
             .forEach((element) => {
-              $('#' + element.id).tab('show');
+              element.click();
             });
     }
 }