susmodal/src/susmodal.min.js

Simple library for displaying modals

class SUSModal{constructor(t={}){if(t=Object.assign({},{id:null,animation:"fade",animationDuration:400,width:"400px",height:"auto",backgroundDark:!1,finalPosition:"auto"},t),this.id=t.id,this.animation=t.animation,this.animationDuration=t.animationDuration,this.width=t.width,this.height=t.height,this.finalPosition=t.finalPosition,this.backgroundDark=t.backgroundDark,this.SUSModal=document.getElementById(this.id),this.SUSModalContent=this.SUSModal.querySelector("#susmodal-content"),this.SUSModalShow=!1,this.focusElementsType="button, input, a, textarea",this.focusElements=Array.from(this.SUSModalContent.querySelectorAll(this.focusElementsType)),this.stylize(),this.SUSModal.querySelectorAll(".susmodal-close-btn").length>0){Array.from(this.SUSModal.querySelectorAll(".susmodal-close-btn")).forEach(t=>{t.addEventListener("click",()=>{this.hide()})})}}show(){this.SUSModal.style.display="block",this.focusElements[0].focus(),this.SUSModal.removeAttribute("aria-hidden"),this.SUSModal.setAttribute("aria-modal","true"),this.SUSModalContent.classList.contains("susmodal-content-reverse")&&(this.SUSModalContent.classList.remove("susmodal-content-reverse"),this.backgroundDark&&document.body.classList.remove("susmodal-body-animation-reverse")),this.SUSModalContent.classList.add("susmodal-animation-"+this.animation),this.backgroundDark&&document.body.classList.add("susmodal-body-animation"),window.onkeydown=(t=>{this.keydownEvent(t)}),window.onclick=(t=>{t.target===this.SUSModal&&this.hide()})}hide(){event.preventDefault(),this.SUSModal.setAttribute("aria-hidden","true"),this.SUSModal.removeAttribute("aria-modal"),this.SUSModalContent.classList.remove("susmodal-content-animation"),this.SUSModalContent.classList.add("susmodal-content-reverse"),this.backgroundDark&&document.body.classList.add("susmodal-body-animation-reverse"),setTimeout(()=>{this.SUSModal.style.display="none"},this.animationDuration),window.onkeydown=void 0,window.onclick=void 0}catchFocus(t){t.preventDefault();let i=this.focusElements.findIndex(t=>t===this.SUSModalContent.querySelector(":focus"));!0===t.shiftKey?indexsusmodal--:i++,i>=this.focusElements.length&&(i=0),i<0&&(i=this.focusElements.length-1),this.focusElements[i].focus()}keydownEvent(t){(this.SUSModal&&"Escape"===t.key||"Esc"===t.key)&&this.hide(),this.SUSModal&&"Tab"===t.key&&this.catchFocus(t)}stylize(){let t="margin:"+this.finalPosition+";";this.width&&(t+="width:"+this.width+";"),this.height&&(t+="height:"+this.height+";"),this.animationDuration&&(t+="animation-duration:"+this.animationDuration+"ms;"),this.SUSModalContent.style.cssText=t,this.backgroundDark&&(document.body.style.cssText="animation-duration:"+this.animationDuration+"ms;")}}