vanilla-drawers 1.0.16 → 1.1.17
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 +231 -213
- package/dist/drawers.umd.js +2 -2
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/drawers.es.js
CHANGED
|
@@ -2,124 +2,124 @@ var W = (n, t, e) => {
|
|
|
2
2
|
if (!t.has(n))
|
|
3
3
|
throw TypeError("Cannot " + e);
|
|
4
4
|
};
|
|
5
|
-
var r = (n, t, e) => (W(n, t, "read from private field"), e ? e.call(n) : t.get(n)),
|
|
5
|
+
var r = (n, t, e) => (W(n, t, "read from private field"), e ? e.call(n) : t.get(n)), m = (n, t, e) => {
|
|
6
6
|
if (t.has(n))
|
|
7
7
|
throw TypeError("Cannot add the same private member more than once");
|
|
8
8
|
t instanceof WeakSet ? t.add(n) : t.set(n, e);
|
|
9
|
-
},
|
|
9
|
+
}, v = (n, t, e, a) => (W(n, t, "write to private field"), a ? a.call(n, e) : t.set(n, e), e);
|
|
10
10
|
function ne(n) {
|
|
11
11
|
return n && n.__esModule && Object.prototype.hasOwnProperty.call(n, "default") ? n.default : n;
|
|
12
12
|
}
|
|
13
13
|
var re = { exports: {} };
|
|
14
14
|
(function(n) {
|
|
15
15
|
var t = Object.prototype.hasOwnProperty, e = "~";
|
|
16
|
-
function
|
|
16
|
+
function a() {
|
|
17
17
|
}
|
|
18
|
-
Object.create && (
|
|
19
|
-
function
|
|
20
|
-
this.fn =
|
|
18
|
+
Object.create && (a.prototype = /* @__PURE__ */ Object.create(null), new a().__proto__ || (e = !1));
|
|
19
|
+
function l(o, i, c) {
|
|
20
|
+
this.fn = o, this.context = i, this.once = c || !1;
|
|
21
21
|
}
|
|
22
|
-
function
|
|
23
|
-
if (typeof
|
|
22
|
+
function g(o, i, c, h, b) {
|
|
23
|
+
if (typeof c != "function")
|
|
24
24
|
throw new TypeError("The listener must be a function");
|
|
25
|
-
var
|
|
26
|
-
return
|
|
25
|
+
var y = new l(c, h || o, b), d = e ? e + i : i;
|
|
26
|
+
return o._events[d] ? o._events[d].fn ? o._events[d] = [o._events[d], y] : o._events[d].push(y) : (o._events[d] = y, o._eventsCount++), o;
|
|
27
27
|
}
|
|
28
|
-
function
|
|
29
|
-
--
|
|
28
|
+
function p(o, i) {
|
|
29
|
+
--o._eventsCount === 0 ? o._events = new a() : delete o._events[i];
|
|
30
30
|
}
|
|
31
|
-
function
|
|
32
|
-
this._events = new
|
|
31
|
+
function s() {
|
|
32
|
+
this._events = new a(), this._eventsCount = 0;
|
|
33
33
|
}
|
|
34
|
-
|
|
35
|
-
var i = [],
|
|
34
|
+
s.prototype.eventNames = function() {
|
|
35
|
+
var i = [], c, h;
|
|
36
36
|
if (this._eventsCount === 0)
|
|
37
37
|
return i;
|
|
38
|
-
for (
|
|
39
|
-
t.call(
|
|
40
|
-
return Object.getOwnPropertySymbols ? i.concat(Object.getOwnPropertySymbols(
|
|
41
|
-
},
|
|
42
|
-
var
|
|
43
|
-
if (!
|
|
38
|
+
for (h in c = this._events)
|
|
39
|
+
t.call(c, h) && i.push(e ? h.slice(1) : h);
|
|
40
|
+
return Object.getOwnPropertySymbols ? i.concat(Object.getOwnPropertySymbols(c)) : i;
|
|
41
|
+
}, s.prototype.listeners = function(i) {
|
|
42
|
+
var c = e ? e + i : i, h = this._events[c];
|
|
43
|
+
if (!h)
|
|
44
44
|
return [];
|
|
45
|
-
if (
|
|
46
|
-
return [
|
|
47
|
-
for (var
|
|
48
|
-
|
|
49
|
-
return
|
|
50
|
-
},
|
|
51
|
-
var
|
|
52
|
-
return
|
|
53
|
-
},
|
|
45
|
+
if (h.fn)
|
|
46
|
+
return [h.fn];
|
|
47
|
+
for (var b = 0, y = h.length, d = new Array(y); b < y; b++)
|
|
48
|
+
d[b] = h[b].fn;
|
|
49
|
+
return d;
|
|
50
|
+
}, s.prototype.listenerCount = function(i) {
|
|
51
|
+
var c = e ? e + i : i, h = this._events[c];
|
|
52
|
+
return h ? h.fn ? 1 : h.length : 0;
|
|
53
|
+
}, s.prototype.emit = function(i, c, h, b, y, d) {
|
|
54
54
|
var _ = e ? e + i : i;
|
|
55
55
|
if (!this._events[_])
|
|
56
56
|
return !1;
|
|
57
|
-
var
|
|
58
|
-
if (
|
|
59
|
-
switch (
|
|
57
|
+
var u = this._events[_], L = arguments.length, S, w;
|
|
58
|
+
if (u.fn) {
|
|
59
|
+
switch (u.once && this.removeListener(i, u.fn, void 0, !0), L) {
|
|
60
60
|
case 1:
|
|
61
|
-
return
|
|
61
|
+
return u.fn.call(u.context), !0;
|
|
62
62
|
case 2:
|
|
63
|
-
return
|
|
63
|
+
return u.fn.call(u.context, c), !0;
|
|
64
64
|
case 3:
|
|
65
|
-
return
|
|
65
|
+
return u.fn.call(u.context, c, h), !0;
|
|
66
66
|
case 4:
|
|
67
|
-
return
|
|
67
|
+
return u.fn.call(u.context, c, h, b), !0;
|
|
68
68
|
case 5:
|
|
69
|
-
return
|
|
69
|
+
return u.fn.call(u.context, c, h, b, y), !0;
|
|
70
70
|
case 6:
|
|
71
|
-
return
|
|
71
|
+
return u.fn.call(u.context, c, h, b, y, d), !0;
|
|
72
72
|
}
|
|
73
|
-
for (
|
|
74
|
-
S[
|
|
75
|
-
|
|
73
|
+
for (w = 1, S = new Array(L - 1); w < L; w++)
|
|
74
|
+
S[w - 1] = arguments[w];
|
|
75
|
+
u.fn.apply(u.context, S);
|
|
76
76
|
} else {
|
|
77
|
-
var oe =
|
|
78
|
-
for (
|
|
79
|
-
switch (
|
|
77
|
+
var oe = u.length, N;
|
|
78
|
+
for (w = 0; w < oe; w++)
|
|
79
|
+
switch (u[w].once && this.removeListener(i, u[w].fn, void 0, !0), L) {
|
|
80
80
|
case 1:
|
|
81
|
-
|
|
81
|
+
u[w].fn.call(u[w].context);
|
|
82
82
|
break;
|
|
83
83
|
case 2:
|
|
84
|
-
|
|
84
|
+
u[w].fn.call(u[w].context, c);
|
|
85
85
|
break;
|
|
86
86
|
case 3:
|
|
87
|
-
|
|
87
|
+
u[w].fn.call(u[w].context, c, h);
|
|
88
88
|
break;
|
|
89
89
|
case 4:
|
|
90
|
-
|
|
90
|
+
u[w].fn.call(u[w].context, c, h, b);
|
|
91
91
|
break;
|
|
92
92
|
default:
|
|
93
93
|
if (!S)
|
|
94
|
-
for (N = 1, S = new Array(
|
|
94
|
+
for (N = 1, S = new Array(L - 1); N < L; N++)
|
|
95
95
|
S[N - 1] = arguments[N];
|
|
96
|
-
|
|
96
|
+
u[w].fn.apply(u[w].context, S);
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
return !0;
|
|
100
|
-
},
|
|
101
|
-
return
|
|
102
|
-
},
|
|
103
|
-
return
|
|
104
|
-
},
|
|
105
|
-
var
|
|
106
|
-
if (!this._events[
|
|
100
|
+
}, s.prototype.on = function(i, c, h) {
|
|
101
|
+
return g(this, i, c, h, !1);
|
|
102
|
+
}, s.prototype.once = function(i, c, h) {
|
|
103
|
+
return g(this, i, c, h, !0);
|
|
104
|
+
}, s.prototype.removeListener = function(i, c, h, b) {
|
|
105
|
+
var y = e ? e + i : i;
|
|
106
|
+
if (!this._events[y])
|
|
107
107
|
return this;
|
|
108
|
-
if (!
|
|
109
|
-
return
|
|
110
|
-
var
|
|
111
|
-
if (
|
|
112
|
-
|
|
108
|
+
if (!c)
|
|
109
|
+
return p(this, y), this;
|
|
110
|
+
var d = this._events[y];
|
|
111
|
+
if (d.fn)
|
|
112
|
+
d.fn === c && (!b || d.once) && (!h || d.context === h) && p(this, y);
|
|
113
113
|
else {
|
|
114
|
-
for (var _ = 0,
|
|
115
|
-
(
|
|
116
|
-
|
|
114
|
+
for (var _ = 0, u = [], L = d.length; _ < L; _++)
|
|
115
|
+
(d[_].fn !== c || b && !d[_].once || h && d[_].context !== h) && u.push(d[_]);
|
|
116
|
+
u.length ? this._events[y] = u.length === 1 ? u[0] : u : p(this, y);
|
|
117
117
|
}
|
|
118
118
|
return this;
|
|
119
|
-
},
|
|
120
|
-
var
|
|
121
|
-
return i ? (
|
|
122
|
-
},
|
|
119
|
+
}, s.prototype.removeAllListeners = function(i) {
|
|
120
|
+
var c;
|
|
121
|
+
return i ? (c = e ? e + i : i, this._events[c] && p(this, c)) : (this._events = new a(), this._eventsCount = 0), this;
|
|
122
|
+
}, s.prototype.off = s.prototype.removeListener, s.prototype.addListener = s.prototype.on, s.prefixed = e, s.EventEmitter = s, n.exports = s;
|
|
123
123
|
})(re);
|
|
124
124
|
var ie = re.exports;
|
|
125
125
|
const le = /* @__PURE__ */ ne(ie);
|
|
@@ -140,12 +140,12 @@ function de(n) {
|
|
|
140
140
|
function pe(n) {
|
|
141
141
|
return Array.isArray(n) ? [] : {};
|
|
142
142
|
}
|
|
143
|
-
function
|
|
143
|
+
function R(n, t) {
|
|
144
144
|
return t.clone !== !1 && t.isMergeableObject(n) ? U(pe(n), n, t) : n;
|
|
145
145
|
}
|
|
146
146
|
function we(n, t, e) {
|
|
147
|
-
return n.concat(t).map(function(
|
|
148
|
-
return
|
|
147
|
+
return n.concat(t).map(function(a) {
|
|
148
|
+
return R(a, e);
|
|
149
149
|
});
|
|
150
150
|
}
|
|
151
151
|
function me(n, t) {
|
|
@@ -154,13 +154,13 @@ function me(n, t) {
|
|
|
154
154
|
var e = t.customMerge(n);
|
|
155
155
|
return typeof e == "function" ? e : U;
|
|
156
156
|
}
|
|
157
|
-
function
|
|
157
|
+
function be(n) {
|
|
158
158
|
return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(n).filter(function(t) {
|
|
159
159
|
return Object.propertyIsEnumerable.call(n, t);
|
|
160
160
|
}) : [];
|
|
161
161
|
}
|
|
162
162
|
function X(n) {
|
|
163
|
-
return Object.keys(n).concat(
|
|
163
|
+
return Object.keys(n).concat(be(n));
|
|
164
164
|
}
|
|
165
165
|
function se(n, t) {
|
|
166
166
|
try {
|
|
@@ -172,28 +172,28 @@ function se(n, t) {
|
|
|
172
172
|
function ge(n, t) {
|
|
173
173
|
return se(n, t) && !(Object.hasOwnProperty.call(n, t) && Object.propertyIsEnumerable.call(n, t));
|
|
174
174
|
}
|
|
175
|
-
function
|
|
176
|
-
var
|
|
177
|
-
return e.isMergeableObject(n) && X(n).forEach(function(
|
|
178
|
-
|
|
179
|
-
}), X(t).forEach(function(
|
|
180
|
-
ge(n,
|
|
181
|
-
}),
|
|
175
|
+
function ye(n, t, e) {
|
|
176
|
+
var a = {};
|
|
177
|
+
return e.isMergeableObject(n) && X(n).forEach(function(l) {
|
|
178
|
+
a[l] = R(n[l], e);
|
|
179
|
+
}), X(t).forEach(function(l) {
|
|
180
|
+
ge(n, l) || (se(n, l) && e.isMergeableObject(t[l]) ? a[l] = me(l, e)(n[l], t[l], e) : a[l] = R(t[l], e));
|
|
181
|
+
}), a;
|
|
182
182
|
}
|
|
183
183
|
function U(n, t, e) {
|
|
184
|
-
e = e || {}, e.arrayMerge = e.arrayMerge || we, e.isMergeableObject = e.isMergeableObject || ae, e.cloneUnlessOtherwiseSpecified =
|
|
185
|
-
var
|
|
186
|
-
return
|
|
184
|
+
e = e || {}, e.arrayMerge = e.arrayMerge || we, e.isMergeableObject = e.isMergeableObject || ae, e.cloneUnlessOtherwiseSpecified = R;
|
|
185
|
+
var a = Array.isArray(t), l = Array.isArray(n), g = a === l;
|
|
186
|
+
return g ? a ? e.arrayMerge(n, t, e) : ye(n, t, e) : R(t, e);
|
|
187
187
|
}
|
|
188
188
|
U.all = function(t, e) {
|
|
189
189
|
if (!Array.isArray(t))
|
|
190
190
|
throw new Error("first argument should be an array");
|
|
191
|
-
return t.reduce(function(
|
|
192
|
-
return U(
|
|
191
|
+
return t.reduce(function(a, l) {
|
|
192
|
+
return U(a, l, e);
|
|
193
193
|
}, {});
|
|
194
194
|
};
|
|
195
|
-
var
|
|
196
|
-
const
|
|
195
|
+
var ve = U, Oe = ve;
|
|
196
|
+
const Ae = /* @__PURE__ */ ne(Oe);
|
|
197
197
|
/*!
|
|
198
198
|
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
|
|
199
199
|
*
|
|
@@ -203,7 +203,7 @@ const Ee = /* @__PURE__ */ ne(ve);
|
|
|
203
203
|
function Z(n) {
|
|
204
204
|
return Object.prototype.toString.call(n) === "[object Object]";
|
|
205
205
|
}
|
|
206
|
-
function
|
|
206
|
+
function Ee(n) {
|
|
207
207
|
var t, e;
|
|
208
208
|
return Z(n) === !1 ? !1 : (t = n.constructor, t === void 0 ? !0 : (e = t.prototype, !(Z(e) === !1 || e.hasOwnProperty("isPrototypeOf") === !1)));
|
|
209
209
|
}
|
|
@@ -239,78 +239,82 @@ const Ce = '[data-elem="drawer.panel"]', F = "data-drawers-group", _e = [
|
|
|
239
239
|
onOpen: null,
|
|
240
240
|
onOpenAnimationEnd: null,
|
|
241
241
|
openClass: "drawer_open",
|
|
242
|
+
closingClass: "drawer_closing",
|
|
243
|
+
openingClass: "drawer_opening",
|
|
242
244
|
openAnimationDuration: 0,
|
|
243
245
|
closeAnimationDuration: 0,
|
|
244
246
|
lockPageScroll: !0
|
|
245
247
|
};
|
|
246
248
|
function te(n) {
|
|
247
|
-
return
|
|
248
|
-
isMergeableObject:
|
|
249
|
+
return Ae.all(n, {
|
|
250
|
+
isMergeableObject: Ee
|
|
249
251
|
});
|
|
250
252
|
}
|
|
251
|
-
var
|
|
253
|
+
var A, O, P, B;
|
|
252
254
|
class Y {
|
|
253
|
-
constructor({ target: t, type: e, owner:
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
const
|
|
259
|
-
if (!
|
|
255
|
+
constructor({ target: t, type: e, owner: a }) {
|
|
256
|
+
m(this, A, void 0);
|
|
257
|
+
m(this, O, void 0);
|
|
258
|
+
m(this, P, void 0);
|
|
259
|
+
m(this, B, !1);
|
|
260
|
+
const l = Q(t);
|
|
261
|
+
if (!l)
|
|
260
262
|
throw new Error("Trigger element cannot be found");
|
|
261
|
-
|
|
263
|
+
if (!a)
|
|
264
|
+
throw new Error("Owning drawer instance hasn't been provided");
|
|
265
|
+
v(this, A, l), v(this, O, a), v(this, P, e), this.init();
|
|
262
266
|
}
|
|
263
267
|
// Accessors
|
|
264
268
|
get isActive() {
|
|
265
|
-
return r(this,
|
|
269
|
+
return r(this, B);
|
|
266
270
|
}
|
|
267
271
|
get owner() {
|
|
268
|
-
return r(this,
|
|
272
|
+
return r(this, O);
|
|
269
273
|
}
|
|
270
274
|
// Methods
|
|
271
275
|
init() {
|
|
272
|
-
r(this,
|
|
276
|
+
r(this, A).addEventListener("click", (t) => this.clickHandler(t)), r(this, O).on("open", () => this.setActive(!0)), r(this, O).on("close", () => this.setActive(!1));
|
|
273
277
|
}
|
|
274
278
|
clickHandler(t) {
|
|
275
|
-
t.__drawerTrigger = this, r(this, P) === "open" ? r(this,
|
|
279
|
+
t.__drawerTrigger = this, r(this, P) === "open" ? r(this, O).isOpen || r(this, O).open(r(this, A)) : r(this, P) === "close" ? r(this, O).isOpen && r(this, O).close(r(this, A)) : r(this, O).isOpen ? r(this, O).close(r(this, A)) : r(this, O).open(r(this, A));
|
|
276
280
|
}
|
|
277
281
|
setActive(t) {
|
|
278
|
-
|
|
282
|
+
v(this, B, t), t ? r(this, A).classList.add("drawer-trigger_active") : r(this, A).classList.remove("drawer-trigger_active");
|
|
279
283
|
}
|
|
280
284
|
}
|
|
281
|
-
|
|
282
|
-
var
|
|
283
|
-
class
|
|
284
|
-
constructor({ target: e, options:
|
|
285
|
+
A = new WeakMap(), O = new WeakMap(), P = new WeakMap(), B = new WeakMap();
|
|
286
|
+
var f, K, j, H, T;
|
|
287
|
+
class Le extends le {
|
|
288
|
+
constructor({ target: e, options: a }) {
|
|
285
289
|
super();
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
this.handleDocumentClick = async (
|
|
292
|
-
var
|
|
293
|
-
if (((
|
|
290
|
+
m(this, f, void 0);
|
|
291
|
+
m(this, K, void 0);
|
|
292
|
+
m(this, j, void 0);
|
|
293
|
+
m(this, H, void 0);
|
|
294
|
+
m(this, T, void 0);
|
|
295
|
+
this.handleDocumentClick = async (s) => {
|
|
296
|
+
var c;
|
|
297
|
+
if (((c = s.__drawerTrigger) == null ? void 0 : c.owner) === this)
|
|
294
298
|
return;
|
|
295
|
-
const
|
|
296
|
-
if (
|
|
299
|
+
const o = s.target;
|
|
300
|
+
if (s.composedPath(), this.dom.panel.contains(o))
|
|
297
301
|
return;
|
|
298
|
-
const i =
|
|
299
|
-
i ? i.getAttribute("data-drawer") === r(this, T) ? this.handleUnderlayClick(
|
|
300
|
-
}, this.handleKeydown = (
|
|
301
|
-
r(this,
|
|
302
|
+
const i = o == null ? void 0 : o.closest("[data-drawer]");
|
|
303
|
+
i ? i.getAttribute("data-drawer") === r(this, T) ? this.handleUnderlayClick(s) : this.handleOtherDrawerClick(s) : this.handleOutsideClick(s);
|
|
304
|
+
}, this.handleKeydown = (s) => {
|
|
305
|
+
r(this, f).closeOnEsc && s.key === "Escape" && this.close();
|
|
302
306
|
};
|
|
303
|
-
const
|
|
304
|
-
if (
|
|
307
|
+
const l = te(a ? [ee, a] : [ee]), g = Q(e);
|
|
308
|
+
if (g === null)
|
|
305
309
|
throw new Error("Drawer's root cannot be found");
|
|
306
|
-
|
|
307
|
-
const
|
|
308
|
-
if (
|
|
310
|
+
v(this, T, g.getAttribute("data-drawer"));
|
|
311
|
+
const p = g.querySelector(Ce);
|
|
312
|
+
if (p === null)
|
|
309
313
|
throw new Error(`Drawer's panel cannot be found. Alias: ${r(this, T)}`);
|
|
310
314
|
this.dom = {
|
|
311
|
-
root:
|
|
312
|
-
panel:
|
|
313
|
-
}, this.setOptions(
|
|
315
|
+
root: g,
|
|
316
|
+
panel: p
|
|
317
|
+
}, this.setOptions(l), this.dom.panel.setAttribute("tabindex", "-1"), this.dom.root.classList.add("drawer_initialized");
|
|
314
318
|
}
|
|
315
319
|
addEventListeners() {
|
|
316
320
|
this.dom.root.addEventListener("keydown", this.handleKeydown), document.addEventListener("click", this.handleDocumentClick);
|
|
@@ -323,37 +327,37 @@ class ke extends le {
|
|
|
323
327
|
return r(this, j);
|
|
324
328
|
}
|
|
325
329
|
get isModal() {
|
|
326
|
-
return r(this,
|
|
330
|
+
return r(this, f).modal;
|
|
327
331
|
}
|
|
328
332
|
set isModal(e) {
|
|
329
333
|
this.dom.root.classList[e ? "add" : "remove"]("drawer_modal");
|
|
330
334
|
}
|
|
331
335
|
get willLockScroll() {
|
|
332
|
-
return r(this,
|
|
336
|
+
return r(this, f).lockPageScroll;
|
|
333
337
|
}
|
|
334
338
|
set zIndex(e) {
|
|
335
|
-
this.dom.root.style.setProperty("--z-index", String(e)),
|
|
339
|
+
this.dom.root.style.setProperty("--z-index", String(e)), v(this, K, e);
|
|
336
340
|
}
|
|
337
341
|
get zIndex() {
|
|
338
342
|
return r(this, K);
|
|
339
343
|
}
|
|
340
344
|
// Methods
|
|
341
345
|
async open(e) {
|
|
342
|
-
await V(0), !r(this, j) && (this.emit("beforeOpen", { drawer: this, trigger: e }),
|
|
346
|
+
await V(0), !r(this, j) && (this.emit("beforeOpen", { drawer: this, trigger: e }), v(this, j, !0), this.dom.root.classList.add(r(this, f).openingClass), this.emit("open", { drawer: this, trigger: e }), typeof r(this, f).openAnimationDuration == "number" && await V(r(this, f).openAnimationDuration), this.dom.root.classList.remove(r(this, f).openingClass), this.dom.root.classList.add(r(this, f).openClass), this.emit("openAnimationEnd", { drawer: this, trigger: e }), this.focus(), this.addEventListeners());
|
|
343
347
|
}
|
|
344
348
|
async close(e) {
|
|
345
|
-
r(this,
|
|
349
|
+
r(this, f).onCloseConfirm && !r(this, f).onCloseConfirm(this, e) || (this.emit("beforeClose", { drawer: this, trigger: e }), this.removeEventListeners(), v(this, j, !1), this.dom.root.classList.remove(r(this, f).openClass), this.dom.root.classList.add(r(this, f).closingClass), this.emit("close", { drawer: this, trigger: e }), typeof r(this, f).closeAnimationDuration == "number" && await V(r(this, f).closeAnimationDuration), this.dom.root.classList.remove(r(this, f).closingClass), this.emit("closeAnimationEnd", { drawer: this, trigger: e }));
|
|
346
350
|
}
|
|
347
351
|
handleOtherDrawerClick(e) {
|
|
348
352
|
}
|
|
349
353
|
handleOutsideClick(e) {
|
|
350
|
-
r(this,
|
|
354
|
+
r(this, f).closeOnOutsideClick && (typeof r(this, f).closeOnOutsideClick == "object" && r(this, f).closeOnOutsideClick.hasOwnProperty("checkTarget") ? r(this, f).closeOnOutsideClick.checkTarget(e.target) && this.close() : this.close());
|
|
351
355
|
}
|
|
352
356
|
handleUnderlayClick(e) {
|
|
353
|
-
r(this,
|
|
357
|
+
r(this, f).closeOnOutsideClick && this.close();
|
|
354
358
|
}
|
|
355
359
|
focus() {
|
|
356
|
-
r(this,
|
|
360
|
+
r(this, f).focusOnChild && this.focusChild() || this.focusSelf();
|
|
357
361
|
}
|
|
358
362
|
focusSelf() {
|
|
359
363
|
this.dom.panel.focus();
|
|
@@ -363,129 +367,143 @@ class ke extends le {
|
|
|
363
367
|
return e ? (e.focus(), !0) : !1;
|
|
364
368
|
}
|
|
365
369
|
setOptions(e) {
|
|
366
|
-
var
|
|
367
|
-
e.hasOwnProperty("modal") && ((
|
|
370
|
+
var a;
|
|
371
|
+
e.hasOwnProperty("modal") && ((a = r(this, f)) == null ? void 0 : a.modal) !== e.modal && (this.isModal = e.modal), v(this, f, r(this, f) ? te([r(this, f), e]) : e);
|
|
368
372
|
}
|
|
369
373
|
assignGroup(e) {
|
|
370
|
-
|
|
374
|
+
v(this, H, e);
|
|
371
375
|
}
|
|
372
376
|
}
|
|
373
|
-
|
|
377
|
+
f = new WeakMap(), K = new WeakMap(), j = new WeakMap(), H = new WeakMap(), T = new WeakMap();
|
|
374
378
|
var M;
|
|
375
|
-
class
|
|
379
|
+
class ke {
|
|
376
380
|
constructor() {
|
|
377
|
-
|
|
381
|
+
m(this, M, /* @__PURE__ */ new Map());
|
|
378
382
|
}
|
|
379
383
|
lock(t, e) {
|
|
380
384
|
r(this, M).has(t) || r(this, M).set(t, /* @__PURE__ */ new Set());
|
|
381
|
-
const
|
|
382
|
-
|
|
385
|
+
const a = r(this, M).get(t);
|
|
386
|
+
a.size === 0 && t.classList.add("scroll-lock-by-drawer"), a.add(e);
|
|
383
387
|
}
|
|
384
388
|
unlock(t, e) {
|
|
385
|
-
const
|
|
386
|
-
|
|
389
|
+
const a = r(this, M).get(t);
|
|
390
|
+
a == null || a.delete(e), (!a || a.size === 0) && t.classList.remove("scroll-lock-by-drawer");
|
|
387
391
|
}
|
|
388
392
|
}
|
|
389
393
|
M = new WeakMap();
|
|
390
|
-
var x,
|
|
391
|
-
const
|
|
394
|
+
var x, E, C, D, k;
|
|
395
|
+
const $ = class $ {
|
|
392
396
|
constructor(t) {
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
}, this.onCloseAnimationEnd = ({ drawer:
|
|
401
|
-
const
|
|
402
|
-
for (delete
|
|
403
|
-
|
|
404
|
-
r(this,
|
|
397
|
+
m(this, x, void 0);
|
|
398
|
+
m(this, E, void 0);
|
|
399
|
+
m(this, C, void 0);
|
|
400
|
+
m(this, D, void 0);
|
|
401
|
+
m(this, k, void 0);
|
|
402
|
+
v(this, E, []), v(this, C, []), v(this, k, /* @__PURE__ */ new Map()), this.onBeforeOpen = ({ drawer: l, trigger: g }) => {
|
|
403
|
+
l.isModal ? (r(this, k).set(l, r(this, E).length), r(this, E).push(l), l.zIndex = r(this, C).length + r(this, E).length) : (r(this, k).set(l, r(this, C).length), r(this, C).push(l), l.zIndex = r(this, C).length, r(this, E).length > 0 && r(this, E).forEach((p, s) => p.zIndex = r(this, C).length + s + 1)), l.willLockScroll && this.lockScroll(l);
|
|
404
|
+
}, this.onCloseAnimationEnd = ({ drawer: l, trigger: g }) => {
|
|
405
|
+
const p = l.isModal ? r(this, E) : r(this, C);
|
|
406
|
+
for (delete p[r(this, k).get(l)]; p.length && !p.at(-1); )
|
|
407
|
+
p.pop();
|
|
408
|
+
r(this, k).delete(l), this.unlockScroll(l);
|
|
405
409
|
};
|
|
406
410
|
const e = Q(t);
|
|
407
411
|
if (e === null)
|
|
408
412
|
throw new Error("Drawer's group root cannot be found");
|
|
409
|
-
|
|
410
|
-
const
|
|
411
|
-
if (
|
|
413
|
+
v(this, x, e);
|
|
414
|
+
const a = r(this, x).closest("[data-scrollable], html") || r(this, x).matches("[data-scrollable], html") && r(this, x);
|
|
415
|
+
if (a === null)
|
|
412
416
|
throw new Error("Scrollable container for group root cannot be found");
|
|
413
|
-
|
|
417
|
+
v(this, D, a);
|
|
414
418
|
}
|
|
415
419
|
add(t) {
|
|
416
420
|
t.on("beforeOpen", this.onBeforeOpen), t.on("closeAnimationEnd", this.onCloseAnimationEnd), t.assignGroup(this);
|
|
417
421
|
}
|
|
418
422
|
lockScroll(t) {
|
|
419
|
-
|
|
423
|
+
$.scrollLock.lock(r(this, D), t);
|
|
420
424
|
}
|
|
421
425
|
unlockScroll(t) {
|
|
422
|
-
|
|
426
|
+
$.scrollLock.unlock(r(this, D), t);
|
|
423
427
|
}
|
|
424
428
|
};
|
|
425
|
-
x = new WeakMap(),
|
|
426
|
-
let G =
|
|
429
|
+
x = new WeakMap(), E = new WeakMap(), C = new WeakMap(), D = new WeakMap(), k = new WeakMap(), $.scrollLock = new ke();
|
|
430
|
+
let G = $;
|
|
427
431
|
var I, z;
|
|
428
|
-
const
|
|
432
|
+
const q = class q {
|
|
429
433
|
constructor() {
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
if (
|
|
433
|
-
return
|
|
434
|
-
|
|
434
|
+
m(this, I, /* @__PURE__ */ new Map());
|
|
435
|
+
m(this, z, /* @__PURE__ */ new Map());
|
|
436
|
+
if (q.instance)
|
|
437
|
+
return q.instance;
|
|
438
|
+
q.instance = this;
|
|
435
439
|
}
|
|
436
440
|
init(t) {
|
|
437
|
-
document.querySelectorAll(`[${F}]`).forEach((
|
|
438
|
-
const
|
|
439
|
-
typeof
|
|
440
|
-
}), r(this, z).set("default", new G(document.documentElement)), document.querySelectorAll("[data-drawer]").forEach((
|
|
441
|
-
var
|
|
442
|
-
const
|
|
443
|
-
if (typeof
|
|
441
|
+
document.querySelectorAll(`[${F}]`).forEach((s) => {
|
|
442
|
+
const o = s.getAttribute(F);
|
|
443
|
+
typeof o == "string" && r(this, z).set(o, new G(s));
|
|
444
|
+
}), r(this, z).set("default", new G(document.documentElement)), document.querySelectorAll("[data-drawer]").forEach((s) => {
|
|
445
|
+
var b;
|
|
446
|
+
const o = s.getAttribute("data-drawer");
|
|
447
|
+
if (typeof o != "string")
|
|
444
448
|
return;
|
|
445
|
-
const
|
|
446
|
-
r(this, I).set(
|
|
447
|
-
const
|
|
448
|
-
if (typeof
|
|
449
|
+
const i = new Le({ target: s, options: t });
|
|
450
|
+
r(this, I).set(o, i);
|
|
451
|
+
const c = s.closest(`[${F}]`), h = c ? c.getAttribute(F) : "default";
|
|
452
|
+
if (typeof h != "string")
|
|
449
453
|
throw new Error("Group doesn't have alias set correctly");
|
|
450
|
-
(
|
|
451
|
-
}), document.querySelectorAll("[data-drawer-open], [data-drawer-close], [data-drawer-toggle]").forEach((
|
|
452
|
-
if (
|
|
453
|
-
const
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
454
|
+
(b = r(this, z).get(h)) == null || b.add(i);
|
|
455
|
+
}), document.querySelectorAll("[data-drawer-open], [data-drawer-close], [data-drawer-toggle]").forEach((s) => {
|
|
456
|
+
if (s.hasAttribute("data-drawer-open")) {
|
|
457
|
+
const o = s.getAttribute("data-drawer-open");
|
|
458
|
+
g(s, o);
|
|
459
|
+
const i = this.get(o);
|
|
460
|
+
p(s, i, o), new Y({ target: s, type: "open", owner: i });
|
|
461
|
+
} else if (s.hasAttribute("data-drawer-close")) {
|
|
462
|
+
const o = s.getAttribute("data-drawer-close");
|
|
463
|
+
g(s, o);
|
|
464
|
+
const i = this.get(o);
|
|
465
|
+
p(s, i, o), new Y({ target: s, type: "close", owner: i });
|
|
458
466
|
} else {
|
|
459
|
-
const
|
|
460
|
-
|
|
467
|
+
const o = s.getAttribute("data-drawer-toggle");
|
|
468
|
+
g(s, o);
|
|
469
|
+
const i = this.get(o);
|
|
470
|
+
p(s, i, o), new Y({ target: s, type: "toggle", owner: i });
|
|
461
471
|
}
|
|
462
472
|
});
|
|
473
|
+
function g(s, o) {
|
|
474
|
+
if (!o)
|
|
475
|
+
throw new Error(`Drawer alias should be specified in the trigger attribute. Trigger elem: ${s}`);
|
|
476
|
+
}
|
|
477
|
+
function p(s, o, i) {
|
|
478
|
+
if (!o)
|
|
479
|
+
throw new Error(`Drawer hadn't been found for the trigger elem: ${s}. Alias: ${i}`);
|
|
480
|
+
}
|
|
463
481
|
}
|
|
464
|
-
open(t, { trigger: e, options:
|
|
465
|
-
var
|
|
466
|
-
(
|
|
482
|
+
open(t, { trigger: e, options: a } = {}) {
|
|
483
|
+
var l;
|
|
484
|
+
(l = this.get(t)) == null || l.open(e);
|
|
467
485
|
}
|
|
468
|
-
close(t, { trigger: e, options:
|
|
469
|
-
var
|
|
470
|
-
(
|
|
486
|
+
close(t, { trigger: e, options: a } = {}) {
|
|
487
|
+
var l;
|
|
488
|
+
(l = this.get(t)) == null || l.close(e);
|
|
471
489
|
}
|
|
472
490
|
get(t) {
|
|
473
491
|
return typeof t == "string" && r(this, I).get(t) || null;
|
|
474
492
|
}
|
|
475
|
-
on(t, e,
|
|
476
|
-
var
|
|
493
|
+
on(t, e, a) {
|
|
494
|
+
var l;
|
|
477
495
|
if (t)
|
|
478
|
-
(
|
|
496
|
+
(l = this.get(t)) == null || l.on(e, a);
|
|
479
497
|
else
|
|
480
|
-
for (const [
|
|
481
|
-
|
|
498
|
+
for (const [g, p] of r(this, I))
|
|
499
|
+
p.on(e, a);
|
|
482
500
|
}
|
|
483
501
|
};
|
|
484
502
|
I = new WeakMap(), z = new WeakMap();
|
|
485
|
-
let J =
|
|
503
|
+
let J = q;
|
|
486
504
|
typeof window < "u" && (window.hasOwnProperty("app") || (window.app = {}), window.app.drawers = new J());
|
|
487
505
|
export {
|
|
488
|
-
|
|
506
|
+
Le as Drawer,
|
|
489
507
|
G as DrawersGroup,
|
|
490
508
|
Y as Trigger,
|
|
491
509
|
J as default
|
package/dist/drawers.umd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(d,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(d=typeof globalThis<"u"?globalThis:d||self,g(d.Drawers={}))})(this,function(d){"use strict";var le=(d,g,C)=>{if(!g.has(d))throw TypeError("Cannot "+C)};var n=(d,g,C)=>(le(d,g,"read from private field"),C?C.call(d):g.get(d)),b=(d,g,C)=>{if(g.has(d))throw TypeError("Cannot add the same private member more than once");g instanceof WeakSet?g.add(d):g.set(d,C)},A=(d,g,C,Y)=>(le(d,g,"write to private field"),Y?Y.call(d,C):g.set(d,C),C);var _,E,z,K,f,F,x,X,U,T,P,L,k,N,j,$,q;function g(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}var C={exports:{}};(function(r){var t=Object.prototype.hasOwnProperty,e="~";function a(){}Object.create&&(a.prototype=Object.create(null),new a().__proto__||(e=!1));function l(o,i,c){this.fn=o,this.context=i,this.once=c||!1}function v(o,i,c,h,y){if(typeof c!="function")throw new TypeError("The listener must be a function");var O=new l(c,h||o,y),p=e?e+i:i;return o._events[p]?o._events[p].fn?o._events[p]=[o._events[p],O]:o._events[p].push(O):(o._events[p]=O,o._eventsCount++),o}function w(o,i){--o._eventsCount===0?o._events=new a:delete o._events[i]}function s(){this._events=new a,this._eventsCount=0}s.prototype.eventNames=function(){var i=[],c,h;if(this._eventsCount===0)return i;for(h in c=this._events)t.call(c,h)&&i.push(e?h.slice(1):h);return Object.getOwnPropertySymbols?i.concat(Object.getOwnPropertySymbols(c)):i},s.prototype.listeners=function(i){var c=e?e+i:i,h=this._events[c];if(!h)return[];if(h.fn)return[h.fn];for(var y=0,O=h.length,p=new Array(O);y<O;y++)p[y]=h[y].fn;return p},s.prototype.listenerCount=function(i){var c=e?e+i:i,h=this._events[c];return h?h.fn?1:h.length:0},s.prototype.emit=function(i,c,h,y,O,p){var S=e?e+i:i;if(!this._events[S])return!1;var u=this._events[S],M=arguments.length,D,m;if(u.fn){switch(u.once&&this.removeListener(i,u.fn,void 0,!0),M){case 1:return u.fn.call(u.context),!0;case 2:return u.fn.call(u.context,c),!0;case 3:return u.fn.call(u.context,c,h),!0;case 4:return u.fn.call(u.context,c,h,y),!0;case 5:return u.fn.call(u.context,c,h,y,O),!0;case 6:return u.fn.call(u.context,c,h,y,O,p),!0}for(m=1,D=new Array(M-1);m<M;m++)D[m-1]=arguments[m];u.fn.apply(u.context,D)}else{var Se=u.length,V;for(m=0;m<Se;m++)switch(u[m].once&&this.removeListener(i,u[m].fn,void 0,!0),M){case 1:u[m].fn.call(u[m].context);break;case 2:u[m].fn.call(u[m].context,c);break;case 3:u[m].fn.call(u[m].context,c,h);break;case 4:u[m].fn.call(u[m].context,c,h,y);break;default:if(!D)for(V=1,D=new Array(M-1);V<M;V++)D[V-1]=arguments[V];u[m].fn.apply(u[m].context,D)}}return!0},s.prototype.on=function(i,c,h){return v(this,i,c,h,!1)},s.prototype.once=function(i,c,h){return v(this,i,c,h,!0)},s.prototype.removeListener=function(i,c,h,y){var O=e?e+i:i;if(!this._events[O])return this;if(!c)return w(this,O),this;var p=this._events[O];if(p.fn)p.fn===c&&(!y||p.once)&&(!h||p.context===h)&&w(this,O);else{for(var S=0,u=[],M=p.length;S<M;S++)(p[S].fn!==c||y&&!p[S].once||h&&p[S].context!==h)&&u.push(p[S]);u.length?this._events[O]=u.length===1?u[0]:u:w(this,O)}return this},s.prototype.removeAllListeners=function(i){var c;return i?(c=e?e+i:i,this._events[c]&&w(this,c)):(this._events=new a,this._eventsCount=0),this},s.prototype.off=s.prototype.removeListener,s.prototype.addListener=s.prototype.on,s.prefixed=e,s.EventEmitter=s,r.exports=s})(C);var Y=C.exports;const ae=g(Y);var ce=function(t){return he(t)&&!ue(t)};function he(r){return!!r&&typeof r=="object"}function ue(r){var t=Object.prototype.toString.call(r);return t==="[object RegExp]"||t==="[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,t){return t.clone!==!1&&t.isMergeableObject(r)?I(we(r),r,t):r}function me(r,t,e){return r.concat(t).map(function(a){return R(a,e)})}function ge(r,t){if(!t.customMerge)return I;var e=t.customMerge(r);return typeof e=="function"?e:I}function be(r){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(r).filter(function(t){return Object.propertyIsEnumerable.call(r,t)}):[]}function te(r){return Object.keys(r).concat(be(r))}function ne(r,t){try{return t in r}catch{return!1}}function ye(r,t){return ne(r,t)&&!(Object.hasOwnProperty.call(r,t)&&Object.propertyIsEnumerable.call(r,t))}function ve(r,t,e){var a={};return e.isMergeableObject(r)&&te(r).forEach(function(l){a[l]=R(r[l],e)}),te(t).forEach(function(l){ye(r,l)||(ne(r,l)&&e.isMergeableObject(t[l])?a[l]=ge(l,e)(r[l],t[l],e):a[l]=R(t[l],e))}),a}function I(r,t,e){e=e||{},e.arrayMerge=e.arrayMerge||me,e.isMergeableObject=e.isMergeableObject||ce,e.cloneUnlessOtherwiseSpecified=R;var a=Array.isArray(t),l=Array.isArray(r),v=a===l;return v?a?e.arrayMerge(r,t,e):ve(r,t,e):R(t,e)}I.all=function(t,e){if(!Array.isArray(t))throw new Error("first argument should be an array");return t.reduce(function(a,l){return I(a,l,e)},{})};var Oe=I,Ae=Oe;const Ee=g(Ae);/*!
|
|
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 re(r){return Object.prototype.toString.call(r)==="[object Object]"}function Ce(r){var t,e;return re(r)===!1?!1:(t=r.constructor,t===void 0?!0:(e=t.prototype,!(re(e)===!1||e.hasOwnProperty("isPrototypeOf")===!1)))}function Z(r){return r instanceof Element?r:document.querySelector(r)}async function ee(r){return await new Promise(t=>setTimeout(t,r))}const _e='[data-elem="drawer.panel"]',J="data-drawers-group",
|
|
6
|
+
*/function re(r){return Object.prototype.toString.call(r)==="[object Object]"}function Ce(r){var t,e;return re(r)===!1?!1:(t=r.constructor,t===void 0?!0:(e=t.prototype,!(re(e)===!1||e.hasOwnProperty("isPrototypeOf")===!1)))}function Z(r){return r instanceof Element?r:document.querySelector(r)}async function ee(r){return await new Promise(t=>setTimeout(t,r))}const _e='[data-elem="drawer.panel"]',J="data-drawers-group",Le=["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",closingClass:"drawer_closing",openingClass:"drawer_opening",openAnimationDuration:0,closeAnimationDuration:0,lockPageScroll:!0};function oe(r){return Ee.all(r,{isMergeableObject:Ce})}class Q{constructor({target:t,type:e,owner:a}){b(this,_,void 0);b(this,E,void 0);b(this,z,void 0);b(this,K,!1);const l=Z(t);if(!l)throw new Error("Trigger element cannot be found");if(!a)throw new Error("Owning drawer instance hasn't been provided");A(this,_,l),A(this,E,a),A(this,z,e),this.init()}get isActive(){return n(this,K)}get owner(){return n(this,E)}init(){n(this,_).addEventListener("click",t=>this.clickHandler(t)),n(this,E).on("open",()=>this.setActive(!0)),n(this,E).on("close",()=>this.setActive(!1))}clickHandler(t){t.__drawerTrigger=this,n(this,z)==="open"?n(this,E).isOpen||n(this,E).open(n(this,_)):n(this,z)==="close"?n(this,E).isOpen&&n(this,E).close(n(this,_)):n(this,E).isOpen?n(this,E).close(n(this,_)):n(this,E).open(n(this,_))}setActive(t){A(this,K,t),t?n(this,_).classList.add("drawer-trigger_active"):n(this,_).classList.remove("drawer-trigger_active")}}_=new WeakMap,E=new WeakMap,z=new WeakMap,K=new WeakMap;class ie extends ae{constructor({target:e,options:a}){super();b(this,f,void 0);b(this,F,void 0);b(this,x,void 0);b(this,X,void 0);b(this,U,void 0);this.handleDocumentClick=async s=>{var c;if(((c=s.__drawerTrigger)==null?void 0:c.owner)===this)return;const o=s.target;if(s.composedPath(),this.dom.panel.contains(o))return;const i=o==null?void 0:o.closest("[data-drawer]");i?i.getAttribute("data-drawer")===n(this,U)?this.handleUnderlayClick(s):this.handleOtherDrawerClick(s):this.handleOutsideClick(s)},this.handleKeydown=s=>{n(this,f).closeOnEsc&&s.key==="Escape"&&this.close()};const l=oe(a?[se,a]:[se]),v=Z(e);if(v===null)throw new Error("Drawer's root cannot be found");A(this,U,v.getAttribute("data-drawer"));const w=v.querySelector(_e);if(w===null)throw new Error(`Drawer's panel cannot be found. Alias: ${n(this,U)}`);this.dom={root:v,panel:w},this.setOptions(l),this.dom.panel.setAttribute("tabindex","-1"),this.dom.root.classList.add("drawer_initialized")}addEventListeners(){this.dom.root.addEventListener("keydown",this.handleKeydown),document.addEventListener("click",this.handleDocumentClick)}removeEventListeners(){this.dom.root.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("click",this.handleDocumentClick)}get isOpen(){return n(this,x)}get isModal(){return n(this,f).modal}set isModal(e){this.dom.root.classList[e?"add":"remove"]("drawer_modal")}get willLockScroll(){return n(this,f).lockPageScroll}set zIndex(e){this.dom.root.style.setProperty("--z-index",String(e)),A(this,F,e)}get zIndex(){return n(this,F)}async open(e){await ee(0),!n(this,x)&&(this.emit("beforeOpen",{drawer:this,trigger:e}),A(this,x,!0),this.dom.root.classList.add(n(this,f).openingClass),this.emit("open",{drawer:this,trigger:e}),typeof n(this,f).openAnimationDuration=="number"&&await ee(n(this,f).openAnimationDuration),this.dom.root.classList.remove(n(this,f).openingClass),this.dom.root.classList.add(n(this,f).openClass),this.emit("openAnimationEnd",{drawer:this,trigger:e}),this.focus(),this.addEventListeners())}async close(e){n(this,f).onCloseConfirm&&!n(this,f).onCloseConfirm(this,e)||(this.emit("beforeClose",{drawer:this,trigger:e}),this.removeEventListeners(),A(this,x,!1),this.dom.root.classList.remove(n(this,f).openClass),this.dom.root.classList.add(n(this,f).closingClass),this.emit("close",{drawer:this,trigger:e}),typeof n(this,f).closeAnimationDuration=="number"&&await ee(n(this,f).closeAnimationDuration),this.dom.root.classList.remove(n(this,f).closingClass),this.emit("closeAnimationEnd",{drawer:this,trigger:e}))}handleOtherDrawerClick(e){}handleOutsideClick(e){n(this,f).closeOnOutsideClick&&(typeof n(this,f).closeOnOutsideClick=="object"&&n(this,f).closeOnOutsideClick.hasOwnProperty("checkTarget")?n(this,f).closeOnOutsideClick.checkTarget(e.target)&&this.close():this.close())}handleUnderlayClick(e){n(this,f).closeOnOutsideClick&&this.close()}focus(){n(this,f).focusOnChild&&this.focusChild()||this.focusSelf()}focusSelf(){this.dom.panel.focus()}focusChild(){const e=this.dom.panel.querySelector(Le.join(","));return e?(e.focus(),!0):!1}setOptions(e){var a;e.hasOwnProperty("modal")&&((a=n(this,f))==null?void 0:a.modal)!==e.modal&&(this.isModal=e.modal),A(this,f,n(this,f)?oe([n(this,f),e]):e)}assignGroup(e){A(this,X,e)}}f=new WeakMap,F=new WeakMap,x=new WeakMap,X=new WeakMap,U=new WeakMap;class ke{constructor(){b(this,T,new Map)}lock(t,e){n(this,T).has(t)||n(this,T).set(t,new Set);const a=n(this,T).get(t);a.size===0&&t.classList.add("scroll-lock-by-drawer"),a.add(e)}unlock(t,e){const a=n(this,T).get(t);a==null||a.delete(e),(!a||a.size===0)&&t.classList.remove("scroll-lock-by-drawer")}}T=new WeakMap;const G=class G{constructor(t){b(this,P,void 0);b(this,L,void 0);b(this,k,void 0);b(this,N,void 0);b(this,j,void 0);A(this,L,[]),A(this,k,[]),A(this,j,new Map),this.onBeforeOpen=({drawer:l,trigger:v})=>{l.isModal?(n(this,j).set(l,n(this,L).length),n(this,L).push(l),l.zIndex=n(this,k).length+n(this,L).length):(n(this,j).set(l,n(this,k).length),n(this,k).push(l),l.zIndex=n(this,k).length,n(this,L).length>0&&n(this,L).forEach((w,s)=>w.zIndex=n(this,k).length+s+1)),l.willLockScroll&&this.lockScroll(l)},this.onCloseAnimationEnd=({drawer:l,trigger:v})=>{const w=l.isModal?n(this,L):n(this,k);for(delete w[n(this,j).get(l)];w.length&&!w.at(-1);)w.pop();n(this,j).delete(l),this.unlockScroll(l)};const e=Z(t);if(e===null)throw new Error("Drawer's group root cannot be found");A(this,P,e);const a=n(this,P).closest("[data-scrollable], html")||n(this,P).matches("[data-scrollable], html")&&n(this,P);if(a===null)throw new Error("Scrollable container for group root cannot be found");A(this,N,a)}add(t){t.on("beforeOpen",this.onBeforeOpen),t.on("closeAnimationEnd",this.onCloseAnimationEnd),t.assignGroup(this)}lockScroll(t){G.scrollLock.lock(n(this,N),t)}unlockScroll(t){G.scrollLock.unlock(n(this,N),t)}};P=new WeakMap,L=new WeakMap,k=new WeakMap,N=new WeakMap,j=new WeakMap,G.scrollLock=new ke;let B=G;const H=class H{constructor(){b(this,$,new Map);b(this,q,new Map);if(H.instance)return H.instance;H.instance=this}init(t){document.querySelectorAll(`[${J}]`).forEach(s=>{const o=s.getAttribute(J);typeof o=="string"&&n(this,q).set(o,new B(s))}),n(this,q).set("default",new B(document.documentElement)),document.querySelectorAll("[data-drawer]").forEach(s=>{var y;const o=s.getAttribute("data-drawer");if(typeof o!="string")return;const i=new ie({target:s,options:t});n(this,$).set(o,i);const c=s.closest(`[${J}]`),h=c?c.getAttribute(J):"default";if(typeof h!="string")throw new Error("Group doesn't have alias set correctly");(y=n(this,q).get(h))==null||y.add(i)}),document.querySelectorAll("[data-drawer-open], [data-drawer-close], [data-drawer-toggle]").forEach(s=>{if(s.hasAttribute("data-drawer-open")){const o=s.getAttribute("data-drawer-open");v(s,o);const i=this.get(o);w(s,i,o),new Q({target:s,type:"open",owner:i})}else if(s.hasAttribute("data-drawer-close")){const o=s.getAttribute("data-drawer-close");v(s,o);const i=this.get(o);w(s,i,o),new Q({target:s,type:"close",owner:i})}else{const o=s.getAttribute("data-drawer-toggle");v(s,o);const i=this.get(o);w(s,i,o),new Q({target:s,type:"toggle",owner:i})}});function v(s,o){if(!o)throw new Error(`Drawer alias should be specified in the trigger attribute. Trigger elem: ${s}`)}function w(s,o,i){if(!o)throw new Error(`Drawer hadn't been found for the trigger elem: ${s}. Alias: ${i}`)}}open(t,{trigger:e,options:a}={}){var l;(l=this.get(t))==null||l.open(e)}close(t,{trigger:e,options:a}={}){var l;(l=this.get(t))==null||l.close(e)}get(t){return typeof t=="string"&&n(this,$).get(t)||null}on(t,e,a){var l;if(t)(l=this.get(t))==null||l.on(e,a);else for(const[v,w]of n(this,$))w.on(e,a)}};$=new WeakMap,q=new WeakMap;let W=H;typeof window<"u"&&(window.hasOwnProperty("app")||(window.app={}),window.app.drawers=new W),d.Drawer=ie,d.DrawersGroup=B,d.Trigger=Q,d.default=W,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
html{overflow-x:hidden;scroll-behavior:auto}body{position:fixed;left:0;top:0;width:100%;background-color:#fff;height:100vh;overflow:hidden;margin:0;scroll-behavior:auto}.drawers-group{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none}.drawers-group>*{pointer-events:all}.drawer{display:flex;justify-content:center;position:fixed;z-index:var(--z-index);left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.drawer_modal{background-color:#4e4e4e57;pointer-events:all}.drawer__panel{display:flex;height:100%;width:100%;max-width:600px;max-height:400px;margin:auto;overflow-x:hidden;pointer-events:all}.drawer__panel{transition:visibility .4s,opacity .4s,transform .4s}.drawer:not(.drawer_open),.drawer:not(.drawer_open) .drawer__panel{visibility:hidden;opacity:0;transform:none}.drawer__body{width:100%}.drawer:nth-child(1) .drawer__body{background-color:#0ff}.drawer:nth-child(2) .drawer__body{background-color:#8a2be2}.drawer:nth-child(3) .drawer__body{background-color:brown}
|
|
1
|
+
html{overflow-x:hidden;scroll-behavior:auto}body{position:fixed;left:0;top:0;width:100%;background-color:#fff;height:100vh;overflow:hidden;margin:0;scroll-behavior:auto}.drawers-group{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none}.drawers-group>*{pointer-events:all}.drawer{display:flex;justify-content:center;position:fixed;z-index:var(--z-index);left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.drawer_modal{background-color:#4e4e4e57;pointer-events:all}.drawer__panel{display:flex;height:100%;width:100%;max-width:600px;max-height:400px;margin:auto;overflow-x:hidden;pointer-events:all}.drawer__panel{transition:visibility .4s,opacity .4s,transform .4s}.drawer:not(.drawer_open,.drawer_opening),.drawer:not(.drawer_open,.drawer_opening) .drawer__panel{visibility:hidden;opacity:0;transform:none}.drawer__body{width:100%}.drawer:nth-child(1) .drawer__body{background-color:#0ff}.drawer:nth-child(2) .drawer__body{background-color:#8a2be2}.drawer:nth-child(3) .drawer__body{background-color:brown}
|