| File was renamed from assets/js/dash/Tabs.js |
| | |
| | | |
| | | if(hasChildren && hasChildren.querySelector('.tabs')){ |
| | | let container = this.container.querySelector(`.tab-content[data-tab="${tab.dataset['tab']}"]`); |
| | | let tabs = new window.jvbTabs(container, {}, this); |
| | | let tabs = new window.jvbTabs(container, {updateURL: false}, this); |
| | | this.childTabs.set(tab.dataset.tab, tabs); |
| | | } |
| | | }); |
| | |
| | | * @param {string} tab - Tab to switch to ('items' or 'lists') |
| | | * @param {boolean} updateHistory - Whether to push the state to the url |
| | | */ |
| | | switchTab(tab, updateHistory = false) { |
| | | |
| | | switchTab(tab, updateHistory = false) { |
| | | document.activeElement?.blur(); |
| | | // if (typeof this.callbacks['onSwitch'] === 'function') { |
| | | // this.callbacks.onSwitch(tab) |
| | | // } |
| | | // Update tab buttons |
| | | this.tabs.querySelectorAll('[data-tab]').forEach(tabBtn => { |
| | | tabBtn.classList.toggle('active', tabBtn.dataset.tab === tab); |
| | | tabBtn.setAttribute('aria-selected', tabBtn.dataset.tab === tab); |
| | | }); |
| | | |
| | | // Update tab panels |
| | | this.container.querySelectorAll('.tab-content').forEach(content => { |
| | | content.classList.toggle('active', content.dataset.tab === tab); |
| | | content.setAttribute('aria-hidden', content.dataset.tab !== tab); |
| | | // Update tab buttons |
| | | this.tabs.querySelectorAll('[data-tab]').forEach(tabBtn => { |
| | | tabBtn.classList.toggle('active', tabBtn.dataset.tab === tab); |
| | | tabBtn.setAttribute('aria-selected', tabBtn.dataset.tab === tab); |
| | | }); |
| | | |
| | | // Update tab panels |
| | | this.container.querySelectorAll('.tab-content').forEach(content => { |
| | | content.classList.toggle('active', content.dataset.tab === tab); |
| | | content.setAttribute('aria-hidden', content.dataset.tab !== tab); |
| | | content.hidden = content.dataset.tab !== tab; |
| | | }); |
| | | }); |
| | | |
| | | // Update state |
| | | this.activeTab = tab; |
| | | if (this.callbacks[tab]) { |
| | | this.callbacks[tab](); |
| | | } |
| | | // Update state |
| | | this.activeTab = tab; |
| | | if (this.callbacks[tab]) { |
| | | this.callbacks[tab](); |
| | | } |
| | | |
| | | // Update URL hash with full path (only from root container) |
| | | if (updateHistory) { |
| | | if (!this.parent) { |
| | | // This is a root container, build full path including child tabs |
| | | let fullPath = tab; |
| | | // Activate first child tab if this tab has children |
| | | const childContainer = this.childTabs.get(tab); |
| | | if (childContainer) { |
| | | const firstTab = childContainer.container.querySelector('button.tab')?.dataset.tab; |
| | | if (firstTab) { |
| | | childContainer.switchTab(firstTab, false); |
| | | } |
| | | } |
| | | |
| | | // Add active child tab paths if they exist |
| | | const childContainer = this.childTabs.get(tab); |
| | | if (childContainer && childContainer.activeTab) { |
| | | fullPath = childContainer.getFullTabPath(childContainer.activeTab); |
| | | } |
| | | // Update URL hash with full path (only from root container) |
| | | if (updateHistory) { |
| | | if (!this.parent) { |
| | | window.history.pushState({ tab: tab }, '', `#${tab}`); |
| | | } else { |
| | | // This is a child container, notify parent to update URL |
| | | this.parent.updateUrlFromChild(); |
| | | } |
| | | } |
| | | |
| | | window.history.pushState({ tab: fullPath }, '', `#${fullPath}`); |
| | | } else { |
| | | // This is a child container, notify parent to update URL |
| | | this.parent.updateUrlFromChild(); |
| | | } |
| | | } |
| | | // Update select dropdown if it exists |
| | | if (this.selectDropdown && this.selectDropdown.querySelector(`option[value="${tab}"]`)) { |
| | | this.selectDropdown.value = tab; |
| | | } |
| | | |
| | | // Update select dropdown if it exists |
| | | if (this.selectDropdown && this.selectDropdown.querySelector(`option[value="${tab}"]`)) { |
| | | this.selectDropdown.value = tab; |
| | | } |
| | | |
| | | // Announce to screen readers |
| | | this.a11y.announce(`Switched to ${tab} tab`); |
| | | } |
| | | // Announce to screen readers |
| | | this.a11y.announce(`Switched to ${tab} tab`); |
| | | } |
| | | |
| | | /** |
| | | * Update URL when a child tab changes |