UNPKG

@flexilla/dismissible

Version:

A lightweight JavaScript component that automatically makes a component dismissible for easy user interaction.

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