vanilla-drawers 1.0.5 → 1.0.7
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/drawers.es.js +165 -164
- package/dist/drawers.umd.js +2 -2
- package/package.json +48 -48
package/dist/drawers.es.js
CHANGED
@@ -1,18 +1,18 @@
|
|
1
|
-
var Q = (r,
|
2
|
-
if (!
|
1
|
+
var Q = (r, n, e) => {
|
2
|
+
if (!n.has(r))
|
3
3
|
throw TypeError("Cannot " + e);
|
4
4
|
};
|
5
|
-
var
|
6
|
-
if (
|
5
|
+
var t = (r, n, e) => (Q(r, n, "read from private field"), e ? e.call(r) : n.get(r)), m = (r, n, e) => {
|
6
|
+
if (n.has(r))
|
7
7
|
throw TypeError("Cannot add the same private member more than once");
|
8
|
-
|
9
|
-
},
|
10
|
-
function
|
8
|
+
n instanceof WeakSet ? n.add(r) : n.set(r, e);
|
9
|
+
}, b = (r, n, e, l) => (Q(r, n, "write to private field"), l ? l.call(r, e) : n.set(r, e), e);
|
10
|
+
function ne(r) {
|
11
11
|
return r && r.__esModule && Object.prototype.hasOwnProperty.call(r, "default") ? r.default : r;
|
12
12
|
}
|
13
|
-
var
|
13
|
+
var re = { exports: {} };
|
14
14
|
(function(r) {
|
15
|
-
var
|
15
|
+
var n = Object.prototype.hasOwnProperty, e = "~";
|
16
16
|
function l() {
|
17
17
|
}
|
18
18
|
Object.create && (l.prototype = /* @__PURE__ */ Object.create(null), new l().__proto__ || (e = !1));
|
@@ -36,7 +36,7 @@ var ne = { exports: {} };
|
|
36
36
|
if (this._eventsCount === 0)
|
37
37
|
return i;
|
38
38
|
for (c in o = this._events)
|
39
|
-
|
39
|
+
n.call(o, c) && i.push(e ? c.slice(1) : c);
|
40
40
|
return Object.getOwnPropertySymbols ? i.concat(Object.getOwnPropertySymbols(o)) : i;
|
41
41
|
}, u.prototype.listeners = function(i) {
|
42
42
|
var o = e ? e + i : i, c = this._events[o];
|
@@ -74,8 +74,8 @@ var ne = { exports: {} };
|
|
74
74
|
k[y - 1] = arguments[y];
|
75
75
|
a.fn.apply(a.context, k);
|
76
76
|
} else {
|
77
|
-
var
|
78
|
-
for (y = 0; y <
|
77
|
+
var ie = a.length, N;
|
78
|
+
for (y = 0; y < ie; y++)
|
79
79
|
switch (a[y].once && this.removeListener(i, a[y].fn, void 0, !0), S) {
|
80
80
|
case 1:
|
81
81
|
a[y].fn.call(a[y].context);
|
@@ -91,8 +91,8 @@ var ne = { exports: {} };
|
|
91
91
|
break;
|
92
92
|
default:
|
93
93
|
if (!k)
|
94
|
-
for (
|
95
|
-
k[
|
94
|
+
for (N = 1, k = new Array(S - 1); N < S; N++)
|
95
|
+
k[N - 1] = arguments[N];
|
96
96
|
a[y].fn.apply(a[y].context, k);
|
97
97
|
}
|
98
98
|
}
|
@@ -120,80 +120,80 @@ var ne = { exports: {} };
|
|
120
120
|
var o;
|
121
121
|
return i ? (o = e ? e + i : i, this._events[o] && d(this, o)) : (this._events = new l(), this._eventsCount = 0), this;
|
122
122
|
}, u.prototype.off = u.prototype.removeListener, u.prototype.addListener = u.prototype.on, u.prefixed = e, u.EventEmitter = u, r.exports = u;
|
123
|
-
})(
|
124
|
-
var
|
125
|
-
const
|
126
|
-
var
|
127
|
-
return
|
123
|
+
})(re);
|
124
|
+
var oe = re.exports;
|
125
|
+
const ae = /* @__PURE__ */ ne(oe);
|
126
|
+
var le = function(n) {
|
127
|
+
return ce(n) && !he(n);
|
128
128
|
};
|
129
|
-
function le(r) {
|
130
|
-
return !!r && typeof r == "object";
|
131
|
-
}
|
132
129
|
function ce(r) {
|
133
|
-
|
134
|
-
return t === "[object RegExp]" || t === "[object Date]" || fe(r);
|
130
|
+
return !!r && typeof r == "object";
|
135
131
|
}
|
136
|
-
|
137
|
-
|
138
|
-
return
|
132
|
+
function he(r) {
|
133
|
+
var n = Object.prototype.toString.call(r);
|
134
|
+
return n === "[object RegExp]" || n === "[object Date]" || de(r);
|
139
135
|
}
|
136
|
+
var ue = typeof Symbol == "function" && Symbol.for, fe = ue ? Symbol.for("react.element") : 60103;
|
140
137
|
function de(r) {
|
138
|
+
return r.$$typeof === fe;
|
139
|
+
}
|
140
|
+
function pe(r) {
|
141
141
|
return Array.isArray(r) ? [] : {};
|
142
142
|
}
|
143
|
-
function
|
144
|
-
return
|
143
|
+
function R(r, n) {
|
144
|
+
return n.clone !== !1 && n.isMergeableObject(r) ? U(pe(r), r, n) : r;
|
145
145
|
}
|
146
|
-
function
|
147
|
-
return r.concat(
|
148
|
-
return
|
146
|
+
function we(r, n, e) {
|
147
|
+
return r.concat(n).map(function(l) {
|
148
|
+
return R(l, e);
|
149
149
|
});
|
150
150
|
}
|
151
|
-
function
|
152
|
-
if (!
|
153
|
-
return
|
154
|
-
var e =
|
155
|
-
return typeof e == "function" ? e :
|
151
|
+
function ye(r, n) {
|
152
|
+
if (!n.customMerge)
|
153
|
+
return U;
|
154
|
+
var e = n.customMerge(r);
|
155
|
+
return typeof e == "function" ? e : U;
|
156
156
|
}
|
157
|
-
function
|
158
|
-
return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(r).filter(function(
|
159
|
-
return Object.propertyIsEnumerable.call(r,
|
157
|
+
function me(r) {
|
158
|
+
return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(r).filter(function(n) {
|
159
|
+
return Object.propertyIsEnumerable.call(r, n);
|
160
160
|
}) : [];
|
161
161
|
}
|
162
162
|
function W(r) {
|
163
|
-
return Object.keys(r).concat(
|
163
|
+
return Object.keys(r).concat(me(r));
|
164
164
|
}
|
165
|
-
function
|
165
|
+
function se(r, n) {
|
166
166
|
try {
|
167
|
-
return
|
167
|
+
return n in r;
|
168
168
|
} catch {
|
169
169
|
return !1;
|
170
170
|
}
|
171
171
|
}
|
172
|
-
function be(r,
|
173
|
-
return
|
172
|
+
function be(r, n) {
|
173
|
+
return se(r, n) && !(Object.hasOwnProperty.call(r, n) && Object.propertyIsEnumerable.call(r, n));
|
174
174
|
}
|
175
|
-
function
|
175
|
+
function ge(r, n, e) {
|
176
176
|
var l = {};
|
177
177
|
return e.isMergeableObject(r) && W(r).forEach(function(s) {
|
178
|
-
l[s] =
|
179
|
-
}), W(
|
180
|
-
be(r, s) || (
|
178
|
+
l[s] = R(r[s], e);
|
179
|
+
}), W(n).forEach(function(s) {
|
180
|
+
be(r, s) || (se(r, s) && e.isMergeableObject(n[s]) ? l[s] = ye(s, e)(r[s], n[s], e) : l[s] = R(n[s], e));
|
181
181
|
}), l;
|
182
182
|
}
|
183
|
-
function
|
184
|
-
e = e || {}, e.arrayMerge = e.arrayMerge ||
|
185
|
-
var l = Array.isArray(
|
186
|
-
return f ? l ? e.arrayMerge(r,
|
183
|
+
function U(r, n, e) {
|
184
|
+
e = e || {}, e.arrayMerge = e.arrayMerge || we, e.isMergeableObject = e.isMergeableObject || le, e.cloneUnlessOtherwiseSpecified = R;
|
185
|
+
var l = Array.isArray(n), s = Array.isArray(r), f = l === s;
|
186
|
+
return f ? l ? e.arrayMerge(r, n, e) : ge(r, n, e) : R(n, e);
|
187
187
|
}
|
188
|
-
|
189
|
-
if (!Array.isArray(
|
188
|
+
U.all = function(n, e) {
|
189
|
+
if (!Array.isArray(n))
|
190
190
|
throw new Error("first argument should be an array");
|
191
|
-
return
|
192
|
-
return
|
191
|
+
return n.reduce(function(l, s) {
|
192
|
+
return U(l, s, e);
|
193
193
|
}, {});
|
194
194
|
};
|
195
|
-
var
|
196
|
-
const
|
195
|
+
var Oe = U, ve = Oe;
|
196
|
+
const Ee = /* @__PURE__ */ ne(ve);
|
197
197
|
/*!
|
198
198
|
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
|
199
199
|
*
|
@@ -204,16 +204,16 @@ function X(r) {
|
|
204
204
|
return Object.prototype.toString.call(r) === "[object Object]";
|
205
205
|
}
|
206
206
|
function Ae(r) {
|
207
|
-
var
|
208
|
-
return X(r) === !1 ? !1 : (
|
207
|
+
var n, e;
|
208
|
+
return X(r) === !1 ? !1 : (n = r.constructor, n === void 0 ? !0 : (e = n.prototype, !(X(e) === !1 || e.hasOwnProperty("isPrototypeOf") === !1)));
|
209
209
|
}
|
210
210
|
function J(r) {
|
211
211
|
return r instanceof Element ? r : document.querySelector(r);
|
212
212
|
}
|
213
213
|
async function H(r) {
|
214
|
-
return await new Promise((
|
214
|
+
return await new Promise((n) => setTimeout(n, r));
|
215
215
|
}
|
216
|
-
const
|
216
|
+
const Ce = '[data-elem="drawer.panel"]', K = "data-drawers-group", _e = [
|
217
217
|
"a[href]",
|
218
218
|
"area[href]",
|
219
219
|
'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
|
@@ -244,191 +244,192 @@ const Ee = '[data-elem="drawer.panel"]', $ = "data-drawers-group", Ce = [
|
|
244
244
|
lockPageScroll: !0
|
245
245
|
};
|
246
246
|
function ee(r) {
|
247
|
-
return
|
247
|
+
return Ee.all(r, {
|
248
248
|
isMergeableObject: Ae
|
249
249
|
});
|
250
250
|
}
|
251
|
-
var
|
251
|
+
var A, E, T, B;
|
252
252
|
class V {
|
253
|
-
constructor({ target:
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
const s = J(
|
253
|
+
constructor({ target: n, type: e, owner: l }) {
|
254
|
+
m(this, A, void 0);
|
255
|
+
m(this, E, void 0);
|
256
|
+
m(this, T, void 0);
|
257
|
+
m(this, B, !1);
|
258
|
+
const s = J(n);
|
259
259
|
if (!s)
|
260
260
|
throw new Error("Trigger element cannot be found");
|
261
|
-
|
261
|
+
b(this, A, s), b(this, E, l), b(this, T, e), this.init();
|
262
262
|
}
|
263
263
|
// Accessors
|
264
264
|
get isActive() {
|
265
|
-
return
|
265
|
+
return t(this, B);
|
266
266
|
}
|
267
267
|
get owner() {
|
268
|
-
return
|
268
|
+
return t(this, E);
|
269
269
|
}
|
270
270
|
// Methods
|
271
271
|
init() {
|
272
|
-
|
272
|
+
t(this, A).addEventListener("click", (n) => this.clickHandler(n)), t(this, E).on("open", () => this.setActive(!0)), t(this, E).on("close", () => this.setActive(!1));
|
273
273
|
}
|
274
|
-
clickHandler(
|
275
|
-
|
274
|
+
clickHandler(n) {
|
275
|
+
n.__drawerTrigger = this, t(this, T) === "open" ? t(this, E).isOpen || t(this, E).open(t(this, A)) : t(this, T) === "close" ? t(this, E).isOpen && t(this, E).close(t(this, A)) : t(this, E).isOpen ? t(this, E).close(t(this, A)) : t(this, E).open(t(this, A));
|
276
276
|
}
|
277
|
-
setActive(
|
278
|
-
|
277
|
+
setActive(n) {
|
278
|
+
b(this, B, n), n ? t(this, A).classList.add("drawer-trigger_active") : t(this, A).classList.remove("drawer-trigger_active");
|
279
279
|
}
|
280
280
|
}
|
281
|
-
|
282
|
-
var p,
|
283
|
-
class
|
281
|
+
A = new WeakMap(), E = new WeakMap(), T = new WeakMap(), B = new WeakMap();
|
282
|
+
var p, G, O, x, F, D;
|
283
|
+
class je extends ae {
|
284
284
|
constructor({ target: e, options: l }) {
|
285
285
|
super();
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
286
|
+
m(this, p, void 0);
|
287
|
+
m(this, G, void 0);
|
288
|
+
m(this, O, void 0);
|
289
|
+
m(this, x, void 0);
|
290
|
+
m(this, F, void 0);
|
291
|
+
m(this, D, void 0);
|
292
292
|
this.handleDocumentClick = async (u) => {
|
293
293
|
var o;
|
294
294
|
if (((o = u.__drawerTrigger) == null ? void 0 : o.owner) === this)
|
295
295
|
return;
|
296
296
|
const h = u.target;
|
297
|
-
if (u.composedPath(),
|
297
|
+
if (u.composedPath(), t(this, O).panel.contains(h))
|
298
298
|
return;
|
299
299
|
const i = h == null ? void 0 : h.closest("[data-drawer]");
|
300
|
-
i ? i.getAttribute("data-drawer") ===
|
300
|
+
i ? i.getAttribute("data-drawer") === t(this, D) ? this.handleUnderlayClick(u) : this.handleOtherDrawerClick(u) : this.handleOutsideClick(u);
|
301
301
|
}, this.handleKeydown = (u) => {
|
302
|
-
|
302
|
+
t(this, p).closeOnEsc && u.key === "Escape" && this.close();
|
303
303
|
};
|
304
304
|
const s = ee(l ? [Z, l] : [Z]), f = J(e);
|
305
305
|
if (f === null)
|
306
306
|
throw new Error("Drawer's root cannot be found");
|
307
|
-
|
307
|
+
b(this, D, f.getAttribute("data-drawer"));
|
308
|
+
const d = f.querySelector(Ce);
|
308
309
|
if (d === null)
|
309
|
-
throw new Error(
|
310
|
-
|
310
|
+
throw new Error(`Drawer's panel cannot be found. Alias: ${t(this, D)}`);
|
311
|
+
b(this, O, {
|
311
312
|
root: f,
|
312
313
|
panel: d
|
313
|
-
}),
|
314
|
+
}), this.setOptions(s), t(this, O).panel.setAttribute("tabindex", "-1"), t(this, O).root.classList.add("drawer_initialized");
|
314
315
|
}
|
315
316
|
addEventListeners() {
|
316
|
-
|
317
|
+
t(this, O).root.addEventListener("keydown", this.handleKeydown), document.addEventListener("click", this.handleDocumentClick);
|
317
318
|
}
|
318
319
|
removeEventListeners() {
|
319
|
-
|
320
|
+
t(this, O).root.removeEventListener("keydown", this.handleKeydown), document.removeEventListener("click", this.handleDocumentClick);
|
320
321
|
}
|
321
322
|
// Accessors
|
322
323
|
get isOpen() {
|
323
|
-
return
|
324
|
+
return t(this, x);
|
324
325
|
}
|
325
326
|
get isModal() {
|
326
|
-
return
|
327
|
+
return t(this, p).modal;
|
327
328
|
}
|
328
329
|
set isModal(e) {
|
329
|
-
|
330
|
+
t(this, O).root.classList[e ? "add" : "remove"]("drawer_modal");
|
330
331
|
}
|
331
332
|
set zIndex(e) {
|
332
|
-
|
333
|
+
t(this, O).root.style.setProperty("--z-index", String(e)), b(this, G, e);
|
333
334
|
}
|
334
335
|
get zIndex() {
|
335
|
-
return
|
336
|
+
return t(this, G);
|
336
337
|
}
|
337
338
|
// Methods
|
338
339
|
async open(e) {
|
339
|
-
await H(0), !
|
340
|
+
await H(0), !t(this, x) && (this.emit("beforeOpen", { drawer: this, trigger: e }), b(this, x, !0), t(this, O).root.classList.add(t(this, p).openClass), this.emit("open", { drawer: this, trigger: e }), typeof t(this, p).openAnimationDuration == "number" && H(t(this, p).openAnimationDuration), this.emit("openAnimationEnd", { drawer: this, trigger: e }), this.focus(), this.addEventListeners());
|
340
341
|
}
|
341
342
|
async close(e) {
|
342
|
-
|
343
|
+
t(this, p).onCloseConfirm && !t(this, p).onCloseConfirm(this, e) || (this.emit("beforeClose", { drawer: this, trigger: e }), this.removeEventListeners(), b(this, x, !1), t(this, O).root.classList.remove(t(this, p).openClass), this.emit("close", { drawer: this, trigger: e }), typeof t(this, p).closeAnimationDuration == "number" && H(t(this, p).closeAnimationDuration), this.emit("closeAnimationEnd", { drawer: this, trigger: e }));
|
343
344
|
}
|
344
345
|
handleOtherDrawerClick(e) {
|
345
346
|
}
|
346
347
|
handleOutsideClick(e) {
|
347
|
-
|
348
|
+
t(this, p).closeOnOutsideClick && (typeof t(this, p).closeOnOutsideClick == "object" && t(this, p).closeOnOutsideClick.hasOwnProperty("checkTarget") ? t(this, p).closeOnOutsideClick.checkTarget(e.target) && this.close() : this.close());
|
348
349
|
}
|
349
350
|
handleUnderlayClick(e) {
|
350
|
-
|
351
|
+
t(this, p).closeOnOutsideClick && this.close();
|
351
352
|
}
|
352
353
|
focus() {
|
353
|
-
|
354
|
+
t(this, p).focusOnChild && this.focusChild() || this.focusSelf();
|
354
355
|
}
|
355
356
|
focusSelf() {
|
356
|
-
|
357
|
+
t(this, O).panel.focus();
|
357
358
|
}
|
358
359
|
focusChild() {
|
359
|
-
const e =
|
360
|
+
const e = t(this, O).panel.querySelector(_e.join(","));
|
360
361
|
return e ? (e.focus(), !0) : !1;
|
361
362
|
}
|
362
363
|
setOptions(e) {
|
363
364
|
var l;
|
364
|
-
e.hasOwnProperty("modal") && ((l =
|
365
|
+
e.hasOwnProperty("modal") && ((l = t(this, p)) == null ? void 0 : l.modal) !== e.modal && (this.isModal = e.modal), b(this, p, t(this, p) ? ee([t(this, p), e]) : e);
|
365
366
|
}
|
366
367
|
assignGroup(e) {
|
367
|
-
|
368
|
+
b(this, F, e);
|
368
369
|
}
|
369
370
|
}
|
370
|
-
p = new WeakMap(),
|
371
|
-
var
|
372
|
-
class
|
373
|
-
constructor(
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
s.isModal ? (
|
371
|
+
p = new WeakMap(), G = new WeakMap(), O = new WeakMap(), x = new WeakMap(), F = new WeakMap(), D = new WeakMap();
|
372
|
+
var P, C, _, I, L, M;
|
373
|
+
class te {
|
374
|
+
constructor(n) {
|
375
|
+
m(this, P, void 0);
|
376
|
+
m(this, C, void 0);
|
377
|
+
m(this, _, void 0);
|
378
|
+
m(this, I, void 0);
|
379
|
+
m(this, L, void 0);
|
380
|
+
m(this, M, void 0);
|
381
|
+
b(this, C, []), b(this, _, []), b(this, L, /* @__PURE__ */ new Set()), b(this, M, /* @__PURE__ */ new Map()), this.onBeforeOpen = ({ drawer: s, trigger: f }) => {
|
382
|
+
s.isModal ? (t(this, M).set(s, t(this, C).length), t(this, C).push(s), s.zIndex = t(this, _).length + t(this, C).length) : (t(this, M).set(s, t(this, _).length), t(this, _).push(s), s.zIndex = t(this, _).length, t(this, C).length > 0 && t(this, C).forEach((d, u) => d.zIndex = t(this, _).length + u + 1)), this.lockScroll(s);
|
382
383
|
}, this.onCloseAnimationEnd = ({ drawer: s, trigger: f }) => {
|
383
|
-
const d = s.isModal ?
|
384
|
-
for (delete d[
|
384
|
+
const d = s.isModal ? t(this, C) : t(this, _);
|
385
|
+
for (delete d[t(this, M).get(s)]; d.length && !d.at(-1); )
|
385
386
|
d.pop();
|
386
|
-
|
387
|
+
t(this, M).delete(s), this.unlockScroll(s);
|
387
388
|
};
|
388
|
-
const e = J(
|
389
|
+
const e = J(n);
|
389
390
|
if (e === null)
|
390
391
|
throw new Error("Drawer's group root cannot be found");
|
391
|
-
|
392
|
-
const l =
|
392
|
+
b(this, P, e);
|
393
|
+
const l = t(this, P).closest("[data-scrollable], html") || t(this, P).matches("[data-scrollable], html") && t(this, P);
|
393
394
|
if (l === null)
|
394
395
|
throw new Error("Scrollable container for group root cannot be found");
|
395
|
-
|
396
|
+
b(this, I, l);
|
396
397
|
}
|
397
|
-
add(
|
398
|
-
|
398
|
+
add(n) {
|
399
|
+
n.on("beforeOpen", this.onBeforeOpen), n.on("closeAnimationEnd", this.onCloseAnimationEnd), n.assignGroup(this);
|
399
400
|
}
|
400
|
-
lockScroll(
|
401
|
-
|
401
|
+
lockScroll(n) {
|
402
|
+
t(this, L).size === 0 && t(this, I).classList.add("scroll-lock-by-drawer"), t(this, L).add(n);
|
402
403
|
}
|
403
|
-
unlockScroll(
|
404
|
-
|
404
|
+
unlockScroll(n) {
|
405
|
+
t(this, L).delete(n), t(this, L).size === 0 && t(this, I).classList.remove("scroll-lock-by-drawer");
|
405
406
|
}
|
406
407
|
}
|
407
|
-
|
408
|
-
var
|
409
|
-
const
|
408
|
+
P = new WeakMap(), C = new WeakMap(), _ = new WeakMap(), I = new WeakMap(), L = new WeakMap(), M = new WeakMap();
|
409
|
+
var $, z;
|
410
|
+
const q = class q {
|
410
411
|
constructor() {
|
411
|
-
|
412
|
-
|
413
|
-
if (
|
414
|
-
return
|
415
|
-
|
416
|
-
}
|
417
|
-
init(
|
418
|
-
document.querySelectorAll(`[${
|
419
|
-
const d = f.getAttribute(
|
420
|
-
typeof d == "string" &&
|
421
|
-
}), document.querySelectorAll("[data-drawer]").forEach((f) => {
|
412
|
+
m(this, $, /* @__PURE__ */ new Map());
|
413
|
+
m(this, z, /* @__PURE__ */ new Map());
|
414
|
+
if (q.instance)
|
415
|
+
return q.instance;
|
416
|
+
q.instance = this;
|
417
|
+
}
|
418
|
+
init(n) {
|
419
|
+
document.querySelectorAll(`[${K}]`).forEach((f) => {
|
420
|
+
const d = f.getAttribute(K);
|
421
|
+
typeof d == "string" && t(this, z).set(d, new te(f));
|
422
|
+
}), t(this, z).set("default", new te(document.documentElement)), document.querySelectorAll("[data-drawer]").forEach((f) => {
|
422
423
|
var o;
|
423
424
|
const d = f.getAttribute("data-drawer");
|
424
425
|
if (typeof d != "string")
|
425
426
|
return;
|
426
|
-
const u = new
|
427
|
-
|
428
|
-
const h = f.closest(`[${
|
427
|
+
const u = new je({ target: f, options: n });
|
428
|
+
t(this, $).set(d, u);
|
429
|
+
const h = f.closest(`[${K}]`), i = h ? h.getAttribute(K) : "default";
|
429
430
|
if (typeof i != "string")
|
430
431
|
throw new Error("Group doesn't have alias set correctly");
|
431
|
-
(o =
|
432
|
+
(o = t(this, z).get(i)) == null || o.add(u);
|
432
433
|
}), document.querySelectorAll("[data-drawer-open], [data-drawer-close], [data-drawer-toggle]").forEach((f) => {
|
433
434
|
if (f.hasAttribute("data-drawer-open")) {
|
434
435
|
const d = f.getAttribute("data-drawer-open");
|
@@ -442,24 +443,24 @@ const z = class z {
|
|
442
443
|
}
|
443
444
|
});
|
444
445
|
}
|
445
|
-
open(
|
446
|
+
open(n, { trigger: e, options: l } = {}) {
|
446
447
|
var s;
|
447
|
-
(s = this.get(
|
448
|
+
(s = this.get(n)) == null || s.open(e);
|
448
449
|
}
|
449
|
-
close(
|
450
|
+
close(n, { trigger: e, options: l } = {}) {
|
450
451
|
var s;
|
451
|
-
(s = this.get(
|
452
|
+
(s = this.get(n)) == null || s.close(e);
|
452
453
|
}
|
453
|
-
get(
|
454
|
-
return typeof
|
454
|
+
get(n) {
|
455
|
+
return typeof n == "string" && t(this, $).get(n) || null;
|
455
456
|
}
|
456
457
|
};
|
457
|
-
|
458
|
-
let Y =
|
458
|
+
$ = new WeakMap(), z = new WeakMap();
|
459
|
+
let Y = q;
|
459
460
|
typeof window < "u" && (window.hasOwnProperty("app") || (window.app = {}), window.app.drawers = new Y());
|
460
461
|
export {
|
461
|
-
|
462
|
-
|
462
|
+
je as Drawer,
|
463
|
+
te as DrawersGroup,
|
463
464
|
V as Trigger,
|
464
465
|
Y as default
|
465
466
|
};
|
package/dist/drawers.umd.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
-
(function(p,
|
1
|
+
(function(p,b){typeof exports=="object"&&typeof module<"u"?b(exports):typeof define=="function"&&define.amd?define(["exports"],b):(p=typeof globalThis<"u"?globalThis:p||self,b(p.Drawers={}))})(this,function(p){"use strict";var le=(p,b,_)=>{if(!b.has(p))throw TypeError("Cannot "+_)};var t=(p,b,_)=>(le(p,b,"read from private field"),_?_.call(p):b.get(p)),g=(p,b,_)=>{if(b.has(p))throw TypeError("Cannot add the same private member more than once");b instanceof WeakSet?b.add(p):b.set(p,_)},O=(p,b,_,V)=>(le(p,b,"write to private field"),V?V.call(p,_):b.set(p,_),_);var j,A,U,B,w,$,E,P,W,N,D,S,L,q,k,x,K,G;function b(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}var _={exports:{}};(function(r){var n=Object.prototype.hasOwnProperty,e="~";function c(){}Object.create&&(c.prototype=Object.create(null),new c().__proto__||(e=!1));function s(u,i,o){this.fn=u,this.context=i,this.once=o||!1}function f(u,i,o,a,C){if(typeof o!="function")throw new TypeError("The listener must be a function");var v=new s(o,a||u,C),y=e?e+i:i;return u._events[y]?u._events[y].fn?u._events[y]=[u._events[y],v]:u._events[y].push(v):(u._events[y]=v,u._eventsCount++),u}function d(u,i){--u._eventsCount===0?u._events=new c:delete u._events[i]}function h(){this._events=new c,this._eventsCount=0}h.prototype.eventNames=function(){var i=[],o,a;if(this._eventsCount===0)return i;for(a in o=this._events)n.call(o,a)&&i.push(e?a.slice(1):a);return Object.getOwnPropertySymbols?i.concat(Object.getOwnPropertySymbols(o)):i},h.prototype.listeners=function(i){var o=e?e+i:i,a=this._events[o];if(!a)return[];if(a.fn)return[a.fn];for(var C=0,v=a.length,y=new Array(v);C<v;C++)y[C]=a[C].fn;return y},h.prototype.listenerCount=function(i){var o=e?e+i:i,a=this._events[o];return a?a.fn?1:a.length:0},h.prototype.emit=function(i,o,a,C,v,y){var M=e?e+i:i;if(!this._events[M])return!1;var l=this._events[M],T=arguments.length,I,m;if(l.fn){switch(l.once&&this.removeListener(i,l.fn,void 0,!0),T){case 1:return l.fn.call(l.context),!0;case 2:return l.fn.call(l.context,o),!0;case 3:return l.fn.call(l.context,o,a),!0;case 4:return l.fn.call(l.context,o,a,C),!0;case 5:return l.fn.call(l.context,o,a,C,v),!0;case 6:return l.fn.call(l.context,o,a,C,v,y),!0}for(m=1,I=new Array(T-1);m<T;m++)I[m-1]=arguments[m];l.fn.apply(l.context,I)}else{var Se=l.length,H;for(m=0;m<Se;m++)switch(l[m].once&&this.removeListener(i,l[m].fn,void 0,!0),T){case 1:l[m].fn.call(l[m].context);break;case 2:l[m].fn.call(l[m].context,o);break;case 3:l[m].fn.call(l[m].context,o,a);break;case 4:l[m].fn.call(l[m].context,o,a,C);break;default:if(!I)for(H=1,I=new Array(T-1);H<T;H++)I[H-1]=arguments[H];l[m].fn.apply(l[m].context,I)}}return!0},h.prototype.on=function(i,o,a){return f(this,i,o,a,!1)},h.prototype.once=function(i,o,a){return f(this,i,o,a,!0)},h.prototype.removeListener=function(i,o,a,C){var v=e?e+i:i;if(!this._events[v])return this;if(!o)return d(this,v),this;var y=this._events[v];if(y.fn)y.fn===o&&(!C||y.once)&&(!a||y.context===a)&&d(this,v);else{for(var M=0,l=[],T=y.length;M<T;M++)(y[M].fn!==o||C&&!y[M].once||a&&y[M].context!==a)&&l.push(y[M]);l.length?this._events[v]=l.length===1?l[0]:l:d(this,v)}return this},h.prototype.removeAllListeners=function(i){var o;return i?(o=e?e+i:i,this._events[o]&&d(this,o)):(this._events=new c,this._eventsCount=0),this},h.prototype.off=h.prototype.removeListener,h.prototype.addListener=h.prototype.on,h.prefixed=e,h.EventEmitter=h,r.exports=h})(_);var V=_.exports;const ae=b(V);var ce=function(n){return ue(n)&&!he(n)};function ue(r){return!!r&&typeof r=="object"}function he(r){var n=Object.prototype.toString.call(r);return n==="[object RegExp]"||n==="[object Date]"||pe(r)}var fe=typeof Symbol=="function"&&Symbol.for,de=fe?Symbol.for("react.element"):60103;function pe(r){return r.$$typeof===de}function we(r){return Array.isArray(r)?[]:{}}function R(r,n){return n.clone!==!1&&n.isMergeableObject(r)?z(we(r),r,n):r}function ye(r,n,e){return r.concat(n).map(function(c){return R(c,e)})}function me(r,n){if(!n.customMerge)return z;var e=n.customMerge(r);return typeof e=="function"?e:z}function be(r){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(r).filter(function(n){return Object.propertyIsEnumerable.call(r,n)}):[]}function te(r){return Object.keys(r).concat(be(r))}function ne(r,n){try{return n in r}catch{return!1}}function ge(r,n){return ne(r,n)&&!(Object.hasOwnProperty.call(r,n)&&Object.propertyIsEnumerable.call(r,n))}function Oe(r,n,e){var c={};return e.isMergeableObject(r)&&te(r).forEach(function(s){c[s]=R(r[s],e)}),te(n).forEach(function(s){ge(r,s)||(ne(r,s)&&e.isMergeableObject(n[s])?c[s]=me(s,e)(r[s],n[s],e):c[s]=R(n[s],e))}),c}function z(r,n,e){e=e||{},e.arrayMerge=e.arrayMerge||ye,e.isMergeableObject=e.isMergeableObject||ce,e.cloneUnlessOtherwiseSpecified=R;var c=Array.isArray(n),s=Array.isArray(r),f=c===s;return f?c?e.arrayMerge(r,n,e):Oe(r,n,e):R(n,e)}z.all=function(n,e){if(!Array.isArray(n))throw new Error("first argument should be an array");return n.reduce(function(c,s){return z(c,s,e)},{})};var ve=z,Ee=ve;const Ae=b(Ee);/*!
|
2
2
|
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
|
3
3
|
*
|
4
4
|
* Copyright (c) 2014-2017, Jon Schlinkert.
|
5
5
|
* Released under the MIT License.
|
6
|
-
*/function
|
6
|
+
*/function re(r){return Object.prototype.toString.call(r)==="[object Object]"}function Ce(r){var n,e;return re(r)===!1?!1:(n=r.constructor,n===void 0?!0:(e=n.prototype,!(re(e)===!1||e.hasOwnProperty("isPrototypeOf")===!1)))}function X(r){return r instanceof Element?r:document.querySelector(r)}async function Z(r){return await new Promise(n=>setTimeout(n,r))}const _e='[data-elem="drawer.panel"]',Y="data-drawers-group",je=["a[href]","area[href]",'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',"select:not([disabled]):not([aria-hidden])","textarea:not([disabled]):not([aria-hidden])","button:not([disabled]):not([aria-hidden])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex^="-"])'],se={modal:!0,focusOnChild:!0,closeOnEsc:!0,closeOnOutsideClick:!0,closeOnUnderlayClick:!0,onCloseConfirm:()=>!0,onBeforeClose:null,onClose:null,onCloseAnimationEnd:null,onBeforeOpen:null,onOpen:null,onOpenAnimationEnd:null,openClass:"drawer_open",openAnimationDuration:0,closeAnimationDuration:0,lockPageScroll:!0};function ie(r){return Ae.all(r,{isMergeableObject:Ce})}class J{constructor({target:n,type:e,owner:c}){g(this,j,void 0);g(this,A,void 0);g(this,U,void 0);g(this,B,!1);const s=X(n);if(!s)throw new Error("Trigger element cannot be found");O(this,j,s),O(this,A,c),O(this,U,e),this.init()}get isActive(){return t(this,B)}get owner(){return t(this,A)}init(){t(this,j).addEventListener("click",n=>this.clickHandler(n)),t(this,A).on("open",()=>this.setActive(!0)),t(this,A).on("close",()=>this.setActive(!1))}clickHandler(n){n.__drawerTrigger=this,t(this,U)==="open"?t(this,A).isOpen||t(this,A).open(t(this,j)):t(this,U)==="close"?t(this,A).isOpen&&t(this,A).close(t(this,j)):t(this,A).isOpen?t(this,A).close(t(this,j)):t(this,A).open(t(this,j))}setActive(n){O(this,B,n),n?t(this,j).classList.add("drawer-trigger_active"):t(this,j).classList.remove("drawer-trigger_active")}}j=new WeakMap,A=new WeakMap,U=new WeakMap,B=new WeakMap;class oe extends ae{constructor({target:e,options:c}){super();g(this,w,void 0);g(this,$,void 0);g(this,E,void 0);g(this,P,void 0);g(this,W,void 0);g(this,N,void 0);this.handleDocumentClick=async h=>{var o;if(((o=h.__drawerTrigger)==null?void 0:o.owner)===this)return;const u=h.target;if(h.composedPath(),t(this,E).panel.contains(u))return;const i=u==null?void 0:u.closest("[data-drawer]");i?i.getAttribute("data-drawer")===t(this,N)?this.handleUnderlayClick(h):this.handleOtherDrawerClick(h):this.handleOutsideClick(h)},this.handleKeydown=h=>{t(this,w).closeOnEsc&&h.key==="Escape"&&this.close()};const s=ie(c?[se,c]:[se]),f=X(e);if(f===null)throw new Error("Drawer's root cannot be found");O(this,N,f.getAttribute("data-drawer"));const d=f.querySelector(_e);if(d===null)throw new Error(`Drawer's panel cannot be found. Alias: ${t(this,N)}`);O(this,E,{root:f,panel:d}),this.setOptions(s),t(this,E).panel.setAttribute("tabindex","-1"),t(this,E).root.classList.add("drawer_initialized")}addEventListeners(){t(this,E).root.addEventListener("keydown",this.handleKeydown),document.addEventListener("click",this.handleDocumentClick)}removeEventListeners(){t(this,E).root.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("click",this.handleDocumentClick)}get isOpen(){return t(this,P)}get isModal(){return t(this,w).modal}set isModal(e){t(this,E).root.classList[e?"add":"remove"]("drawer_modal")}set zIndex(e){t(this,E).root.style.setProperty("--z-index",String(e)),O(this,$,e)}get zIndex(){return t(this,$)}async open(e){await Z(0),!t(this,P)&&(this.emit("beforeOpen",{drawer:this,trigger:e}),O(this,P,!0),t(this,E).root.classList.add(t(this,w).openClass),this.emit("open",{drawer:this,trigger:e}),typeof t(this,w).openAnimationDuration=="number"&&Z(t(this,w).openAnimationDuration),this.emit("openAnimationEnd",{drawer:this,trigger:e}),this.focus(),this.addEventListeners())}async close(e){t(this,w).onCloseConfirm&&!t(this,w).onCloseConfirm(this,e)||(this.emit("beforeClose",{drawer:this,trigger:e}),this.removeEventListeners(),O(this,P,!1),t(this,E).root.classList.remove(t(this,w).openClass),this.emit("close",{drawer:this,trigger:e}),typeof t(this,w).closeAnimationDuration=="number"&&Z(t(this,w).closeAnimationDuration),this.emit("closeAnimationEnd",{drawer:this,trigger:e}))}handleOtherDrawerClick(e){}handleOutsideClick(e){t(this,w).closeOnOutsideClick&&(typeof t(this,w).closeOnOutsideClick=="object"&&t(this,w).closeOnOutsideClick.hasOwnProperty("checkTarget")?t(this,w).closeOnOutsideClick.checkTarget(e.target)&&this.close():this.close())}handleUnderlayClick(e){t(this,w).closeOnOutsideClick&&this.close()}focus(){t(this,w).focusOnChild&&this.focusChild()||this.focusSelf()}focusSelf(){t(this,E).panel.focus()}focusChild(){const e=t(this,E).panel.querySelector(je.join(","));return e?(e.focus(),!0):!1}setOptions(e){var c;e.hasOwnProperty("modal")&&((c=t(this,w))==null?void 0:c.modal)!==e.modal&&(this.isModal=e.modal),O(this,w,t(this,w)?ie([t(this,w),e]):e)}assignGroup(e){O(this,W,e)}}w=new WeakMap,$=new WeakMap,E=new WeakMap,P=new WeakMap,W=new WeakMap,N=new WeakMap;class ee{constructor(n){g(this,D,void 0);g(this,S,void 0);g(this,L,void 0);g(this,q,void 0);g(this,k,void 0);g(this,x,void 0);O(this,S,[]),O(this,L,[]),O(this,k,new Set),O(this,x,new Map),this.onBeforeOpen=({drawer:s,trigger:f})=>{s.isModal?(t(this,x).set(s,t(this,S).length),t(this,S).push(s),s.zIndex=t(this,L).length+t(this,S).length):(t(this,x).set(s,t(this,L).length),t(this,L).push(s),s.zIndex=t(this,L).length,t(this,S).length>0&&t(this,S).forEach((d,h)=>d.zIndex=t(this,L).length+h+1)),this.lockScroll(s)},this.onCloseAnimationEnd=({drawer:s,trigger:f})=>{const d=s.isModal?t(this,S):t(this,L);for(delete d[t(this,x).get(s)];d.length&&!d.at(-1);)d.pop();t(this,x).delete(s),this.unlockScroll(s)};const e=X(n);if(e===null)throw new Error("Drawer's group root cannot be found");O(this,D,e);const c=t(this,D).closest("[data-scrollable], html")||t(this,D).matches("[data-scrollable], html")&&t(this,D);if(c===null)throw new Error("Scrollable container for group root cannot be found");O(this,q,c)}add(n){n.on("beforeOpen",this.onBeforeOpen),n.on("closeAnimationEnd",this.onCloseAnimationEnd),n.assignGroup(this)}lockScroll(n){t(this,k).size===0&&t(this,q).classList.add("scroll-lock-by-drawer"),t(this,k).add(n)}unlockScroll(n){t(this,k).delete(n),t(this,k).size===0&&t(this,q).classList.remove("scroll-lock-by-drawer")}}D=new WeakMap,S=new WeakMap,L=new WeakMap,q=new WeakMap,k=new WeakMap,x=new WeakMap;const F=class F{constructor(){g(this,K,new Map);g(this,G,new Map);if(F.instance)return F.instance;F.instance=this}init(n){document.querySelectorAll(`[${Y}]`).forEach(f=>{const d=f.getAttribute(Y);typeof d=="string"&&t(this,G).set(d,new ee(f))}),t(this,G).set("default",new ee(document.documentElement)),document.querySelectorAll("[data-drawer]").forEach(f=>{var o;const d=f.getAttribute("data-drawer");if(typeof d!="string")return;const h=new oe({target:f,options:n});t(this,K).set(d,h);const u=f.closest(`[${Y}]`),i=u?u.getAttribute(Y):"default";if(typeof i!="string")throw new Error("Group doesn't have alias set correctly");(o=t(this,G).get(i))==null||o.add(h)}),document.querySelectorAll("[data-drawer-open], [data-drawer-close], [data-drawer-toggle]").forEach(f=>{if(f.hasAttribute("data-drawer-open")){const d=f.getAttribute("data-drawer-open");new J({target:f,type:"open",owner:this.get(d)})}else if(f.hasAttribute("data-drawer-close")){const d=f.getAttribute("data-drawer-close");new J({target:f,type:"close",owner:this.get(d)})}else{const d=f.getAttribute("data-drawer-toggle");new J({target:f,type:"toggle",owner:this.get(d)})}})}open(n,{trigger:e,options:c}={}){var s;(s=this.get(n))==null||s.open(e)}close(n,{trigger:e,options:c}={}){var s;(s=this.get(n))==null||s.close(e)}get(n){return typeof n=="string"&&t(this,K).get(n)||null}};K=new WeakMap,G=new WeakMap;let Q=F;typeof window<"u"&&(window.hasOwnProperty("app")||(window.app={}),window.app.drawers=new Q),p.Drawer=oe,p.DrawersGroup=ee,p.Trigger=J,p.default=Q,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
@@ -1,48 +1,48 @@
|
|
1
|
-
{
|
2
|
-
"name": "vanilla-drawers",
|
3
|
-
"version": "1.0.
|
4
|
-
"description": "Drawers controller.",
|
5
|
-
"files": [
|
6
|
-
"dist"
|
7
|
-
],
|
8
|
-
"main": "./dist/drawers.umd.js",
|
9
|
-
"module": "./dist/drawers.js",
|
10
|
-
"type": "module",
|
11
|
-
"exports": {
|
12
|
-
".": {
|
13
|
-
"import": "./dist/drawers.js",
|
14
|
-
"require": "./dist/drawers.umd.js"
|
15
|
-
}
|
16
|
-
},
|
17
|
-
"
|
18
|
-
"
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
"
|
23
|
-
|
24
|
-
|
25
|
-
"
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
"
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
"@babel/
|
38
|
-
"
|
39
|
-
"
|
40
|
-
"
|
41
|
-
"
|
42
|
-
"
|
43
|
-
"
|
44
|
-
|
45
|
-
|
46
|
-
"
|
47
|
-
}
|
48
|
-
}
|
1
|
+
{
|
2
|
+
"name": "vanilla-drawers",
|
3
|
+
"version": "1.0.7",
|
4
|
+
"description": "Drawers controller.",
|
5
|
+
"files": [
|
6
|
+
"dist"
|
7
|
+
],
|
8
|
+
"main": "./dist/drawers.umd.js",
|
9
|
+
"module": "./dist/drawers.js",
|
10
|
+
"type": "module",
|
11
|
+
"exports": {
|
12
|
+
".": {
|
13
|
+
"import": "./dist/drawers.js",
|
14
|
+
"require": "./dist/drawers.umd.js"
|
15
|
+
}
|
16
|
+
},
|
17
|
+
"scripts": {
|
18
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
19
|
+
},
|
20
|
+
"repository": {
|
21
|
+
"type": "git",
|
22
|
+
"url": "git+https://github.com/techno-trump/drawers.git"
|
23
|
+
},
|
24
|
+
"keywords": [
|
25
|
+
"drawer",
|
26
|
+
"popup",
|
27
|
+
"modal",
|
28
|
+
"dialog"
|
29
|
+
],
|
30
|
+
"author": "Anton Kalinichenko",
|
31
|
+
"license": "GPL-3.0",
|
32
|
+
"bugs": {
|
33
|
+
"url": "https://github.com/techno-trump/drawers/issues"
|
34
|
+
},
|
35
|
+
"homepage": "https://github.com/techno-trump/drawers#readme",
|
36
|
+
"devDependencies": {
|
37
|
+
"@babel/core": "^7.23.6",
|
38
|
+
"@babel/plugin-transform-class-properties": "^7.23.3",
|
39
|
+
"@babel/preset-env": "^7.23.6",
|
40
|
+
"@babel/preset-typescript": "^7.23.3",
|
41
|
+
"deepmerge": "^4.3.1",
|
42
|
+
"eslint": "^8.56.0",
|
43
|
+
"eventemitter3": "^5.0.1",
|
44
|
+
"is-plain-object": "^5.0.0",
|
45
|
+
"typescript": "^5.3.3",
|
46
|
+
"vite": "^5.0.10"
|
47
|
+
}
|
48
|
+
}
|