Jake Vanderwerf
2025-12-21 3aada9949d51024a92a8b5c6cb70d12f9c3cac16
assets/js/concise/Tabs.js
File was renamed from assets/js/dash/Tabs.js
@@ -63,7 +63,7 @@
            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);
            }
        });
@@ -156,58 +156,55 @@
     * @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