assets/js/tabbar.js: allow tab to be selected on load

Author: classabbyamp

assets/js/tabbar.js

@@ -5,20 +5,25 @@ window.addEventListener("DOMContentLoaded", () => {
 
 function setupTabBar(el, contentEl) {
   let selectedIdx = 0;
-  selectTabItem(el, contentEl, selectedIdx);
+  let anchor = window.location.hash.substring(1);
+  var tabs = {};
   for (let idx = 0; idx < el.children.length; idx++) {
+    tabs[el.children[idx].innerText] = idx;
     el.children[idx].addEventListener("click", (e) => {
       e.preventDefault();
-      selectTabItem(el, contentEl, idx);
+      selectTabItem(el, contentEl, idx, false);
     });
   }
+  if (anchor in tabs) selectedIdx = tabs[anchor];
+  selectTabItem(el, contentEl, selectedIdx, true);
 }
 
-function selectTabItem(tabBar, content, selectedIdx) {
+function selectTabItem(tabBar, content, selectedIdx, init) {
   for (let idx = 0; idx < tabBar.children.length; idx++) {
     tabBar.children[idx].classList.remove("active");
     content.children[idx].classList.add("hidden");
   }
   tabBar.children[selectedIdx].classList.add("active");
   content.children[selectedIdx].classList.remove("hidden");
+  if (!init) history.replaceState({}, '', '#' + tabBar.children[selectedIdx].innerText);
 }