vanilla-drawers 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -19
- package/dist/drawers.es.js +465 -404
- package/dist/drawers.umd.js +6 -6
- package/dist/style.css +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
@@ -1,19 +1,18 @@
|
|
1
|
-
# drawers
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
Возможность задать фиксированный zIndex
|
6
|
-
Возможность закрытия по нажатию Esc
|
7
|
-
Возможность закрытия по нажатию вне тела окна, с опцией проверки объекта,
|
8
|
-
Возможность подтверждения
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
Возможность
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
1
|
+
# drawers
|
2
|
+
|
3
|
+
# ready
|
4
|
+
* Окно открытое позже имеет больший zIndex чем окно открытое ранее
|
5
|
+
* Возможность задать фиксированный zIndex
|
6
|
+
* Возможность закрытия по нажатию Esc
|
7
|
+
* Возможность закрытия по нажатию вне тела окна, с опцией проверки объекта, на котором произошло нажатие, например,если в теле модалки было открыто стороннее диалоговое окно, то по нажатие внутри этого диалогового окна не закрывалось текущее.
|
8
|
+
* Возможность подтверждения закрытия.
|
9
|
+
* Поддержка создания группы окон.
|
10
|
+
* Каждая отедельная группа может установить блокировку скролла ближайшего к ней контейнера `[data-scrollable], html`
|
11
|
+
|
12
|
+
# to do
|
13
|
+
* Набор встроенных диалоговых окон alert, confirm, prompt etc
|
14
|
+
* Назначение окну индекса внутри группы [data-drawer-id]
|
15
|
+
* Возможность переключаться между немодальными окнами в группе (изменение zIndex)
|
16
|
+
* Возможность вкладывать группу в группу
|
17
|
+
* Если клик произошел внутри модального окна, то событие этого клика не должно закрывать другие окна
|
18
|
+
(На данный момент собыьтя кдтка вгутри других окон игнорируются безусловно)
|
package/dist/drawers.es.js
CHANGED
@@ -1,404 +1,465 @@
|
|
1
|
-
var
|
2
|
-
if (!t.has(
|
3
|
-
throw TypeError("Cannot " + e);
|
4
|
-
};
|
5
|
-
var
|
6
|
-
if (t.has(
|
7
|
-
throw TypeError("Cannot add the same private member more than once");
|
8
|
-
t instanceof WeakSet ? t.add(
|
9
|
-
},
|
10
|
-
function
|
11
|
-
return
|
12
|
-
}
|
13
|
-
var
|
14
|
-
(function(
|
15
|
-
var t = Object.prototype.hasOwnProperty, e = "~";
|
16
|
-
function a() {
|
17
|
-
}
|
18
|
-
Object.create && (a.prototype = /* @__PURE__ */ Object.create(null), new a().__proto__ || (e = !1));
|
19
|
-
function s(
|
20
|
-
this.fn =
|
21
|
-
}
|
22
|
-
function f(
|
23
|
-
if (typeof
|
24
|
-
throw new TypeError("The listener must be a function");
|
25
|
-
var g = new s(
|
26
|
-
return
|
27
|
-
}
|
28
|
-
function h
|
29
|
-
--
|
30
|
-
}
|
31
|
-
function
|
32
|
-
this._events = new a(), this._eventsCount = 0;
|
33
|
-
}
|
34
|
-
|
35
|
-
var
|
36
|
-
if (this._eventsCount === 0)
|
37
|
-
return
|
38
|
-
for (c in
|
39
|
-
t.call(
|
40
|
-
return Object.getOwnPropertySymbols ?
|
41
|
-
},
|
42
|
-
var
|
43
|
-
if (!c)
|
44
|
-
return [];
|
45
|
-
if (c.fn)
|
46
|
-
return [c.fn];
|
47
|
-
for (var v = 0, g = c.length,
|
48
|
-
|
49
|
-
return
|
50
|
-
},
|
51
|
-
var
|
52
|
-
return c ? c.fn ? 1 : c.length : 0;
|
53
|
-
},
|
54
|
-
var
|
55
|
-
if (!this._events[
|
56
|
-
return !1;
|
57
|
-
var l = this._events[
|
58
|
-
if (l.fn) {
|
59
|
-
switch (l.once && this.removeListener(
|
60
|
-
case 1:
|
61
|
-
return l.fn.call(l.context), !0;
|
62
|
-
case 2:
|
63
|
-
return l.fn.call(l.context,
|
64
|
-
case 3:
|
65
|
-
return l.fn.call(l.context,
|
66
|
-
case 4:
|
67
|
-
return l.fn.call(l.context,
|
68
|
-
case 5:
|
69
|
-
return l.fn.call(l.context,
|
70
|
-
case 6:
|
71
|
-
return l.fn.call(l.context,
|
72
|
-
}
|
73
|
-
for (
|
74
|
-
|
75
|
-
l.fn.apply(l.context,
|
76
|
-
} else {
|
77
|
-
var
|
78
|
-
for (
|
79
|
-
switch (l[
|
80
|
-
case 1:
|
81
|
-
l[
|
82
|
-
break;
|
83
|
-
case 2:
|
84
|
-
l[
|
85
|
-
break;
|
86
|
-
case 3:
|
87
|
-
l[
|
88
|
-
break;
|
89
|
-
case 4:
|
90
|
-
l[
|
91
|
-
break;
|
92
|
-
default:
|
93
|
-
if (!
|
94
|
-
for (
|
95
|
-
|
96
|
-
l[
|
97
|
-
}
|
98
|
-
}
|
99
|
-
return !0;
|
100
|
-
},
|
101
|
-
return f(this,
|
102
|
-
},
|
103
|
-
return f(this,
|
104
|
-
},
|
105
|
-
var g = e ? e +
|
106
|
-
if (!this._events[g])
|
107
|
-
return this;
|
108
|
-
if (!
|
109
|
-
return
|
110
|
-
var
|
111
|
-
if (
|
112
|
-
|
113
|
-
else {
|
114
|
-
for (var
|
115
|
-
(
|
116
|
-
l.length ? this._events[g] = l.length === 1 ? l[0] : l :
|
117
|
-
}
|
118
|
-
return this;
|
119
|
-
},
|
120
|
-
var
|
121
|
-
return
|
122
|
-
},
|
123
|
-
})(
|
124
|
-
var
|
125
|
-
const
|
126
|
-
var
|
127
|
-
return
|
128
|
-
};
|
129
|
-
function
|
130
|
-
return !!
|
131
|
-
}
|
132
|
-
function
|
133
|
-
var t = Object.prototype.toString.call(
|
134
|
-
return t === "[object RegExp]" || t === "[object Date]" ||
|
135
|
-
}
|
136
|
-
var
|
137
|
-
function
|
138
|
-
return
|
139
|
-
}
|
140
|
-
function
|
141
|
-
return Array.isArray(
|
142
|
-
}
|
143
|
-
function
|
144
|
-
return t.clone !== !1 && t.isMergeableObject(
|
145
|
-
}
|
146
|
-
function
|
147
|
-
return
|
148
|
-
return
|
149
|
-
});
|
150
|
-
}
|
151
|
-
function
|
152
|
-
if (!t.customMerge)
|
153
|
-
return
|
154
|
-
var e = t.customMerge(
|
155
|
-
return typeof e == "function" ? e :
|
156
|
-
}
|
157
|
-
function
|
158
|
-
return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(
|
159
|
-
return Object.propertyIsEnumerable.call(
|
160
|
-
}) : [];
|
161
|
-
}
|
162
|
-
function
|
163
|
-
return Object.keys(
|
164
|
-
}
|
165
|
-
function
|
166
|
-
try {
|
167
|
-
return t in
|
168
|
-
} catch {
|
169
|
-
return !1;
|
170
|
-
}
|
171
|
-
}
|
172
|
-
function
|
173
|
-
return
|
174
|
-
}
|
175
|
-
function
|
176
|
-
var a = {};
|
177
|
-
return e.isMergeableObject(
|
178
|
-
a[s] =
|
179
|
-
}),
|
180
|
-
|
181
|
-
}), a;
|
182
|
-
}
|
183
|
-
function
|
184
|
-
e = e || {}, e.arrayMerge = e.arrayMerge ||
|
185
|
-
var a = Array.isArray(t), s = Array.isArray(
|
186
|
-
return f ? a ? e.arrayMerge(
|
187
|
-
}
|
188
|
-
|
189
|
-
if (!Array.isArray(t))
|
190
|
-
throw new Error("first argument should be an array");
|
191
|
-
return t.reduce(function(a, s) {
|
192
|
-
return
|
193
|
-
}, {});
|
194
|
-
};
|
195
|
-
var
|
196
|
-
const
|
197
|
-
/*!
|
198
|
-
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
|
199
|
-
*
|
200
|
-
* Copyright (c) 2014-2017, Jon Schlinkert.
|
201
|
-
* Released under the MIT License.
|
202
|
-
*/
|
203
|
-
function
|
204
|
-
return Object.prototype.toString.call(
|
205
|
-
}
|
206
|
-
function
|
207
|
-
var t, e;
|
208
|
-
return
|
209
|
-
}
|
210
|
-
function
|
211
|
-
return
|
212
|
-
}
|
213
|
-
async function
|
214
|
-
return await new Promise((t) => setTimeout(t,
|
215
|
-
}
|
216
|
-
const
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
b(this, N,
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
m
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
}
|
346
|
-
|
347
|
-
console.log(
|
348
|
-
}
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
(
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
}
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
1
|
+
var J = (r, t, e) => {
|
2
|
+
if (!t.has(r))
|
3
|
+
throw TypeError("Cannot " + e);
|
4
|
+
};
|
5
|
+
var n = (r, t, e) => (J(r, t, "read from private field"), e ? e.call(r) : t.get(r)), b = (r, t, e) => {
|
6
|
+
if (t.has(r))
|
7
|
+
throw TypeError("Cannot add the same private member more than once");
|
8
|
+
t instanceof WeakSet ? t.add(r) : t.set(r, e);
|
9
|
+
}, m = (r, t, e, a) => (J(r, t, "write to private field"), a ? a.call(r, e) : t.set(r, e), e);
|
10
|
+
function te(r) {
|
11
|
+
return r && r.__esModule && Object.prototype.hasOwnProperty.call(r, "default") ? r.default : r;
|
12
|
+
}
|
13
|
+
var ne = { exports: {} };
|
14
|
+
(function(r) {
|
15
|
+
var t = Object.prototype.hasOwnProperty, e = "~";
|
16
|
+
function a() {
|
17
|
+
}
|
18
|
+
Object.create && (a.prototype = /* @__PURE__ */ Object.create(null), new a().__proto__ || (e = !1));
|
19
|
+
function s(h, i, o) {
|
20
|
+
this.fn = h, this.context = i, this.once = o || !1;
|
21
|
+
}
|
22
|
+
function f(h, i, o, c, v) {
|
23
|
+
if (typeof o != "function")
|
24
|
+
throw new TypeError("The listener must be a function");
|
25
|
+
var g = new s(o, c || h, v), w = e ? e + i : i;
|
26
|
+
return h._events[w] ? h._events[w].fn ? h._events[w] = [h._events[w], g] : h._events[w].push(g) : (h._events[w] = g, h._eventsCount++), h;
|
27
|
+
}
|
28
|
+
function d(h, i) {
|
29
|
+
--h._eventsCount === 0 ? h._events = new a() : delete h._events[i];
|
30
|
+
}
|
31
|
+
function u() {
|
32
|
+
this._events = new a(), this._eventsCount = 0;
|
33
|
+
}
|
34
|
+
u.prototype.eventNames = function() {
|
35
|
+
var i = [], o, c;
|
36
|
+
if (this._eventsCount === 0)
|
37
|
+
return i;
|
38
|
+
for (c in o = this._events)
|
39
|
+
t.call(o, c) && i.push(e ? c.slice(1) : c);
|
40
|
+
return Object.getOwnPropertySymbols ? i.concat(Object.getOwnPropertySymbols(o)) : i;
|
41
|
+
}, u.prototype.listeners = function(i) {
|
42
|
+
var o = e ? e + i : i, c = this._events[o];
|
43
|
+
if (!c)
|
44
|
+
return [];
|
45
|
+
if (c.fn)
|
46
|
+
return [c.fn];
|
47
|
+
for (var v = 0, g = c.length, w = new Array(g); v < g; v++)
|
48
|
+
w[v] = c[v].fn;
|
49
|
+
return w;
|
50
|
+
}, u.prototype.listenerCount = function(i) {
|
51
|
+
var o = e ? e + i : i, c = this._events[o];
|
52
|
+
return c ? c.fn ? 1 : c.length : 0;
|
53
|
+
}, u.prototype.emit = function(i, o, c, v, g, w) {
|
54
|
+
var j = e ? e + i : i;
|
55
|
+
if (!this._events[j])
|
56
|
+
return !1;
|
57
|
+
var l = this._events[j], S = arguments.length, M, y;
|
58
|
+
if (l.fn) {
|
59
|
+
switch (l.once && this.removeListener(i, l.fn, void 0, !0), S) {
|
60
|
+
case 1:
|
61
|
+
return l.fn.call(l.context), !0;
|
62
|
+
case 2:
|
63
|
+
return l.fn.call(l.context, o), !0;
|
64
|
+
case 3:
|
65
|
+
return l.fn.call(l.context, o, c), !0;
|
66
|
+
case 4:
|
67
|
+
return l.fn.call(l.context, o, c, v), !0;
|
68
|
+
case 5:
|
69
|
+
return l.fn.call(l.context, o, c, v, g), !0;
|
70
|
+
case 6:
|
71
|
+
return l.fn.call(l.context, o, c, v, g, w), !0;
|
72
|
+
}
|
73
|
+
for (y = 1, M = new Array(S - 1); y < S; y++)
|
74
|
+
M[y - 1] = arguments[y];
|
75
|
+
l.fn.apply(l.context, M);
|
76
|
+
} else {
|
77
|
+
var se = l.length, I;
|
78
|
+
for (y = 0; y < se; y++)
|
79
|
+
switch (l[y].once && this.removeListener(i, l[y].fn, void 0, !0), S) {
|
80
|
+
case 1:
|
81
|
+
l[y].fn.call(l[y].context);
|
82
|
+
break;
|
83
|
+
case 2:
|
84
|
+
l[y].fn.call(l[y].context, o);
|
85
|
+
break;
|
86
|
+
case 3:
|
87
|
+
l[y].fn.call(l[y].context, o, c);
|
88
|
+
break;
|
89
|
+
case 4:
|
90
|
+
l[y].fn.call(l[y].context, o, c, v);
|
91
|
+
break;
|
92
|
+
default:
|
93
|
+
if (!M)
|
94
|
+
for (I = 1, M = new Array(S - 1); I < S; I++)
|
95
|
+
M[I - 1] = arguments[I];
|
96
|
+
l[y].fn.apply(l[y].context, M);
|
97
|
+
}
|
98
|
+
}
|
99
|
+
return !0;
|
100
|
+
}, u.prototype.on = function(i, o, c) {
|
101
|
+
return f(this, i, o, c, !1);
|
102
|
+
}, u.prototype.once = function(i, o, c) {
|
103
|
+
return f(this, i, o, c, !0);
|
104
|
+
}, u.prototype.removeListener = function(i, o, c, v) {
|
105
|
+
var g = e ? e + i : i;
|
106
|
+
if (!this._events[g])
|
107
|
+
return this;
|
108
|
+
if (!o)
|
109
|
+
return d(this, g), this;
|
110
|
+
var w = this._events[g];
|
111
|
+
if (w.fn)
|
112
|
+
w.fn === o && (!v || w.once) && (!c || w.context === c) && d(this, g);
|
113
|
+
else {
|
114
|
+
for (var j = 0, l = [], S = w.length; j < S; j++)
|
115
|
+
(w[j].fn !== o || v && !w[j].once || c && w[j].context !== c) && l.push(w[j]);
|
116
|
+
l.length ? this._events[g] = l.length === 1 ? l[0] : l : d(this, g);
|
117
|
+
}
|
118
|
+
return this;
|
119
|
+
}, u.prototype.removeAllListeners = function(i) {
|
120
|
+
var o;
|
121
|
+
return i ? (o = e ? e + i : i, this._events[o] && d(this, o)) : (this._events = new a(), this._eventsCount = 0), this;
|
122
|
+
}, u.prototype.off = u.prototype.removeListener, u.prototype.addListener = u.prototype.on, u.prefixed = e, u.EventEmitter = u, r.exports = u;
|
123
|
+
})(ne);
|
124
|
+
var ie = ne.exports;
|
125
|
+
const oe = /* @__PURE__ */ te(ie);
|
126
|
+
var le = function(t) {
|
127
|
+
return ae(t) && !ce(t);
|
128
|
+
};
|
129
|
+
function ae(r) {
|
130
|
+
return !!r && typeof r == "object";
|
131
|
+
}
|
132
|
+
function ce(r) {
|
133
|
+
var t = Object.prototype.toString.call(r);
|
134
|
+
return t === "[object RegExp]" || t === "[object Date]" || fe(r);
|
135
|
+
}
|
136
|
+
var he = typeof Symbol == "function" && Symbol.for, ue = he ? Symbol.for("react.element") : 60103;
|
137
|
+
function fe(r) {
|
138
|
+
return r.$$typeof === ue;
|
139
|
+
}
|
140
|
+
function de(r) {
|
141
|
+
return Array.isArray(r) ? [] : {};
|
142
|
+
}
|
143
|
+
function U(r, t) {
|
144
|
+
return t.clone !== !1 && t.isMergeableObject(r) ? D(de(r), r, t) : r;
|
145
|
+
}
|
146
|
+
function pe(r, t, e) {
|
147
|
+
return r.concat(t).map(function(a) {
|
148
|
+
return U(a, e);
|
149
|
+
});
|
150
|
+
}
|
151
|
+
function we(r, t) {
|
152
|
+
if (!t.customMerge)
|
153
|
+
return D;
|
154
|
+
var e = t.customMerge(r);
|
155
|
+
return typeof e == "function" ? e : D;
|
156
|
+
}
|
157
|
+
function ye(r) {
|
158
|
+
return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(r).filter(function(t) {
|
159
|
+
return Object.propertyIsEnumerable.call(r, t);
|
160
|
+
}) : [];
|
161
|
+
}
|
162
|
+
function Q(r) {
|
163
|
+
return Object.keys(r).concat(ye(r));
|
164
|
+
}
|
165
|
+
function re(r, t) {
|
166
|
+
try {
|
167
|
+
return t in r;
|
168
|
+
} catch {
|
169
|
+
return !1;
|
170
|
+
}
|
171
|
+
}
|
172
|
+
function be(r, t) {
|
173
|
+
return re(r, t) && !(Object.hasOwnProperty.call(r, t) && Object.propertyIsEnumerable.call(r, t));
|
174
|
+
}
|
175
|
+
function me(r, t, e) {
|
176
|
+
var a = {};
|
177
|
+
return e.isMergeableObject(r) && Q(r).forEach(function(s) {
|
178
|
+
a[s] = U(r[s], e);
|
179
|
+
}), Q(t).forEach(function(s) {
|
180
|
+
be(r, s) || (re(r, s) && e.isMergeableObject(t[s]) ? a[s] = we(s, e)(r[s], t[s], e) : a[s] = U(t[s], e));
|
181
|
+
}), a;
|
182
|
+
}
|
183
|
+
function D(r, t, e) {
|
184
|
+
e = e || {}, e.arrayMerge = e.arrayMerge || pe, e.isMergeableObject = e.isMergeableObject || le, e.cloneUnlessOtherwiseSpecified = U;
|
185
|
+
var a = Array.isArray(t), s = Array.isArray(r), f = a === s;
|
186
|
+
return f ? a ? e.arrayMerge(r, t, e) : me(r, t, e) : U(t, e);
|
187
|
+
}
|
188
|
+
D.all = function(t, e) {
|
189
|
+
if (!Array.isArray(t))
|
190
|
+
throw new Error("first argument should be an array");
|
191
|
+
return t.reduce(function(a, s) {
|
192
|
+
return D(a, s, e);
|
193
|
+
}, {});
|
194
|
+
};
|
195
|
+
var ge = D, Oe = ge;
|
196
|
+
const ve = /* @__PURE__ */ te(Oe);
|
197
|
+
/*!
|
198
|
+
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
|
199
|
+
*
|
200
|
+
* Copyright (c) 2014-2017, Jon Schlinkert.
|
201
|
+
* Released under the MIT License.
|
202
|
+
*/
|
203
|
+
function W(r) {
|
204
|
+
return Object.prototype.toString.call(r) === "[object Object]";
|
205
|
+
}
|
206
|
+
function Ae(r) {
|
207
|
+
var t, e;
|
208
|
+
return W(r) === !1 ? !1 : (t = r.constructor, t === void 0 ? !0 : (e = t.prototype, !(W(e) === !1 || e.hasOwnProperty("isPrototypeOf") === !1)));
|
209
|
+
}
|
210
|
+
function Y(r) {
|
211
|
+
return r instanceof Element ? r : document.querySelector(r);
|
212
|
+
}
|
213
|
+
async function X(r) {
|
214
|
+
return await new Promise((t) => setTimeout(t, r));
|
215
|
+
}
|
216
|
+
const Ee = '[data-elem="drawer.panel"]', $ = "data-drawers-group", Ce = [
|
217
|
+
"a[href]",
|
218
|
+
"area[href]",
|
219
|
+
'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
|
220
|
+
"select:not([disabled]):not([aria-hidden])",
|
221
|
+
"textarea:not([disabled]):not([aria-hidden])",
|
222
|
+
"button:not([disabled]):not([aria-hidden])",
|
223
|
+
"iframe",
|
224
|
+
"object",
|
225
|
+
"embed",
|
226
|
+
"[contenteditable]",
|
227
|
+
'[tabindex]:not([tabindex^="-"])'
|
228
|
+
], Z = {
|
229
|
+
modal: !0,
|
230
|
+
focusOnChild: !0,
|
231
|
+
closeOnEsc: !0,
|
232
|
+
closeOnOutsideClick: !0,
|
233
|
+
closeOnUnderlayClick: !0,
|
234
|
+
onCloseConfirm: () => !0,
|
235
|
+
onBeforeClose: null,
|
236
|
+
onClose: null,
|
237
|
+
onCloseAnimationEnd: null,
|
238
|
+
onBeforeOpen: null,
|
239
|
+
onOpen: null,
|
240
|
+
onOpenAnimationEnd: null,
|
241
|
+
openClass: "drawer_open",
|
242
|
+
openAnimationDuration: 0,
|
243
|
+
closeAnimationDuration: 0,
|
244
|
+
lockPageScroll: !0
|
245
|
+
};
|
246
|
+
function ee(r) {
|
247
|
+
return ve.all(r, {
|
248
|
+
isMergeableObject: Ae
|
249
|
+
});
|
250
|
+
}
|
251
|
+
var E, A, P, N;
|
252
|
+
class H {
|
253
|
+
constructor({ target: t, type: e, owner: a }) {
|
254
|
+
b(this, E, void 0);
|
255
|
+
b(this, A, void 0);
|
256
|
+
b(this, P, void 0);
|
257
|
+
b(this, N, !1);
|
258
|
+
const s = Y(t);
|
259
|
+
if (!s)
|
260
|
+
throw new Error("Trigger element cannot be found");
|
261
|
+
m(this, E, s), m(this, A, a), m(this, P, e), this.init();
|
262
|
+
}
|
263
|
+
// Accessors
|
264
|
+
get isActive() {
|
265
|
+
return n(this, N);
|
266
|
+
}
|
267
|
+
get owner() {
|
268
|
+
return n(this, A);
|
269
|
+
}
|
270
|
+
// Methods
|
271
|
+
init() {
|
272
|
+
n(this, E).addEventListener("click", (t) => this.clickHandler(t)), n(this, A).on("open", () => this.setActive(!0)), n(this, A).on("close", () => this.setActive(!1));
|
273
|
+
}
|
274
|
+
clickHandler(t) {
|
275
|
+
t.__drawerTrigger = this, n(this, P) === "open" ? n(this, A).isOpen || n(this, A).open(n(this, E)) : n(this, P) === "close" ? n(this, A).isOpen && n(this, A).close(n(this, E)) : n(this, A).isOpen ? n(this, A).close(n(this, E)) : n(this, A).open(n(this, E));
|
276
|
+
}
|
277
|
+
setActive(t) {
|
278
|
+
m(this, N, t), t ? n(this, E).classList.add("drawer-trigger_active") : n(this, E).classList.remove("drawer-trigger_active");
|
279
|
+
}
|
280
|
+
}
|
281
|
+
E = new WeakMap(), A = new WeakMap(), P = new WeakMap(), N = new WeakMap();
|
282
|
+
var p, q, O, x, F, R;
|
283
|
+
class _e extends oe {
|
284
|
+
constructor({ target: e, options: a }) {
|
285
|
+
super();
|
286
|
+
b(this, p, void 0);
|
287
|
+
b(this, q, void 0);
|
288
|
+
b(this, O, void 0);
|
289
|
+
b(this, x, void 0);
|
290
|
+
b(this, F, void 0);
|
291
|
+
b(this, R, void 0);
|
292
|
+
this.handleDocumentClick = async (u) => {
|
293
|
+
var o;
|
294
|
+
if (((o = u.__drawerTrigger) == null ? void 0 : o.owner) === this)
|
295
|
+
return;
|
296
|
+
const h = u.target;
|
297
|
+
if (u.composedPath(), n(this, O).panel.contains(h))
|
298
|
+
return;
|
299
|
+
const i = h == null ? void 0 : h.closest("[data-drawer]");
|
300
|
+
i ? i.getAttribute("data-drawer") === n(this, R) ? this.handleUnderlayClick(u) : this.handleOtherDrawerClick(u) : this.handleOutsideClick(u);
|
301
|
+
}, this.handleKeydown = (u) => {
|
302
|
+
n(this, p).closeOnEsc && u.key === "Escape" && this.close();
|
303
|
+
};
|
304
|
+
const s = ee(a ? [Z, a] : [Z]), f = Y(e);
|
305
|
+
if (f === null)
|
306
|
+
throw new Error("Drawer's root cannot be found");
|
307
|
+
const d = f.querySelector(Ee);
|
308
|
+
if (d === null)
|
309
|
+
throw new Error("Drawer's panel cannot be found");
|
310
|
+
m(this, O, {
|
311
|
+
root: f,
|
312
|
+
panel: d
|
313
|
+
}), m(this, R, f.getAttribute("data-drawer")), this.setOptions(s), n(this, O).panel.setAttribute("tabindex", "-1"), n(this, O).root.classList.add("drawer_initialized");
|
314
|
+
}
|
315
|
+
addEventListeners() {
|
316
|
+
n(this, O).root.addEventListener("keydown", this.handleKeydown), document.addEventListener("click", this.handleDocumentClick);
|
317
|
+
}
|
318
|
+
removeEventListeners() {
|
319
|
+
n(this, O).root.removeEventListener("keydown", this.handleKeydown), document.removeEventListener("click", this.handleDocumentClick);
|
320
|
+
}
|
321
|
+
// Accessors
|
322
|
+
get isOpen() {
|
323
|
+
return n(this, x);
|
324
|
+
}
|
325
|
+
get isModal() {
|
326
|
+
return n(this, p).modal;
|
327
|
+
}
|
328
|
+
set isModal(e) {
|
329
|
+
n(this, O).root.classList[e ? "add" : "remove"]("drawer_modal");
|
330
|
+
}
|
331
|
+
set zIndex(e) {
|
332
|
+
n(this, O).root.style.setProperty("--z-index", String(e)), m(this, q, e);
|
333
|
+
}
|
334
|
+
get zIndex() {
|
335
|
+
return n(this, q);
|
336
|
+
}
|
337
|
+
// Methods
|
338
|
+
async open(e) {
|
339
|
+
n(this, x) || (this.emit("beforeOpen", { drawer: this, trigger: e }), m(this, x, !0), n(this, O).root.classList.add(n(this, p).openClass), this.emit("open", { drawer: this, trigger: e }), typeof n(this, p).openAnimationDuration == "number" && X(n(this, p).openAnimationDuration), this.emit("openAnimationEnd", { drawer: this, trigger: e }), this.focus(), this.addEventListeners());
|
340
|
+
}
|
341
|
+
async close(e) {
|
342
|
+
n(this, p).onCloseConfirm && !n(this, p).onCloseConfirm(this, e) || (this.emit("beforeClose", { drawer: this, trigger: e }), this.removeEventListeners(), m(this, x, !1), n(this, O).root.classList.remove(n(this, p).openClass), this.emit("close", { drawer: this, trigger: e }), typeof n(this, p).closeAnimationDuration == "number" && X(n(this, p).closeAnimationDuration), this.emit("closeAnimationEnd", { drawer: this, trigger: e }));
|
343
|
+
}
|
344
|
+
handleOtherDrawerClick(e) {
|
345
|
+
}
|
346
|
+
handleOutsideClick(e) {
|
347
|
+
console.log(this, "handleOutsideClick"), n(this, p).closeOnOutsideClick && (typeof n(this, p).closeOnOutsideClick == "object" && n(this, p).closeOnOutsideClick.hasOwnProperty("checkTarget") ? n(this, p).closeOnOutsideClick.checkTarget(e.target) && this.close() : this.close());
|
348
|
+
}
|
349
|
+
handleUnderlayClick(e) {
|
350
|
+
n(this, p).closeOnOutsideClick && this.close();
|
351
|
+
}
|
352
|
+
focus() {
|
353
|
+
n(this, p).focusOnChild && this.focusChild() || this.focusSelf();
|
354
|
+
}
|
355
|
+
focusSelf() {
|
356
|
+
n(this, O).panel.focus();
|
357
|
+
}
|
358
|
+
focusChild() {
|
359
|
+
const e = n(this, O).panel.querySelector(Ce.join(","));
|
360
|
+
return e ? (e.focus(), !0) : !1;
|
361
|
+
}
|
362
|
+
setOptions(e) {
|
363
|
+
var a;
|
364
|
+
e.hasOwnProperty("modal") && ((a = n(this, p)) == null ? void 0 : a.modal) !== e.modal && (this.isModal = e.modal), m(this, p, n(this, p) ? ee([n(this, p), e]) : e);
|
365
|
+
}
|
366
|
+
assignGroup(e) {
|
367
|
+
m(this, F, e);
|
368
|
+
}
|
369
|
+
}
|
370
|
+
p = new WeakMap(), q = new WeakMap(), O = new WeakMap(), x = new WeakMap(), F = new WeakMap(), R = new WeakMap();
|
371
|
+
var B, C, _, T, L, k;
|
372
|
+
class je {
|
373
|
+
constructor(t) {
|
374
|
+
b(this, B, void 0);
|
375
|
+
b(this, C, void 0);
|
376
|
+
b(this, _, void 0);
|
377
|
+
b(this, T, void 0);
|
378
|
+
b(this, L, void 0);
|
379
|
+
b(this, k, void 0);
|
380
|
+
m(this, C, []), m(this, _, []), m(this, L, /* @__PURE__ */ new Set()), m(this, k, /* @__PURE__ */ new Map()), this.onBeforeOpen = ({ drawer: s, trigger: f }) => {
|
381
|
+
s.isModal ? (n(this, k).set(s, n(this, C).length), n(this, C).push(s), s.zIndex = n(this, _).length + n(this, C).length) : (n(this, k).set(s, n(this, _).length), n(this, _).push(s), s.zIndex = n(this, _).length, n(this, C).length > 0 && n(this, C).forEach((d, u) => d.zIndex = n(this, _).length + u + 1)), this.lockScroll(s);
|
382
|
+
}, this.onCloseAnimationEnd = ({ drawer: s, trigger: f }) => {
|
383
|
+
const d = s.isModal ? n(this, C) : n(this, _);
|
384
|
+
for (delete d[n(this, k).get(s)]; d.length && !d.at(-1); )
|
385
|
+
d.pop();
|
386
|
+
n(this, k).delete(s), this.unlockScroll(s);
|
387
|
+
};
|
388
|
+
const e = Y(t);
|
389
|
+
if (e === null)
|
390
|
+
throw new Error("Drawer's group root cannot be found");
|
391
|
+
m(this, B, e);
|
392
|
+
const a = n(this, B).closest("[data-scrollable], html");
|
393
|
+
if (a === null)
|
394
|
+
throw new Error("Scrollable container for group root cannot be found");
|
395
|
+
m(this, T, a);
|
396
|
+
}
|
397
|
+
add(t) {
|
398
|
+
t.on("beforeOpen", this.onBeforeOpen), t.on("closeAnimationEnd", this.onCloseAnimationEnd), t.assignGroup(this);
|
399
|
+
}
|
400
|
+
lockScroll(t) {
|
401
|
+
n(this, L).size === 0 && n(this, T).classList.add("scroll-lock-by-drawer"), n(this, L).add(t);
|
402
|
+
}
|
403
|
+
unlockScroll(t) {
|
404
|
+
n(this, L).delete(t), n(this, L).size === 0 && n(this, T).classList.remove("scroll-lock-by-drawer");
|
405
|
+
}
|
406
|
+
}
|
407
|
+
B = new WeakMap(), C = new WeakMap(), _ = new WeakMap(), T = new WeakMap(), L = new WeakMap(), k = new WeakMap();
|
408
|
+
var G, K;
|
409
|
+
const z = class z {
|
410
|
+
constructor() {
|
411
|
+
b(this, G, /* @__PURE__ */ new Map());
|
412
|
+
b(this, K, /* @__PURE__ */ new Map());
|
413
|
+
if (z.instance)
|
414
|
+
return z.instance;
|
415
|
+
z.instance = this;
|
416
|
+
}
|
417
|
+
init(t) {
|
418
|
+
document.querySelectorAll(`[${$}]`).forEach((f) => {
|
419
|
+
const d = f.getAttribute($);
|
420
|
+
typeof d == "string" && n(this, K).set(d, new je(f));
|
421
|
+
}), document.querySelectorAll("[data-drawer]").forEach((f) => {
|
422
|
+
var o;
|
423
|
+
const d = f.getAttribute("data-drawer");
|
424
|
+
if (typeof d != "string")
|
425
|
+
return;
|
426
|
+
const u = new _e({ target: f, options: t });
|
427
|
+
n(this, G).set(d, u);
|
428
|
+
const h = f.closest(`[${$}]`), i = h == null ? void 0 : h.getAttribute($);
|
429
|
+
if (typeof i != "string")
|
430
|
+
throw new Error("Group doesn't have alias set correctly");
|
431
|
+
(o = n(this, K).get(i)) == null || o.add(u);
|
432
|
+
}), document.querySelectorAll("[data-drawer-open], [data-drawer-close], [data-drawer-toggle]").forEach((f) => {
|
433
|
+
if (f.hasAttribute("data-drawer-open")) {
|
434
|
+
const d = f.getAttribute("data-drawer-open");
|
435
|
+
new H({ target: f, type: "open", owner: this.get(d) });
|
436
|
+
} else if (f.hasAttribute("data-drawer-close")) {
|
437
|
+
const d = f.getAttribute("data-drawer-close");
|
438
|
+
new H({ target: f, type: "close", owner: this.get(d) });
|
439
|
+
} else {
|
440
|
+
const d = f.getAttribute("data-drawer-toggle");
|
441
|
+
new H({ target: f, type: "toggle", owner: this.get(d) });
|
442
|
+
}
|
443
|
+
});
|
444
|
+
}
|
445
|
+
open(t, { trigger: e, options: a } = {}) {
|
446
|
+
var s;
|
447
|
+
(s = this.get(t)) == null || s.open(e);
|
448
|
+
}
|
449
|
+
close(t, { trigger: e, options: a } = {}) {
|
450
|
+
var s;
|
451
|
+
(s = this.get(t)) == null || s.close(e);
|
452
|
+
}
|
453
|
+
get(t) {
|
454
|
+
return typeof t == "string" && n(this, G).get(t) || null;
|
455
|
+
}
|
456
|
+
};
|
457
|
+
G = new WeakMap(), K = new WeakMap();
|
458
|
+
let V = z;
|
459
|
+
typeof window < "u" && (window.hasOwnProperty("app") || (window.app = {}), window.app.drawers = new V());
|
460
|
+
export {
|
461
|
+
_e as Drawer,
|
462
|
+
je as DrawersGroup,
|
463
|
+
H as Trigger,
|
464
|
+
V as default
|
465
|
+
};
|
package/dist/drawers.umd.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
-
(function(
|
2
|
-
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
|
3
|
-
*
|
4
|
-
* Copyright (c) 2014-2017, Jon Schlinkert.
|
5
|
-
* Released under the MIT License.
|
6
|
-
*/function
|
1
|
+
(function(p,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(p=typeof globalThis<"u"?globalThis:p||self,g(p.Drawers={}))})(this,function(p){"use strict";var le=(p,g,_)=>{if(!g.has(p))throw TypeError("Cannot "+_)};var t=(p,g,_)=>(le(p,g,"read from private field"),_?_.call(p):g.get(p)),m=(p,g,_)=>{if(g.has(p))throw TypeError("Cannot add the same private member more than once");g instanceof WeakSet?g.add(p):g.set(p,_)},O=(p,g,_,V)=>(le(p,g,"write to private field"),V?V.call(p,_):g.set(p,_),_);var j,E,z,q,w,G,A,P,W,R,B,S,L,U,k,x,K,$;function g(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 u(){}Object.create&&(u.prototype=Object.create(null),new u().__proto__||(e=!1));function s(c,i,o){this.fn=c,this.context=i,this.once=o||!1}function f(c,i,o,a,C){if(typeof o!="function")throw new TypeError("The listener must be a function");var v=new s(o,a||c,C),y=e?e+i:i;return c._events[y]?c._events[y].fn?c._events[y]=[c._events[y],v]:c._events[y].push(v):(c._events[y]=v,c._eventsCount++),c}function d(c,i){--c._eventsCount===0?c._events=new u:delete c._events[i]}function h(){this._events=new u,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,D,b;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(b=1,D=new Array(T-1);b<T;b++)D[b-1]=arguments[b];l.fn.apply(l.context,D)}else{var Se=l.length,H;for(b=0;b<Se;b++)switch(l[b].once&&this.removeListener(i,l[b].fn,void 0,!0),T){case 1:l[b].fn.call(l[b].context);break;case 2:l[b].fn.call(l[b].context,o);break;case 3:l[b].fn.call(l[b].context,o,a);break;case 4:l[b].fn.call(l[b].context,o,a,C);break;default:if(!D)for(H=1,D=new Array(T-1);H<T;H++)D[H-1]=arguments[H];l[b].fn.apply(l[b].context,D)}}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 u,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=g(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 N(r,n){return n.clone!==!1&&n.isMergeableObject(r)?I(we(r),r,n):r}function ye(r,n,e){return r.concat(n).map(function(u){return N(u,e)})}function be(r,n){if(!n.customMerge)return I;var e=n.customMerge(r);return typeof e=="function"?e:I}function ge(r){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(r).filter(function(n){return Object.propertyIsEnumerable.call(r,n)}):[]}function Z(r){return Object.keys(r).concat(ge(r))}function ee(r,n){try{return n in r}catch{return!1}}function me(r,n){return ee(r,n)&&!(Object.hasOwnProperty.call(r,n)&&Object.propertyIsEnumerable.call(r,n))}function Oe(r,n,e){var u={};return e.isMergeableObject(r)&&Z(r).forEach(function(s){u[s]=N(r[s],e)}),Z(n).forEach(function(s){me(r,s)||(ee(r,s)&&e.isMergeableObject(n[s])?u[s]=be(s,e)(r[s],n[s],e):u[s]=N(n[s],e))}),u}function I(r,n,e){e=e||{},e.arrayMerge=e.arrayMerge||ye,e.isMergeableObject=e.isMergeableObject||ce,e.cloneUnlessOtherwiseSpecified=N;var u=Array.isArray(n),s=Array.isArray(r),f=u===s;return f?u?e.arrayMerge(r,n,e):Oe(r,n,e):N(n,e)}I.all=function(n,e){if(!Array.isArray(n))throw new Error("first argument should be an array");return n.reduce(function(u,s){return I(u,s,e)},{})};var ve=I,Ae=ve;const Ee=g(Ae);/*!
|
2
|
+
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
|
3
|
+
*
|
4
|
+
* Copyright (c) 2014-2017, Jon Schlinkert.
|
5
|
+
* Released under the MIT License.
|
6
|
+
*/function te(r){return Object.prototype.toString.call(r)==="[object Object]"}function Ce(r){var n,e;return te(r)===!1?!1:(n=r.constructor,n===void 0?!0:(e=n.prototype,!(te(e)===!1||e.hasOwnProperty("isPrototypeOf")===!1)))}function X(r){return r instanceof Element?r:document.querySelector(r)}async function ne(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^="-"])'],re={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 se(r){return Ee.all(r,{isMergeableObject:Ce})}class J{constructor({target:n,type:e,owner:u}){m(this,j,void 0);m(this,E,void 0);m(this,z,void 0);m(this,q,!1);const s=X(n);if(!s)throw new Error("Trigger element cannot be found");O(this,j,s),O(this,E,u),O(this,z,e),this.init()}get isActive(){return t(this,q)}get owner(){return t(this,E)}init(){t(this,j).addEventListener("click",n=>this.clickHandler(n)),t(this,E).on("open",()=>this.setActive(!0)),t(this,E).on("close",()=>this.setActive(!1))}clickHandler(n){n.__drawerTrigger=this,t(this,z)==="open"?t(this,E).isOpen||t(this,E).open(t(this,j)):t(this,z)==="close"?t(this,E).isOpen&&t(this,E).close(t(this,j)):t(this,E).isOpen?t(this,E).close(t(this,j)):t(this,E).open(t(this,j))}setActive(n){O(this,q,n),n?t(this,j).classList.add("drawer-trigger_active"):t(this,j).classList.remove("drawer-trigger_active")}}j=new WeakMap,E=new WeakMap,z=new WeakMap,q=new WeakMap;class ie extends ae{constructor({target:e,options:u}){super();m(this,w,void 0);m(this,G,void 0);m(this,A,void 0);m(this,P,void 0);m(this,W,void 0);m(this,R,void 0);this.handleDocumentClick=async h=>{var o;if(((o=h.__drawerTrigger)==null?void 0:o.owner)===this)return;const c=h.target;if(h.composedPath(),t(this,A).panel.contains(c))return;const i=c==null?void 0:c.closest("[data-drawer]");i?i.getAttribute("data-drawer")===t(this,R)?this.handleUnderlayClick(h):this.handleOtherDrawerClick(h):this.handleOutsideClick(h)},this.handleKeydown=h=>{t(this,w).closeOnEsc&&h.key==="Escape"&&this.close()};const s=se(u?[re,u]:[re]),f=X(e);if(f===null)throw new Error("Drawer's root cannot be found");const d=f.querySelector(_e);if(d===null)throw new Error("Drawer's panel cannot be found");O(this,A,{root:f,panel:d}),O(this,R,f.getAttribute("data-drawer")),this.setOptions(s),t(this,A).panel.setAttribute("tabindex","-1"),t(this,A).root.classList.add("drawer_initialized")}addEventListeners(){t(this,A).root.addEventListener("keydown",this.handleKeydown),document.addEventListener("click",this.handleDocumentClick)}removeEventListeners(){t(this,A).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,A).root.classList[e?"add":"remove"]("drawer_modal")}set zIndex(e){t(this,A).root.style.setProperty("--z-index",String(e)),O(this,G,e)}get zIndex(){return t(this,G)}async open(e){t(this,P)||(this.emit("beforeOpen",{drawer:this,trigger:e}),O(this,P,!0),t(this,A).root.classList.add(t(this,w).openClass),this.emit("open",{drawer:this,trigger:e}),typeof t(this,w).openAnimationDuration=="number"&&ne(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,A).root.classList.remove(t(this,w).openClass),this.emit("close",{drawer:this,trigger:e}),typeof t(this,w).closeAnimationDuration=="number"&&ne(t(this,w).closeAnimationDuration),this.emit("closeAnimationEnd",{drawer:this,trigger:e}))}handleOtherDrawerClick(e){}handleOutsideClick(e){console.log(this,"handleOutsideClick"),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,A).panel.focus()}focusChild(){const e=t(this,A).panel.querySelector(je.join(","));return e?(e.focus(),!0):!1}setOptions(e){var u;e.hasOwnProperty("modal")&&((u=t(this,w))==null?void 0:u.modal)!==e.modal&&(this.isModal=e.modal),O(this,w,t(this,w)?se([t(this,w),e]):e)}assignGroup(e){O(this,W,e)}}w=new WeakMap,G=new WeakMap,A=new WeakMap,P=new WeakMap,W=new WeakMap,R=new WeakMap;class oe{constructor(n){m(this,B,void 0);m(this,S,void 0);m(this,L,void 0);m(this,U,void 0);m(this,k,void 0);m(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,B,e);const u=t(this,B).closest("[data-scrollable], html");if(u===null)throw new Error("Scrollable container for group root cannot be found");O(this,U,u)}add(n){n.on("beforeOpen",this.onBeforeOpen),n.on("closeAnimationEnd",this.onCloseAnimationEnd),n.assignGroup(this)}lockScroll(n){t(this,k).size===0&&t(this,U).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,U).classList.remove("scroll-lock-by-drawer")}}B=new WeakMap,S=new WeakMap,L=new WeakMap,U=new WeakMap,k=new WeakMap,x=new WeakMap;const F=class F{constructor(){m(this,K,new Map);m(this,$,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,$).set(d,new oe(f))}),document.querySelectorAll("[data-drawer]").forEach(f=>{var o;const d=f.getAttribute("data-drawer");if(typeof d!="string")return;const h=new ie({target:f,options:n});t(this,K).set(d,h);const c=f.closest(`[${Y}]`),i=c==null?void 0:c.getAttribute(Y);if(typeof i!="string")throw new Error("Group doesn't have alias set correctly");(o=t(this,$).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:u}={}){var s;(s=this.get(n))==null||s.open(e)}close(n,{trigger:e,options:u}={}){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,$=new WeakMap;let Q=F;typeof window<"u"&&(window.hasOwnProperty("app")||(window.app={}),window.app.drawers=new Q),p.Drawer=ie,p.DrawersGroup=oe,p.Trigger=J,p.default=Q,Object.defineProperties(p,{__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{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden}.drawer:nth-child(1){background-color:#0ff}.drawer:nth-child(2){background-color:#8a2be2}.drawer:nth-child(3){background-color:brown}.drawer{position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:all}.drawer:not(.transition,.drawer_open){visibility:hidden}.drawer__panel{height:
|
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{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden}.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}.drawer{display:flex;justify-content:center;position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:all;background-color:#4e4e4e57;z-index:var(--z-index)}.drawer:not(.transition,.drawer_open){visibility:hidden}.drawer__panel{display:flex;height:100%;width:100%;max-width:600px;max-height:400px;margin:auto;overflow-x:hidden;visibility:hidden;opacity:0}.drawer__body{flex:1 1 auto;padding:20px}.drawer.transition .drawer__panel{transition:visibility .4s,opacity .4s,transform .4s}.drawer_open .drawer__panel{visibility:visible;opacity:1;transform:none}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "vanilla-drawers",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.2",
|
4
4
|
"description": "Drawers controller.",
|
5
5
|
"files": [
|
6
6
|
"dist"
|
@@ -14,9 +14,6 @@
|
|
14
14
|
"require": "./dist/drawers.umd.js"
|
15
15
|
}
|
16
16
|
},
|
17
|
-
"scripts": {
|
18
|
-
"test": "echo \"Error: no test specified\" && exit 1"
|
19
|
-
},
|
20
17
|
"repository": {
|
21
18
|
"type": "git",
|
22
19
|
"url": "git+https://github.com/techno-trump/drawers.git"
|
@@ -44,5 +41,8 @@
|
|
44
41
|
"is-plain-object": "^5.0.0",
|
45
42
|
"typescript": "^5.3.3",
|
46
43
|
"vite": "^5.0.10"
|
44
|
+
},
|
45
|
+
"scripts": {
|
46
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
47
47
|
}
|
48
|
-
}
|
48
|
+
}
|