wtc-modal-view
Version:
A simple, unopinionated modal class.
3 lines (2 loc) • 4.98 kB
JavaScript
class t{constructor(){this.state=!1,this.modal=document.createElement("div"),this.modalOverlay=document.createElement("div"),this.modalFocusStart=document.createElement("div"),this.modalFocusEnd=document.createElement("div"),this.modalClose=document.createElement("button"),this.modalClose.innerHTML="<span>Close</span>",this.modalWrapper=document.createElement("div"),this.modalContent=document.createElement("div"),this.wrapperOfContent=document.createElement("div"),this.className="modal",this.classNameOpen="modal--open",this.appended=!1,this.storeContent=!1,this.inOutDuration=400,this._onOpen=null,this._onClose=null,this._onCloseStart=null,this._focusOnClose=null,this._content=null,this.modal.classList.add(this.className),this.modalOverlay.classList.add(this.className+"__overlay"),this.modalFocusStart.classList.add(this.className+"__focus-start"),this.modalFocusEnd.classList.add(this.className+"__focus-end"),this.modalClose.classList.add(this.className+"__close"),this.modalWrapper.classList.add(this.className+"__wrapper"),this.modalContent.classList.add(this.className+"__content"),this.wrapperOfContent.classList.add(this.className+"-content-wrapper"),this.modal.setAttribute("role","dialog"),this.modalFocusEnd.setAttribute("tabindex",0),this.modalFocusStart.setAttribute("tabindex",0),this.modalContent.setAttribute("tabindex",-1),this.modalWrapper.appendChild(this.modalFocusStart),this.modalWrapper.appendChild(this.modalClose),this.modalWrapper.appendChild(this.modalContent),this.modalWrapper.appendChild(this.modalFocusEnd),this.modal.appendChild(this.modalOverlay),this.modal.appendChild(this.modalWrapper),document.body.appendChild(this.wrapperOfContent),this.modalFocusEnd.addEventListener("focus",()=>{this.modalClose.focus()}),this.modalFocusStart.addEventListener("focus",this.focusLastElement.bind(this)),this.modalClose.addEventListener("click",this.close.bind(this)),this.modalOverlay.addEventListener("click",this.close.bind(this))}close(){this.state&&(this._onCloseStart?this._onCloseStart(this.modal,()=>{this._completeClose()}):this._completeClose())}_completeClose(){this.state&&(this.modal.classList.remove(this.classNameOpen),this.focusOnClose&&this.focusOnClose.focus(),setTimeout(()=>{this.state=!1,this.modal.style.display="none",this.optionalClass&&("string"==typeof this.optionalClass?this.modal.classList.remove(this.optionalClass):this.optionalClass instanceof Array&&this.modal.classList.remove(...this.optionalClass)),this.storeContent?this.wrapperOfContent.appendChild(this._content):this.modalContent.innerHTML="",this.onClose&&this.onClose()},this.inOutDuration),t.hash&&history.replaceState("",document.title,window.location.pathname))}static get hash(){let t=/#\!?\/(.+)\//i.exec(window.location.hash);return t&&t.length>1?t[1]:null}open(){if(!this.state){this.optionalClass&&("string"==typeof this.optionalClass?this.modal.classList.add(this.optionalClass):this.optionalClass instanceof Array&&this.modal.classList.add(...this.optionalClass)),document.body.appendChild(this.modal);let t=this.appended?0:100;this.appended||(this.appended=!0),this.modalContent.append(this._content),this.modal.style.display="block",setTimeout(()=>{this.modal.classList.add(this.classNameOpen),this.focusFirstElement(),this.onOpen&&this.onOpen(this.modal)},t),this.state=!0;const s=t=>{27==t.keyCode&&(this.close(),document.removeEventListener("keydown",s.bind(this),!1))};document.addEventListener("keydown",s.bind(this),!1)}}focusFirstElement(){const t=s=>s.firstElementChild?t(s.firstElementChild):s;let s=t(this.modalContent.firstElementChild);s.setAttribute("tabindex",-1),s.focus()}focusLastElement(){const t=this.modalContent.querySelectorAll('[href], button, [tabindex="0"], [role="button"]');t.length>0?t[t.length-1].focus():this.modalClose.focus()}get focusOnClose(){return this._focusOnClose}set focusOnClose(t){!t instanceof HTMLButtonElement&&!t instanceof HTMLAnchorElement&&!t.getAttribute("tabindex")||(this._focusOnClose=t)}get onOpen(){return this._onOpen}set onOpen(t){t&&"function"==typeof t&&(this._onOpen=t)}get onClose(){return this._onClose}set onClose(t){t&&"function"==typeof t&&(this._onClose=t)}get onCloseStart(){return this._onCloseStart}set onCloseStart(t){t&&"function"==typeof t&&(this._onCloseStart=t)}set optionalClass(t){t&&(this._optionalClass=t)}get optionalClass(){return this._optionalClass||""}set closeButtonContent(t){if(t){if("string"!=typeof t)return t instanceof HTMLElement?(this.modalClose.innerHTML="",void this.modalClose.appendChild(t)):void 0;this.modalClose.innerHTML=t}}set content(t){if(t&&!("string"!=typeof t&&!t instanceof HTMLElement)){if(this.storeContent&&this.wrapperOfContent.appendChild(this._content),this._content=t,"string"!=typeof t)return this.storeContent=!0,this.modalContent.innerHTML="",void this.modalContent.appendChild(this._content);this.storeContent=!1,this.modalContent.innerHTML=this._content}}}export default t;
//# sourceMappingURL=wtc-modal-view.modern.js.map