@miyagi/core
Version:
miyagi is a component development tool for JavaScript template engines.
2 lines (1 loc) • 5.78 kB
JavaScript
customElements.define("accordion-tabs",class extends HTMLElement{#e;#t;#s;#i;#n;static get observedAttributes(){return["breakpoint","current"]}constructor(){super()}connectedCallback(){if(!this.closest("code")){if(this.content=[],this.hasAttribute("breakpoint")){const e=this.getAttribute("breakpoint"),t=parseInt(e,10);let s;s=e.endsWith("rem")?t*parseInt(window.getComputedStyle(document.documentElement).fontSize,10):e.endsWith("em")?t*parseInt(window.getComputedStyle(this).fontSize,10):t,this.#t=s}window.requestAnimationFrame(()=>{this.details=Array.from(this.children),this.details.forEach((e,t)=>{const s=e.querySelector("summary");e.open&&(this.index=t),this.content.push({title:s.textContent,content:[...s.parentElement.children].filter(e=>1===e.nodeType&&e!==s)})});let e=!1;this.#i=new ResizeObserver(t=>{if(e)for(const e of t)this.#r(e.borderBoxSize[0].inlineSize);e=!0}),this.#r(this.clientWidth,()=>{this.#i.observe(this)})})}}attributeChangedCallback(e,t,s){"current"===e&&(this.index=parseInt(s,10),this.#r(this.clientWidth))}disconnectedCallback(){this.#i&&this.#i.disconnect()}async#r(e,t){!this.#t||e<this.#t?(await this.#o(),this.#s="accordion"):(await this.#a(),this.#s="tabs"),t&&t()}#o(){return this.#e||(this.#e=new e(this)),"tabs"===this.#s?(this.#c(),this.#e.setElements(),this.#e.elements.forEach(e=>this.appendChild(e))):this.#e.render(),!0}async#a(){this.#c(),this.#n?(this.#n.index="number"==typeof this.index?this.index:0,this.#n.setElements()):this.#n=new t(this);const[e,s]=this.#n.elements;return this.appendChild(e),s.forEach(e=>{this.appendChild(e)}),await this.#n.render(!1)}#c(){Array.from(this.children).forEach(e=>this.removeChild(e))}});class e{constructor(e){this.AccordionTabs=e,this.elements=this.AccordionTabs.details,this.elements.forEach((e,t)=>{e.querySelector("summary").addEventListener("click",({target:e})=>{requestAnimationFrame(()=>{this.#d(e.closest("details"),t)})})}),this.render()}setElements(){this.elements.forEach((e,t)=>{this.AccordionTabs.content[t].content.forEach(t=>e.appendChild(t)),e.open=t===this.AccordionTabs.index})}render(){this.elements.forEach((e,t)=>{e.open=t===this.AccordionTabs.index})}#d(e,t){e.open?(this.elements.forEach(t=>{e!==t&&(t.open=!1)}),this.AccordionTabs.index=t):this.AccordionTabs.index=null}}class t{#h;#l=[];#b=[];#u;constructor(e){this.#h=e,this.elements=this.getElements(),this.index="number"==typeof this.#h.index?this.#h.index:0,this.#u=new s(this)}getElements(){const e=document.createElement("ol"),t=[];return this.#h.content.forEach(({title:s,content:i},n)=>{const r=document.createElement("button"),o=document.createElement("li"),a=document.createElement("div"),c=crypto.randomUUID(),d=`tab-${c}`,h=`panel-${c}`;e.setAttribute("role","tablist"),o.setAttribute("role","presentation"),r.textContent=s,r.type="button",r.id=d,r.setAttribute("aria-selected",n===this.index?"true":"false"),r.setAttribute("tabindex",n===this.index?0:-1),r.setAttribute("aria-controls",h),r.setAttribute("role","tab"),this.#l.push(r),o.appendChild(r),e.appendChild(o),i.forEach(e=>{a.appendChild(e)}),a.id=h,a.hidden=this.index!==n,a.setAttribute("role","tabpanel"),a.setAttribute("tabindex","0"),a.setAttribute("aria-labelledby",d),t.push(a),this.#b.push(a)}),[e,t]}setElements(){this.elements[1].forEach((e,t)=>{this.#h.content[t].content.forEach(t=>e.appendChild(t))})}setActiveTab(e){this.#h.index=this.index=e,this.render()}async render(e=!0){return this.elements[1].forEach((e,t)=>{e.hidden=t!==this.index}),await this.#u.render(e)}}class s{#m;#p;constructor(e){this.#m=e,this.#p=Array.from(this.#m.elements[0].querySelectorAll("button")),this.#p.forEach(e=>{e.addEventListener("click",this.#T.bind(this)),e.addEventListener("keydown",this.#A.bind(this))})}#T({currentTarget:e}){this.#m.setActiveTab(this.#p.indexOf(e))}#A(e){const{dir:t}=e.target.closest("[dir]")||document.documentElement;let s=!1;switch(e.key){case"ArrowLeft":"rtl"===t?this.#f():this.#w(),s=!0;break;case"ArrowRight":"rtl"===t?this.#w():this.#f(),s=!0;break;case"Home":this.#m.setActiveTab(0),s=!0;break;case"End":this.#m.setActiveTab(this.#p.length-1),s=!0}s&&(e.stopPropagation(),e.preventDefault())}#f(){this.#m.setActiveTab(this.#m.index===this.#p.length-1?0:this.#m.index+1)}#w(){this.#m.setActiveTab(0===this.#m.index?this.#p.length-1:this.#m.index-1)}render(e=!0){return this.#p.forEach((t,s)=>{s===this.#m.index?(t.setAttribute("aria-selected","true"),t.removeAttribute("tabindex"),e&&t.focus()):(t.setAttribute("aria-selected","false"),t.setAttribute("tabindex",-1))}),new Promise(e=>setTimeout(e,1e3))}}new WebSocket(`ws://${document.location.host}`).onmessage=async e=>{"reloadParent"===e.data?parent.window.location.reload():window.location.reload()};function i(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}window.location.pathname.startsWith("/component?")&&window.location.href.indexOf("&embedded=true")>=0&&window.self===window.top&&(window.location=new URL(window.location).replace("&embedded=true","")),document.addEventListener("DOMContentLoaded",function(){const e=Array.from(document.querySelectorAll(".Component-file")),t=document.querySelector(".Styleguide");e.length>0&&import("./_iframe-links-DdifIr4P.js").then(t=>{t.default(e)}).catch(e=>console.error(e)),document.querySelector(".Code")&&import("./_prism-By3NMwUd.js"),t&&import("./index-BKDKaBC6.js").then(e=>new e.default(t)).catch(e=>console.error(e)),document.querySelector(".js-openMockData")&&import("./_mock-data-Dypo4Bl_.js")}),document.addEventListener("keyup",e=>{const{path:t,originalTarget:s,target:n,key:r}=e,o=t?t[0]:s||n;((e,t)=>!i(e.tagName)&&"f"===t)(o,r)?parent.window.dispatchEvent(new CustomEvent("searchTriggered")):((e,t)=>!i(e.tagName)&&"g"===t)(o,r)&&parent.window.dispatchEvent(new CustomEvent("gotoTriggered"))});