wtc-modal-view/dist/wtc-modal-view.module.js

A simple, unopinionated modal class.

function t(t,e){for(var s=0;s<e.length;s++){var n=e[s];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}var e=function(){function e(){var t=this;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",function(){t.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))}var s,n,o,i=e.prototype;return i.close=function(){var t=this;this.state&&(this._onCloseStart?this._onCloseStart(this.modal,function(){t._completeClose()}):this._completeClose())},i._completeClose=function(){var t=this;this.state&&(this.modal.classList.remove(this.classNameOpen),this.focusOnClose&&this.focusOnClose.focus(),setTimeout(function(){var e;t.state=!1,t.modal.style.display="none",t.optionalClass&&("string"==typeof t.optionalClass?t.modal.classList.remove(t.optionalClass):t.optionalClass instanceof Array&&(e=t.modal.classList).remove.apply(e,t.optionalClass)),t.storeContent?t.wrapperOfContent.appendChild(t._content):t.modalContent.innerHTML="",t.onClose&&t.onClose()},this.inOutDuration),e.hash&&history.replaceState("",document.title,window.location.pathname))},i.open=function(){var t=this;if(!this.state){var e;this.optionalClass&&("string"==typeof this.optionalClass?this.modal.classList.add(this.optionalClass):this.optionalClass instanceof Array&&(e=this.modal.classList).add.apply(e,this.optionalClass)),document.body.appendChild(this.modal);var s=this.appended?0:100;this.appended||(this.appended=!0),this.modalContent.append(this._content),this.modal.style.display="block",setTimeout(function(){t.modal.classList.add(t.classNameOpen),t.focusFirstElement(),t.onOpen&&t.onOpen(t.modal)},s),this.state=!0,document.addEventListener("keydown",function e(s){27==s.keyCode&&(t.close(),document.removeEventListener("keydown",e.bind(t),!1))}.bind(this),!1)}},i.focusFirstElement=function(){var t=function t(e){return e.firstElementChild?t(e.firstElementChild):e}(this.modalContent.firstElementChild);t.setAttribute("tabindex",-1),t.focus()},i.focusLastElement=function(){var t=this.modalContent.querySelectorAll('[href], button, [tabindex="0"], [role="button"]');t.length>0?t[t.length-1].focus():this.modalClose.focus()},s=e,o=[{key:"hash",get:function(){var t=/#\!?\/(.+)\//i.exec(window.location.hash);return t&&t.length>1?t[1]:null}}],(n=[{key:"focusOnClose",get:function(){return this._focusOnClose},set:function(t){!t instanceof HTMLButtonElement&&!t instanceof HTMLAnchorElement&&!t.getAttribute("tabindex")||(this._focusOnClose=t)}},{key:"onOpen",get:function(){return this._onOpen},set:function(t){t&&"function"==typeof t&&(this._onOpen=t)}},{key:"onClose",get:function(){return this._onClose},set:function(t){t&&"function"==typeof t&&(this._onClose=t)}},{key:"onCloseStart",get:function(){return this._onCloseStart},set:function(t){t&&"function"==typeof t&&(this._onCloseStart=t)}},{key:"optionalClass",set:function(t){t&&(this._optionalClass=t)},get:function(){return this._optionalClass||""}},{key:"closeButtonContent",set:function(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}}},{key:"content",set:function(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}}}])&&t(s.prototype,n),o&&t(s,o),e}();export default e;
//# sourceMappingURL=wtc-modal-view.module.js.map