joomla-ui-custom-elements
Version:
Joomla UI components as custom elements
2 lines (1 loc) • 1.52 kB
JavaScript
customElements.define("joomla-collapse",class extends HTMLElement{static get observedAttributes(){return["state"]}get state(){return this.getAttribute("state")}set state(t){this.setAttribute("state",t)}connectedCallback(){const t=this;if(!this.id)return;[].slice.call(document.querySelectorAll(`[href="#${this.id}"],[data-target="#${this.id}"]`)).forEach((e=>{!t.state||t.state&&"closed"===t.state?(t.state="closed",e.setAttribute("aria-expanded","false"),e.setAttribute("aria-controls",t.id)):(e.setAttribute("aria-expanded","true"),e.setAttribute("aria-controls",t.id)),e.addEventListener("click",(t=>{let e="";t.target.hasAttribute("data-target")||(e=t.target.getAttribute("href").replace("#","")),t.target.hasAttribute("href")||(e=t.target.getAttribute("data-target").replace("#","")),t.preventDefault(),t.stopPropagation(),document.getElementById(e).toggle()}))}))}disconnectedCallback(){let t=document.querySelector(`[href="#${this.id}"]`);t||(t=document.querySelector(`[data-target="#${this.id}"]`)),t&&t.removeEventListener("click",this)}attributeChangedCallback(t,e,a){const r=document.querySelector(`[href="#${this.id}"]`);if("state"===t)"closed"===a?r.setAttribute("aria-expanded","false"):"open"===a&&r.setAttribute("aria-expanded","true")}toggle(){let t=document.querySelector(`[href="#${this.id}"]`);t||(t=document.querySelector(`[data-target="#${this.id}"]`)),"closed"===this.state?(this.state="open",t.setAttribute("aria-expanded","true")):(this.state="closed",t.setAttribute("aria-expanded","false"))}});