[Summary view] [Print] [Text view]

   1  class t extends HTMLElement{}customElements.define("joomla-tab-element",t);class e extends HTMLElement{static get observedAttributes(){return["recall","orientation","view","breakpoint"]}get recall(){return this.getAttribute("recall")}set recall(t){this.setAttribute("recall",t)}get view(){return this.getAttribute("view")}set view(t){this.setAttribute("view",t)}get orientation(){return this.getAttribute("orientation")}set orientation(t){this.setAttribute("orientation",t)}get breakpoint(){return parseInt(this.getAttribute("breakpoint"),10)}set breakpoint(t){this.setAttribute("breakpoint",t)}constructor(){super(),this.tabs=[],this.tabsElements=[],this.previousActive=null,this.onMutation=this.onMutation.bind(this),this.keyBehaviour=this.keyBehaviour.bind(this),this.activateTab=this.activateTab.bind(this),this.deactivateTabs=this.deactivateTabs.bind(this),this.checkView=this.checkView.bind(this),this.observer=new MutationObserver(this.onMutation),this.observer.observe(this,{attributes:!1,childList:!0,subtree:!0})}connectedCallback(){if((!this.orientation||this.orientation&&!["horizontal","vertical"].includes(this.orientation))&&(this.orientation="horizontal"),(!this.view||this.view&&!["tabs","accordion"].includes(this.view))&&(this.view="tabs"),this.tabsElements=[].slice.call(this.children).filter((t=>"joomla-tab-element"===t.tagName.toLowerCase())),this.tabsElements.length){if(this.isNested=this.parentNode.closest("joomla-tab")instanceof HTMLElement,this.hydrate(),this.hasAttribute("recall")&&!this.isNested&&this.activateFromState(),window.location.hash){const t=window.location.hash.substr(1),e=this.tabs.filter((e=>e.tab.id===t));e.length&&this.activateTab(e[0].tab,!1)}this.tabs.filter((t=>t.tab.hasAttribute("active"))).length||this.activateTab(this.tabs[0].tab,!1),this.addEventListener("keyup",this.keyBehaviour),this.breakpoint&&(this.checkView(),window.addEventListener("resize",(()=>{this.checkView()})))}}disconnectedCallback(){this.tabs.map((t=>(t.tabButton.removeEventListener("click",this.activateTab),t.accordionButton.removeEventListener("click",this.activateTab),t))),this.removeEventListener("keyup",this.keyBehaviour)}attributeChangedCallback(t,e,i){switch(t){case"view":(!i||i&&!["tabs","accordion"].includes(i))&&(this.view="tabs"),"tabs"===i&&i!==e?(this.tabButtonContainer&&this.tabButtonContainer.removeAttribute("hidden"),this.tabs.map((t=>t.accordionButton.setAttribute("hidden","")))):"accordion"===i&&i!==e&&(this.tabButtonContainer&&this.tabButtonContainer.setAttribute("hidden",""),this.tabs.map((t=>t.accordionButton.removeAttribute("hidden"))))}}hydrate(){this.tabButtonContainer=document.createElement("div"),this.tabButtonContainer.setAttribute("role","tablist"),this.insertAdjacentElement("afterbegin",this.tabButtonContainer),"accordion"===this.view&&this.tabButtonContainer.setAttribute("hidden",""),this.tabsElements.map((t=>{const e=document.createElement("button");e.setAttribute("aria-expanded",!!t.hasAttribute("active")),e.setAttribute("aria-controls",t.id),e.setAttribute("type","button"),e.innerHTML=`<span class="accordion-title">$t.getAttribute("name")}<span class="accordion-icon"></span></span>`,t.insertAdjacentElement("beforebegin",e),"tabs"===this.view&&e.setAttribute("hidden",""),e.addEventListener("click",this.activateTab);const i=document.createElement("button");return i.setAttribute("aria-expanded",!!t.hasAttribute("active")),i.setAttribute("aria-controls",t.id),i.setAttribute("role","tab"),i.setAttribute("type","button"),i.innerHTML=`$t.getAttribute("name")}`,this.tabButtonContainer.appendChild(i),i.addEventListener("click",this.activateTab),"tabs"===this.view?t.setAttribute("role","tabpanel"):t.setAttribute("role","region"),this.tabs.push({tab:t,tabButton:i,accordionButton:e}),t}))}onMutation(t){for(const e of t)"childList"===e.type&&(e.addedNodes.length&&[].slice.call(e.addedNodes).map((t=>this.createNavs(t))),e.removedNodes.length&&[].slice.call(e.addedNodes).map((t=>this.removeNavs(t))))}keyBehaviour(t){if(![...this.tabs.map((t=>t.tabButton)),...this.tabs.map((t=>t.accordionButton))].includes(document.activeElement)||t.metaKey||t.altKey)return;let e,i;if("tabs"===this.view){const t=this.tabs.findIndex((t=>t.tab.hasAttribute("active")));e=t-1>=0?this.tabs[t-1]:this.tabs[this.tabs.length-1],i=t+1<=this.tabs.length-1?this.tabs[t+1]:this.tabs[0]}else{const t=this.tabs.map((t=>t.accordionButton)).findIndex((t=>t===document.activeElement));e=t-1>=0?this.tabs[t-1]:this.tabs[this.tabs.length-1],i=t+1<=this.tabs.length-1?this.tabs[t+1]:this.tabs[0]}switch(t.keyCode){case 37:case 38:"tabs"===this.view?(e.tabButton.click(),e.tabButton.focus()):e.accordionButton.focus(),t.preventDefault();break;case 39:case 40:"tabs"===this.view?(i.tabButton.click(),i.tabButton.focus()):i.accordionButton.focus(),t.preventDefault()}}deactivateTabs(){this.tabs.map((t=>(t.accordionButton.removeAttribute("aria-disabled"),t.tabButton.removeAttribute("aria-expanded"),t.accordionButton.setAttribute("aria-expanded",!1),t.tab.hasAttribute("active")&&(this.dispatchCustomEvent("joomla.tab.hide","tabs"===this.view?t.tabButton:t.accordionButton,this.previousActive),t.tab.removeAttribute("active"),t.tab.setAttribute("tabindex","-1"),this.dispatchCustomEvent("joomla.tab.hidden","tabs"===this.view?t.tabButton:t.accordionButton,this.previousActive),this.previousActive="tabs"===this.view?t.tabButton:t.accordionButton),t)))}activateTab(t,e=!0){let i;if(t.currentTarget?i=this.tabs.find((e=>("tabs"===this.view?e.tabButton:e.accordionButton)===t.currentTarget)):t instanceof HTMLElement?i=this.tabs.find((e=>e.tab===t)):Number.isInteger(t)&&(i=this.tabs[t]),i){if("accordion"===this.view&&this.tabs.find((t=>"true"===t.accordionButton.getAttribute("aria-expanded")))===i)return i.tab.hasAttribute("active")?void i.tab.removeAttribute("active"):void i.tab.setAttribute("active","");this.deactivateTabs(),i.tabButton.setAttribute("aria-expanded",!0),i.accordionButton.setAttribute("aria-expanded",!0),i.accordionButton.setAttribute("aria-disabled",!0),i.tab.setAttribute("active",""),i.tabButton.removeAttribute("tabindex"),this.dispatchCustomEvent("joomla.tab.show","tabs"===this.view?i.tabButton:i.accordionButton,this.previousActive),e&&("tabs"===this.view?i.tabButton.focus():i.accordionButton.focus()),e&&this.saveState(i.tab.id),this.dispatchCustomEvent("joomla.tab.shown","tabs"===this.view?i.tabButton:i.accordionButton,this.previousActive)}}createNavs(t){if(t instanceof Element&&"joomla-tab-element"!==t.tagName.toLowerCase()||![].some.call(this.children,(e=>e===t)).length||!t.getAttribute("name")||!t.getAttribute("id"))return;const e=[].slice.call(this.children).filter((t=>"joomla-tab-element"===t.tagName.toLowerCase())),i=e.findIndex((e=>e===t)),a=document.createElement("button");a.setAttribute("aria-expanded",!!t.hasAttribute("active")),a.setAttribute("aria-controls",t.id),a.setAttribute("type","button"),a.innerHTML=`<span class="accordion-title">$t.getAttribute("name")}<span class="accordion-icon"></span></span>`,t.insertAdjacentElement("beforebegin",a),"tabs"===this.view&&a.setAttribute("hidden",""),a.addEventListener("click",this.activateTab);const s=document.createElement("button");s.setAttribute("aria-expanded",!!t.hasAttribute("active")),s.setAttribute("aria-controls",t.id),s.setAttribute("role","tab"),s.setAttribute("type","button"),s.innerHTML=`$t.getAttribute("name")}`,e.length-1===i?(this.tabButtonContainer.appendChild(s),this.tabs.push({tab:t,tabButton:s,accordionButton:a})):0===i?(this.tabButtonContainer.insertAdjacentElement("afterbegin",s),this.tabs.slice(0,0,{tab:t,tabButton:s,accordionButton:a})):(this.tabs[i-1].tabButton.insertAdjacentElement("afterend",s),this.tabs.slice(i-1,0,{tab:t,tabButton:s,accordionButton:a})),s.addEventListener("click",this.activateTab)}removeNavs(t){if(t instanceof Element&&"joomla-tab-element"!==t.tagName.toLowerCase()||![].some.call(this.children,(e=>e===t)).length||!t.getAttribute("name")||!t.getAttribute("id"))return;const e=t.previousSilbingElement;e&&"button"===e.tagName.toLowerCase()&&(e.removeEventListener("click",this.keyBehaviour),e.parentNode.removeChild(e));const i=this.tabButtonContainer.querySelector(`[aria-controls=$e.id}]`);i&&(i.removeEventListener("click",this.keyBehaviour),i.parentNode.removeChild(i));const a=this.tabs.findIndex((e=>e.tabs===t));a-1==0?this.tabs.shift():a-1===this.tabs.length?this.tabs.pop():this.tabs.splice(a-1,1)}checkView(){if(this.breakpoint)if(document.body.getBoundingClientRect().width>this.breakpoint){if("tabs"===this.view)return;this.tabButtonContainer.removeAttribute("hidden"),this.tabs.map((t=>(t.accordionButton.setAttribute("hidden",""),t.accordionButton.setAttribute("role","tabpanel"),"true"===t.accordionButton.getAttribute("aria-expanded")&&t.tab.setAttribute("active",""),t))),this.setAttribute("view","tabs")}else{if("accordion"===this.view)return;this.tabButtonContainer.setAttribute("hidden",""),this.tabs.map((t=>(t.accordionButton.removeAttribute("hidden"),t.accordionButton.setAttribute("role","region"),t))),this.setAttribute("view","accordion")}}getStorageKey(){return window.location.href.toString().split(window.location.host)[1].replace(/&return=[a-zA-Z0-9%]+/,"").split("#")[0]}saveState(t){const e=this.getStorageKey();sessionStorage.setItem(e,t)}activateFromState(){this.hasNested=this.querySelector("joomla-tab")instanceof HTMLElement;const t=sessionStorage.getItem(this.getStorageKey());if(t){const e=this.tabs.findIndex((e=>e.tab.id===t));if(e>=0)this.activateTab(e,!1);else if(this.hasNested){if(this.querySelector("joomla-tab")){const e=[].slice.call(this.querySelectorAll("joomla-tab-element")).reverse().filter((e=>e.id===t));if(e.length){let i=e[0].closest("joomla-tab");for([].slice.call(i.querySelectorAll("joomla-tab-element")).forEach((e=>{e.removeAttribute("active"),e.id===t&&e.setAttribute("active","")}));i.parentNode.closest("joomla-tab")!==this;){const t=i.closest("joomla-tab"),e=i.parentNode.closest("joomla-tab-element");[].slice.call(t.querySelectorAll("joomla-tab-element")).forEach((t=>{t.removeAttribute("active"),e===t&&(t.setAttribute("active",""),i=e)}))}[].slice.call(this.children).filter((t=>"joomla-tab-element"===t.tagName.toLowerCase())).forEach((t=>{t.removeAttribute("active");t.querySelector("joomla-tab-element[active]")&&this.activateTab(t,!1)}))}}}}}dispatchCustomEvent(t,e,i){const a=new CustomEvent(t,{bubbles:!0,cancelable:!0});a.relatedTarget=i,e.dispatchEvent(a)}}customElements.define("joomla-tab",e);