frontend_block_tabs.js 2.48 KB
var frontend_block_tabs;(()=>{"use strict";var t,e={};(t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})})(e);class a{constructor(t){this.uniqueId=t.getAttribute("data-block-id"),this.parentEl=t,this.getDefaultState(),this.initTabs()}getDefaultState=()=>{this.activeTab=parseInt(this.parentEl.getAttribute("data-initial-tab")||"1",10),this.tabList=this.parentEl.querySelector('[role="tablist"]'),this.tabs=this.parentEl.querySelector(".stk-block-tab-labels__wrapper").children,this.contents=this.parentEl.querySelector(".stk-block-tab-content > .stk-inner-blocks").children};initTabs=()=>{Array.from(this.tabs).forEach(((t,e)=>{t.setAttribute("id",`stk-block-tab-label-${this.uniqueId}-${e+1}`),t.setAttribute("aria-controls",`stk-block-tab-content-${this.uniqueId}-${e+1}`),t.setAttribute("aria-selected",this.activeTab===e+1?"true":"false"),t.setAttribute("tabindex",this.activeTab===e+1?"0":"-1"),this.activeTab===e+1&&t.classList.add("stk-block-tabs__tab--active"),t.addEventListener("click",(()=>{this.changeTab(e+1)}))})),Array.from(this.contents).forEach(((t,e)=>{t.setAttribute("id",`stk-block-tab-content-${this.uniqueId}-${e+1}`),t.setAttribute("aria-labelledby",`stk-block-tab-label-${this.uniqueId}-${e+1}`),t.setAttribute("tabindex","0"),this.activeTab!==e+1?t.setAttribute("hidden","true"):t.removeAttribute("hidden")}));let t=0;this.tabList.addEventListener("keydown",(e=>{e.key.startsWith("Arrow")&&(this.tabs[t].setAttribute("tabindex",-1),"ArrowRight"===e.key||"ArrowDown"===e.key?(t++,t>=this.tabs.length&&(t=0)):"ArrowLeft"!==e.key&&"ArrowUp"!==e.key||(t--,t<0&&(t=this.tabs.length-1)),this.tabs[t].setAttribute("tabindex",0),this.tabs[t].focus(),e.preventDefault())}))};changeTab=t=>{this.activeTab!==t&&(Array.from(this.tabs).forEach(((e,a)=>{e.setAttribute("aria-selected",t===a+1?"true":"false"),e.setAttribute("tabindex",t===a+1?"0":"-1"),t===a+1?e.classList.add("stk-block-tabs__tab--active"):e.classList.remove("stk-block-tabs__tab--active")})),Array.from(this.contents).forEach(((e,a)=>{t!==a+1?e.setAttribute("hidden","true"):e.removeAttribute("hidden")})),this.activeTab=t)}}window.stackableTabs=new class{init=()=>{document.querySelectorAll(".stk-block-tabs").forEach((t=>{new a(t)}))}},t=window.stackableTabs.init,"undefined"!=typeof document&&("complete"!==document.readyState&&"interactive"!==document.readyState?document.addEventListener("DOMContentLoaded",t):t()),frontend_block_tabs=e})();