@flexilla/alpine-offcanvas 0.2.0 → 0.3.1
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 +149 -147
- package/dist/cdn.min.js +1 -1
- package/dist/module.cjs.js +149 -147
- package/dist/module.esm.js +149 -147
- package/package.json +3 -4
package/dist/cdn.js
CHANGED
|
@@ -1,158 +1,172 @@
|
|
|
1
1
|
(() => {
|
|
2
2
|
// ../../node_modules/@flexilla/offcanvas/dist/offcanvas.js
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var o = (
|
|
6
|
-
var
|
|
7
|
-
var v = (
|
|
8
|
-
var
|
|
9
|
-
newElement:
|
|
10
|
-
existingElement:
|
|
3
|
+
var y = Object.defineProperty;
|
|
4
|
+
var A = (e, t, n) => t in e ? y(e, t, { enumerable: true, configurable: true, writable: true, value: n }) : e[t] = n;
|
|
5
|
+
var o = (e, t, n) => A(e, typeof t != "symbol" ? t + "" : t, n);
|
|
6
|
+
var u = (e, t = document.body) => t.querySelector(e);
|
|
7
|
+
var v = (e, t = document.body) => Array.from(t.querySelectorAll(e));
|
|
8
|
+
var k = ({
|
|
9
|
+
newElement: e,
|
|
10
|
+
existingElement: t
|
|
11
11
|
}) => {
|
|
12
|
-
if (!(
|
|
12
|
+
if (!(e instanceof HTMLElement) || !(t instanceof HTMLElement))
|
|
13
13
|
throw new Error("Both parameters must be valid HTML elements.");
|
|
14
|
-
const n =
|
|
14
|
+
const n = t.parentElement;
|
|
15
15
|
if (n)
|
|
16
|
-
n.insertBefore(
|
|
16
|
+
n.insertBefore(e, t);
|
|
17
17
|
else
|
|
18
18
|
throw new Error("Existing element must have a parent element.");
|
|
19
19
|
};
|
|
20
|
-
var
|
|
21
|
-
element:
|
|
22
|
-
callback:
|
|
20
|
+
var O = ({
|
|
21
|
+
element: e,
|
|
22
|
+
callback: t,
|
|
23
23
|
type: n,
|
|
24
24
|
keysCheck: s
|
|
25
25
|
}) => {
|
|
26
|
-
const a = getComputedStyle(
|
|
26
|
+
const a = getComputedStyle(e), i = a.transition;
|
|
27
27
|
if (i !== "none" && i !== "" && !s.includes(i)) {
|
|
28
|
-
const l = "transitionend",
|
|
29
|
-
|
|
28
|
+
const l = "transitionend", f = () => {
|
|
29
|
+
e.removeEventListener(l, f), t();
|
|
30
30
|
};
|
|
31
|
-
|
|
31
|
+
e.addEventListener(l, f, { once: true });
|
|
32
32
|
} else
|
|
33
|
-
|
|
33
|
+
t();
|
|
34
34
|
};
|
|
35
|
-
var
|
|
36
|
-
element:
|
|
37
|
-
callback:
|
|
35
|
+
var B = ({
|
|
36
|
+
element: e,
|
|
37
|
+
callback: t
|
|
38
38
|
}) => {
|
|
39
|
-
|
|
40
|
-
element:
|
|
41
|
-
callback:
|
|
39
|
+
O({
|
|
40
|
+
element: e,
|
|
41
|
+
callback: t,
|
|
42
42
|
type: "transition",
|
|
43
43
|
keysCheck: ["all 0s ease 0s", "all"]
|
|
44
44
|
});
|
|
45
45
|
};
|
|
46
|
-
var h = (
|
|
47
|
-
const s = new CustomEvent(
|
|
48
|
-
|
|
46
|
+
var h = (e, t, n) => {
|
|
47
|
+
const s = new CustomEvent(t, { detail: n });
|
|
48
|
+
e.dispatchEvent(s);
|
|
49
49
|
};
|
|
50
|
-
function
|
|
51
|
-
const
|
|
50
|
+
function I(e) {
|
|
51
|
+
const t = () => {
|
|
52
52
|
document.querySelector(
|
|
53
53
|
"[data-fx-component]:not([data-component-initialized])"
|
|
54
|
-
) ? requestAnimationFrame(
|
|
54
|
+
) ? requestAnimationFrame(t) : e();
|
|
55
55
|
};
|
|
56
|
-
|
|
56
|
+
t();
|
|
57
57
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
var E = "data-fx-teleport-root";
|
|
59
|
+
var m = "data-fx-teleported";
|
|
60
|
+
var L = {
|
|
61
|
+
append: () => {
|
|
62
|
+
},
|
|
63
|
+
remove: () => {
|
|
64
|
+
},
|
|
65
|
+
restore: () => {
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
function S(e, t, n = "move") {
|
|
69
|
+
var s;
|
|
61
70
|
if (!(e instanceof HTMLElement))
|
|
71
|
+
throw new Error("Source element must be an HTMLElement");
|
|
72
|
+
if (!(t instanceof HTMLElement))
|
|
62
73
|
throw new Error("Target element must be an HTMLElement");
|
|
63
74
|
if (!["move", "detachable"].includes(n))
|
|
64
75
|
throw new Error(`Invalid teleport mode: ${n}. Must be "move" or "detachable".`);
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
76
|
+
if ((s = e.parentElement) != null && s.closest(`[${E}]`))
|
|
77
|
+
return L;
|
|
78
|
+
e.setAttribute(E, "");
|
|
79
|
+
let a = document.createComment("teleporter-placeholder");
|
|
80
|
+
const i = e.parentNode;
|
|
81
|
+
return i && i.insertBefore(a, e), n === "move" ? (e.parentNode && (t.appendChild(e), e.setAttribute(m, "")), {
|
|
68
82
|
append() {
|
|
69
|
-
|
|
83
|
+
e.parentNode !== t && (t.appendChild(e), e.setAttribute(m, ""));
|
|
70
84
|
},
|
|
71
85
|
remove() {
|
|
72
|
-
|
|
86
|
+
a != null && a.parentNode && e.parentNode && a.parentNode.insertBefore(e, a);
|
|
73
87
|
},
|
|
74
88
|
restore() {
|
|
75
|
-
|
|
89
|
+
a != null && a.parentNode && e.parentNode !== i && a.parentNode.insertBefore(e, a);
|
|
76
90
|
}
|
|
77
|
-
}) : (
|
|
91
|
+
}) : (e.parentNode && (t.appendChild(e), e.setAttribute(m, "")), {
|
|
78
92
|
append() {
|
|
79
|
-
|
|
93
|
+
t.contains(e) || t.appendChild(e);
|
|
80
94
|
},
|
|
81
95
|
remove() {
|
|
82
|
-
|
|
96
|
+
e.parentNode && e.remove();
|
|
83
97
|
},
|
|
84
98
|
restore() {
|
|
85
|
-
|
|
99
|
+
a != null && a.parentNode && !e.parentNode && a.parentNode.insertBefore(e, a);
|
|
86
100
|
}
|
|
87
101
|
});
|
|
88
102
|
}
|
|
89
|
-
var
|
|
90
|
-
var
|
|
91
|
-
return (
|
|
103
|
+
var T = (e) => {
|
|
104
|
+
var t;
|
|
105
|
+
return (t = e.parentElement) == null ? void 0 : t.removeChild(e);
|
|
92
106
|
};
|
|
93
|
-
var
|
|
94
|
-
|
|
95
|
-
element:
|
|
107
|
+
var g = (e) => {
|
|
108
|
+
e.setAttribute("data-state", "invisible"), B({
|
|
109
|
+
element: e,
|
|
96
110
|
callback() {
|
|
97
|
-
|
|
111
|
+
T(e);
|
|
98
112
|
}
|
|
99
113
|
});
|
|
100
114
|
};
|
|
101
|
-
var x = (
|
|
102
|
-
const n =
|
|
115
|
+
var x = (e, t) => {
|
|
116
|
+
const n = e;
|
|
103
117
|
if (n === "" || !n)
|
|
104
118
|
return;
|
|
105
119
|
const s = document.createElement("div");
|
|
106
|
-
if (s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "visible"), s.setAttribute("data-fx-offcanvas-overlay", ""), s.setAttribute("data-offcanvas-el",
|
|
120
|
+
if (s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "visible"), s.setAttribute("data-fx-offcanvas-overlay", ""), s.setAttribute("data-offcanvas-el", t), n === "")
|
|
107
121
|
return;
|
|
108
122
|
const a = n.split(" ");
|
|
109
123
|
return n !== "" && s.classList.add(...a), s;
|
|
110
124
|
};
|
|
111
|
-
var
|
|
112
|
-
|
|
125
|
+
var C = (e, t, n) => {
|
|
126
|
+
e.setAttribute("aria-hidden", n === "open" ? "false" : "true"), e.setAttribute("data-state", n), t || $(n);
|
|
113
127
|
};
|
|
114
|
-
var
|
|
115
|
-
document.body.style.overflow =
|
|
128
|
+
var $ = (e) => {
|
|
129
|
+
document.body.style.overflow = e === "open" ? "hidden" : "", document.body.style.overflowY = e === "open" ? "hidden" : "auto";
|
|
116
130
|
};
|
|
117
|
-
var
|
|
118
|
-
if (
|
|
131
|
+
var N = (e, t) => {
|
|
132
|
+
if (e === t)
|
|
119
133
|
return;
|
|
120
|
-
|
|
121
|
-
const n =
|
|
122
|
-
n instanceof HTMLElement &&
|
|
134
|
+
e.setAttribute("aria-hidden", "true"), e.setAttribute("data-state", "close");
|
|
135
|
+
const n = u(`[data-fx-offcanvas-overlay][data-offcanvas-el=${e.getAttribute("id")}]`, e.parentElement);
|
|
136
|
+
n instanceof HTMLElement && g(n);
|
|
123
137
|
};
|
|
124
|
-
var
|
|
125
|
-
const
|
|
126
|
-
if (!(
|
|
127
|
-
for (const n of
|
|
128
|
-
|
|
138
|
+
var H = (e) => {
|
|
139
|
+
const t = v("[data-fx-offcanvas][data-state=open]");
|
|
140
|
+
if (!(t.length <= 0))
|
|
141
|
+
for (const n of t)
|
|
142
|
+
N(n, e);
|
|
129
143
|
};
|
|
130
144
|
var d = class {
|
|
131
145
|
static initGlobalRegistry() {
|
|
132
146
|
window.$flexillaInstances || (window.$flexillaInstances = {});
|
|
133
147
|
}
|
|
134
|
-
static register(
|
|
135
|
-
return this.initGlobalRegistry(), window.$flexillaInstances[
|
|
148
|
+
static register(t, n, s) {
|
|
149
|
+
return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, n) || (window.$flexillaInstances[t].push({ element: n, instance: s }), s);
|
|
136
150
|
}
|
|
137
|
-
static getInstance(
|
|
151
|
+
static getInstance(t, n) {
|
|
138
152
|
var s, a;
|
|
139
|
-
return this.initGlobalRegistry(), (a = (s = window.$flexillaInstances[
|
|
153
|
+
return this.initGlobalRegistry(), (a = (s = window.$flexillaInstances[t]) == null ? void 0 : s.find(
|
|
140
154
|
(i) => i.element === n
|
|
141
155
|
)) == null ? void 0 : a.instance;
|
|
142
156
|
}
|
|
143
|
-
static removeInstance(
|
|
144
|
-
this.initGlobalRegistry(), window.$flexillaInstances[
|
|
157
|
+
static removeInstance(t, n) {
|
|
158
|
+
this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
|
|
145
159
|
(s) => s.element !== n
|
|
146
160
|
));
|
|
147
161
|
}
|
|
148
|
-
static setup(
|
|
149
|
-
|
|
162
|
+
static setup(t) {
|
|
163
|
+
t.setAttribute("data-fx-component", "fx");
|
|
150
164
|
}
|
|
151
|
-
static initialized(
|
|
152
|
-
|
|
165
|
+
static initialized(t) {
|
|
166
|
+
t.setAttribute("data-component-initialized", "initialized");
|
|
153
167
|
}
|
|
154
168
|
};
|
|
155
|
-
var
|
|
169
|
+
var c = class c2 {
|
|
156
170
|
/**
|
|
157
171
|
* Creates an instance of Offcanvas.
|
|
158
172
|
* @param offcanvas - The offcanvas element selector or HTMLElement
|
|
@@ -170,49 +184,60 @@
|
|
|
170
184
|
* });
|
|
171
185
|
* ```
|
|
172
186
|
*/
|
|
173
|
-
constructor(
|
|
187
|
+
constructor(t, n = {}) {
|
|
174
188
|
o(this, "offCanvasElement");
|
|
175
189
|
o(this, "offCanvasTriggers");
|
|
176
190
|
o(this, "offCanvasCloseBtns");
|
|
191
|
+
o(this, "offCanvasId", "");
|
|
192
|
+
o(this, "dispatchEventToDocument");
|
|
177
193
|
o(this, "allowBodyScroll");
|
|
178
194
|
o(this, "staticBackdrop");
|
|
179
195
|
o(this, "backdrop");
|
|
180
196
|
o(this, "options");
|
|
181
197
|
o(this, "teleporter");
|
|
182
198
|
o(this, "moveElOnInit", () => {
|
|
183
|
-
|
|
199
|
+
I(() => this.teleporter.append());
|
|
184
200
|
});
|
|
185
|
-
o(this, "closeWhenClickOutSide", (
|
|
186
|
-
const n2 = this.offCanvasElement.getAttribute("data-state") === "open", s2 = !this.offCanvasElement.contains(
|
|
201
|
+
o(this, "closeWhenClickOutSide", (t2) => {
|
|
202
|
+
const n2 = this.offCanvasElement.getAttribute("data-state") === "open", s2 = !this.offCanvasElement.contains(t2.target) && ![...this.offCanvasTriggers].includes(t2.target);
|
|
187
203
|
n2 && s2 && this.closeOffCanvas();
|
|
188
204
|
});
|
|
189
205
|
o(this, "closeOffCanvas", () => {
|
|
190
|
-
var i2, l2,
|
|
191
|
-
let
|
|
206
|
+
var i2, l2, f2, r2, p;
|
|
207
|
+
let t2 = false;
|
|
192
208
|
if (h(this.offCanvasElement, "offcanvas-before-hide", {
|
|
193
209
|
offcanvasId: this.offCanvasElement.id,
|
|
194
|
-
setExitAction: (
|
|
195
|
-
|
|
210
|
+
setExitAction: (w) => {
|
|
211
|
+
t2 = w;
|
|
196
212
|
}
|
|
197
|
-
}), ((
|
|
213
|
+
}), ((f2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : f2.cancelAction) || t2)
|
|
198
214
|
return;
|
|
199
|
-
const s2 = this.offCanvasElement.getAttribute("id"), a2 =
|
|
200
|
-
a2 instanceof HTMLElement &&
|
|
215
|
+
const s2 = this.offCanvasElement.getAttribute("id"), a2 = u(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s2}]`);
|
|
216
|
+
a2 instanceof HTMLElement && g(a2), this.offCanvasElement.blur(), C(
|
|
201
217
|
this.offCanvasElement,
|
|
202
218
|
this.allowBodyScroll,
|
|
203
219
|
"close"
|
|
204
|
-
), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (p = (
|
|
220
|
+
), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (p = (r2 = this.options).onHide) == null || p.call(r2), h(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
|
|
221
|
+
});
|
|
222
|
+
o(this, "closeWithEsc", (t2) => {
|
|
223
|
+
t2.key === "Escape" && (t2.preventDefault(), this.closeOffCanvas());
|
|
205
224
|
});
|
|
206
|
-
o(this, "
|
|
207
|
-
|
|
225
|
+
o(this, "closeFromCloseBtn", (t2) => {
|
|
226
|
+
t2.target.blur(), this.closeOffCanvas();
|
|
208
227
|
});
|
|
209
228
|
o(this, "changeState", () => {
|
|
210
229
|
this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
|
|
211
230
|
});
|
|
212
|
-
o(this, "
|
|
213
|
-
|
|
231
|
+
o(this, "open", () => {
|
|
232
|
+
this.openOffCanvas();
|
|
214
233
|
});
|
|
215
|
-
|
|
234
|
+
o(this, "close", () => {
|
|
235
|
+
this.closeOffCanvas();
|
|
236
|
+
});
|
|
237
|
+
o(this, "setOptions", ({ allowBodyscroll: t2 }) => {
|
|
238
|
+
t2 !== void 0 && (this.allowBodyScroll = t2);
|
|
239
|
+
});
|
|
240
|
+
const s = typeof t == "string" ? u(t) : t;
|
|
216
241
|
if (!(s instanceof HTMLElement))
|
|
217
242
|
throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
|
|
218
243
|
this.offCanvasElement = s;
|
|
@@ -220,65 +245,42 @@
|
|
|
220
245
|
if (a)
|
|
221
246
|
return a;
|
|
222
247
|
d.setup(this.offCanvasElement), this.options = n;
|
|
223
|
-
const { staticBackdrop: i, allowBodyScroll: l, backdrop:
|
|
248
|
+
const { staticBackdrop: i, allowBodyScroll: l, backdrop: f } = this.options;
|
|
224
249
|
this.setupAttributes(), this.staticBackdrop = i || s.hasAttribute("data-static-backdrop") && s.dataset.staticBackdrop !== "false" || false, this.allowBodyScroll = l || s.hasAttribute("data-allow-body-scroll") && s.dataset.allowBodyScroll !== "false" || false;
|
|
225
|
-
const
|
|
226
|
-
|
|
250
|
+
const r = this.offCanvasElement.getAttribute("id");
|
|
251
|
+
if (!r || r === "")
|
|
252
|
+
throw new Error("\u274C id is required but missing on element:");
|
|
253
|
+
this.offCanvasId = r, this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, r), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, r, this.offCanvasElement), this.backdrop = f || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.dispatchEventToDocument = this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.teleporter = S(this.offCanvasElement, document.body, "move"), this.setupOffcanvas(), this.moveElOnInit(), d.register("offcanvas", this.offCanvasElement, this), d.initialized(this.offCanvasElement);
|
|
227
254
|
}
|
|
228
|
-
findOffCanvasElements(
|
|
229
|
-
return n ? v(`${
|
|
255
|
+
findOffCanvasElements(t, n, s, a) {
|
|
256
|
+
return n ? v(`${t}`, a) : v(`${t}[data-target=${s}]`);
|
|
230
257
|
}
|
|
231
258
|
setupAttributes() {
|
|
232
259
|
this.offCanvasElement.hasAttribute("data-fx-offcanvas") || this.offCanvasElement.setAttribute("data-fx-offcanvas", "");
|
|
233
260
|
}
|
|
234
261
|
openOffCanvas() {
|
|
235
262
|
var s, a, i, l;
|
|
236
|
-
(a = (s = this.options).beforeShow) == null || a.call(s),
|
|
263
|
+
(a = (s = this.options).beforeShow) == null || a.call(s), H(this.offCanvasElement), C(
|
|
237
264
|
this.offCanvasElement,
|
|
238
265
|
this.allowBodyScroll,
|
|
239
266
|
"open"
|
|
240
267
|
);
|
|
241
|
-
const
|
|
268
|
+
const t = this.offCanvasElement.getAttribute("id"), n = x(
|
|
242
269
|
this.backdrop,
|
|
243
|
-
|
|
270
|
+
t
|
|
244
271
|
);
|
|
245
|
-
n instanceof HTMLElement && (
|
|
272
|
+
n instanceof HTMLElement && (k({ newElement: n, existingElement: this.offCanvasElement }), this.staticBackdrop || n.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), h(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
|
|
246
273
|
}
|
|
247
274
|
initCloseBtns() {
|
|
248
|
-
for (const
|
|
249
|
-
|
|
275
|
+
for (const t of this.offCanvasCloseBtns)
|
|
276
|
+
t.addEventListener("click", this.closeFromCloseBtn);
|
|
250
277
|
}
|
|
251
278
|
initTriggers() {
|
|
252
|
-
for (const
|
|
253
|
-
|
|
279
|
+
for (const t of this.offCanvasTriggers)
|
|
280
|
+
t.addEventListener("click", this.changeState);
|
|
254
281
|
}
|
|
255
282
|
setupOffcanvas() {
|
|
256
|
-
this.initTriggers(), this.initCloseBtns();
|
|
257
|
-
}
|
|
258
|
-
/**
|
|
259
|
-
* Opens the offcanvas element.
|
|
260
|
-
* @example
|
|
261
|
-
* ```ts
|
|
262
|
-
* const offcanvas = new Offcanvas('#sidebar');
|
|
263
|
-
* offcanvas.open();
|
|
264
|
-
* ```
|
|
265
|
-
*/
|
|
266
|
-
open() {
|
|
267
|
-
this.openOffCanvas();
|
|
268
|
-
}
|
|
269
|
-
/**
|
|
270
|
-
* Closes the offcanvas element.
|
|
271
|
-
* This method will trigger the beforeHide callback if provided,
|
|
272
|
-
* remove the backdrop if present, and finally trigger the onHide callback.
|
|
273
|
-
*
|
|
274
|
-
* @example
|
|
275
|
-
* ```ts
|
|
276
|
-
* const offcanvas = new Offcanvas('#sidebar');
|
|
277
|
-
* offcanvas.close();
|
|
278
|
-
* ```
|
|
279
|
-
*/
|
|
280
|
-
close() {
|
|
281
|
-
this.closeOffCanvas();
|
|
283
|
+
this.initTriggers(), this.initCloseBtns(), this.dispatchEventToDocument && document.addEventListener(`sheet:${this.offCanvasId}:open`, this.open), this.dispatchEventToDocument && document.addEventListener(`sheet:${this.offCanvasId}:close`, this.close);
|
|
282
284
|
}
|
|
283
285
|
/**
|
|
284
286
|
* Cleans up the offcanvas instance by removing event listeners and references.
|
|
@@ -292,17 +294,17 @@
|
|
|
292
294
|
* ```
|
|
293
295
|
*/
|
|
294
296
|
cleanup() {
|
|
295
|
-
for (const
|
|
296
|
-
|
|
297
|
-
for (const
|
|
298
|
-
|
|
299
|
-
document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), d.removeInstance("offcanvas", this.offCanvasElement);
|
|
297
|
+
for (const t of this.offCanvasTriggers)
|
|
298
|
+
t.removeEventListener("click", this.changeState);
|
|
299
|
+
for (const t of this.offCanvasCloseBtns)
|
|
300
|
+
t.removeEventListener("click", this.closeOffCanvas);
|
|
301
|
+
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), d.removeInstance("offcanvas", this.offCanvasElement);
|
|
300
302
|
}
|
|
301
303
|
};
|
|
302
|
-
o(
|
|
303
|
-
const n = v(
|
|
304
|
+
o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
|
|
305
|
+
const n = v(t);
|
|
304
306
|
for (const s of n)
|
|
305
|
-
new
|
|
307
|
+
new c(s);
|
|
306
308
|
}), /**
|
|
307
309
|
* This is an alternative to using the constructor directly.
|
|
308
310
|
* @param offcanvas - The offcanvas element selector or HTMLElement
|
|
@@ -317,8 +319,8 @@
|
|
|
317
319
|
* });
|
|
318
320
|
* ```
|
|
319
321
|
*/
|
|
320
|
-
o(
|
|
321
|
-
var
|
|
322
|
+
o(c, "init", (t, n = {}) => new c(t, n));
|
|
323
|
+
var b = c;
|
|
322
324
|
|
|
323
325
|
// src/index.js
|
|
324
326
|
function Offcanvas(Alpine) {
|
|
@@ -328,7 +330,7 @@
|
|
|
328
330
|
console.error("\u274C id is required but missing on element:", el);
|
|
329
331
|
return;
|
|
330
332
|
}
|
|
331
|
-
const offcanvas_ = new
|
|
333
|
+
const offcanvas_ = new b(el);
|
|
332
334
|
if (!Alpine.store("sheets")) {
|
|
333
335
|
Alpine.store("sheets", {});
|
|
334
336
|
}
|
package/dist/cdn.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{var
|
|
1
|
+
(()=>{var A=Object.defineProperty,$=(t,e,n)=>e in t?A(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,o=(t,e,n)=>$(t,typeof e!="symbol"?e+"":e,n),b=(t,e=document.body)=>e.querySelector(t),u=(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.")},H=({element:t,callback:e,type:n,keysCheck:s})=>{let a=getComputedStyle(t),i=a.transition;if(i!=="none"&&i!==""&&!s.includes(i)){let r="transitionend",h=()=>{t.removeEventListener(r,h),e()};t.addEventListener(r,h,{once:!0})}else e()},N=({element:t,callback:e})=>{H({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)};function M(t){let e=()=>{document.querySelector("[data-fx-component]:not([data-component-initialized])")?requestAnimationFrame(e):t()};e()}var L="data-fx-teleport-root",C="data-fx-teleported",D={append:()=>{},remove:()=>{},restore:()=>{}};function W(t,e,n="move"){var s;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(n))throw new Error(`Invalid teleport mode: ${n}. Must be "move" or "detachable".`);if((s=t.parentElement)!=null&&s.closest(`[${L}]`))return D;t.setAttribute(L,"");let a=document.createComment("teleporter-placeholder"),i=t.parentNode;return i&&i.insertBefore(a,t),n==="move"?(t.parentNode&&(e.appendChild(t),t.setAttribute(C,"")),{append(){t.parentNode!==e&&(e.appendChild(t),t.setAttribute(C,""))},remove(){a!=null&&a.parentNode&&t.parentNode&&a.parentNode.insertBefore(t,a)},restore(){a!=null&&a.parentNode&&t.parentNode!==i&&a.parentNode.insertBefore(t,a)}}):(t.parentNode&&(e.appendChild(t),t.setAttribute(C,"")),{append(){e.contains(t)||e.appendChild(t)},remove(){t.parentNode&&t.remove()},restore(){a!=null&&a.parentNode&&!t.parentNode&&a.parentNode.insertBefore(t,a)}})}var q=t=>{var e;return(e=t.parentElement)==null?void 0:e.removeChild(t)},B=t=>{t.setAttribute("data-state","invisible"),N({element:t,callback(){q(t)}})},z=(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},k=(t,e,n)=>{t.setAttribute("aria-hidden",n==="open"?"false":"true"),t.setAttribute("data-state",n),e||F(n)},F=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=b(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`,t.parentElement);n instanceof HTMLElement&&B(n)},R=t=>{let e=u("[data-fx-offcanvas][data-state=open]");if(!(e.length<=0))for(let n of e)G(n,t)},f=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))}static setup(e){e.setAttribute("data-fx-component","fx")}static initialized(e){e.setAttribute("data-component-initialized","initialized")}},d=class{constructor(e,n={}){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",()=>{M(()=>this.teleporter.append())}),o(this,"closeWhenClickOutSide",l=>{let v=this.offCanvasElement.getAttribute("data-state")==="open",m=!this.offCanvasElement.contains(l.target)&&![...this.offCanvasTriggers].includes(l.target);v&&m&&this.closeOffCanvas()}),o(this,"closeOffCanvas",()=>{var l,v,m,w,g;let y=!1;if(E(this.offCanvasElement,"offcanvas-before-hide",{offcanvasId:this.offCanvasElement.id,setExitAction:T=>{y=T}}),((m=(v=(l=this.options).beforeHide)==null?void 0:v.call(l))==null?void 0:m.cancelAction)||y)return;let x=this.offCanvasElement.getAttribute("id"),p=b(`[data-fx-offcanvas-overlay][data-offcanvas-el=${x}]`);p instanceof HTMLElement&&B(p),this.offCanvasElement.blur(),k(this.offCanvasElement,this.allowBodyScroll,"close"),document.removeEventListener("keydown",this.closeWithEsc),!this.allowBodyScroll&&!p&&document.removeEventListener("click",this.closeWhenClickOutSide),(g=(w=this.options).onHide)==null||g.call(w),E(this.offCanvasElement,"offcanvas-close",{offcanvasId:this.offCanvasElement.id})}),o(this,"closeWithEsc",l=>{l.key==="Escape"&&(l.preventDefault(),this.closeOffCanvas())}),o(this,"closeFromCloseBtn",l=>{l.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:l})=>{l!==void 0&&(this.allowBodyScroll=l)});let s=typeof e=="string"?b(e):e;if(!(s instanceof HTMLElement))throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");this.offCanvasElement=s;let a=f.getInstance("offcanvas",s);if(a)return a;f.setup(this.offCanvasElement),this.options=n;let{staticBackdrop:i,allowBodyScroll:r,backdrop:h}=this.options;this.setupAttributes(),this.staticBackdrop=i||s.hasAttribute("data-static-backdrop")&&s.dataset.staticBackdrop!=="false"||!1,this.allowBodyScroll=r||s.hasAttribute("data-allow-body-scroll")&&s.dataset.allowBodyScroll!=="false"||!1;let c=this.offCanvasElement.getAttribute("id");if(!c||c==="")throw new Error("\u274C id is required but missing on element:");this.offCanvasId=c,this.offCanvasTriggers=this.findOffCanvasElements("[data-offcanvas-trigger]",!1,c),this.offCanvasCloseBtns=this.findOffCanvasElements("[data-offcanvas-close]",!0,c,this.offCanvasElement),this.backdrop=h||this.offCanvasElement.dataset.offcanvasBackdrop||"",this.dispatchEventToDocument=this.dispatchEventToDocument=this.options.dispatchEventToDocument||!0,this.teleporter=W(this.offCanvasElement,document.body,"move"),this.setupOffcanvas(),this.moveElOnInit(),f.register("offcanvas",this.offCanvasElement,this),f.initialized(this.offCanvasElement)}findOffCanvasElements(e,n,s,a){return n?u(`${e}`,a):u(`${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),k(this.offCanvasElement,this.allowBodyScroll,"open");let i=this.offCanvasElement.getAttribute("id"),r=z(this.backdrop,i);r instanceof HTMLElement&&(S({newElement:r,existingElement:this.offCanvasElement}),this.staticBackdrop||r.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.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),f.removeInstance("offcanvas",this.offCanvasElement)}};o(d,"autoInit",(t="[data-fx-offcanvas]")=>{let e=u(t);for(let n of e)new d(n)}),o(d,"init",(t,e={})=>new d(t,e));var I=d;function j(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 I(e);t.store("sheets")||t.store("sheets",{}),t.store("sheets")[s]=a;let i=()=>a.open(),r=()=>a.close();document.addEventListener(`sheet:${s}:open`,i),document.addEventListener(`sheet:${s}:close`,r),n(()=>{document.removeEventListener(`sheet:${s}:open`,i),document.removeEventListener(`sheet:${s}:close`,r),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 O=j;document.addEventListener("alpine:init",()=>{O(window.Alpine)});})();
|