@flexilla/alpine-offcanvas 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn.js +4 -4
- package/dist/cdn.min.js +1 -1
- package/dist/module.cjs.js +4 -4
- package/dist/module.esm.js +4 -4
- package/package.json +2 -2
- package/src/index.js +4 -4
package/dist/cdn.js
CHANGED
|
@@ -276,7 +276,7 @@
|
|
|
276
276
|
function Offcanvas(Alpine) {
|
|
277
277
|
Alpine.directive("offcanvas", (el, {}, { cleanup }) => {
|
|
278
278
|
const offcanvasId = el.getAttribute("id");
|
|
279
|
-
if (!
|
|
279
|
+
if (!offcanvasId) {
|
|
280
280
|
console.error("\u274C id is required but missing on element:", el);
|
|
281
281
|
return;
|
|
282
282
|
}
|
|
@@ -284,19 +284,19 @@
|
|
|
284
284
|
if (!Alpine.store("sheets")) {
|
|
285
285
|
Alpine.store("sheets", {});
|
|
286
286
|
}
|
|
287
|
-
Alpine.store("sheets")[offcanvasId] =
|
|
287
|
+
Alpine.store("sheets")[offcanvasId] = offcanvas_;
|
|
288
288
|
const openHandler = () => offcanvas_.open();
|
|
289
289
|
const closeHandler = () => offcanvas_.close();
|
|
290
290
|
document.addEventListener(`sheet:${offcanvasId}:open`, openHandler);
|
|
291
291
|
document.addEventListener(`sheet:${offcanvasId}:close`, closeHandler);
|
|
292
292
|
cleanup(() => {
|
|
293
|
-
document.removeEventListener(`sheet:${
|
|
293
|
+
document.removeEventListener(`sheet:${offcanvasId}:open`, openHandler);
|
|
294
294
|
document.removeEventListener(
|
|
295
295
|
`sheet:${offcanvasId}:close`,
|
|
296
296
|
closeHandler
|
|
297
297
|
);
|
|
298
298
|
offcanvas_.cleanup();
|
|
299
|
-
delete Alpine.store("sheets")[
|
|
299
|
+
delete Alpine.store("sheets")[offcanvasId];
|
|
300
300
|
});
|
|
301
301
|
});
|
|
302
302
|
Alpine.magic("offcanvas", (el) => (id) => {
|
package/dist/cdn.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{var
|
|
1
|
+
(()=>{var I=Object.defineProperty,A=(t,e,n)=>e in t?I(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,o=(t,e,n)=>A(t,typeof e!="symbol"?e+"":e,n),C=(t,e=document.body)=>e.querySelector(t),m=(t,e=document.body)=>Array.from(e.querySelectorAll(t)),S=({newElement:t,existingElement:e})=>{if(!(t instanceof HTMLElement)||!(e instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let n=e.parentElement;if(n)n.insertBefore(t,e);else throw new Error("Existing element must have a parent element.")},$=({element:t,callback:e,type:n,keysCheck:s})=>{let a=getComputedStyle(t),i=a.transition;if(i!=="none"&&i!==""&&!s.includes(i)){let l="transitionend",d=()=>{t.removeEventListener(l,d),e()};t.addEventListener(l,d,{once:!0})}else e()},T=({element:t,callback:e})=>{$({element:t,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},E=(t,e,n)=>{let s=new CustomEvent(e,{detail:n});t.dispatchEvent(s)},H=t=>{var e;return(e=t.parentElement)==null?void 0:e.removeChild(t)},k=t=>{t.setAttribute("data-state","invisible"),T({element:t,callback(){H(t)}})},M=(t,e)=>{let n=t;if(n===""||!n)return;let s=document.createElement("div");if(s.setAttribute("aria-hidden","true"),s.setAttribute("data-state","visible"),s.setAttribute("data-fx-offcanvas-overlay",""),s.setAttribute("data-offcanvas-el",e),n==="")return;let a=n.split(" ");return n!==""&&s.classList.add(...a),s},y=(t,e,n)=>{t.setAttribute("aria-hidden",n==="open"?"false":"true"),t.setAttribute("data-state",n),e||W(n)},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 n=C(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`,t.parentElement);n instanceof HTMLElement&&k(n)},R=t=>{let e=m("[data-fx-offcanvas][data-state=open]");if(!(e.length<=0))for(let n of e)G(n,t)},c=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,n,s){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,n)||(window.$flexillaInstances[e].push({element:n,instance:s}),s)}static getInstance(e,n){var s,a;return this.initGlobalRegistry(),(a=(s=window.$flexillaInstances[e])==null?void 0:s.find(i=>i.element===n))==null?void 0:a.instance}static removeInstance(e,n){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(s=>s.element!==n))}},r=class{constructor(e,n={}){o(this,"offCanvasElement"),o(this,"offCanvasTriggers"),o(this,"offCanvasCloseBtns"),o(this,"allowBodyScroll"),o(this,"staticBackdrop"),o(this,"backdrop"),o(this,"options"),o(this,"closeWhenClickOutSide",f=>{let v=this.offCanvasElement.getAttribute("data-state")==="open",h=!this.offCanvasElement.contains(f.target)&&![...this.offCanvasTriggers].includes(f.target);v&&h&&this.closeOffCanvas()}),o(this,"closeOffCanvas",()=>{var f,v,h,b,w;let g=!1;if(E(this.offCanvasElement,"offcanvas-before-hide",{offcanvasId:this.offCanvasElement.id,setExitAction:B=>{g=B}}),((h=(v=(f=this.options).beforeHide)==null?void 0:v.call(f))==null?void 0:h.cancelAction)||g)return;let x=this.offCanvasElement.getAttribute("id"),u=C(`[data-fx-offcanvas-overlay][data-offcanvas-el=${x}]`);u instanceof HTMLElement&&k(u),y(this.offCanvasElement,this.allowBodyScroll,"close"),document.removeEventListener("keydown",this.closeWithEsc),!this.allowBodyScroll&&!u&&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",f=>{f.preventDefault(),f.key==="Escape"&&this.closeOffCanvas()}),o(this,"changeState",()=>{this.offCanvasElement.getAttribute("data-state")==="open"?this.closeOffCanvas():this.openOffCanvas()});let s=typeof e=="string"?C(e):e;if(!(s instanceof HTMLElement))throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");let a=c.getInstance("offcanvas",s);if(a)return a;this.options=n;let{staticBackdrop:i,allowBodyScroll:l,backdrop:d}=this.options;this.offCanvasElement=s,this.setupAttributes(),this.staticBackdrop=i||s.hasAttribute("data-static-backdrop")&&s.dataset.staticBackdrop!=="false"||!1,this.allowBodyScroll=l||s.hasAttribute("data-allow-body-scroll")&&s.dataset.allowBodyScroll!=="false"||!1;let p=this.offCanvasElement.getAttribute("id");this.offCanvasTriggers=this.findOffCanvasElements("[data-offcanvas-trigger]",!1,p),this.offCanvasCloseBtns=this.findOffCanvasElements("[data-offcanvas-close]",!0,p,this.offCanvasElement),this.backdrop=d||this.offCanvasElement.dataset.offcanvasBackdrop||"",this.setupOffcanvas(),c.register("offcanvas",this.offCanvasElement,this)}findOffCanvasElements(e,n,s,a){return n?m(`${e}`,a):m(`${e}[data-target=${s}]`)}setupAttributes(){this.offCanvasElement.hasAttribute("data-fx-offcanvas")||this.offCanvasElement.setAttribute("data-fx-offcanvas","")}openOffCanvas(){var e,n,s,a;(n=(e=this.options).beforeShow)==null||n.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&&(S({newElement:l,existingElement:this.offCanvasElement}),this.staticBackdrop||l.addEventListener("click",this.closeOffCanvas)),document.addEventListener("keydown",this.closeWithEsc),(a=(s=this.options).onShow)==null||a.call(s),E(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(r,"autoInit",(t="[data-fx-offcanvas]")=>{let e=m(t);for(let n of e)new r(n)}),o(r,"init",(t,e={})=>new r(t,e));var O=r;function q(t){t.directive("offcanvas",(e,{},{cleanup:n})=>{let s=e.getAttribute("id");if(!s){console.error("\u274C id is required but missing on element:",e);return}let a=new O(e);t.store("sheets")||t.store("sheets",{}),t.store("sheets")[s]=a;let i=()=>a.open(),l=()=>a.close();document.addEventListener(`sheet:${s}:open`,i),document.addEventListener(`sheet:${s}:close`,l),n(()=>{document.removeEventListener(`sheet:${s}:open`,i),document.removeEventListener(`sheet:${s}:close`,l),a.cleanup(),delete t.store("sheets")[s]})}),t.magic("offcanvas",e=>n=>t.store("sheets")?t.store("sheets")[n]?t.store("sheets")[n]:(console.warn(`\u26A0\uFE0F No offcanvas instance found for ID: ${n}`),null):(console.warn("\u26A0\uFE0F Alpine store for Offcanvas is not initialized."),null))}var L=q;document.addEventListener("alpine:init",()=>{L(window.Alpine)});})();
|
package/dist/module.cjs.js
CHANGED
|
@@ -300,7 +300,7 @@ var E = c;
|
|
|
300
300
|
function Offcanvas(Alpine) {
|
|
301
301
|
Alpine.directive("offcanvas", (el, {}, { cleanup }) => {
|
|
302
302
|
const offcanvasId = el.getAttribute("id");
|
|
303
|
-
if (!
|
|
303
|
+
if (!offcanvasId) {
|
|
304
304
|
console.error("\u274C id is required but missing on element:", el);
|
|
305
305
|
return;
|
|
306
306
|
}
|
|
@@ -308,19 +308,19 @@ function Offcanvas(Alpine) {
|
|
|
308
308
|
if (!Alpine.store("sheets")) {
|
|
309
309
|
Alpine.store("sheets", {});
|
|
310
310
|
}
|
|
311
|
-
Alpine.store("sheets")[offcanvasId] =
|
|
311
|
+
Alpine.store("sheets")[offcanvasId] = offcanvas_;
|
|
312
312
|
const openHandler = () => offcanvas_.open();
|
|
313
313
|
const closeHandler = () => offcanvas_.close();
|
|
314
314
|
document.addEventListener(`sheet:${offcanvasId}:open`, openHandler);
|
|
315
315
|
document.addEventListener(`sheet:${offcanvasId}:close`, closeHandler);
|
|
316
316
|
cleanup(() => {
|
|
317
|
-
document.removeEventListener(`sheet:${
|
|
317
|
+
document.removeEventListener(`sheet:${offcanvasId}:open`, openHandler);
|
|
318
318
|
document.removeEventListener(
|
|
319
319
|
`sheet:${offcanvasId}:close`,
|
|
320
320
|
closeHandler
|
|
321
321
|
);
|
|
322
322
|
offcanvas_.cleanup();
|
|
323
|
-
delete Alpine.store("sheets")[
|
|
323
|
+
delete Alpine.store("sheets")[offcanvasId];
|
|
324
324
|
});
|
|
325
325
|
});
|
|
326
326
|
Alpine.magic("offcanvas", (el) => (id) => {
|
package/dist/module.esm.js
CHANGED
|
@@ -275,7 +275,7 @@ var E = c;
|
|
|
275
275
|
function Offcanvas(Alpine) {
|
|
276
276
|
Alpine.directive("offcanvas", (el, {}, { cleanup }) => {
|
|
277
277
|
const offcanvasId = el.getAttribute("id");
|
|
278
|
-
if (!
|
|
278
|
+
if (!offcanvasId) {
|
|
279
279
|
console.error("\u274C id is required but missing on element:", el);
|
|
280
280
|
return;
|
|
281
281
|
}
|
|
@@ -283,19 +283,19 @@ function Offcanvas(Alpine) {
|
|
|
283
283
|
if (!Alpine.store("sheets")) {
|
|
284
284
|
Alpine.store("sheets", {});
|
|
285
285
|
}
|
|
286
|
-
Alpine.store("sheets")[offcanvasId] =
|
|
286
|
+
Alpine.store("sheets")[offcanvasId] = offcanvas_;
|
|
287
287
|
const openHandler = () => offcanvas_.open();
|
|
288
288
|
const closeHandler = () => offcanvas_.close();
|
|
289
289
|
document.addEventListener(`sheet:${offcanvasId}:open`, openHandler);
|
|
290
290
|
document.addEventListener(`sheet:${offcanvasId}:close`, closeHandler);
|
|
291
291
|
cleanup(() => {
|
|
292
|
-
document.removeEventListener(`sheet:${
|
|
292
|
+
document.removeEventListener(`sheet:${offcanvasId}:open`, openHandler);
|
|
293
293
|
document.removeEventListener(
|
|
294
294
|
`sheet:${offcanvasId}:close`,
|
|
295
295
|
closeHandler
|
|
296
296
|
);
|
|
297
297
|
offcanvas_.cleanup();
|
|
298
|
-
delete Alpine.store("sheets")[
|
|
298
|
+
delete Alpine.store("sheets")[offcanvasId];
|
|
299
299
|
});
|
|
300
300
|
});
|
|
301
301
|
Alpine.magic("offcanvas", (el) => (id) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flexilla/alpine-offcanvas",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "AlpineJS plugin for adding offcanvas functionality to your AlpineJS components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"@flexilla/offcanvas": "^2.0.10"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "623938b8249890daf329440b50aa73ef7b68f304"
|
|
64
64
|
}
|
package/src/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { OffCanvas as FlexillaOffcanvas } from "@flexilla/offcanvas";
|
|
|
3
3
|
function Offcanvas(Alpine) {
|
|
4
4
|
Alpine.directive("offcanvas", (el, {}, { cleanup }) => {
|
|
5
5
|
const offcanvasId = el.getAttribute("id");
|
|
6
|
-
if (!
|
|
6
|
+
if (!offcanvasId) {
|
|
7
7
|
console.error("❌ id is required but missing on element:", el);
|
|
8
8
|
return;
|
|
9
9
|
}
|
|
@@ -13,20 +13,20 @@ function Offcanvas(Alpine) {
|
|
|
13
13
|
Alpine.store("sheets", {});
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
Alpine.store("sheets")[offcanvasId] =
|
|
16
|
+
Alpine.store("sheets")[offcanvasId] = offcanvas_;
|
|
17
17
|
const openHandler = () => offcanvas_.open();
|
|
18
18
|
const closeHandler = () => offcanvas_.close();
|
|
19
19
|
|
|
20
20
|
document.addEventListener(`sheet:${offcanvasId}:open`, openHandler);
|
|
21
21
|
document.addEventListener(`sheet:${offcanvasId}:close`, closeHandler);
|
|
22
22
|
cleanup(() => {
|
|
23
|
-
document.removeEventListener(`sheet:${
|
|
23
|
+
document.removeEventListener(`sheet:${offcanvasId}:open`, openHandler);
|
|
24
24
|
document.removeEventListener(
|
|
25
25
|
`sheet:${offcanvasId}:close`,
|
|
26
26
|
closeHandler
|
|
27
27
|
);
|
|
28
28
|
offcanvas_.cleanup();
|
|
29
|
-
delete Alpine.store("sheets")[
|
|
29
|
+
delete Alpine.store("sheets")[offcanvasId];
|
|
30
30
|
});
|
|
31
31
|
});
|
|
32
32
|
|