diff --git a/tailoff/js/components/tabs.component.ts b/tailoff/js/components/tabs.component.ts index 8ca2466f..1b8f4275 100644 --- a/tailoff/js/components/tabs.component.ts +++ b/tailoff/js/components/tabs.component.ts @@ -22,6 +22,7 @@ class Tabs { private buttons: Array = new Array(); private panels: Array = new Array(); 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() {