Update tab component

Fixes #311
statikbe · Apr 18, 2024 · 9baf2b3 · 9baf2b3
1 parent 6d33c7a
commit 9baf2b3
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/tailoff/js/components/tabs.component.ts b/tailoff/js/components/tabs.component.ts
@@ -22,6 +22,7 @@ class Tabs {
   private buttons: Array<HTMLButtonElement> = new Array<HTMLButtonElement>();
   private panels: Array<HTMLElement> = new Array<HTMLElement>();
   private activeButton: HTMLButtonElement;
+  private updateHash: boolean = false;
 
   private keys = {
     up: 38,
@@ -33,10 +34,7 @@ class Tabs {
   constructor(tabsEl: HTMLUListElement, tabIndex) {
     this.tabsEl = tabsEl;
     this.tabsEl.classList.add('js-tabs-initialized');
-    const listItems = this.tabsEl.querySelectorAll('li');
-    Array.from(listItems).forEach((li) => {
-      li.setAttribute('role', 'presentation');
-    });
+    this.updateHash = this.tabsEl.hasAttribute('data-update-hash');
 
     const buttons = this.tabsEl.querySelectorAll('button');
     Array.from(buttons).forEach((button, index) => {
@@ -70,10 +68,10 @@ class Tabs {
         this.activeButton = button;
       }
     });
-    
+
     let urlTab = window.location.hash;
     if (urlTab) {
-      urlTab = urlTab.substr(1, urlTab.length-1);
+      urlTab = urlTab.substr(1, urlTab.length - 1);
       const activeButton = document.querySelector(`button[role=tab][data-panel=${urlTab}]`) as HTMLButtonElement;
       if (activeButton) {
         this.activateTab(activeButton);
@@ -105,6 +103,9 @@ class Tabs {
     const panelId = button.getAttribute('data-panel');
     const panel = document.querySelector(`#${panelId}`);
     panel.classList.remove('hidden');
+    if (this.updateHash) {
+      window.location.hash = panelId;
+    }
   }
 
   private goToPrevTab() {