@flexilla/dismissible/dist/index.js

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

import{$ as e,$$ as t,afterTransition as n}from"@flexilla/utilities";import{FlexillaManager as r}from"@flexilla/manager";var i=class i{dismissibleElement;dismissButtons;restoreButtons;action;onDismiss;onRestore;parentElement;previousSibling;originalDisplay;constructor(n,i,a,o){let s=typeof n==`string`?e(n,document.body):n;if(!(s instanceof HTMLElement))throw Error(`Provided Element not a valid HTMLElement`);this.dismissibleElement=s,this.action=i||this.dismissibleElement.dataset.action||`hide-from-screen`,this.dismissButtons=t(`[data-dismiss-btn]`,this.dismissibleElement),this.restoreButtons=t(`[data-restore-btn]`,document.body),this.onDismiss=a,this.onRestore=o,this.parentElement=this.dismissibleElement.parentElement,this.previousSibling=this.dismissibleElement.previousSibling,this.originalDisplay=this.dismissibleElement.style.display||getComputedStyle(this.dismissibleElement).display,this.dismissibleElement.setAttribute(`aria-hidden`,`false`);let c=r.getInstance(`dismissible`,this.dismissibleElement);if(c)return c;this.setupDismissible(),r.register(`dismissible`,this.dismissibleElement,this)}hideFromScreen=()=>{this.dismissibleElement.style.display=`none`,this.onDismiss?.()};removeFromDom=()=>{this.onDismiss?.(),this.dismissibleElement.parentElement?.removeChild(this.dismissibleElement)};showOnScreen=()=>{this.dismissibleElement.style.display=this.originalDisplay,this.dismissibleElement.setAttribute(`aria-hidden`,`false`),this.dismissibleElement.setAttribute(`data-state`,`visible`),this.onRestore?.()};restoreToDom=()=>{this.parentElement&&(this.previousSibling&&this.previousSibling.nextSibling?this.parentElement.insertBefore(this.dismissibleElement,this.previousSibling.nextSibling):this.parentElement.appendChild(this.dismissibleElement),this.dismissibleElement.setAttribute(`aria-hidden`,`false`),this.dismissibleElement.removeAttribute(`data-hidden`),this.dismissibleElement.setAttribute(`data-state`,`visible`),this.onRestore?.())};dismiss=()=>{switch(this.action){case`hide-from-screen`:this.dismissibleElement.setAttribute(`aria-hidden`,`true`),this.dismissibleElement.setAttribute(`data-state`,`hidden`),n({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`),n({element:this.dismissibleElement,callback:this.removeFromDom});break}};restore=()=>{switch(this.action){case`hide-from-screen`:n({element:this.dismissibleElement,callback:this.showOnScreen});break;default:n({element:this.dismissibleElement,callback:this.restoreToDom});break}};setupDismissible(){for(let e of this.dismissButtons)e.addEventListener(`click`,this.dismiss);for(let e of this.restoreButtons)e.addEventListener(`click`,this.restore)}cleanup(){for(let e of this.dismissButtons)e.removeEventListener(`click`,this.dismiss);for(let e of this.restoreButtons)e.removeEventListener(`click`,this.restore);r.removeInstance(`dismissible`,this.dismissibleElement)}static autoInit=(e=`[data-fx-dismissible]`)=>{let n=t(e);for(let e of n)new i(e)};static init=(e,t,n,r)=>new i(e,t,n,r)};export{i as Dismissible};