UNPKG

@flexilla/dismissible

Version:

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

1 lines 3.37 kB
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@flexilla/utilities`),t=require(`@flexilla/manager`);var n=class n{dismissibleElement;dismissButtons;restoreButtons;action;onDismiss;onRestore;parentElement;previousSibling;originalDisplay;constructor(n,r,i,a){let o=typeof n==`string`?(0,e.$)(n,document.body):n;if(!(o instanceof HTMLElement))throw Error(`Provided Element not a valid HTMLElement`);this.dismissibleElement=o,this.action=r||this.dismissibleElement.dataset.action||`hide-from-screen`,this.dismissButtons=(0,e.$$)(`[data-dismiss-btn]`,this.dismissibleElement),this.restoreButtons=(0,e.$$)(`[data-restore-btn]`,document.body),this.onDismiss=i,this.onRestore=a,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 s=t.FlexillaManager.getInstance(`dismissible`,this.dismissibleElement);if(s)return s;this.setupDismissible(),t.FlexillaManager.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`),(0,e.afterTransition)({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`),(0,e.afterTransition)({element:this.dismissibleElement,callback:this.removeFromDom});break}};restore=()=>{switch(this.action){case`hide-from-screen`:(0,e.afterTransition)({element:this.dismissibleElement,callback:this.showOnScreen});break;default:(0,e.afterTransition)({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);t.FlexillaManager.removeInstance(`dismissible`,this.dismissibleElement)}static autoInit=(t=`[data-fx-dismissible]`)=>{let r=(0,e.$$)(t);for(let e of r)new n(e)};static init=(e,t,r,i)=>new n(e,t,r,i)};exports.Dismissible=n;