@flexilla/alpine-offcanvas 0.0.1 → 0.0.3
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 +5 -7
- package/dist/cdn.min.js +1 -1
- package/dist/module.cjs.js +5 -7
- package/dist/module.esm.js +5 -7
- package/package.json +3 -3
- package/src/index.js +4 -4
package/dist/cdn.js
CHANGED
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (u = (r2 = this.options).onHide) == null || u.call(r2), v(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
|
|
156
156
|
});
|
|
157
157
|
o(this, "closeWithEsc", (t2) => {
|
|
158
|
-
t2.
|
|
158
|
+
t2.key === "Escape" && (t2.preventDefault(), this.closeOffCanvas());
|
|
159
159
|
});
|
|
160
160
|
o(this, "changeState", () => {
|
|
161
161
|
this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
|
|
@@ -254,9 +254,7 @@
|
|
|
254
254
|
for (const n of e)
|
|
255
255
|
new c(n);
|
|
256
256
|
}), /**
|
|
257
|
-
* Creates a new instance of Offcanvas with the given element and options.
|
|
258
257
|
* This is an alternative to using the constructor directly.
|
|
259
|
-
*
|
|
260
258
|
* @param offcanvas - The offcanvas element selector or HTMLElement
|
|
261
259
|
* @param options - Configuration options for the offcanvas
|
|
262
260
|
* @returns A new Offcanvas instance
|
|
@@ -276,7 +274,7 @@
|
|
|
276
274
|
function Offcanvas(Alpine) {
|
|
277
275
|
Alpine.directive("offcanvas", (el, {}, { cleanup }) => {
|
|
278
276
|
const offcanvasId = el.getAttribute("id");
|
|
279
|
-
if (!
|
|
277
|
+
if (!offcanvasId) {
|
|
280
278
|
console.error("\u274C id is required but missing on element:", el);
|
|
281
279
|
return;
|
|
282
280
|
}
|
|
@@ -284,19 +282,19 @@
|
|
|
284
282
|
if (!Alpine.store("sheets")) {
|
|
285
283
|
Alpine.store("sheets", {});
|
|
286
284
|
}
|
|
287
|
-
Alpine.store("sheets")[offcanvasId] =
|
|
285
|
+
Alpine.store("sheets")[offcanvasId] = offcanvas_;
|
|
288
286
|
const openHandler = () => offcanvas_.open();
|
|
289
287
|
const closeHandler = () => offcanvas_.close();
|
|
290
288
|
document.addEventListener(`sheet:${offcanvasId}:open`, openHandler);
|
|
291
289
|
document.addEventListener(`sheet:${offcanvasId}:close`, closeHandler);
|
|
292
290
|
cleanup(() => {
|
|
293
|
-
document.removeEventListener(`sheet:${
|
|
291
|
+
document.removeEventListener(`sheet:${offcanvasId}:open`, openHandler);
|
|
294
292
|
document.removeEventListener(
|
|
295
293
|
`sheet:${offcanvasId}:close`,
|
|
296
294
|
closeHandler
|
|
297
295
|
);
|
|
298
296
|
offcanvas_.cleanup();
|
|
299
|
-
delete Alpine.store("sheets")[
|
|
297
|
+
delete Alpine.store("sheets")[offcanvasId];
|
|
300
298
|
});
|
|
301
299
|
});
|
|
302
300
|
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.key==="Escape"&&(f.preventDefault(),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
|
@@ -179,7 +179,7 @@ var c = class c2 {
|
|
|
179
179
|
), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (u = (r2 = this.options).onHide) == null || u.call(r2), v(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
|
|
180
180
|
});
|
|
181
181
|
o(this, "closeWithEsc", (t2) => {
|
|
182
|
-
t2.
|
|
182
|
+
t2.key === "Escape" && (t2.preventDefault(), this.closeOffCanvas());
|
|
183
183
|
});
|
|
184
184
|
o(this, "changeState", () => {
|
|
185
185
|
this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
|
|
@@ -278,9 +278,7 @@ o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
|
|
|
278
278
|
for (const n of e)
|
|
279
279
|
new c(n);
|
|
280
280
|
}), /**
|
|
281
|
-
* Creates a new instance of Offcanvas with the given element and options.
|
|
282
281
|
* This is an alternative to using the constructor directly.
|
|
283
|
-
*
|
|
284
282
|
* @param offcanvas - The offcanvas element selector or HTMLElement
|
|
285
283
|
* @param options - Configuration options for the offcanvas
|
|
286
284
|
* @returns A new Offcanvas instance
|
|
@@ -300,7 +298,7 @@ var E = c;
|
|
|
300
298
|
function Offcanvas(Alpine) {
|
|
301
299
|
Alpine.directive("offcanvas", (el, {}, { cleanup }) => {
|
|
302
300
|
const offcanvasId = el.getAttribute("id");
|
|
303
|
-
if (!
|
|
301
|
+
if (!offcanvasId) {
|
|
304
302
|
console.error("\u274C id is required but missing on element:", el);
|
|
305
303
|
return;
|
|
306
304
|
}
|
|
@@ -308,19 +306,19 @@ function Offcanvas(Alpine) {
|
|
|
308
306
|
if (!Alpine.store("sheets")) {
|
|
309
307
|
Alpine.store("sheets", {});
|
|
310
308
|
}
|
|
311
|
-
Alpine.store("sheets")[offcanvasId] =
|
|
309
|
+
Alpine.store("sheets")[offcanvasId] = offcanvas_;
|
|
312
310
|
const openHandler = () => offcanvas_.open();
|
|
313
311
|
const closeHandler = () => offcanvas_.close();
|
|
314
312
|
document.addEventListener(`sheet:${offcanvasId}:open`, openHandler);
|
|
315
313
|
document.addEventListener(`sheet:${offcanvasId}:close`, closeHandler);
|
|
316
314
|
cleanup(() => {
|
|
317
|
-
document.removeEventListener(`sheet:${
|
|
315
|
+
document.removeEventListener(`sheet:${offcanvasId}:open`, openHandler);
|
|
318
316
|
document.removeEventListener(
|
|
319
317
|
`sheet:${offcanvasId}:close`,
|
|
320
318
|
closeHandler
|
|
321
319
|
);
|
|
322
320
|
offcanvas_.cleanup();
|
|
323
|
-
delete Alpine.store("sheets")[
|
|
321
|
+
delete Alpine.store("sheets")[offcanvasId];
|
|
324
322
|
});
|
|
325
323
|
});
|
|
326
324
|
Alpine.magic("offcanvas", (el) => (id) => {
|
package/dist/module.esm.js
CHANGED
|
@@ -154,7 +154,7 @@ var c = class c2 {
|
|
|
154
154
|
), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (u = (r2 = this.options).onHide) == null || u.call(r2), v(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
|
|
155
155
|
});
|
|
156
156
|
o(this, "closeWithEsc", (t2) => {
|
|
157
|
-
t2.
|
|
157
|
+
t2.key === "Escape" && (t2.preventDefault(), this.closeOffCanvas());
|
|
158
158
|
});
|
|
159
159
|
o(this, "changeState", () => {
|
|
160
160
|
this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
|
|
@@ -253,9 +253,7 @@ o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
|
|
|
253
253
|
for (const n of e)
|
|
254
254
|
new c(n);
|
|
255
255
|
}), /**
|
|
256
|
-
* Creates a new instance of Offcanvas with the given element and options.
|
|
257
256
|
* This is an alternative to using the constructor directly.
|
|
258
|
-
*
|
|
259
257
|
* @param offcanvas - The offcanvas element selector or HTMLElement
|
|
260
258
|
* @param options - Configuration options for the offcanvas
|
|
261
259
|
* @returns A new Offcanvas instance
|
|
@@ -275,7 +273,7 @@ var E = c;
|
|
|
275
273
|
function Offcanvas(Alpine) {
|
|
276
274
|
Alpine.directive("offcanvas", (el, {}, { cleanup }) => {
|
|
277
275
|
const offcanvasId = el.getAttribute("id");
|
|
278
|
-
if (!
|
|
276
|
+
if (!offcanvasId) {
|
|
279
277
|
console.error("\u274C id is required but missing on element:", el);
|
|
280
278
|
return;
|
|
281
279
|
}
|
|
@@ -283,19 +281,19 @@ function Offcanvas(Alpine) {
|
|
|
283
281
|
if (!Alpine.store("sheets")) {
|
|
284
282
|
Alpine.store("sheets", {});
|
|
285
283
|
}
|
|
286
|
-
Alpine.store("sheets")[offcanvasId] =
|
|
284
|
+
Alpine.store("sheets")[offcanvasId] = offcanvas_;
|
|
287
285
|
const openHandler = () => offcanvas_.open();
|
|
288
286
|
const closeHandler = () => offcanvas_.close();
|
|
289
287
|
document.addEventListener(`sheet:${offcanvasId}:open`, openHandler);
|
|
290
288
|
document.addEventListener(`sheet:${offcanvasId}:close`, closeHandler);
|
|
291
289
|
cleanup(() => {
|
|
292
|
-
document.removeEventListener(`sheet:${
|
|
290
|
+
document.removeEventListener(`sheet:${offcanvasId}:open`, openHandler);
|
|
293
291
|
document.removeEventListener(
|
|
294
292
|
`sheet:${offcanvasId}:close`,
|
|
295
293
|
closeHandler
|
|
296
294
|
);
|
|
297
295
|
offcanvas_.cleanup();
|
|
298
|
-
delete Alpine.store("sheets")[
|
|
296
|
+
delete Alpine.store("sheets")[offcanvasId];
|
|
299
297
|
});
|
|
300
298
|
});
|
|
301
299
|
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.3",
|
|
4
4
|
"description": "AlpineJS plugin for adding offcanvas functionality to your AlpineJS components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"Flexilla"
|
|
59
59
|
],
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"@flexilla/offcanvas": "^2.0.
|
|
61
|
+
"@flexilla/offcanvas": "^2.0.12"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "914deac1d6de6fddf509270e52d8aa1925def7af"
|
|
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
|
|