| | |
|---|
| | | window.jvbTabs=class{constructor(t,a={},e=null){this.tabs=t.querySelector(".tabs"),this.a11y=window.jvbA11y,this.updateURL=!0,this.parent=e,this.childTabs=new Map,"updateURL"in a&&!1===a.updateURL&&(this.updateURL=!1),this.callbacks=a,this.activeTab=this.updateURL?this.getInitialTabFromHash():t.querySelector("button.tab.active")?.dataset.tab,this.container=t,this.tabs&&this.tabs.addEventListener("click",(t=>{const a=t.target.closest("[data-tab]");if(a){let t=!("updateURL"in this.callbacks)||this.callbacks.updateURL;this.switchTab(a.dataset.tab,t)}})),this.initializeChildTabs(),this.selectDropdown=document.querySelector("select.tab-list"),this.selectDropdown&&this.selectDropdown.addEventListener("change",(t=>{let a=!("updateURL"in this.callbacks)||this.callbacks.updateURL;this.switchTab(t.target.value,a)}));let s=!("updateURL"in this.callbacks)||this.callbacks.updateURL;this.activeTab||(this.activeTab=document.querySelector("button.tab")?.dataset.tab),this.switchTab(this.activeTab,s)}initializeChildTabs(){this.tabs.querySelectorAll("button").forEach((t=>{let a=this.container.querySelector(`.tab-content[data-tab="${t.dataset.tab}"]`);if(a&&a.querySelector(".tabs")){let a=this.container.querySelector(`.tab-content[data-tab="${t.dataset.tab}"]`),e=new window.jvbTabs(a,{},this);this.childTabs.set(t.dataset.tab,e)}}))}getInitialTabFromHash(){if(!window.location.hash)return!1;const t=window.location.hash.substring(1).split("/");if(this.parent){if(this.parent&&t.length>1){const a=this.getParentDepth();if(a<t.length){const e=t[a];if(this.tabs.querySelector(`[data-tab="${e}"]`))return e}}}else{const a=t[0];if(this.tabs.querySelector(`[data-tab="${a}"]`))return a}return null}getParentDepth(){let t=0,a=this.parent;for(;a;)t++,a=a.parent;return t}getFullTabPath(t){return this.parent?`${this.parent.getFullTabPath(this.parent.activeTab)}/${t}`:t}switchTab(t,a=!1){if(document.activeElement?.blur(),this.tabs.querySelectorAll("[data-tab]").forEach((a=>{a.classList.toggle("active",a.dataset.tab===t),a.setAttribute("aria-selected",a.dataset.tab===t)})),this.container.querySelectorAll(".tab-content").forEach((a=>{a.classList.toggle("active",a.dataset.tab===t),a.setAttribute("aria-hidden",a.dataset.tab!==t),a.hidden=a.dataset.tab!==t})),this.activeTab=t,this.callbacks[t]&&this.callbacks[t](),a)if(this.parent)this.parent.updateUrlFromChild();else{let a=t;const e=this.childTabs.get(t);e&&e.activeTab&&(a=e.getFullTabPath(e.activeTab)),window.history.pushState({tab:a},"",`#${a}`)}this.selectDropdown&&this.selectDropdown.querySelector(`option[value="${t}"]`)&&(this.selectDropdown.value=t),this.a11y.announce(`Switched to ${t} tab`)}updateUrlFromChild(){if(console.log("Updating URL"),!("updateURL"in this.callbacks)||this.callbacks.updateURL)if(this.parent)this.parent.updateUrlFromChild();else{const t=this.getFullTabPath(this.activeTab);window.history.pushState({tab:t},"",`#${t}`)}}}; |
|---|
| | | (()=>{class t{constructor(){this.a11y=window.jvbA11y,this.error=window.jvbError,this.subscribers=new Set,this.tabs=new Map,this.hasHash=!1,this.init()}init(){this.initElements(),this.initListeners()}initElements(){this.selectors={nav:".tabs",tab:"[data-tab]",active:"button.tab.active",section:".tab-content",button:"button.tab",select:"select.tab-list"}}initListeners(){this.clickHandler=this.handleClick.bind(this),this.changeHandler=this.handleChange.bind(this)}handleClick(t){let e=this.getConfig(t.target);if(!e)return;const s=t.target.closest(this.selectors.tab);s&&this.switchTab(s.dataset.tab,e)}handleChange(t){let e=this.getConfig(t.target);e&&e&&this.switchTab(t.target.value,e)}registerTab(t,e={}){if(!t)return!1;let s=window.uiFromSelectors(this.selectors,t);if(!s.nav||!s.section)return console.error("No tab navigation or section found"),!1;let i=window.generateID("tab");t.dataset.tabsId=i,s.buttons=Array.from(t.querySelectorAll(this.selectors.button)),s.sections=Array.from(t.querySelectorAll(this.selectors.section)),s.sections.forEach(t=>{t.querySelector(".tabs")&&(e.hasChildren=!0,this.registerTab(t,{parent:i}))}),s.select&&(s.options=Array.from(s.select.querySelectorAll("option")));let a={id:i,ui:s,updateURL:e.updateURL??!0};return s.nav.addEventListener("click",this.clickHandler),s.select?.addEventListener("change",this.changeHandler),this.tabs.set(i,a),this.determineActiveTab(a),a}determineActiveTab(t){if(this.getInitialTabFromHash()){let e=this.tabs.get(t.id);if(e.activeTab&&t.activeTab&&e.activeTab===t.activeTab)return}let e=t.ui.buttons[0].dataset.tab??!1;e&&this.switchTab(e,t)}getInitialTabFromHash(){if(this.hasHash||!window.location.search)return!1;const t=new URLSearchParams(window.location.search).get("tab");if(!t)return!1;return t.split("|").forEach(t=>{const e=Array.from(this.tabs.values()).find(e=>e.ui.buttons.some(e=>e.dataset.tab===t));e&&this.switchTab(t,e)}),this.hasHash=!0,!0}removeTab(t){if(!t||!t.dataset.tabsId)return;let e=this.tabs.get(t.dataset.tabsId);e&&(e.ui.nav.removeEventListener("click",this.clickHandler),e.ui.select?.removeEventListener("change",this.changeHandler),this.tabs.delete(t.dataset.tabsId))}switchTab(t,e){if(!(e="string"==typeof e?this.tabs.get(e):e))return;let s=e.ui.sections.filter(t=>t.classList.contains("active"));Object.hasOwn(e,"preCheck")&&!e.preCheck(s[0],e)||(document.activeElement&&this.isInTabs(document.activeElement,e)&&document.activeElement.blur(),e.ui.buttons.forEach((s,i)=>{s.classList.remove("active","previous","next");let a=s.dataset.tab===t;if(s.setAttribute("aria-selected",a),a){s.classList.add("active");let t=Math.max(i-1,0),a=Math.min(i+1,e.ui.buttons.length-1);t!==i&&e.ui.buttons[t]?.classList.add("previous"),a!==i&&e.ui.buttons[a]?.classList.add("next")}}),e.ui.sections.forEach((e,s)=>{let i=e.dataset.tab===t;e.classList.toggle("active",i),e.setAttribute("aria-hidden",!i),e.hidden=!i}),this.notify("tab-switched",{previous:e.activeTab,current:t,config:e}),e.activeTab=t,this.tabs.set(e.id,e),e?.hasChildren&&this.updateChildTabs(e.id),e?.updateURL&&this.updateURL(e),e.ui.select&&this.maybeUpdateSelect(t,e),this.a11y.announce(`Switched to ${t} tab`))}updateChildTabs(t){Array.from(this.tabs.values()).filter(e=>e.parent===t).forEach(t=>{let e=t.ui.buttons[0].dataset.tab??!1;e&&this.switchTab(e,t)})}updateURL(t){if(!t.updateURL)return;let e=this.checkAncestorsHash(t);e&&window.history.pushState({tab:t.activeTab},"",`?tab=${e}`)}checkAncestorsHash(t){const e=[];let s=t;for(;s;)e.unshift(s.activeTab),s=s.parent?this.tabs.get(s.parent):null;return e.join("|")}maybeUpdateSelect(t,e){e.ui.select&&Object.hasOwn(e,"options")&&e.options.forEach(s=>{s.value!==t||(e.ui.select.value=t)})}subscribe(t){return this.subscribers.add(t),()=>this.subscribers.delete(t)}notify(t,e){this.subscribers.forEach(s=>s(t,e))}getConfig(t){const e=t.closest("[data-tabs-id]");if(!e)return!1;const s=this.tabs.get(e.dataset.tabsId);return s||!1}isInTabs(t,e){return e.ui.sections.some(e=>e.contains(t))}destroy(){this.subscribers.clear(),Array.from(this.tabs.values()).forEach(t=>{t.ui.nav.removeEventListener("click",this.clickHandler),t.ui.select?.removeEventListener("change",this.changeHandler)})}}document.addEventListener("DOMContentLoaded",function(){window.jvbTabs=new t})})(); |
|---|
