joomla-ui-custom-elements
Version:
Joomla UI components as custom elements
2 lines (1 loc) • 1.76 kB
JavaScript
class t extends HTMLElement{static get observedAttributes(){return["type","label","tip","text","position"]}get type(){return this.getAttribute("type")}set type(t){this.setAttribute("type",t)}get label(){return this.getAttribute("label")}set label(t){this.setAttribute("label",t)}get tip(){return this.getAttribute("tip")}set tip(t){this.setAttribute("tip",t)}get position(){return this.getAttribute("position")}set position(t){this.setAttribute("position",t)}get text(){return this.getAttribute("text")}set text(t){this.getAttribute("text",t)}connectedCallback(){(!this.position||this.position&&-1===["top","bottom","left","right"].indexOf(this.position))&&(this.position="top"),this.btnElement=document.createElement("button"),this.spanElement=document.createElement("span"),this.btnElement.setAttribute("aria-label",this.label?this.label:"more info"),this.btnElement.innerHTML=this.text?this.text:"",this.spanElement.setAttribute("role","status"),this.btnElement.addEventListener("click",this.showTip.bind(this)),this.append(this.btnElement),this.append(this.spanElement)}disconnectedCallback(){this.querySelector("button").removeEventListener("click",this.showTip,!0)}showTip(){const t=this;document.addEventListener("click",(e=>{this.btnElement!==e.target&&(this.spanElement.innerHTML="",t.removeEventListener("keydown",this))})),document.addEventListener("keydown",(e=>{9===(e.keyCode||e.which)&&(this.spanElement.innerHTML="",t.removeEventListener("keydown",this))})),this.spanElement.innerHTML=`<span class="toggletip-bubble ${this.position}">${this.tip}</span>`}dispatchCustomEvent(t){const e=new CustomEvent(t,{bubbles:!0,cancelable:!0});e.relatedTarget=this,this.dispatchEvent(e),this.removeEventListener(t,this)}}customElements.define("joomla-tip",t);