Michael Schiemer
77abc65cd7
Some checks failed
Deploy Application / deploy (push) Has been cancelled
2 lines
3.7 KiB
JavaScript
2 lines
3.7 KiB
JavaScript
class e{constructor(){this.drawerStack=[],this.baseZIndex=1040,this.zIndexIncrement=10,this.escapeHandler=null}open(e,t={}){const{title:r="",content:a="",position:s="left",width:n="400px",showOverlay:d=!0,closeOnOverlay:l=!0,closeOnEscape:o=!0,animation:i="slide"}=t,c=this.baseZIndex+this.drawerStack.length*this.zIndexIncrement;let h=null;d&&(h=this.createOverlay(c,l,e),document.body.appendChild(h));const w=this.createDrawerElement(e,r,a,s,n,i,c+1);document.body.appendChild(w);const u={componentId:e,drawerElement:w,overlayElement:h,zIndex:c+1,closeOnEscape:o,closeOnOverlay:l};return this.drawerStack.push(u),this.setupDrawerHandlers(w,h,e,l,o),this.updateEscapeHandler(),requestAnimationFrame(()=>{h&&h.classList.add("drawer-overlay--show"),w.classList.add("drawer--show")}),this.focusDrawer(w),{drawer:w,overlay:h,close:()=>this.close(e),isOpen:()=>w.classList.contains("drawer--show")}}close(e){const t=this.drawerStack.findIndex(t=>t.componentId===e);if(-1===t)return;const{drawerElement:r,overlayElement:a}=this.drawerStack[t];if(r.classList.remove("drawer--show"),a&&a.classList.remove("drawer-overlay--show"),setTimeout(()=>{r.parentNode&&r.parentNode.removeChild(r),a&&a.parentNode&&a.parentNode.removeChild(a)},300),this.drawerStack.splice(t,1),this.updateEscapeHandler(),this.drawerStack.length>0){const e=this.drawerStack[this.drawerStack.length-1];this.focusDrawer(e.drawerElement)}else{const e=document.activeElement;e&&e!==document.body&&e.blur(),document.body.focus()}}closeAll(){for(;this.drawerStack.length>0;){const{componentId:e}=this.drawerStack[this.drawerStack.length-1];this.close(e)}}getTopDrawer(){return 0===this.drawerStack.length?null:this.drawerStack[this.drawerStack.length-1]}isOpen(e){return this.drawerStack.some(t=>t.componentId===e)}createOverlay(e,t,r){const a=document.createElement("div");return a.className="drawer-overlay",a.style.zIndex=e.toString(),a.setAttribute("role","presentation"),a.setAttribute("aria-hidden","true"),t&&a.addEventListener("click",()=>{this.close(r)}),a}createDrawerElement(e,t,r,a,s,n,d){const l=document.createElement("div");return l.className=`drawer drawer--${a} drawer-animation-${n}`,l.id=`drawer-${e}`,l.style.zIndex=d.toString(),l.style.width=s,l.setAttribute("role","dialog"),l.setAttribute("aria-modal","true"),l.setAttribute("aria-labelledby",t?`drawer-title-${e}`:""),l.innerHTML=`\n <div class="drawer-content">\n ${t?`\n <div class="drawer-header">\n <h3 class="drawer-title" id="drawer-title-${e}">${t}</h3>\n <button class="drawer-close" aria-label="Close drawer">×</button>\n </div>\n `:""}\n <div class="drawer-body">${r}</div>\n </div>\n `,l}setupDrawerHandlers(e,t,r,a,s){const n=e.querySelector(".drawer-close");n&&n.addEventListener("click",()=>{this.close(r)})}updateEscapeHandler(){if(this.escapeHandler&&(document.removeEventListener("keydown",this.escapeHandler),this.escapeHandler=null),this.drawerStack.length>0){const e=this.getTopDrawer();e&&e.closeOnEscape&&(this.escapeHandler=t=>{"Escape"!==t.key||t.defaultPrevented||(t.preventDefault(),this.close(e.componentId))},document.addEventListener("keydown",this.escapeHandler))}}focusDrawer(e){if(!e)return;const t=["button:not([disabled])","[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", "),r=e.querySelector(t);r?requestAnimationFrame(()=>{r.focus()}):requestAnimationFrame(()=>{e.focus()})}destroy(){this.closeAll(),this.escapeHandler&&(document.removeEventListener("keydown",this.escapeHandler),this.escapeHandler=null)}}export{e as DrawerManager};
|