@flexilla/alpine-offcanvas/dist/cdn.min.js

AlpineJS plugin for adding offcanvas functionality to your AlpineJS components

(()=>{var x=Object.defineProperty,S=(t,e,s)=>e in t?x(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,o=(t,e,s)=>S(t,typeof e!="symbol"?e+"":e,s),E=(t,e=document.body)=>e.querySelector(t),m=(t,e=document.body)=>Array.from(e.querySelectorAll(t)),A=({newElement:t,existingElement:e})=>{if(!(t instanceof HTMLElement)||!(e instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let s=e.parentElement;if(s)s.insertBefore(t,e);else throw new Error("Existing element must have a parent element.")},T=({element:t,callback:e,type:s,keysCheck:n})=>{let a=getComputedStyle(t),i=a.transition;if(i!=="none"&&i!==""&&!n.includes(i)){let l="transitionend",d=()=>{t.removeEventListener(l,d),e()};t.addEventListener(l,d,{once:!0})}else e()},$=({element:t,callback:e})=>{T({element:t,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},p=(t,e,s)=>{let n=new CustomEvent(e,{detail:s});t.dispatchEvent(n)};function H(t,e,s="move"){if(!(t instanceof HTMLElement))throw new Error("Source element must be an HTMLElement");if(!(e instanceof HTMLElement))throw new Error("Target element must be an HTMLElement");if(!["move","detachable"].includes(s))throw new Error(`Invalid teleport mode: ${s}. Must be "move" or "detachable".`);let n=document.createComment("teleporter-placeholder"),a=t.parentNode;return a?a.insertBefore(n,t):console.warn("Element has no parent; placeholder not inserted."),s==="move"?(t.parentNode&&e.appendChild(t),{append(){t.parentNode!==e&&e.appendChild(t)},remove(){n!=null&&n.parentNode&&t.parentNode&&n.parentNode.insertBefore(t,n)},restore(){n!=null&&n.parentNode&&t.parentNode!==a&&n.parentNode.insertBefore(t,n)}}):(t.parentNode&&e.appendChild(t),{append(){e.contains(t)||e.appendChild(t)},remove(){t.parentNode&&t.remove()},restore(){n!=null&&n.parentNode&&!t.parentNode&&n.parentNode.insertBefore(t,n)}})}var N=t=>{var e;return(e=t.parentElement)==null?void 0:e.removeChild(t)},k=t=>{t.setAttribute("data-state","invisible"),$({element:t,callback(){N(t)}})},M=(t,e)=>{let s=t;if(s===""||!s)return;let n=document.createElement("div");if(n.setAttribute("aria-hidden","true"),n.setAttribute("data-state","visible"),n.setAttribute("data-fx-offcanvas-overlay",""),n.setAttribute("data-offcanvas-el",e),s==="")return;let a=s.split(" ");return s!==""&&n.classList.add(...a),n},y=(t,e,s)=>{t.setAttribute("aria-hidden",s==="open"?"false":"true"),t.setAttribute("data-state",s),e||W(s)},W=t=>{document.body.style.overflow=t==="open"?"hidden":"",document.body.style.overflowY=t==="open"?"hidden":"auto"},G=(t,e)=>{if(t===e)return;t.setAttribute("aria-hidden","true"),t.setAttribute("data-state","close");let s=E(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`,t.parentElement);s instanceof HTMLElement&&k(s)},R=t=>{let e=m("[data-fx-offcanvas][data-state=open]");if(!(e.length<=0))for(let s of e)G(s,t)},c=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,s,n){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,s)||(window.$flexillaInstances[e].push({element:s,instance:n}),n)}static getInstance(e,s){var n,a;return this.initGlobalRegistry(),(a=(n=window.$flexillaInstances[e])==null?void 0:n.find(i=>i.element===s))==null?void 0:a.instance}static removeInstance(e,s){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(n=>n.element!==s))}},f=class{constructor(e,s={}){o(this,"offCanvasElement"),o(this,"offCanvasTriggers"),o(this,"offCanvasCloseBtns"),o(this,"allowBodyScroll"),o(this,"staticBackdrop"),o(this,"backdrop"),o(this,"options"),o(this,"teleporter"),o(this,"moveElOnInit",()=>{this.teleporter.append()}),o(this,"closeWhenClickOutSide",r=>{let v=this.offCanvasElement.getAttribute("data-state")==="open",h=!this.offCanvasElement.contains(r.target)&&![...this.offCanvasTriggers].includes(r.target);v&&h&&this.closeOffCanvas()}),o(this,"closeOffCanvas",()=>{var r,v,h,w,b;let g=!1;if(p(this.offCanvasElement,"offcanvas-before-hide",{offcanvasId:this.offCanvasElement.id,setExitAction:I=>{g=I}}),((h=(v=(r=this.options).beforeHide)==null?void 0:v.call(r))==null?void 0:h.cancelAction)||g)return;let B=this.offCanvasElement.getAttribute("id"),u=E(`[data-fx-offcanvas-overlay][data-offcanvas-el=${B}]`);u instanceof HTMLElement&&k(u),y(this.offCanvasElement,this.allowBodyScroll,"close"),document.removeEventListener("keydown",this.closeWithEsc),!this.allowBodyScroll&&!u&&document.removeEventListener("click",this.closeWhenClickOutSide),(b=(w=this.options).onHide)==null||b.call(w),p(this.offCanvasElement,"offcanvas-close",{offcanvasId:this.offCanvasElement.id})}),o(this,"closeWithEsc",r=>{r.key==="Escape"&&(r.preventDefault(),this.closeOffCanvas())}),o(this,"changeState",()=>{this.offCanvasElement.getAttribute("data-state")==="open"?this.closeOffCanvas():this.openOffCanvas()}),o(this,"setOptions",({allowBodyscroll:r})=>{r!==void 0&&(this.allowBodyScroll=r)});let n=typeof e=="string"?E(e):e;if(!(n instanceof HTMLElement))throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");let a=c.getInstance("offcanvas",n);if(a)return a;this.options=s;let{staticBackdrop:i,allowBodyScroll:l,backdrop:d}=this.options;this.offCanvasElement=n,this.setupAttributes(),this.staticBackdrop=i||n.hasAttribute("data-static-backdrop")&&n.dataset.staticBackdrop!=="false"||!1,this.allowBodyScroll=l||n.hasAttribute("data-allow-body-scroll")&&n.dataset.allowBodyScroll!=="false"||!1;let C=this.offCanvasElement.getAttribute("id");this.offCanvasTriggers=this.findOffCanvasElements("[data-offcanvas-trigger]",!1,C),this.offCanvasCloseBtns=this.findOffCanvasElements("[data-offcanvas-close]",!0,C,this.offCanvasElement),this.backdrop=d||this.offCanvasElement.dataset.offcanvasBackdrop||"",this.teleporter=H(this.offCanvasElement,document.body,"move"),this.setupOffcanvas(),this.moveElOnInit(),c.register("offcanvas",this.offCanvasElement,this)}findOffCanvasElements(e,s,n,a){return s?m(`${e}`,a):m(`${e}[data-target=${n}]`)}setupAttributes(){this.offCanvasElement.hasAttribute("data-fx-offcanvas")||this.offCanvasElement.setAttribute("data-fx-offcanvas","")}openOffCanvas(){var e,s,n,a;(s=(e=this.options).beforeShow)==null||s.call(e),R(this.offCanvasElement),y(this.offCanvasElement,this.allowBodyScroll,"open");let i=this.offCanvasElement.getAttribute("id"),l=M(this.backdrop,i);l instanceof HTMLElement&&(A({newElement:l,existingElement:this.offCanvasElement}),this.staticBackdrop||l.addEventListener("click",this.closeOffCanvas)),document.addEventListener("keydown",this.closeWithEsc),(a=(n=this.options).onShow)==null||a.call(n),p(this.offCanvasElement,"offcanvas-open",{offcanvasId:this.offCanvasElement.id})}initCloseBtns(){for(let e of this.offCanvasCloseBtns)e.addEventListener("click",this.closeOffCanvas)}initTriggers(){for(let e of this.offCanvasTriggers)e.addEventListener("click",this.changeState)}setupOffcanvas(){this.initTriggers(),this.initCloseBtns()}open(){this.openOffCanvas()}close(){this.closeOffCanvas()}cleanup(){for(let e of this.offCanvasTriggers)e.removeEventListener("click",this.changeState);for(let e of this.offCanvasCloseBtns)e.removeEventListener("click",this.closeOffCanvas);document.removeEventListener("keydown",this.closeWithEsc),this.allowBodyScroll||document.removeEventListener("click",this.closeWhenClickOutSide),c.removeInstance("offcanvas",this.offCanvasElement)}};o(f,"autoInit",(t="[data-fx-offcanvas]")=>{let e=m(t);for(let s of e)new f(s)}),o(f,"init",(t,e={})=>new f(t,e));var L=f;function q(t){t.directive("offcanvas",(e,{},{cleanup:s})=>{let n=e.getAttribute("id");if(!n){console.error("\u274C id is required but missing on element:",e);return}let a=new L(e);t.store("sheets")||t.store("sheets",{}),t.store("sheets")[n]=a;let i=()=>a.open(),l=()=>a.close();document.addEventListener(`sheet:${n}:open`,i),document.addEventListener(`sheet:${n}:close`,l),s(()=>{document.removeEventListener(`sheet:${n}:open`,i),document.removeEventListener(`sheet:${n}:close`,l),a.cleanup(),delete t.store("sheets")[n]})}),t.magic("offcanvas",e=>s=>t.store("sheets")?t.store("sheets")[s]?t.store("sheets")[s]:(console.warn(`\u26A0\uFE0F No offcanvas instance found for ID: ${s}`),null):(console.warn("\u26A0\uFE0F Alpine store for Offcanvas is not initialized."),null))}var O=q;document.addEventListener("alpine:init",()=>{O(window.Alpine)});})();