joomla-ui-custom-elements
Version:
Joomla UI components as custom elements
2 lines (1 loc) • 1.25 kB
JavaScript
class t extends HTMLElement{static get observedAttributes(){return["for"]}get for(){return this.getAttribute("for")}set for(t){this.setAttribute("for",t)}connectedCallback(){this.setAttribute("aria-labelledby",this.for.substring(1));const t=document.querySelector(this.for),e=this.querySelectorAll("a");t.id&&(t.setAttribute("aria-haspopup",!0),t.setAttribute("aria-expanded",!1),t.addEventListener("click",(r=>{this.hasAttribute("expanded")?(this.removeAttribute("expanded"),r.target.setAttribute("aria-expanded",!1)):(this.setAttribute("expanded",""),r.target.setAttribute("aria-expanded",!0)),document.addEventListener("click",(e=>{e.target!==t&&(this.findAncestor(e.target,"joomla-dropdown")||this.close())})),e.forEach((t=>{t.addEventListener("click",(()=>{this.close()}))}))})))}dispatchCustomEvent(t){const e=new CustomEvent(t);e.relatedTarget=this,this.dispatchEvent(e),this.removeEventListener(t,this)}adoptedCallback(t,e){}attributeChangedCallback(t,e,r){}close(){const t=document.querySelector(`#${this.getAttribute("aria-labelledby")}`);this.removeAttribute("expanded"),t.setAttribute("aria-expanded",!1)}findAncestor(t,e){for(;(t=t.parentElement)&&t.nodeName.toLowerCase()!==e;);return t}}customElements.define("joomla-dropdown",t);