@flexilla/alpine-dismissible
Version:
AlpineJS plugin for creating collapsible components
2 lines (1 loc) • 3.23 kB
JavaScript
(()=>{var f=Object.defineProperty,E=(i,s,e)=>s in i?f(i,s,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[s]=e,n=(i,s,e)=>E(i,typeof s!="symbol"?s+"":s,e),w=(i,s=document.body)=>s.querySelector(i),h=(i,s=document.body)=>Array.from(s.querySelectorAll(i)),v=({element:i,callback:s,type:e,keysCheck:t})=>{let m=getComputedStyle(i),l=m.transition;if(l!=="none"&&l!==""&&!t.includes(l)){let a="transitionend",o=()=>{i.removeEventListener(a,o),s()};i.addEventListener(a,o,{once:!0})}else s()},c=({element:i,callback:s})=>{v({element:i,callback:s,type:"transition",keysCheck:["all 0s ease 0s","all"]})},r=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(s,e,t){return this.initGlobalRegistry(),window.$flexillaInstances[s]||(window.$flexillaInstances[s]=[]),this.getInstance(s,e)||(window.$flexillaInstances[s].push({element:e,instance:t}),t)}static getInstance(s,e){var t,m;return this.initGlobalRegistry(),(m=(t=window.$flexillaInstances[s])==null?void 0:t.find(l=>l.element===e))==null?void 0:m.instance}static removeInstance(s,e){this.initGlobalRegistry(),window.$flexillaInstances[s]&&(window.$flexillaInstances[s]=window.$flexillaInstances[s].filter(t=>t.element!==e))}},d=class{constructor(s,e,t){n(this,"dismissibleElement"),n(this,"dismissButtons"),n(this,"action"),n(this,"onDismiss"),n(this,"hideFromScreen",()=>{var a;this.dismissibleElement.style.display="none",(a=this.onDismiss)==null||a.call(this)}),n(this,"removeFromDom",()=>{var a,o;(a=this.onDismiss)==null||a.call(this),(o=this.dismissibleElement.parentElement)==null||o.removeChild(this.dismissibleElement)}),n(this,"dismiss",()=>{switch(this.action){case"hide-from-screen":this.dismissibleElement.setAttribute("aria-hidden","true"),this.dismissibleElement.setAttribute("data-state","hidden"),c({element:this.dismissibleElement,callback:this.hideFromScreen});break;default:this.dismissibleElement.setAttribute("data-hidden",""),this.dismissibleElement.setAttribute("aria-hidden","true"),this.dismissibleElement.setAttribute("data-state","removed"),c({element:this.dismissibleElement,callback:this.removeFromDom});break}});let m=typeof s=="string"?w(s,document.body):s;if(!(m instanceof HTMLElement))throw new Error("Provided Element not a valid HTMLElement");this.dismissibleElement=m,this.action=e||this.dismissibleElement.dataset.action||"hide-from-screen",this.dismissButtons=h("[data-dismiss-btn]",this.dismissibleElement),this.onDismiss=t,this.dismissibleElement.setAttribute("aria-hidden","false");let l=r.getInstance("dismissible",this.dismissibleElement);if(l)return l;this.setupDismissible(),r.register("dismissible",this.dismissibleElement,this)}setupDismissible(){for(let s of this.dismissButtons)s.addEventListener("click",this.dismiss)}cleanup(){for(let s of this.dismissButtons)s.removeEventListener("click",this.dismiss);r.removeInstance("dismissible",this.dismissibleElement)}};n(d,"autoInit",(i="[data-fx-dismissible]")=>{let s=h(i);for(let e of s)new d(e)}),n(d,"init",(i,s,e)=>new d(i,s,e));var b=d;function y(i){i.directive("dismissible",(s,{},{cleanup:e})=>{let t=new b(s);e(()=>{t.cleanup()})})}var u=y;document.addEventListener("alpine:init",()=>{u(window.Alpine)});})();