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

AlpineJS plugin for adding offcanvas functionality to your AlpineJS components

(()=>{var T=Object.defineProperty,x=(t,e,s)=>e in t?T(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,o=(t,e,s)=>x(t,typeof e!="symbol"?e+"":e,s),C=(t,e=document.body)=>e.querySelector(t),u=(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.")},$=({element:t,callback:e,type:s,keysCheck:n})=>{let a=getComputedStyle(t),l=a.transition;if(l!=="none"&&l!==""&&!n.includes(l)){let r="transitionend",h=()=>{t.removeEventListener(r,h),e()};t.addEventListener(r,h,{once:!0})}else e()},S=({element:t,callback:e})=>{$({element:t,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},E=(t,e,s)=>{let n=new CustomEvent(e,{detail:s});t.dispatchEvent(n)};function H(t){let e=()=>{document.querySelector("[data-fx-component]:not([data-component-initialized])")?requestAnimationFrame(e):t()};e()}function N(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 M=t=>{var e;return(e=t.parentElement)==null?void 0:e.removeChild(t)},L=t=>{t.setAttribute("data-state","invisible"),S({element:t,callback(){M(t)}})},D=(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"},q=(t,e)=>{if(t===e)return;t.setAttribute("aria-hidden","true"),t.setAttribute("data-state","close");let s=C(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`,t.parentElement);s instanceof HTMLElement&&L(s)},z=t=>{let e=u("[data-fx-offcanvas][data-state=open]");if(!(e.length<=0))for(let s of e)q(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(l=>l.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))}static setup(e){e.setAttribute("data-fx-component","fx")}static initialized(e){e.setAttribute("data-component-initialized","initialized")}},d=class{constructor(e,s={}){o(this,"offCanvasElement"),o(this,"offCanvasTriggers"),o(this,"offCanvasCloseBtns"),o(this,"offCanvasId",""),o(this,"dispatchEventToDocument"),o(this,"allowBodyScroll"),o(this,"staticBackdrop"),o(this,"backdrop"),o(this,"options"),o(this,"teleporter"),o(this,"moveElOnInit",()=>{H(()=>this.teleporter.append())}),o(this,"closeWhenClickOutSide",i=>{let v=this.offCanvasElement.getAttribute("data-state")==="open",m=!this.offCanvasElement.contains(i.target)&&![...this.offCanvasTriggers].includes(i.target);v&&m&&this.closeOffCanvas()}),o(this,"closeOffCanvas",()=>{var i,v,m,b,w;let g=!1;if(E(this.offCanvasElement,"offcanvas-before-hide",{offcanvasId:this.offCanvasElement.id,setExitAction:O=>{g=O}}),((m=(v=(i=this.options).beforeHide)==null?void 0:v.call(i))==null?void 0:m.cancelAction)||g)return;let I=this.offCanvasElement.getAttribute("id"),p=C(`[data-fx-offcanvas-overlay][data-offcanvas-el=${I}]`);p instanceof HTMLElement&&L(p),this.offCanvasElement.blur(),y(this.offCanvasElement,this.allowBodyScroll,"close"),document.removeEventListener("keydown",this.closeWithEsc),!this.allowBodyScroll&&!p&&document.removeEventListener("click",this.closeWhenClickOutSide),(w=(b=this.options).onHide)==null||w.call(b),E(this.offCanvasElement,"offcanvas-close",{offcanvasId:this.offCanvasElement.id})}),o(this,"closeWithEsc",i=>{i.key==="Escape"&&(i.preventDefault(),this.closeOffCanvas())}),o(this,"closeFromCloseBtn",i=>{i.target.blur(),this.closeOffCanvas()}),o(this,"changeState",()=>{this.offCanvasElement.getAttribute("data-state")==="open"?this.closeOffCanvas():this.openOffCanvas()}),o(this,"open",()=>{this.openOffCanvas()}),o(this,"close",()=>{this.closeOffCanvas()}),o(this,"setOptions",({allowBodyscroll:i})=>{i!==void 0&&(this.allowBodyScroll=i)});let n=typeof e=="string"?C(e):e;if(!(n instanceof HTMLElement))throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");this.offCanvasElement=n;let a=c.getInstance("offcanvas",n);if(a)return a;c.setup(this.offCanvasElement),this.options=s;let{staticBackdrop:l,allowBodyScroll:r,backdrop:h}=this.options;this.setupAttributes(),this.staticBackdrop=l||n.hasAttribute("data-static-backdrop")&&n.dataset.staticBackdrop!=="false"||!1,this.allowBodyScroll=r||n.hasAttribute("data-allow-body-scroll")&&n.dataset.allowBodyScroll!=="false"||!1;let f=this.offCanvasElement.getAttribute("id");if(!f||f==="")throw new Error("\u274C id is required but missing on element:");this.offCanvasId=f,this.offCanvasTriggers=this.findOffCanvasElements("[data-offcanvas-trigger]",!1,f),this.offCanvasCloseBtns=this.findOffCanvasElements("[data-offcanvas-close]",!0,f,this.offCanvasElement),this.backdrop=h||this.offCanvasElement.dataset.offcanvasBackdrop||"",this.dispatchEventToDocument=this.dispatchEventToDocument=this.options.dispatchEventToDocument||!0,this.teleporter=N(this.offCanvasElement,document.body,"move"),this.setupOffcanvas(),this.moveElOnInit(),c.register("offcanvas",this.offCanvasElement,this),c.initialized(this.offCanvasElement)}findOffCanvasElements(e,s,n,a){return s?u(`${e}`,a):u(`${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),z(this.offCanvasElement),y(this.offCanvasElement,this.allowBodyScroll,"open");let l=this.offCanvasElement.getAttribute("id"),r=D(this.backdrop,l);r instanceof HTMLElement&&(A({newElement:r,existingElement:this.offCanvasElement}),this.staticBackdrop||r.addEventListener("click",this.closeOffCanvas)),document.addEventListener("keydown",this.closeWithEsc),(a=(n=this.options).onShow)==null||a.call(n),E(this.offCanvasElement,"offcanvas-open",{offcanvasId:this.offCanvasElement.id})}initCloseBtns(){for(let e of this.offCanvasCloseBtns)e.addEventListener("click",this.closeFromCloseBtn)}initTriggers(){for(let e of this.offCanvasTriggers)e.addEventListener("click",this.changeState)}setupOffcanvas(){this.initTriggers(),this.initCloseBtns(),this.dispatchEventToDocument&&document.addEventListener(`sheet:${this.offCanvasId}:open`,this.open),this.dispatchEventToDocument&&document.addEventListener(`sheet:${this.offCanvasId}:close`,this.close)}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),this.dispatchEventToDocument&&document.removeEventListener(`sheet:${this.offCanvasId}:open`,this.open),this.dispatchEventToDocument&&document.removeEventListener(`sheet:${this.offCanvasId}:close`,this.close),c.removeInstance("offcanvas",this.offCanvasElement)}};o(d,"autoInit",(t="[data-fx-offcanvas]")=>{let e=u(t);for(let s of e)new d(s)}),o(d,"init",(t,e={})=>new d(t,e));var k=d;function F(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 k(e);t.store("sheets")||t.store("sheets",{}),t.store("sheets")[n]=a;let l=()=>a.open(),r=()=>a.close();document.addEventListener(`sheet:${n}:open`,l),document.addEventListener(`sheet:${n}:close`,r),s(()=>{document.removeEventListener(`sheet:${n}:open`,l),document.removeEventListener(`sheet:${n}:close`,r),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 B=F;document.addEventListener("alpine:init",()=>{B(window.Alpine)});})();