dialog-lite
Version:
DialogLite is designed to control a dialog box (modal window) on a web page, providing the functionality to open, close and apply custom styles through a simple interface.
2 lines (1 loc) • 2.7 kB
JavaScript
"use strict";var n=Object.defineProperty;var d=(s,t,l)=>t in s?n(s,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):s[t]=l;var i=(s,t,l)=>d(s,typeof t!="symbol"?t+"":t,l);module.exports=class{constructor({closingButton:s=!1,closingBackdrop:t=!1}={}){i(this,"dialogEl",null);i(this,"dialogCloseEl",null);i(this,"dialogBackdropEl",null);i(this,"mainContentEl",null);i(this,"currentClass","");i(this,"previouslyFocusedElement",null);i(this,"lastActionTime",0);i(this,"isOpen",!1);i(this,"isCloseButtonEnabled");i(this,"isCloseOnBackdropClickEnabled");this.isCloseButtonEnabled=s,this.isCloseOnBackdropClickEnabled=t,this.getElements()}getElements(){if(this.dialogEl=document.querySelector(".dialog-lite"),this.mainContentEl=document.getElementById("main-content"),!this.dialogEl)throw new Error("Dialog element not found");this.dialogCloseEl=this.dialogEl.querySelector(".dialog-lite-close-button"),this.dialogBackdropEl=this.dialogEl.querySelector(".dialog-lite__backdrop")}init(){this.isCloseButtonEnabled&&this.dialogCloseEl&&this.dialogCloseEl.addEventListener("click",()=>this.close()),this.isCloseOnBackdropClickEnabled&&this.dialogBackdropEl&&this.dialogBackdropEl.addEventListener("click",()=>this.close()),document.addEventListener("keydown",s=>{s.key==="Escape"&&this.isOpen&&this.close()})}open({stylingClass:s=""}={}){this.isDebounced()||this.dialogEl&&(this.dialogEl.style.display==="none"&&(this.dialogEl.style.display="",this.dialogEl.offsetWidth),this.isOpen=!0,this.mainContentEl&&this.mainContentEl.setAttribute("aria-hidden","true"),this.dialogEl.setAttribute("aria-hidden","false"),this.previouslyFocusedElement=document.activeElement,this.updateClassList({addClass:"dialog-lite--in",removeClass:"dialog-lite--out",newClass:s}))}close(){this.isDebounced()||this.dialogEl&&(this.isOpen=!1,this.mainContentEl&&this.mainContentEl.setAttribute("aria-hidden","false"),this.dialogEl.setAttribute("aria-hidden","true"),this.previouslyFocusedElement&&this.previouslyFocusedElement.focus(),this.updateClassList({addClass:"dialog-lite--out",removeClass:"dialog-lite--in",newClass:"",delayRemove:!0}),setTimeout(()=>{this.dialogEl&&(this.dialogEl.style.display="none")},500))}updateClassList({addClass:s,removeClass:t,newClass:l,delayRemove:o=!1}){if(this.dialogEl){if(this.currentClass)if(o){const a=this.currentClass;setTimeout(()=>{var e;(e=this.dialogEl)==null||e.classList.remove(a),this.currentClass=""},500)}else this.dialogEl.classList.remove(this.currentClass);this.dialogEl.classList.remove(t),this.dialogEl.classList.add(s),l&&(this.dialogEl.classList.add(l),this.currentClass=l)}}isDebounced(){const s=Date.now();return s-this.lastActionTime<500||(this.lastActionTime=s,!1)}};