j1-template 2023.4.1 → 2023.4.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/assets/data/masterslider.html +1 -1
- data/assets/themes/j1/adapter/js/advertising.js +1 -0
- data/assets/themes/j1/adapter/js/algolia.js +1 -0
- data/assets/themes/j1/adapter/js/analytics.js +1 -0
- data/assets/themes/j1/adapter/js/asciidoctor.js +1 -0
- data/assets/themes/j1/adapter/js/bmd.js +1 -0
- data/assets/themes/j1/adapter/js/carousel.js +1 -0
- data/assets/themes/j1/adapter/js/clipboard.js +1 -0
- data/assets/themes/j1/adapter/js/comments.js +1 -0
- data/assets/themes/j1/adapter/js/cookieConsent.js +6 -5
- data/assets/themes/j1/adapter/js/customFunctions.js +1 -0
- data/assets/themes/j1/adapter/js/customModule.js +1 -0
- data/assets/themes/j1/adapter/js/dropdowns.js +1 -0
- data/assets/themes/j1/adapter/js/fab.js +1 -0
- data/assets/themes/j1/adapter/js/framer.js +1 -0
- data/assets/themes/j1/adapter/js/justifiedGallery.js +1 -0
- data/assets/themes/j1/adapter/js/justifiedGalleryCustomizer.js +1 -1
- data/assets/themes/j1/adapter/js/lazyLoader.js +1 -0
- data/assets/themes/j1/adapter/js/lightbox.js +1 -0
- data/assets/themes/j1/adapter/js/logger.js +1 -0
- data/assets/themes/j1/adapter/js/lunr.js +1 -0
- data/assets/themes/j1/adapter/js/masonry.js +1 -0
- data/assets/themes/j1/adapter/js/masterslider.js +1 -0
- data/assets/themes/j1/adapter/js/mmenu.js +1 -0
- data/assets/themes/j1/adapter/js/navigator.js +1 -0
- data/assets/themes/j1/adapter/js/particles.js +1 -0
- data/assets/themes/j1/adapter/js/rangeSlider.js +1 -0
- data/assets/themes/j1/adapter/js/rouge.js +2 -1
- data/assets/themes/j1/adapter/js/rtable.js +1 -0
- data/assets/themes/j1/adapter/js/rtextResizer.js +2 -1
- data/assets/themes/j1/adapter/js/scroller.js +1 -0
- data/assets/themes/j1/adapter/js/slick.js +3 -2
- data/assets/themes/j1/adapter/js/themeToggler.js +1 -0
- data/assets/themes/j1/adapter/js/themer.js +1 -0
- data/assets/themes/j1/adapter/js/toccer.js +1 -0
- data/assets/themes/j1/adapter/js/translator.js +1 -0
- data/assets/themes/j1/adapter/js/waves.js +1 -0
- data/assets/themes/j1/core/js/template.js +16 -6
- data/assets/themes/j1/core/js/template.min.js +1 -1
- data/assets/themes/j1/core/js/template.min.js.map +1 -1
- data/assets/themes/j1/modules/backstretch/LICENSE-MIT +22 -0
- data/assets/themes/j1/modules/backstretch/README.md +411 -0
- data/assets/themes/j1/modules/backstretch/js/v2.1.16/backstretch.js +1 -3
- data/assets/themes/j1/modules/backstretch/js/v2.1.16/backstretch.min.js +1 -2
- data/assets/themes/j1/modules/clipboard/js/clipboard.js +0 -1
- data/assets/themes/j1/modules/clipboard/js/clipboard.min.js +3 -2
- data/assets/themes/j1/modules/dropdowns/js/cash.js +4 -5
- data/assets/themes/j1/modules/dropdowns/js/cash.min.js +19 -0
- data/assets/themes/j1/modules/dropdowns/js/dropdowns.min.js +20 -0
- data/assets/themes/j1/modules/fab/js/cash.js +0 -2
- data/assets/themes/j1/modules/fab/js/cash.min.js +20 -0
- data/assets/themes/j1/modules/fab/js/fab.min.js +20 -0
- data/assets/themes/j1/modules/iconPicker/icons-libraries/mdi-icons-light.json +0 -22
- data/assets/themes/j1/modules/iconPicker/icons-libraries/mdi-icons-light.min.json +1 -1
- data/assets/themes/j1/modules/iconifyAPI/js/iconify.js +13 -0
- data/assets/themes/j1/modules/msDropdown/css/themes/uno/msDropdown.css +2 -14
- data/assets/themes/j1/modules/msDropdown/css/themes/uno/msDropdown.min.css +3 -2
- data/assets/themes/j1/modules/rouge/css/base16/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/base16.dark/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/base16.light/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/base16.monokai/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/base16.monokai.dark/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/base16.monokai.light/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/base16.solarized/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/base16.solarized.dark/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/base16.solarized.light/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/colorful/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/github/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/gruvbox/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/gruvbox.dark/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/gruvbox.light/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/igorpro/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/molokai/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/monokai/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/monokai.sublime/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/pastie/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/thankful_eyes/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/tulip/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/uno.dark/theme.min.css +19 -0
- data/assets/themes/j1/modules/rouge/css/uno.light/theme.min.css +19 -0
- data/assets/themes/j1/modules/slimSelect/css/select.css +486 -479
- data/assets/themes/j1/modules/slimSelect/css/select.min.css +8 -0
- data/assets/themes/j1/modules/slimSelect/js/select.js +1834 -1827
- data/assets/themes/j1/modules/slimSelect/js/select.min.js +8 -0
- data/assets/themes/j1/modules/vimeo/froogaloop/js/froogaloop2.js +4 -0
- data/lib/j1/version.rb +1 -1
- data/lib/starter_web/README.md +5 -5
- data/lib/starter_web/_config.yml +1 -1
- data/lib/starter_web/_data/modules/defaults/iconPicker.yml +3 -7
- data/lib/starter_web/_data/modules/lazyLoader.yml +5 -5
- data/lib/starter_web/_data/modules/navigator_menu.yml +7 -4
- data/lib/starter_web/_data/resources.yml +23 -28
- data/lib/starter_web/_data/templates/feed.xml +1 -1
- data/lib/starter_web/_plugins/index/lunr.rb +1 -1
- data/lib/starter_web/package.json +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/_includes/attributes.asciidoc +1 -0
- data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/themes_rouge.asciidoc +49 -40
- data/lib/starter_web/pages/public/learn/roundtrip/asciidoc_extensions.adoc +0 -1
- data/lib/starter_web/pages/public/learn/roundtrip/bootstrap_themes.adoc +20 -16
- data/lib/starter_web/pages/public/learn/roundtrip/highlghter_rouge.adoc +204 -0
- data/lib/starter_web/pages/public/tools/cheatsheet/gem.adoc +4 -4
- data/lib/starter_web/pages/public/tools/cheatsheet/git.adoc +13 -13
- data/lib/starter_web/pages/public/tools/cheatsheet/j1.adoc +113 -3
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +38 -9
- data/assets/themes/j1/adapter/js/translator.0.js +0 -498
- data/assets/themes/j1/adapter/js/translator.10.js +0 -510
- data/assets/themes/j1/modules/backstretch/js/v2.1.18/backstretch.js +0 -1627
- data/assets/themes/j1/modules/backstretch/js/v2.1.18/backstretch.min.js +0 -20
- data/lib/starter_web/pages/public/learn/roundtrip/_includes/attributes.0.asciidoc +0 -112
- /data/assets/themes/j1/modules/masonry/js/{masonry.pkgd.js → masonry.js} +0 -0
- /data/assets/themes/j1/modules/masonry/js/{masonry.pkgd.min.js → masonry.min.js} +0 -0
@@ -1,1827 +1,1834 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
function
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
const
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
}
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
this.
|
72
|
-
this.
|
73
|
-
this.
|
74
|
-
this.
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
this.
|
79
|
-
this.
|
80
|
-
this.
|
81
|
-
this.
|
82
|
-
this.
|
83
|
-
this.
|
84
|
-
this.
|
85
|
-
this.
|
86
|
-
this.
|
87
|
-
this.
|
88
|
-
this.
|
89
|
-
this.
|
90
|
-
this.
|
91
|
-
this.
|
92
|
-
this.
|
93
|
-
this.
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
this.
|
100
|
-
this.
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
this.
|
122
|
-
this.
|
123
|
-
this.
|
124
|
-
this.
|
125
|
-
this.
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
this.
|
131
|
-
this.
|
132
|
-
this.
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
}
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
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
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
return
|
268
|
-
}
|
269
|
-
return
|
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
|
-
if (
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
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
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
this.
|
359
|
-
|
360
|
-
|
361
|
-
this.main.
|
362
|
-
this.content
|
363
|
-
|
364
|
-
|
365
|
-
this.
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
this.
|
370
|
-
|
371
|
-
|
372
|
-
this.
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
this.main.main.
|
392
|
-
this.main.main.
|
393
|
-
this.content.main.
|
394
|
-
this.content.main.
|
395
|
-
this.main.
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
this.
|
417
|
-
|
418
|
-
|
419
|
-
}
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
main.
|
424
|
-
main.
|
425
|
-
main.
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
435
|
-
|
436
|
-
case '
|
437
|
-
|
438
|
-
this.
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
case '
|
445
|
-
this.callbacks.
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
if (this.settings.
|
487
|
-
this.callbacks.
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
|
499
|
-
|
500
|
-
|
501
|
-
const
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
arrow.
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
|
533
|
-
if (
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
|
542
|
-
|
543
|
-
|
544
|
-
|
545
|
-
|
546
|
-
|
547
|
-
|
548
|
-
|
549
|
-
|
550
|
-
|
551
|
-
|
552
|
-
}
|
553
|
-
|
554
|
-
|
555
|
-
|
556
|
-
|
557
|
-
|
558
|
-
|
559
|
-
|
560
|
-
|
561
|
-
|
562
|
-
|
563
|
-
|
564
|
-
|
565
|
-
|
566
|
-
|
567
|
-
|
568
|
-
|
569
|
-
|
570
|
-
|
571
|
-
|
572
|
-
|
573
|
-
|
574
|
-
|
575
|
-
|
576
|
-
|
577
|
-
|
578
|
-
|
579
|
-
|
580
|
-
|
581
|
-
|
582
|
-
|
583
|
-
|
584
|
-
|
585
|
-
|
586
|
-
|
587
|
-
|
588
|
-
|
589
|
-
|
590
|
-
|
591
|
-
|
592
|
-
|
593
|
-
|
594
|
-
|
595
|
-
|
596
|
-
|
597
|
-
|
598
|
-
|
599
|
-
|
600
|
-
}
|
601
|
-
|
602
|
-
const
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
|
608
|
-
|
609
|
-
const
|
610
|
-
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
|
619
|
-
|
620
|
-
|
621
|
-
|
622
|
-
|
623
|
-
|
624
|
-
|
625
|
-
|
626
|
-
|
627
|
-
|
628
|
-
|
629
|
-
|
630
|
-
|
631
|
-
|
632
|
-
|
633
|
-
|
634
|
-
|
635
|
-
|
636
|
-
|
637
|
-
|
638
|
-
|
639
|
-
|
640
|
-
|
641
|
-
|
642
|
-
|
643
|
-
|
644
|
-
|
645
|
-
|
646
|
-
|
647
|
-
|
648
|
-
|
649
|
-
|
650
|
-
|
651
|
-
|
652
|
-
|
653
|
-
|
654
|
-
|
655
|
-
|
656
|
-
|
657
|
-
|
658
|
-
|
659
|
-
|
660
|
-
|
661
|
-
|
662
|
-
|
663
|
-
|
664
|
-
|
665
|
-
|
666
|
-
|
667
|
-
|
668
|
-
|
669
|
-
|
670
|
-
|
671
|
-
|
672
|
-
|
673
|
-
|
674
|
-
|
675
|
-
|
676
|
-
|
677
|
-
|
678
|
-
|
679
|
-
|
680
|
-
|
681
|
-
|
682
|
-
|
683
|
-
|
684
|
-
|
685
|
-
|
686
|
-
|
687
|
-
|
688
|
-
|
689
|
-
|
690
|
-
|
691
|
-
|
692
|
-
|
693
|
-
|
694
|
-
|
695
|
-
|
696
|
-
}
|
697
|
-
this.
|
698
|
-
|
699
|
-
|
700
|
-
|
701
|
-
|
702
|
-
|
703
|
-
|
704
|
-
|
705
|
-
|
706
|
-
|
707
|
-
|
708
|
-
|
709
|
-
|
710
|
-
|
711
|
-
|
712
|
-
|
713
|
-
|
714
|
-
|
715
|
-
|
716
|
-
|
717
|
-
|
718
|
-
|
719
|
-
|
720
|
-
|
721
|
-
|
722
|
-
|
723
|
-
|
724
|
-
|
725
|
-
|
726
|
-
|
727
|
-
|
728
|
-
|
729
|
-
|
730
|
-
|
731
|
-
|
732
|
-
|
733
|
-
|
734
|
-
|
735
|
-
|
736
|
-
|
737
|
-
|
738
|
-
|
739
|
-
}
|
740
|
-
else {
|
741
|
-
this.
|
742
|
-
|
743
|
-
|
744
|
-
|
745
|
-
|
746
|
-
|
747
|
-
|
748
|
-
|
749
|
-
|
750
|
-
|
751
|
-
|
752
|
-
|
753
|
-
|
754
|
-
|
755
|
-
|
756
|
-
|
757
|
-
|
758
|
-
|
759
|
-
|
760
|
-
|
761
|
-
|
762
|
-
|
763
|
-
|
764
|
-
input.
|
765
|
-
|
766
|
-
|
767
|
-
input.
|
768
|
-
|
769
|
-
|
770
|
-
|
771
|
-
|
772
|
-
|
773
|
-
|
774
|
-
|
775
|
-
|
776
|
-
case '
|
777
|
-
|
778
|
-
|
779
|
-
|
780
|
-
case '
|
781
|
-
|
782
|
-
|
783
|
-
|
784
|
-
|
785
|
-
|
786
|
-
|
787
|
-
|
788
|
-
|
789
|
-
|
790
|
-
|
791
|
-
}
|
792
|
-
|
793
|
-
|
794
|
-
|
795
|
-
|
796
|
-
|
797
|
-
|
798
|
-
|
799
|
-
|
800
|
-
|
801
|
-
|
802
|
-
|
803
|
-
|
804
|
-
addable.
|
805
|
-
|
806
|
-
|
807
|
-
|
808
|
-
|
809
|
-
|
810
|
-
|
811
|
-
|
812
|
-
|
813
|
-
|
814
|
-
|
815
|
-
|
816
|
-
|
817
|
-
|
818
|
-
|
819
|
-
|
820
|
-
|
821
|
-
|
822
|
-
|
823
|
-
|
824
|
-
|
825
|
-
|
826
|
-
|
827
|
-
|
828
|
-
|
829
|
-
|
830
|
-
|
831
|
-
|
832
|
-
|
833
|
-
|
834
|
-
|
835
|
-
|
836
|
-
|
837
|
-
|
838
|
-
|
839
|
-
|
840
|
-
|
841
|
-
|
842
|
-
|
843
|
-
|
844
|
-
|
845
|
-
|
846
|
-
|
847
|
-
|
848
|
-
|
849
|
-
|
850
|
-
|
851
|
-
|
852
|
-
|
853
|
-
|
854
|
-
|
855
|
-
|
856
|
-
|
857
|
-
|
858
|
-
|
859
|
-
|
860
|
-
|
861
|
-
|
862
|
-
|
863
|
-
|
864
|
-
|
865
|
-
|
866
|
-
|
867
|
-
|
868
|
-
|
869
|
-
|
870
|
-
|
871
|
-
|
872
|
-
|
873
|
-
|
874
|
-
|
875
|
-
|
876
|
-
|
877
|
-
|
878
|
-
|
879
|
-
|
880
|
-
|
881
|
-
|
882
|
-
|
883
|
-
|
884
|
-
|
885
|
-
|
886
|
-
|
887
|
-
|
888
|
-
if (
|
889
|
-
|
890
|
-
}
|
891
|
-
|
892
|
-
|
893
|
-
|
894
|
-
|
895
|
-
|
896
|
-
|
897
|
-
|
898
|
-
|
899
|
-
|
900
|
-
|
901
|
-
|
902
|
-
|
903
|
-
|
904
|
-
|
905
|
-
|
906
|
-
|
907
|
-
|
908
|
-
|
909
|
-
|
910
|
-
|
911
|
-
|
912
|
-
|
913
|
-
|
914
|
-
|
915
|
-
|
916
|
-
|
917
|
-
|
918
|
-
|
919
|
-
|
920
|
-
|
921
|
-
|
922
|
-
|
923
|
-
|
924
|
-
|
925
|
-
|
926
|
-
|
927
|
-
|
928
|
-
|
929
|
-
|
930
|
-
|
931
|
-
|
932
|
-
|
933
|
-
|
934
|
-
|
935
|
-
}
|
936
|
-
|
937
|
-
this.content.list.innerHTML = '';
|
938
|
-
const
|
939
|
-
|
940
|
-
|
941
|
-
this.content.list.appendChild(
|
942
|
-
}
|
943
|
-
|
944
|
-
this.content.list.innerHTML = '';
|
945
|
-
|
946
|
-
|
947
|
-
|
948
|
-
|
949
|
-
|
950
|
-
|
951
|
-
|
952
|
-
|
953
|
-
|
954
|
-
|
955
|
-
|
956
|
-
|
957
|
-
|
958
|
-
|
959
|
-
|
960
|
-
|
961
|
-
|
962
|
-
|
963
|
-
const
|
964
|
-
|
965
|
-
|
966
|
-
|
967
|
-
|
968
|
-
|
969
|
-
|
970
|
-
|
971
|
-
|
972
|
-
|
973
|
-
|
974
|
-
|
975
|
-
|
976
|
-
|
977
|
-
|
978
|
-
|
979
|
-
|
980
|
-
|
981
|
-
|
982
|
-
|
983
|
-
|
984
|
-
|
985
|
-
|
986
|
-
|
987
|
-
|
988
|
-
|
989
|
-
|
990
|
-
selectAllSvg.
|
991
|
-
selectAll.
|
992
|
-
|
993
|
-
|
994
|
-
|
995
|
-
|
996
|
-
|
997
|
-
|
998
|
-
|
999
|
-
|
1000
|
-
|
1001
|
-
|
1002
|
-
|
1003
|
-
|
1004
|
-
|
1005
|
-
|
1006
|
-
|
1007
|
-
|
1008
|
-
|
1009
|
-
|
1010
|
-
|
1011
|
-
|
1012
|
-
|
1013
|
-
|
1014
|
-
|
1015
|
-
|
1016
|
-
|
1017
|
-
|
1018
|
-
|
1019
|
-
|
1020
|
-
|
1021
|
-
|
1022
|
-
|
1023
|
-
|
1024
|
-
|
1025
|
-
|
1026
|
-
|
1027
|
-
|
1028
|
-
|
1029
|
-
|
1030
|
-
|
1031
|
-
|
1032
|
-
|
1033
|
-
|
1034
|
-
|
1035
|
-
|
1036
|
-
|
1037
|
-
|
1038
|
-
|
1039
|
-
|
1040
|
-
|
1041
|
-
|
1042
|
-
|
1043
|
-
|
1044
|
-
|
1045
|
-
|
1046
|
-
|
1047
|
-
|
1048
|
-
|
1049
|
-
|
1050
|
-
|
1051
|
-
|
1052
|
-
|
1053
|
-
|
1054
|
-
|
1055
|
-
|
1056
|
-
|
1057
|
-
|
1058
|
-
|
1059
|
-
|
1060
|
-
|
1061
|
-
|
1062
|
-
|
1063
|
-
|
1064
|
-
|
1065
|
-
|
1066
|
-
|
1067
|
-
|
1068
|
-
|
1069
|
-
|
1070
|
-
|
1071
|
-
|
1072
|
-
|
1073
|
-
|
1074
|
-
|
1075
|
-
|
1076
|
-
|
1077
|
-
|
1078
|
-
|
1079
|
-
|
1080
|
-
|
1081
|
-
|
1082
|
-
|
1083
|
-
|
1084
|
-
|
1085
|
-
|
1086
|
-
|
1087
|
-
|
1088
|
-
|
1089
|
-
|
1090
|
-
|
1091
|
-
|
1092
|
-
|
1093
|
-
|
1094
|
-
|
1095
|
-
|
1096
|
-
|
1097
|
-
|
1098
|
-
|
1099
|
-
|
1100
|
-
|
1101
|
-
|
1102
|
-
|
1103
|
-
|
1104
|
-
|
1105
|
-
|
1106
|
-
|
1107
|
-
|
1108
|
-
|
1109
|
-
|
1110
|
-
|
1111
|
-
optionEl.
|
1112
|
-
|
1113
|
-
|
1114
|
-
|
1115
|
-
|
1116
|
-
|
1117
|
-
|
1118
|
-
|
1119
|
-
|
1120
|
-
|
1121
|
-
|
1122
|
-
|
1123
|
-
|
1124
|
-
|
1125
|
-
|
1126
|
-
|
1127
|
-
|
1128
|
-
|
1129
|
-
|
1130
|
-
|
1131
|
-
|
1132
|
-
|
1133
|
-
|
1134
|
-
if (this.settings.isMultiple)
|
1135
|
-
|
1136
|
-
|
1137
|
-
|
1138
|
-
|
1139
|
-
|
1140
|
-
|
1141
|
-
|
1142
|
-
|
1143
|
-
|
1144
|
-
|
1145
|
-
|
1146
|
-
|
1147
|
-
|
1148
|
-
|
1149
|
-
|
1150
|
-
|
1151
|
-
|
1152
|
-
|
1153
|
-
|
1154
|
-
|
1155
|
-
|
1156
|
-
|
1157
|
-
|
1158
|
-
|
1159
|
-
|
1160
|
-
|
1161
|
-
|
1162
|
-
|
1163
|
-
|
1164
|
-
|
1165
|
-
|
1166
|
-
|
1167
|
-
|
1168
|
-
|
1169
|
-
if (this.
|
1170
|
-
this.callbacks.
|
1171
|
-
}
|
1172
|
-
|
1173
|
-
|
1174
|
-
|
1175
|
-
|
1176
|
-
|
1177
|
-
|
1178
|
-
|
1179
|
-
|
1180
|
-
|
1181
|
-
|
1182
|
-
|
1183
|
-
|
1184
|
-
|
1185
|
-
|
1186
|
-
|
1187
|
-
|
1188
|
-
|
1189
|
-
|
1190
|
-
|
1191
|
-
|
1192
|
-
|
1193
|
-
const
|
1194
|
-
const
|
1195
|
-
|
1196
|
-
|
1197
|
-
|
1198
|
-
|
1199
|
-
|
1200
|
-
this.
|
1201
|
-
this.content.main.
|
1202
|
-
this.
|
1203
|
-
this.
|
1204
|
-
|
1205
|
-
|
1206
|
-
this.main.main.
|
1207
|
-
this.
|
1208
|
-
this.content.main.
|
1209
|
-
this.content.main.
|
1210
|
-
|
1211
|
-
|
1212
|
-
|
1213
|
-
|
1214
|
-
|
1215
|
-
|
1216
|
-
|
1217
|
-
|
1218
|
-
|
1219
|
-
|
1220
|
-
|
1221
|
-
|
1222
|
-
|
1223
|
-
|
1224
|
-
|
1225
|
-
|
1226
|
-
|
1227
|
-
|
1228
|
-
|
1229
|
-
|
1230
|
-
|
1231
|
-
|
1232
|
-
|
1233
|
-
|
1234
|
-
|
1235
|
-
|
1236
|
-
|
1237
|
-
|
1238
|
-
|
1239
|
-
|
1240
|
-
|
1241
|
-
|
1242
|
-
|
1243
|
-
|
1244
|
-
|
1245
|
-
|
1246
|
-
|
1247
|
-
|
1248
|
-
|
1249
|
-
|
1250
|
-
|
1251
|
-
|
1252
|
-
|
1253
|
-
|
1254
|
-
|
1255
|
-
|
1256
|
-
|
1257
|
-
|
1258
|
-
|
1259
|
-
|
1260
|
-
|
1261
|
-
|
1262
|
-
|
1263
|
-
|
1264
|
-
|
1265
|
-
|
1266
|
-
|
1267
|
-
|
1268
|
-
|
1269
|
-
|
1270
|
-
|
1271
|
-
|
1272
|
-
|
1273
|
-
this.
|
1274
|
-
|
1275
|
-
|
1276
|
-
this.select.
|
1277
|
-
|
1278
|
-
|
1279
|
-
this.
|
1280
|
-
|
1281
|
-
|
1282
|
-
|
1283
|
-
this.select.
|
1284
|
-
|
1285
|
-
|
1286
|
-
|
1287
|
-
|
1288
|
-
|
1289
|
-
this.select.
|
1290
|
-
|
1291
|
-
|
1292
|
-
|
1293
|
-
|
1294
|
-
|
1295
|
-
|
1296
|
-
|
1297
|
-
|
1298
|
-
|
1299
|
-
|
1300
|
-
|
1301
|
-
|
1302
|
-
|
1303
|
-
|
1304
|
-
|
1305
|
-
|
1306
|
-
|
1307
|
-
|
1308
|
-
|
1309
|
-
if (
|
1310
|
-
|
1311
|
-
|
1312
|
-
|
1313
|
-
|
1314
|
-
|
1315
|
-
|
1316
|
-
|
1317
|
-
|
1318
|
-
|
1319
|
-
|
1320
|
-
|
1321
|
-
|
1322
|
-
|
1323
|
-
|
1324
|
-
|
1325
|
-
|
1326
|
-
|
1327
|
-
|
1328
|
-
|
1329
|
-
|
1330
|
-
|
1331
|
-
|
1332
|
-
|
1333
|
-
|
1334
|
-
|
1335
|
-
|
1336
|
-
|
1337
|
-
|
1338
|
-
|
1339
|
-
|
1340
|
-
|
1341
|
-
|
1342
|
-
|
1343
|
-
|
1344
|
-
|
1345
|
-
this.changeListen(
|
1346
|
-
|
1347
|
-
|
1348
|
-
|
1349
|
-
|
1350
|
-
|
1351
|
-
|
1352
|
-
|
1353
|
-
|
1354
|
-
|
1355
|
-
|
1356
|
-
|
1357
|
-
|
1358
|
-
|
1359
|
-
|
1360
|
-
|
1361
|
-
|
1362
|
-
|
1363
|
-
|
1364
|
-
|
1365
|
-
|
1366
|
-
|
1367
|
-
|
1368
|
-
|
1369
|
-
|
1370
|
-
|
1371
|
-
|
1372
|
-
|
1373
|
-
|
1374
|
-
|
1375
|
-
|
1376
|
-
|
1377
|
-
|
1378
|
-
|
1379
|
-
|
1380
|
-
|
1381
|
-
|
1382
|
-
|
1383
|
-
|
1384
|
-
|
1385
|
-
|
1386
|
-
|
1387
|
-
|
1388
|
-
|
1389
|
-
|
1390
|
-
|
1391
|
-
|
1392
|
-
|
1393
|
-
|
1394
|
-
|
1395
|
-
|
1396
|
-
|
1397
|
-
|
1398
|
-
|
1399
|
-
|
1400
|
-
|
1401
|
-
|
1402
|
-
|
1403
|
-
|
1404
|
-
|
1405
|
-
|
1406
|
-
|
1407
|
-
|
1408
|
-
|
1409
|
-
|
1410
|
-
|
1411
|
-
|
1412
|
-
|
1413
|
-
|
1414
|
-
|
1415
|
-
|
1416
|
-
|
1417
|
-
|
1418
|
-
|
1419
|
-
|
1420
|
-
|
1421
|
-
|
1422
|
-
|
1423
|
-
|
1424
|
-
|
1425
|
-
|
1426
|
-
|
1427
|
-
|
1428
|
-
|
1429
|
-
|
1430
|
-
|
1431
|
-
|
1432
|
-
|
1433
|
-
|
1434
|
-
|
1435
|
-
|
1436
|
-
|
1437
|
-
|
1438
|
-
|
1439
|
-
|
1440
|
-
|
1441
|
-
|
1442
|
-
|
1443
|
-
}
|
1444
|
-
|
1445
|
-
|
1446
|
-
|
1447
|
-
|
1448
|
-
|
1449
|
-
|
1450
|
-
|
1451
|
-
|
1452
|
-
|
1453
|
-
|
1454
|
-
|
1455
|
-
|
1456
|
-
|
1457
|
-
|
1458
|
-
|
1459
|
-
|
1460
|
-
|
1461
|
-
|
1462
|
-
|
1463
|
-
|
1464
|
-
|
1465
|
-
|
1466
|
-
|
1467
|
-
|
1468
|
-
|
1469
|
-
|
1470
|
-
|
1471
|
-
|
1472
|
-
|
1473
|
-
|
1474
|
-
|
1475
|
-
|
1476
|
-
|
1477
|
-
|
1478
|
-
|
1479
|
-
|
1480
|
-
|
1481
|
-
|
1482
|
-
|
1483
|
-
|
1484
|
-
|
1485
|
-
|
1486
|
-
|
1487
|
-
|
1488
|
-
|
1489
|
-
|
1490
|
-
|
1491
|
-
|
1492
|
-
|
1493
|
-
|
1494
|
-
|
1495
|
-
|
1496
|
-
|
1497
|
-
|
1498
|
-
|
1499
|
-
|
1500
|
-
|
1501
|
-
|
1502
|
-
|
1503
|
-
|
1504
|
-
|
1505
|
-
|
1506
|
-
|
1507
|
-
|
1508
|
-
|
1509
|
-
|
1510
|
-
|
1511
|
-
|
1512
|
-
|
1513
|
-
|
1514
|
-
|
1515
|
-
|
1516
|
-
|
1517
|
-
|
1518
|
-
|
1519
|
-
|
1520
|
-
|
1521
|
-
|
1522
|
-
|
1523
|
-
|
1524
|
-
|
1525
|
-
|
1526
|
-
|
1527
|
-
|
1528
|
-
|
1529
|
-
|
1530
|
-
|
1531
|
-
this.
|
1532
|
-
|
1533
|
-
|
1534
|
-
|
1535
|
-
|
1536
|
-
|
1537
|
-
|
1538
|
-
this.
|
1539
|
-
|
1540
|
-
|
1541
|
-
|
1542
|
-
|
1543
|
-
|
1544
|
-
|
1545
|
-
|
1546
|
-
|
1547
|
-
|
1548
|
-
|
1549
|
-
|
1550
|
-
|
1551
|
-
|
1552
|
-
|
1553
|
-
|
1554
|
-
|
1555
|
-
|
1556
|
-
|
1557
|
-
|
1558
|
-
|
1559
|
-
|
1560
|
-
|
1561
|
-
|
1562
|
-
|
1563
|
-
|
1564
|
-
|
1565
|
-
|
1566
|
-
|
1567
|
-
|
1568
|
-
|
1569
|
-
|
1570
|
-
|
1571
|
-
|
1572
|
-
|
1573
|
-
|
1574
|
-
|
1575
|
-
|
1576
|
-
|
1577
|
-
|
1578
|
-
|
1579
|
-
|
1580
|
-
|
1581
|
-
|
1582
|
-
}
|
1583
|
-
|
1584
|
-
|
1585
|
-
|
1586
|
-
|
1587
|
-
|
1588
|
-
|
1589
|
-
|
1590
|
-
|
1591
|
-
|
1592
|
-
|
1593
|
-
|
1594
|
-
|
1595
|
-
|
1596
|
-
|
1597
|
-
|
1598
|
-
|
1599
|
-
|
1600
|
-
|
1601
|
-
|
1602
|
-
|
1603
|
-
|
1604
|
-
|
1605
|
-
|
1606
|
-
|
1607
|
-
|
1608
|
-
|
1609
|
-
|
1610
|
-
|
1611
|
-
|
1612
|
-
this.
|
1613
|
-
|
1614
|
-
|
1615
|
-
this.
|
1616
|
-
|
1617
|
-
|
1618
|
-
|
1619
|
-
this.select.
|
1620
|
-
|
1621
|
-
|
1622
|
-
|
1623
|
-
|
1624
|
-
|
1625
|
-
|
1626
|
-
|
1627
|
-
|
1628
|
-
|
1629
|
-
|
1630
|
-
|
1631
|
-
|
1632
|
-
|
1633
|
-
}
|
1634
|
-
|
1635
|
-
|
1636
|
-
|
1637
|
-
|
1638
|
-
|
1639
|
-
|
1640
|
-
|
1641
|
-
|
1642
|
-
|
1643
|
-
|
1644
|
-
|
1645
|
-
|
1646
|
-
|
1647
|
-
|
1648
|
-
|
1649
|
-
|
1650
|
-
|
1651
|
-
|
1652
|
-
|
1653
|
-
|
1654
|
-
|
1655
|
-
|
1656
|
-
|
1657
|
-
|
1658
|
-
|
1659
|
-
|
1660
|
-
|
1661
|
-
|
1662
|
-
|
1663
|
-
|
1664
|
-
|
1665
|
-
|
1666
|
-
|
1667
|
-
if (this.settings.
|
1668
|
-
this.
|
1669
|
-
}
|
1670
|
-
|
1671
|
-
|
1672
|
-
|
1673
|
-
|
1674
|
-
this.
|
1675
|
-
|
1676
|
-
|
1677
|
-
|
1678
|
-
|
1679
|
-
|
1680
|
-
this.
|
1681
|
-
|
1682
|
-
|
1683
|
-
|
1684
|
-
|
1685
|
-
|
1686
|
-
|
1687
|
-
|
1688
|
-
|
1689
|
-
|
1690
|
-
|
1691
|
-
|
1692
|
-
|
1693
|
-
|
1694
|
-
this.store.
|
1695
|
-
|
1696
|
-
|
1697
|
-
|
1698
|
-
|
1699
|
-
|
1700
|
-
|
1701
|
-
|
1702
|
-
|
1703
|
-
|
1704
|
-
|
1705
|
-
|
1706
|
-
|
1707
|
-
|
1708
|
-
|
1709
|
-
|
1710
|
-
|
1711
|
-
this.
|
1712
|
-
|
1713
|
-
|
1714
|
-
|
1715
|
-
|
1716
|
-
|
1717
|
-
|
1718
|
-
|
1719
|
-
|
1720
|
-
|
1721
|
-
|
1722
|
-
|
1723
|
-
|
1724
|
-
|
1725
|
-
|
1726
|
-
|
1727
|
-
|
1728
|
-
|
1729
|
-
|
1730
|
-
this.
|
1731
|
-
if (this.
|
1732
|
-
this.
|
1733
|
-
}
|
1734
|
-
|
1735
|
-
|
1736
|
-
|
1737
|
-
|
1738
|
-
|
1739
|
-
|
1740
|
-
|
1741
|
-
|
1742
|
-
|
1743
|
-
if (this.settings.
|
1744
|
-
|
1745
|
-
}
|
1746
|
-
this.
|
1747
|
-
|
1748
|
-
|
1749
|
-
|
1750
|
-
|
1751
|
-
|
1752
|
-
|
1753
|
-
|
1754
|
-
|
1755
|
-
|
1756
|
-
|
1757
|
-
|
1758
|
-
|
1759
|
-
|
1760
|
-
|
1761
|
-
|
1762
|
-
|
1763
|
-
|
1764
|
-
|
1765
|
-
|
1766
|
-
|
1767
|
-
|
1768
|
-
|
1769
|
-
|
1770
|
-
if (this.
|
1771
|
-
|
1772
|
-
}
|
1773
|
-
this.
|
1774
|
-
|
1775
|
-
|
1776
|
-
|
1777
|
-
|
1778
|
-
|
1779
|
-
|
1780
|
-
|
1781
|
-
|
1782
|
-
|
1783
|
-
|
1784
|
-
|
1785
|
-
|
1786
|
-
|
1787
|
-
|
1788
|
-
|
1789
|
-
|
1790
|
-
|
1791
|
-
|
1792
|
-
|
1793
|
-
this.render.
|
1794
|
-
|
1795
|
-
|
1796
|
-
|
1797
|
-
|
1798
|
-
|
1799
|
-
|
1800
|
-
|
1801
|
-
|
1802
|
-
|
1803
|
-
|
1804
|
-
|
1805
|
-
|
1806
|
-
|
1807
|
-
|
1808
|
-
|
1809
|
-
|
1810
|
-
|
1811
|
-
|
1812
|
-
|
1813
|
-
|
1814
|
-
|
1815
|
-
|
1816
|
-
|
1817
|
-
}
|
1818
|
-
|
1819
|
-
|
1820
|
-
this.
|
1821
|
-
this.
|
1822
|
-
|
1823
|
-
|
1824
|
-
|
1825
|
-
|
1826
|
-
|
1827
|
-
|
1
|
+
/*!
|
2
|
+
* slim-select.js v2.5.1
|
3
|
+
* https://github.com/brianvoe/slim-select/tree/master
|
4
|
+
*
|
5
|
+
* Licensed MIT © Brian Voelker
|
6
|
+
* https://github.com/brianvoe/slim-select/blob/master/LICENSE
|
7
|
+
*/
|
8
|
+
(function (global, factory) {
|
9
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
10
|
+
typeof define === 'function' && define.amd ? define(factory) :
|
11
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.SlimSelect = factory());
|
12
|
+
})(this, (function () { 'use strict';
|
13
|
+
|
14
|
+
function generateID() {
|
15
|
+
return Math.random().toString(36).substring(2, 10);
|
16
|
+
}
|
17
|
+
function hasClassInTree(element, className) {
|
18
|
+
function hasClass(e, c) {
|
19
|
+
if (c && e && e.classList && e.classList.contains(c)) {
|
20
|
+
return e;
|
21
|
+
}
|
22
|
+
if (c && e && e.dataset && e.dataset.id && e.dataset.id === className) {
|
23
|
+
return e;
|
24
|
+
}
|
25
|
+
return null;
|
26
|
+
}
|
27
|
+
function parentByClass(e, c) {
|
28
|
+
if (!e || e === document) {
|
29
|
+
return null;
|
30
|
+
}
|
31
|
+
else if (hasClass(e, c)) {
|
32
|
+
return e;
|
33
|
+
}
|
34
|
+
else {
|
35
|
+
return parentByClass(e.parentNode, c);
|
36
|
+
}
|
37
|
+
}
|
38
|
+
return hasClass(element, className) || parentByClass(element, className);
|
39
|
+
}
|
40
|
+
function debounce(func, wait = 50, immediate = false) {
|
41
|
+
let timeout;
|
42
|
+
return function (...args) {
|
43
|
+
const context = self;
|
44
|
+
const later = () => {
|
45
|
+
timeout = null;
|
46
|
+
if (!immediate) {
|
47
|
+
func.apply(context, args);
|
48
|
+
}
|
49
|
+
};
|
50
|
+
const callNow = immediate && !timeout;
|
51
|
+
clearTimeout(timeout);
|
52
|
+
timeout = setTimeout(later, wait);
|
53
|
+
if (callNow) {
|
54
|
+
func.apply(context, args);
|
55
|
+
}
|
56
|
+
};
|
57
|
+
}
|
58
|
+
function isEqual(a, b) {
|
59
|
+
return JSON.stringify(a) === JSON.stringify(b);
|
60
|
+
}
|
61
|
+
function kebabCase(str) {
|
62
|
+
const result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase());
|
63
|
+
return str[0] === str[0].toUpperCase() ? result.substring(1) : result;
|
64
|
+
}
|
65
|
+
|
66
|
+
class Settings {
|
67
|
+
constructor(settings) {
|
68
|
+
this.id = '';
|
69
|
+
this.style = '';
|
70
|
+
this.class = [];
|
71
|
+
this.isMultiple = false;
|
72
|
+
this.isOpen = false;
|
73
|
+
this.isFullOpen = false;
|
74
|
+
this.intervalMove = null;
|
75
|
+
if (!settings) {
|
76
|
+
settings = {};
|
77
|
+
}
|
78
|
+
this.id = 'ss-' + generateID();
|
79
|
+
this.style = settings.style || '';
|
80
|
+
this.class = settings.class || [];
|
81
|
+
this.disabled = settings.disabled !== undefined ? settings.disabled : false;
|
82
|
+
this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
|
83
|
+
this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
|
84
|
+
this.searchPlaceholder = settings.searchPlaceholder || 'Search';
|
85
|
+
this.searchText = settings.searchText || 'No Results';
|
86
|
+
this.searchingText = settings.searchingText || 'Searching...';
|
87
|
+
this.searchHighlight = settings.searchHighlight !== undefined ? settings.searchHighlight : false;
|
88
|
+
this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true;
|
89
|
+
this.contentLocation = settings.contentLocation || document.body;
|
90
|
+
this.contentPosition = settings.contentPosition || 'absolute';
|
91
|
+
this.openPosition = settings.openPosition || 'auto';
|
92
|
+
this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value';
|
93
|
+
this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
|
94
|
+
this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
|
95
|
+
this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
|
96
|
+
this.minSelected = settings.minSelected || 0;
|
97
|
+
this.maxSelected = settings.maxSelected || 1000;
|
98
|
+
this.timeoutDelay = settings.timeoutDelay || 200;
|
99
|
+
this.maxValuesShown = settings.maxValuesShown || 20;
|
100
|
+
this.maxValuesMessage = settings.maxValuesMessage || '{number} selected';
|
101
|
+
}
|
102
|
+
}
|
103
|
+
|
104
|
+
class Optgroup {
|
105
|
+
constructor(optgroup) {
|
106
|
+
this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
|
107
|
+
this.label = optgroup.label || '';
|
108
|
+
this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll;
|
109
|
+
this.selectAllText = optgroup.selectAllText || 'Select All';
|
110
|
+
this.closable = optgroup.closable || 'off';
|
111
|
+
this.options = [];
|
112
|
+
if (optgroup.options) {
|
113
|
+
for (const o of optgroup.options) {
|
114
|
+
this.options.push(new Option(o));
|
115
|
+
}
|
116
|
+
}
|
117
|
+
}
|
118
|
+
}
|
119
|
+
class Option {
|
120
|
+
constructor(option) {
|
121
|
+
this.id = !option.id || option.id === '' ? generateID() : option.id;
|
122
|
+
this.value = option.value === undefined ? option.text : option.value;
|
123
|
+
this.text = option.text || '';
|
124
|
+
this.html = option.html || '';
|
125
|
+
this.selected = option.selected !== undefined ? option.selected : false;
|
126
|
+
this.display = option.display !== undefined ? option.display : true;
|
127
|
+
this.disabled = option.disabled !== undefined ? option.disabled : false;
|
128
|
+
this.mandatory = option.mandatory !== undefined ? option.mandatory : false;
|
129
|
+
this.placeholder = option.placeholder !== undefined ? option.placeholder : false;
|
130
|
+
this.class = option.class || '';
|
131
|
+
this.style = option.style || '';
|
132
|
+
this.data = option.data || {};
|
133
|
+
}
|
134
|
+
}
|
135
|
+
class Store {
|
136
|
+
constructor(type, data) {
|
137
|
+
this.selectType = 'single';
|
138
|
+
this.data = [];
|
139
|
+
this.selectType = type;
|
140
|
+
this.setData(data);
|
141
|
+
}
|
142
|
+
validateDataArray(data) {
|
143
|
+
if (!Array.isArray(data)) {
|
144
|
+
return new Error('Data must be an array');
|
145
|
+
}
|
146
|
+
for (let dataObj of data) {
|
147
|
+
if (dataObj instanceof Optgroup || 'label' in dataObj) {
|
148
|
+
if (!('label' in dataObj)) {
|
149
|
+
return new Error('Optgroup must have a label');
|
150
|
+
}
|
151
|
+
if ('options' in dataObj && dataObj.options) {
|
152
|
+
for (let option of dataObj.options) {
|
153
|
+
return this.validateOption(option);
|
154
|
+
}
|
155
|
+
}
|
156
|
+
}
|
157
|
+
else if (dataObj instanceof Option || 'text' in dataObj) {
|
158
|
+
return this.validateOption(dataObj);
|
159
|
+
}
|
160
|
+
else {
|
161
|
+
return new Error('Data object must be a valid optgroup or option');
|
162
|
+
}
|
163
|
+
}
|
164
|
+
return null;
|
165
|
+
}
|
166
|
+
validateOption(option) {
|
167
|
+
if (!('text' in option)) {
|
168
|
+
return new Error('Option must have a text');
|
169
|
+
}
|
170
|
+
return null;
|
171
|
+
}
|
172
|
+
partialToFullData(data) {
|
173
|
+
let dataFinal = [];
|
174
|
+
data.forEach((dataObj) => {
|
175
|
+
if (dataObj instanceof Optgroup || 'label' in dataObj) {
|
176
|
+
let optOptions = [];
|
177
|
+
if ('options' in dataObj && dataObj.options) {
|
178
|
+
dataObj.options.forEach((option) => {
|
179
|
+
optOptions.push(new Option(option));
|
180
|
+
});
|
181
|
+
}
|
182
|
+
if (optOptions.length > 0) {
|
183
|
+
dataFinal.push(new Optgroup(dataObj));
|
184
|
+
}
|
185
|
+
}
|
186
|
+
if (dataObj instanceof Option || 'text' in dataObj) {
|
187
|
+
dataFinal.push(new Option(dataObj));
|
188
|
+
}
|
189
|
+
});
|
190
|
+
return dataFinal;
|
191
|
+
}
|
192
|
+
setData(data) {
|
193
|
+
this.data = this.partialToFullData(data);
|
194
|
+
if (this.selectType === 'single') {
|
195
|
+
this.setSelectedBy('value', this.getSelected());
|
196
|
+
}
|
197
|
+
}
|
198
|
+
getData() {
|
199
|
+
return this.filter(null, true);
|
200
|
+
}
|
201
|
+
getDataOptions() {
|
202
|
+
return this.filter(null, false);
|
203
|
+
}
|
204
|
+
addOption(option) {
|
205
|
+
this.setData(this.getData().concat(new Option(option)));
|
206
|
+
}
|
207
|
+
setSelectedBy(selectedType, selectedValues) {
|
208
|
+
let firstOption = null;
|
209
|
+
let hasSelected = false;
|
210
|
+
for (let dataObj of this.data) {
|
211
|
+
if (dataObj instanceof Optgroup) {
|
212
|
+
for (let option of dataObj.options) {
|
213
|
+
if (!firstOption) {
|
214
|
+
firstOption = option;
|
215
|
+
}
|
216
|
+
option.selected = hasSelected ? false : selectedValues.includes(option[selectedType]);
|
217
|
+
if (option.selected && this.selectType === 'single') {
|
218
|
+
hasSelected = true;
|
219
|
+
}
|
220
|
+
}
|
221
|
+
}
|
222
|
+
if (dataObj instanceof Option) {
|
223
|
+
if (!firstOption) {
|
224
|
+
firstOption = dataObj;
|
225
|
+
}
|
226
|
+
dataObj.selected = hasSelected ? false : selectedValues.includes(dataObj[selectedType]);
|
227
|
+
if (dataObj.selected && this.selectType === 'single') {
|
228
|
+
hasSelected = true;
|
229
|
+
}
|
230
|
+
}
|
231
|
+
}
|
232
|
+
if (this.selectType === 'single' && firstOption && !hasSelected) {
|
233
|
+
firstOption.selected = true;
|
234
|
+
}
|
235
|
+
}
|
236
|
+
getSelected() {
|
237
|
+
let selectedOptions = this.getSelectedOptions();
|
238
|
+
let selectedValues = [];
|
239
|
+
selectedOptions.forEach((option) => {
|
240
|
+
selectedValues.push(option.value);
|
241
|
+
});
|
242
|
+
return selectedValues;
|
243
|
+
}
|
244
|
+
getSelectedOptions() {
|
245
|
+
return this.filter((opt) => {
|
246
|
+
return opt.selected;
|
247
|
+
}, false);
|
248
|
+
}
|
249
|
+
getSelectedIDs() {
|
250
|
+
let selectedOptions = this.getSelectedOptions();
|
251
|
+
let selectedIDs = [];
|
252
|
+
selectedOptions.forEach((op) => {
|
253
|
+
selectedIDs.push(op.id);
|
254
|
+
});
|
255
|
+
return selectedIDs;
|
256
|
+
}
|
257
|
+
getOptgroupByID(id) {
|
258
|
+
for (let dataObj of this.data) {
|
259
|
+
if (dataObj instanceof Optgroup && dataObj.id === id) {
|
260
|
+
return dataObj;
|
261
|
+
}
|
262
|
+
}
|
263
|
+
return null;
|
264
|
+
}
|
265
|
+
getOptionByID(id) {
|
266
|
+
let options = this.filter((opt) => {
|
267
|
+
return opt.id === id;
|
268
|
+
}, false);
|
269
|
+
return options.length ? options[0] : null;
|
270
|
+
}
|
271
|
+
search(search, searchFilter) {
|
272
|
+
search = search.trim();
|
273
|
+
if (search === '') {
|
274
|
+
return this.getData();
|
275
|
+
}
|
276
|
+
return this.filter((opt) => {
|
277
|
+
return searchFilter(opt, search);
|
278
|
+
}, true);
|
279
|
+
}
|
280
|
+
filter(filter, includeOptgroup) {
|
281
|
+
const dataSearch = [];
|
282
|
+
this.data.forEach((dataObj) => {
|
283
|
+
if (dataObj instanceof Optgroup) {
|
284
|
+
let optOptions = [];
|
285
|
+
dataObj.options.forEach((option) => {
|
286
|
+
if (!filter || filter(option)) {
|
287
|
+
if (!includeOptgroup) {
|
288
|
+
dataSearch.push(new Option(option));
|
289
|
+
}
|
290
|
+
else {
|
291
|
+
optOptions.push(new Option(option));
|
292
|
+
}
|
293
|
+
}
|
294
|
+
});
|
295
|
+
if (optOptions.length > 0) {
|
296
|
+
let optgroup = new Optgroup(dataObj);
|
297
|
+
optgroup.options = optOptions;
|
298
|
+
dataSearch.push(optgroup);
|
299
|
+
}
|
300
|
+
}
|
301
|
+
if (dataObj instanceof Option) {
|
302
|
+
if (!filter || filter(dataObj)) {
|
303
|
+
dataSearch.push(new Option(dataObj));
|
304
|
+
}
|
305
|
+
}
|
306
|
+
});
|
307
|
+
return dataSearch;
|
308
|
+
}
|
309
|
+
getSelectType() {
|
310
|
+
return this.selectType;
|
311
|
+
}
|
312
|
+
}
|
313
|
+
|
314
|
+
class Render {
|
315
|
+
constructor(settings, store, callbacks) {
|
316
|
+
this.classes = {
|
317
|
+
main: 'ss-main',
|
318
|
+
placeholder: 'ss-placeholder',
|
319
|
+
values: 'ss-values',
|
320
|
+
single: 'ss-single',
|
321
|
+
max: 'ss-max',
|
322
|
+
value: 'ss-value',
|
323
|
+
valueText: 'ss-value-text',
|
324
|
+
valueDelete: 'ss-value-delete',
|
325
|
+
valueOut: 'ss-value-out',
|
326
|
+
deselect: 'ss-deselect',
|
327
|
+
deselectPath: 'M10,10 L90,90 M10,90 L90,10',
|
328
|
+
arrow: 'ss-arrow',
|
329
|
+
arrowClose: 'M10,30 L50,70 L90,30',
|
330
|
+
arrowOpen: 'M10,70 L50,30 L90,70',
|
331
|
+
content: 'ss-content',
|
332
|
+
openAbove: 'ss-open-above',
|
333
|
+
openBelow: 'ss-open-below',
|
334
|
+
search: 'ss-search',
|
335
|
+
searchHighlighter: 'ss-search-highlight',
|
336
|
+
searching: 'ss-searching',
|
337
|
+
addable: 'ss-addable',
|
338
|
+
addablePath: 'M50,10 L50,90 M10,50 L90,50',
|
339
|
+
list: 'ss-list',
|
340
|
+
optgroup: 'ss-optgroup',
|
341
|
+
optgroupLabel: 'ss-optgroup-label',
|
342
|
+
optgroupLabelText: 'ss-optgroup-label-text',
|
343
|
+
optgroupActions: 'ss-optgroup-actions',
|
344
|
+
optgroupSelectAll: 'ss-selectall',
|
345
|
+
optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50',
|
346
|
+
optgroupSelectAllCheck: 'M30,45 L50,70 L90,10',
|
347
|
+
optgroupClosable: 'ss-closable',
|
348
|
+
option: 'ss-option',
|
349
|
+
optionDelete: 'M10,10 L90,90 M10,90 L90,10',
|
350
|
+
highlighted: 'ss-highlighted',
|
351
|
+
open: 'ss-open',
|
352
|
+
close: 'ss-close',
|
353
|
+
selected: 'ss-selected',
|
354
|
+
error: 'ss-error',
|
355
|
+
disabled: 'ss-disabled',
|
356
|
+
hide: 'ss-hide',
|
357
|
+
};
|
358
|
+
this.store = store;
|
359
|
+
this.settings = settings;
|
360
|
+
this.callbacks = callbacks;
|
361
|
+
this.main = this.mainDiv();
|
362
|
+
this.content = this.contentDiv();
|
363
|
+
this.updateClassStyles();
|
364
|
+
this.updateAriaAttributes();
|
365
|
+
this.settings.contentLocation.appendChild(this.content.main);
|
366
|
+
}
|
367
|
+
enable() {
|
368
|
+
this.main.main.classList.remove(this.classes.disabled);
|
369
|
+
this.content.search.input.disabled = false;
|
370
|
+
}
|
371
|
+
disable() {
|
372
|
+
this.main.main.classList.add(this.classes.disabled);
|
373
|
+
this.content.search.input.disabled = true;
|
374
|
+
}
|
375
|
+
open() {
|
376
|
+
this.main.arrow.path.setAttribute('d', this.classes.arrowOpen);
|
377
|
+
this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow);
|
378
|
+
this.main.main.setAttribute('aria-expanded', 'true');
|
379
|
+
this.moveContent();
|
380
|
+
const selectedOptions = this.store.getSelectedOptions();
|
381
|
+
if (selectedOptions.length) {
|
382
|
+
const selectedId = selectedOptions[selectedOptions.length - 1].id;
|
383
|
+
const selectedOption = this.content.list.querySelector('[data-id="' + selectedId + '"]');
|
384
|
+
if (selectedOption) {
|
385
|
+
this.ensureElementInView(this.content.list, selectedOption);
|
386
|
+
}
|
387
|
+
}
|
388
|
+
}
|
389
|
+
close() {
|
390
|
+
this.main.main.classList.remove(this.classes.openAbove);
|
391
|
+
this.main.main.classList.remove(this.classes.openBelow);
|
392
|
+
this.main.main.setAttribute('aria-expanded', 'false');
|
393
|
+
this.content.main.classList.remove(this.classes.openAbove);
|
394
|
+
this.content.main.classList.remove(this.classes.openBelow);
|
395
|
+
this.main.arrow.path.setAttribute('d', this.classes.arrowClose);
|
396
|
+
}
|
397
|
+
updateClassStyles() {
|
398
|
+
this.main.main.className = '';
|
399
|
+
this.main.main.removeAttribute('style');
|
400
|
+
this.content.main.className = '';
|
401
|
+
this.content.main.removeAttribute('style');
|
402
|
+
this.main.main.classList.add(this.classes.main);
|
403
|
+
this.content.main.classList.add(this.classes.content);
|
404
|
+
if (this.settings.style !== '') {
|
405
|
+
this.main.main.style.cssText = this.settings.style;
|
406
|
+
this.content.main.style.cssText = this.settings.style;
|
407
|
+
}
|
408
|
+
if (this.settings.class.length) {
|
409
|
+
for (const c of this.settings.class) {
|
410
|
+
if (c.trim() !== '') {
|
411
|
+
this.main.main.classList.add(c.trim());
|
412
|
+
this.content.main.classList.add(c.trim());
|
413
|
+
}
|
414
|
+
}
|
415
|
+
}
|
416
|
+
if (this.settings.contentPosition === 'relative') {
|
417
|
+
this.content.main.classList.add('ss-' + this.settings.contentPosition);
|
418
|
+
}
|
419
|
+
}
|
420
|
+
updateAriaAttributes() {
|
421
|
+
this.main.main.role = 'combobox';
|
422
|
+
this.main.main.setAttribute('aria-haspopup', 'listbox');
|
423
|
+
this.main.main.setAttribute('aria-controls', this.content.main.id);
|
424
|
+
this.main.main.setAttribute('aria-expanded', 'false');
|
425
|
+
this.content.main.setAttribute('role', 'listbox');
|
426
|
+
}
|
427
|
+
mainDiv() {
|
428
|
+
var _a;
|
429
|
+
const main = document.createElement('div');
|
430
|
+
main.dataset.id = this.settings.id;
|
431
|
+
main.id = this.settings.id;
|
432
|
+
main.tabIndex = 0;
|
433
|
+
main.onkeydown = (e) => {
|
434
|
+
switch (e.key) {
|
435
|
+
case 'ArrowUp':
|
436
|
+
case 'ArrowDown':
|
437
|
+
this.callbacks.open();
|
438
|
+
e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
|
439
|
+
return false;
|
440
|
+
case 'Tab':
|
441
|
+
this.callbacks.close();
|
442
|
+
return true;
|
443
|
+
case 'Enter':
|
444
|
+
case ' ':
|
445
|
+
this.callbacks.open();
|
446
|
+
const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
|
447
|
+
if (highlighted) {
|
448
|
+
highlighted.click();
|
449
|
+
}
|
450
|
+
return false;
|
451
|
+
case 'Escape':
|
452
|
+
this.callbacks.close();
|
453
|
+
return false;
|
454
|
+
}
|
455
|
+
};
|
456
|
+
main.onclick = (e) => {
|
457
|
+
if (this.settings.disabled) {
|
458
|
+
return;
|
459
|
+
}
|
460
|
+
this.settings.isOpen ? this.callbacks.close() : this.callbacks.open();
|
461
|
+
};
|
462
|
+
const values = document.createElement('div');
|
463
|
+
values.classList.add(this.classes.values);
|
464
|
+
main.appendChild(values);
|
465
|
+
const deselect = document.createElement('div');
|
466
|
+
deselect.classList.add(this.classes.deselect);
|
467
|
+
const selectedOptions = (_a = this.store) === null || _a === void 0 ? void 0 : _a.getSelectedOptions();
|
468
|
+
if (!this.settings.allowDeselect || (this.settings.isMultiple && selectedOptions && selectedOptions.length <= 0)) {
|
469
|
+
deselect.classList.add(this.classes.hide);
|
470
|
+
}
|
471
|
+
else {
|
472
|
+
deselect.classList.remove(this.classes.hide);
|
473
|
+
}
|
474
|
+
deselect.onclick = (e) => {
|
475
|
+
e.stopPropagation();
|
476
|
+
if (this.settings.disabled) {
|
477
|
+
return;
|
478
|
+
}
|
479
|
+
let shouldDelete = true;
|
480
|
+
const before = this.store.getSelectedOptions();
|
481
|
+
const after = [];
|
482
|
+
if (this.callbacks.beforeChange) {
|
483
|
+
shouldDelete = this.callbacks.beforeChange(after, before) === true;
|
484
|
+
}
|
485
|
+
if (shouldDelete) {
|
486
|
+
if (this.settings.isMultiple) {
|
487
|
+
this.callbacks.setSelected([], false);
|
488
|
+
this.updateDeselectAll();
|
489
|
+
}
|
490
|
+
else {
|
491
|
+
this.callbacks.setSelected([''], false);
|
492
|
+
}
|
493
|
+
if (this.settings.closeOnSelect) {
|
494
|
+
this.callbacks.close();
|
495
|
+
}
|
496
|
+
if (this.callbacks.afterChange) {
|
497
|
+
this.callbacks.afterChange(after);
|
498
|
+
}
|
499
|
+
}
|
500
|
+
};
|
501
|
+
const deselectSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
502
|
+
deselectSvg.setAttribute('viewBox', '0 0 100 100');
|
503
|
+
const deselectPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
504
|
+
deselectPath.setAttribute('d', this.classes.deselectPath);
|
505
|
+
deselectSvg.appendChild(deselectPath);
|
506
|
+
deselect.appendChild(deselectSvg);
|
507
|
+
main.appendChild(deselect);
|
508
|
+
const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
509
|
+
arrow.classList.add(this.classes.arrow);
|
510
|
+
arrow.setAttribute('viewBox', '0 0 100 100');
|
511
|
+
const arrowPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
512
|
+
arrowPath.setAttribute('d', this.classes.arrowClose);
|
513
|
+
if (this.settings.alwaysOpen) {
|
514
|
+
arrow.classList.add(this.classes.hide);
|
515
|
+
}
|
516
|
+
arrow.appendChild(arrowPath);
|
517
|
+
main.appendChild(arrow);
|
518
|
+
return {
|
519
|
+
main: main,
|
520
|
+
values: values,
|
521
|
+
deselect: {
|
522
|
+
main: deselect,
|
523
|
+
svg: deselectSvg,
|
524
|
+
path: deselectPath,
|
525
|
+
},
|
526
|
+
arrow: {
|
527
|
+
main: arrow,
|
528
|
+
path: arrowPath,
|
529
|
+
},
|
530
|
+
};
|
531
|
+
}
|
532
|
+
mainFocus(eventType) {
|
533
|
+
if (eventType !== 'click') {
|
534
|
+
this.main.main.focus({ preventScroll: true });
|
535
|
+
}
|
536
|
+
}
|
537
|
+
placeholder() {
|
538
|
+
const placeholderOption = this.store.filter((o) => o.placeholder, false);
|
539
|
+
let placeholderText = this.settings.placeholderText;
|
540
|
+
if (placeholderOption.length) {
|
541
|
+
if (placeholderOption[0].html !== '') {
|
542
|
+
placeholderText = placeholderOption[0].html;
|
543
|
+
}
|
544
|
+
else if (placeholderOption[0].text !== '') {
|
545
|
+
placeholderText = placeholderOption[0].text;
|
546
|
+
}
|
547
|
+
}
|
548
|
+
const placeholder = document.createElement('div');
|
549
|
+
placeholder.classList.add(this.classes.placeholder);
|
550
|
+
placeholder.innerHTML = placeholderText;
|
551
|
+
return placeholder;
|
552
|
+
}
|
553
|
+
renderValues() {
|
554
|
+
if (!this.settings.isMultiple) {
|
555
|
+
this.renderSingleValue();
|
556
|
+
return;
|
557
|
+
}
|
558
|
+
this.renderMultipleValues();
|
559
|
+
}
|
560
|
+
renderSingleValue() {
|
561
|
+
const selected = this.store.filter((o) => {
|
562
|
+
return o.selected && !o.placeholder;
|
563
|
+
}, false);
|
564
|
+
const selectedSingle = selected.length > 0 ? selected[0] : null;
|
565
|
+
if (!selectedSingle) {
|
566
|
+
this.main.values.innerHTML = this.placeholder().outerHTML;
|
567
|
+
}
|
568
|
+
else {
|
569
|
+
const singleValue = document.createElement('div');
|
570
|
+
singleValue.classList.add(this.classes.single);
|
571
|
+
if (selectedSingle.html) {
|
572
|
+
singleValue.innerHTML = selectedSingle.html;
|
573
|
+
}
|
574
|
+
else {
|
575
|
+
singleValue.innerText = selectedSingle.text;
|
576
|
+
}
|
577
|
+
this.main.values.innerHTML = singleValue.outerHTML;
|
578
|
+
}
|
579
|
+
if (!this.settings.allowDeselect || !selected.length) {
|
580
|
+
this.main.deselect.main.classList.add(this.classes.hide);
|
581
|
+
}
|
582
|
+
else {
|
583
|
+
this.main.deselect.main.classList.remove(this.classes.hide);
|
584
|
+
}
|
585
|
+
}
|
586
|
+
renderMultipleValues() {
|
587
|
+
let currentNodes = this.main.values.childNodes;
|
588
|
+
let selectedOptions = this.store.filter((opt) => {
|
589
|
+
return opt.selected && opt.display;
|
590
|
+
}, false);
|
591
|
+
if (selectedOptions.length === 0) {
|
592
|
+
this.main.values.innerHTML = this.placeholder().outerHTML;
|
593
|
+
return;
|
594
|
+
}
|
595
|
+
else {
|
596
|
+
const placeholder = this.main.values.querySelector('.' + this.classes.placeholder);
|
597
|
+
if (placeholder) {
|
598
|
+
placeholder.remove();
|
599
|
+
}
|
600
|
+
}
|
601
|
+
if (selectedOptions.length > this.settings.maxValuesShown) {
|
602
|
+
const singleValue = document.createElement('div');
|
603
|
+
singleValue.classList.add(this.classes.max);
|
604
|
+
singleValue.textContent = this.settings.maxValuesMessage.replace('{number}', selectedOptions.length.toString());
|
605
|
+
this.main.values.innerHTML = singleValue.outerHTML;
|
606
|
+
return;
|
607
|
+
}
|
608
|
+
else {
|
609
|
+
const maxValuesMessage = this.main.values.querySelector('.' + this.classes.max);
|
610
|
+
if (maxValuesMessage) {
|
611
|
+
maxValuesMessage.remove();
|
612
|
+
}
|
613
|
+
}
|
614
|
+
let removeNodes = [];
|
615
|
+
for (let i = 0; i < currentNodes.length; i++) {
|
616
|
+
const node = currentNodes[i];
|
617
|
+
const id = node.getAttribute('data-id');
|
618
|
+
if (id) {
|
619
|
+
const found = selectedOptions.filter((opt) => {
|
620
|
+
return opt.id === id;
|
621
|
+
}, false);
|
622
|
+
if (!found.length) {
|
623
|
+
removeNodes.push(node);
|
624
|
+
}
|
625
|
+
}
|
626
|
+
}
|
627
|
+
for (const n of removeNodes) {
|
628
|
+
n.classList.add(this.classes.valueOut);
|
629
|
+
setTimeout(() => {
|
630
|
+
if (this.main.values.hasChildNodes() && this.main.values.contains(n)) {
|
631
|
+
this.main.values.removeChild(n);
|
632
|
+
}
|
633
|
+
}, 100);
|
634
|
+
}
|
635
|
+
currentNodes = this.main.values.childNodes;
|
636
|
+
for (let d = 0; d < selectedOptions.length; d++) {
|
637
|
+
let shouldAdd = true;
|
638
|
+
for (let i = 0; i < currentNodes.length; i++) {
|
639
|
+
if (selectedOptions[d].id === String(currentNodes[i].dataset.id)) {
|
640
|
+
shouldAdd = false;
|
641
|
+
}
|
642
|
+
}
|
643
|
+
if (shouldAdd) {
|
644
|
+
if (currentNodes.length === 0) {
|
645
|
+
this.main.values.appendChild(this.multipleValue(selectedOptions[d]));
|
646
|
+
}
|
647
|
+
else if (d === 0) {
|
648
|
+
this.main.values.insertBefore(this.multipleValue(selectedOptions[d]), currentNodes[d]);
|
649
|
+
}
|
650
|
+
else {
|
651
|
+
currentNodes[d - 1].insertAdjacentElement('afterend', this.multipleValue(selectedOptions[d]));
|
652
|
+
}
|
653
|
+
}
|
654
|
+
}
|
655
|
+
this.updateDeselectAll();
|
656
|
+
}
|
657
|
+
multipleValue(option) {
|
658
|
+
const value = document.createElement('div');
|
659
|
+
value.classList.add(this.classes.value);
|
660
|
+
value.dataset.id = option.id;
|
661
|
+
const text = document.createElement('div');
|
662
|
+
text.classList.add(this.classes.valueText);
|
663
|
+
text.innerText = option.text;
|
664
|
+
value.appendChild(text);
|
665
|
+
if (!option.mandatory) {
|
666
|
+
const deleteDiv = document.createElement('div');
|
667
|
+
deleteDiv.classList.add(this.classes.valueDelete);
|
668
|
+
deleteDiv.onclick = (e) => {
|
669
|
+
e.preventDefault();
|
670
|
+
e.stopPropagation();
|
671
|
+
if (this.settings.disabled) {
|
672
|
+
return;
|
673
|
+
}
|
674
|
+
let shouldDelete = true;
|
675
|
+
const before = this.store.getSelectedOptions();
|
676
|
+
const after = before.filter((o) => {
|
677
|
+
return o.selected && o.id !== option.id;
|
678
|
+
}, true);
|
679
|
+
if (this.settings.minSelected && after.length < this.settings.minSelected) {
|
680
|
+
return;
|
681
|
+
}
|
682
|
+
if (this.callbacks.beforeChange) {
|
683
|
+
shouldDelete = this.callbacks.beforeChange(after, before) === true;
|
684
|
+
}
|
685
|
+
if (shouldDelete) {
|
686
|
+
let selectedValues = [];
|
687
|
+
for (const o of after) {
|
688
|
+
if (o instanceof Optgroup) {
|
689
|
+
for (const c of o.options) {
|
690
|
+
selectedValues.push(c.value);
|
691
|
+
}
|
692
|
+
}
|
693
|
+
if (o instanceof Option) {
|
694
|
+
selectedValues.push(o.value);
|
695
|
+
}
|
696
|
+
}
|
697
|
+
this.callbacks.setSelected(selectedValues, false);
|
698
|
+
if (this.settings.closeOnSelect) {
|
699
|
+
this.callbacks.close();
|
700
|
+
}
|
701
|
+
if (this.callbacks.afterChange) {
|
702
|
+
this.callbacks.afterChange(after);
|
703
|
+
}
|
704
|
+
this.updateDeselectAll();
|
705
|
+
}
|
706
|
+
};
|
707
|
+
const deleteSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
708
|
+
deleteSvg.setAttribute('viewBox', '0 0 100 100');
|
709
|
+
const deletePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
710
|
+
deletePath.setAttribute('d', this.classes.optionDelete);
|
711
|
+
deleteSvg.appendChild(deletePath);
|
712
|
+
deleteDiv.appendChild(deleteSvg);
|
713
|
+
value.appendChild(deleteDiv);
|
714
|
+
}
|
715
|
+
return value;
|
716
|
+
}
|
717
|
+
contentDiv() {
|
718
|
+
const main = document.createElement('div');
|
719
|
+
main.dataset.id = this.settings.id;
|
720
|
+
main.id = this.settings.id;
|
721
|
+
const search = this.searchDiv();
|
722
|
+
main.appendChild(search.main);
|
723
|
+
const list = this.listDiv();
|
724
|
+
main.appendChild(list);
|
725
|
+
return {
|
726
|
+
main: main,
|
727
|
+
search: search,
|
728
|
+
list: list,
|
729
|
+
};
|
730
|
+
}
|
731
|
+
moveContent() {
|
732
|
+
if (this.settings.contentPosition === 'relative') {
|
733
|
+
this.moveContentBelow();
|
734
|
+
return;
|
735
|
+
}
|
736
|
+
if (this.settings.openPosition === 'down') {
|
737
|
+
this.moveContentBelow();
|
738
|
+
return;
|
739
|
+
}
|
740
|
+
else if (this.settings.openPosition === 'up') {
|
741
|
+
this.moveContentAbove();
|
742
|
+
return;
|
743
|
+
}
|
744
|
+
if (this.putContent() === 'up') {
|
745
|
+
this.moveContentAbove();
|
746
|
+
}
|
747
|
+
else {
|
748
|
+
this.moveContentBelow();
|
749
|
+
}
|
750
|
+
}
|
751
|
+
searchDiv() {
|
752
|
+
const main = document.createElement('div');
|
753
|
+
const input = document.createElement('input');
|
754
|
+
const addable = document.createElement('div');
|
755
|
+
main.classList.add(this.classes.search);
|
756
|
+
const searchReturn = {
|
757
|
+
main,
|
758
|
+
input,
|
759
|
+
};
|
760
|
+
if (!this.settings.showSearch) {
|
761
|
+
main.classList.add(this.classes.hide);
|
762
|
+
input.readOnly = true;
|
763
|
+
}
|
764
|
+
input.type = 'search';
|
765
|
+
input.placeholder = this.settings.searchPlaceholder;
|
766
|
+
input.tabIndex = -1;
|
767
|
+
input.setAttribute('aria-label', this.settings.searchPlaceholder);
|
768
|
+
input.setAttribute('autocapitalize', 'off');
|
769
|
+
input.setAttribute('autocomplete', 'off');
|
770
|
+
input.setAttribute('autocorrect', 'off');
|
771
|
+
input.oninput = debounce((e) => {
|
772
|
+
this.callbacks.search(e.target.value);
|
773
|
+
}, 100);
|
774
|
+
input.onkeydown = (e) => {
|
775
|
+
switch (e.key) {
|
776
|
+
case 'ArrowUp':
|
777
|
+
case 'ArrowDown':
|
778
|
+
e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
|
779
|
+
return false;
|
780
|
+
case 'Tab':
|
781
|
+
this.callbacks.close();
|
782
|
+
return true;
|
783
|
+
case 'Escape':
|
784
|
+
this.callbacks.close();
|
785
|
+
return false;
|
786
|
+
case 'Enter':
|
787
|
+
case ' ':
|
788
|
+
if (this.callbacks.addable && e.ctrlKey) {
|
789
|
+
addable.click();
|
790
|
+
return false;
|
791
|
+
}
|
792
|
+
else {
|
793
|
+
const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
|
794
|
+
if (highlighted) {
|
795
|
+
highlighted.click();
|
796
|
+
return false;
|
797
|
+
}
|
798
|
+
}
|
799
|
+
return true;
|
800
|
+
}
|
801
|
+
};
|
802
|
+
main.appendChild(input);
|
803
|
+
if (this.callbacks.addable) {
|
804
|
+
addable.classList.add(this.classes.addable);
|
805
|
+
const plus = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
806
|
+
plus.setAttribute('viewBox', '0 0 100 100');
|
807
|
+
const plusPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
808
|
+
plusPath.setAttribute('d', this.classes.addablePath);
|
809
|
+
plus.appendChild(plusPath);
|
810
|
+
addable.appendChild(plus);
|
811
|
+
addable.onclick = (e) => {
|
812
|
+
e.preventDefault();
|
813
|
+
e.stopPropagation();
|
814
|
+
if (!this.callbacks.addable) {
|
815
|
+
return;
|
816
|
+
}
|
817
|
+
const inputValue = this.content.search.input.value.trim();
|
818
|
+
if (inputValue === '') {
|
819
|
+
this.content.search.input.focus();
|
820
|
+
return;
|
821
|
+
}
|
822
|
+
const runFinish = (oo) => {
|
823
|
+
let newOption = new Option(oo);
|
824
|
+
this.callbacks.addOption(newOption);
|
825
|
+
if (this.settings.isMultiple) {
|
826
|
+
let values = this.store.getSelected();
|
827
|
+
values.push(newOption.value);
|
828
|
+
this.callbacks.setSelected(values, true);
|
829
|
+
}
|
830
|
+
else {
|
831
|
+
this.callbacks.setSelected([newOption.value], true);
|
832
|
+
}
|
833
|
+
this.callbacks.search('');
|
834
|
+
if (this.settings.closeOnSelect) {
|
835
|
+
setTimeout(() => {
|
836
|
+
this.callbacks.close();
|
837
|
+
}, 100);
|
838
|
+
}
|
839
|
+
};
|
840
|
+
const addableValue = this.callbacks.addable(inputValue);
|
841
|
+
if (addableValue === false || addableValue === undefined || addableValue === null) {
|
842
|
+
return;
|
843
|
+
}
|
844
|
+
if (addableValue instanceof Promise) {
|
845
|
+
addableValue.then((value) => {
|
846
|
+
if (typeof value === 'string') {
|
847
|
+
runFinish({
|
848
|
+
text: value,
|
849
|
+
value: value,
|
850
|
+
});
|
851
|
+
}
|
852
|
+
else {
|
853
|
+
runFinish(value);
|
854
|
+
}
|
855
|
+
});
|
856
|
+
}
|
857
|
+
else if (typeof addableValue === 'string') {
|
858
|
+
runFinish({
|
859
|
+
text: addableValue,
|
860
|
+
value: addableValue,
|
861
|
+
});
|
862
|
+
}
|
863
|
+
else {
|
864
|
+
runFinish(addableValue);
|
865
|
+
}
|
866
|
+
return;
|
867
|
+
};
|
868
|
+
main.appendChild(addable);
|
869
|
+
searchReturn.addable = {
|
870
|
+
main: addable,
|
871
|
+
svg: plus,
|
872
|
+
path: plusPath,
|
873
|
+
};
|
874
|
+
}
|
875
|
+
return searchReturn;
|
876
|
+
}
|
877
|
+
searchFocus() {
|
878
|
+
this.content.search.input.focus();
|
879
|
+
}
|
880
|
+
getOptions(notPlaceholder = false, notDisabled = false, notHidden = false) {
|
881
|
+
let query = '.' + this.classes.option;
|
882
|
+
if (notPlaceholder) {
|
883
|
+
query += ':not(.' + this.classes.placeholder + ')';
|
884
|
+
}
|
885
|
+
if (notDisabled) {
|
886
|
+
query += ':not(.' + this.classes.disabled + ')';
|
887
|
+
}
|
888
|
+
if (notHidden) {
|
889
|
+
query += ':not(.' + this.classes.hide + ')';
|
890
|
+
}
|
891
|
+
return Array.from(this.content.list.querySelectorAll(query));
|
892
|
+
}
|
893
|
+
highlight(dir) {
|
894
|
+
const options = this.getOptions(true, true, true);
|
895
|
+
if (options.length === 0) {
|
896
|
+
return;
|
897
|
+
}
|
898
|
+
if (options.length === 1) {
|
899
|
+
if (!options[0].classList.contains(this.classes.highlighted)) {
|
900
|
+
options[0].classList.add(this.classes.highlighted);
|
901
|
+
return;
|
902
|
+
}
|
903
|
+
}
|
904
|
+
for (let i = 0; i < options.length; i++) {
|
905
|
+
if (options[i].classList.contains(this.classes.highlighted)) {
|
906
|
+
const prevOption = options[i];
|
907
|
+
prevOption.classList.remove(this.classes.highlighted);
|
908
|
+
const prevParent = prevOption.parentElement;
|
909
|
+
if (prevParent && prevParent.classList.contains(this.classes.open)) {
|
910
|
+
const optgroupLabel = prevParent.querySelector('.' + this.classes.optgroupLabel);
|
911
|
+
if (optgroupLabel) {
|
912
|
+
optgroupLabel.click();
|
913
|
+
}
|
914
|
+
}
|
915
|
+
let selectOption = options[dir === 'down' ? (i + 1 < options.length ? i + 1 : 0) : i - 1 >= 0 ? i - 1 : options.length - 1];
|
916
|
+
selectOption.classList.add(this.classes.highlighted);
|
917
|
+
this.ensureElementInView(this.content.list, selectOption);
|
918
|
+
const selectParent = selectOption.parentElement;
|
919
|
+
if (selectParent && selectParent.classList.contains(this.classes.close)) {
|
920
|
+
const optgroupLabel = selectParent.querySelector('.' + this.classes.optgroupLabel);
|
921
|
+
if (optgroupLabel) {
|
922
|
+
optgroupLabel.click();
|
923
|
+
}
|
924
|
+
}
|
925
|
+
return;
|
926
|
+
}
|
927
|
+
}
|
928
|
+
options[dir === 'down' ? 0 : options.length - 1].classList.add(this.classes.highlighted);
|
929
|
+
this.ensureElementInView(this.content.list, options[dir === 'down' ? 0 : options.length - 1]);
|
930
|
+
}
|
931
|
+
listDiv() {
|
932
|
+
const options = document.createElement('div');
|
933
|
+
options.classList.add(this.classes.list);
|
934
|
+
return options;
|
935
|
+
}
|
936
|
+
renderError(error) {
|
937
|
+
this.content.list.innerHTML = '';
|
938
|
+
const errorDiv = document.createElement('div');
|
939
|
+
errorDiv.classList.add(this.classes.error);
|
940
|
+
errorDiv.textContent = error;
|
941
|
+
this.content.list.appendChild(errorDiv);
|
942
|
+
}
|
943
|
+
renderSearching() {
|
944
|
+
this.content.list.innerHTML = '';
|
945
|
+
const searchingDiv = document.createElement('div');
|
946
|
+
searchingDiv.classList.add(this.classes.searching);
|
947
|
+
searchingDiv.textContent = this.settings.searchingText;
|
948
|
+
this.content.list.appendChild(searchingDiv);
|
949
|
+
}
|
950
|
+
renderOptions(data) {
|
951
|
+
this.content.list.innerHTML = '';
|
952
|
+
if (data.length === 0) {
|
953
|
+
const noResults = document.createElement('div');
|
954
|
+
noResults.classList.add(this.classes.search);
|
955
|
+
noResults.innerHTML = this.settings.searchText;
|
956
|
+
this.content.list.appendChild(noResults);
|
957
|
+
return;
|
958
|
+
}
|
959
|
+
for (const d of data) {
|
960
|
+
if (d instanceof Optgroup) {
|
961
|
+
const optgroupEl = document.createElement('div');
|
962
|
+
optgroupEl.classList.add(this.classes.optgroup);
|
963
|
+
const optgroupLabel = document.createElement('div');
|
964
|
+
optgroupLabel.classList.add(this.classes.optgroupLabel);
|
965
|
+
optgroupEl.appendChild(optgroupLabel);
|
966
|
+
const optgroupLabelText = document.createElement('div');
|
967
|
+
optgroupLabelText.classList.add(this.classes.optgroupLabelText);
|
968
|
+
optgroupLabelText.textContent = d.label;
|
969
|
+
optgroupLabel.appendChild(optgroupLabelText);
|
970
|
+
const optgroupActions = document.createElement('div');
|
971
|
+
optgroupActions.classList.add(this.classes.optgroupActions);
|
972
|
+
optgroupLabel.appendChild(optgroupActions);
|
973
|
+
if (this.settings.isMultiple && d.selectAll) {
|
974
|
+
const selectAll = document.createElement('div');
|
975
|
+
selectAll.classList.add(this.classes.optgroupSelectAll);
|
976
|
+
let allSelected = true;
|
977
|
+
for (const o of d.options) {
|
978
|
+
if (!o.selected) {
|
979
|
+
allSelected = false;
|
980
|
+
break;
|
981
|
+
}
|
982
|
+
}
|
983
|
+
if (allSelected) {
|
984
|
+
selectAll.classList.add(this.classes.selected);
|
985
|
+
}
|
986
|
+
const selectAllText = document.createElement('span');
|
987
|
+
selectAllText.textContent = d.selectAllText;
|
988
|
+
selectAll.appendChild(selectAllText);
|
989
|
+
const selectAllSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
990
|
+
selectAllSvg.setAttribute('viewBox', '0 0 100 100');
|
991
|
+
selectAll.appendChild(selectAllSvg);
|
992
|
+
const selectAllBox = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
993
|
+
selectAllBox.setAttribute('d', this.classes.optgroupSelectAllBox);
|
994
|
+
selectAllSvg.appendChild(selectAllBox);
|
995
|
+
const selectAllCheck = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
996
|
+
selectAllCheck.setAttribute('d', this.classes.optgroupSelectAllCheck);
|
997
|
+
selectAllSvg.appendChild(selectAllCheck);
|
998
|
+
selectAll.addEventListener('click', (e) => {
|
999
|
+
e.preventDefault();
|
1000
|
+
e.stopPropagation();
|
1001
|
+
const currentSelected = this.store.getSelected();
|
1002
|
+
if (allSelected) {
|
1003
|
+
const newSelected = currentSelected.filter((s) => {
|
1004
|
+
for (const o of d.options) {
|
1005
|
+
if (s === o.value) {
|
1006
|
+
return false;
|
1007
|
+
}
|
1008
|
+
}
|
1009
|
+
return true;
|
1010
|
+
});
|
1011
|
+
this.callbacks.setSelected(newSelected, true);
|
1012
|
+
return;
|
1013
|
+
}
|
1014
|
+
else {
|
1015
|
+
const newSelected = currentSelected.concat(d.options.map((o) => o.value));
|
1016
|
+
for (const o of d.options) {
|
1017
|
+
if (!this.store.getOptionByID(o.id)) {
|
1018
|
+
this.callbacks.addOption(o);
|
1019
|
+
}
|
1020
|
+
}
|
1021
|
+
this.callbacks.setSelected(newSelected, true);
|
1022
|
+
return;
|
1023
|
+
}
|
1024
|
+
});
|
1025
|
+
optgroupActions.appendChild(selectAll);
|
1026
|
+
}
|
1027
|
+
if (d.closable !== 'off') {
|
1028
|
+
const optgroupClosable = document.createElement('div');
|
1029
|
+
optgroupClosable.classList.add(this.classes.optgroupClosable);
|
1030
|
+
const optgroupClosableSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
1031
|
+
optgroupClosableSvg.setAttribute('viewBox', '0 0 100 100');
|
1032
|
+
optgroupClosableSvg.classList.add(this.classes.arrow);
|
1033
|
+
optgroupClosable.appendChild(optgroupClosableSvg);
|
1034
|
+
const optgroupClosableArrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
1035
|
+
optgroupClosableSvg.appendChild(optgroupClosableArrow);
|
1036
|
+
if (d.options.some((o) => o.selected) || this.content.search.input.value.trim() !== '') {
|
1037
|
+
optgroupClosable.classList.add(this.classes.open);
|
1038
|
+
optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
|
1039
|
+
}
|
1040
|
+
else if (d.closable === 'open') {
|
1041
|
+
optgroupEl.classList.add(this.classes.open);
|
1042
|
+
optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
|
1043
|
+
}
|
1044
|
+
else if (d.closable === 'close') {
|
1045
|
+
optgroupEl.classList.add(this.classes.close);
|
1046
|
+
optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
|
1047
|
+
}
|
1048
|
+
optgroupLabel.addEventListener('click', (e) => {
|
1049
|
+
e.preventDefault();
|
1050
|
+
e.stopPropagation();
|
1051
|
+
if (optgroupEl.classList.contains(this.classes.close)) {
|
1052
|
+
optgroupEl.classList.remove(this.classes.close);
|
1053
|
+
optgroupEl.classList.add(this.classes.open);
|
1054
|
+
optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
|
1055
|
+
}
|
1056
|
+
else {
|
1057
|
+
optgroupEl.classList.remove(this.classes.open);
|
1058
|
+
optgroupEl.classList.add(this.classes.close);
|
1059
|
+
optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
|
1060
|
+
}
|
1061
|
+
});
|
1062
|
+
optgroupActions.appendChild(optgroupClosable);
|
1063
|
+
}
|
1064
|
+
optgroupEl.appendChild(optgroupLabel);
|
1065
|
+
for (const o of d.options) {
|
1066
|
+
optgroupEl.appendChild(this.option(o));
|
1067
|
+
}
|
1068
|
+
this.content.list.appendChild(optgroupEl);
|
1069
|
+
}
|
1070
|
+
if (d instanceof Option) {
|
1071
|
+
this.content.list.appendChild(this.option(d));
|
1072
|
+
}
|
1073
|
+
}
|
1074
|
+
}
|
1075
|
+
option(option) {
|
1076
|
+
if (option.placeholder) {
|
1077
|
+
const placeholder = document.createElement('div');
|
1078
|
+
placeholder.classList.add(this.classes.option);
|
1079
|
+
placeholder.classList.add(this.classes.hide);
|
1080
|
+
return placeholder;
|
1081
|
+
}
|
1082
|
+
const optionEl = document.createElement('div');
|
1083
|
+
optionEl.dataset.id = option.id;
|
1084
|
+
optionEl.id = option.id;
|
1085
|
+
optionEl.classList.add(this.classes.option);
|
1086
|
+
optionEl.setAttribute('role', 'option');
|
1087
|
+
if (option.class) {
|
1088
|
+
option.class.split(' ').forEach((dataClass) => {
|
1089
|
+
optionEl.classList.add(dataClass);
|
1090
|
+
});
|
1091
|
+
}
|
1092
|
+
if (option.style) {
|
1093
|
+
optionEl.style.cssText = option.style;
|
1094
|
+
}
|
1095
|
+
if (this.settings.searchHighlight && this.content.search.input.value.trim() !== '') {
|
1096
|
+
optionEl.innerHTML = this.highlightText(option.html !== '' ? option.html : option.text, this.content.search.input.value, this.classes.searchHighlighter);
|
1097
|
+
}
|
1098
|
+
else if (option.html !== '') {
|
1099
|
+
optionEl.innerHTML = option.html;
|
1100
|
+
}
|
1101
|
+
else {
|
1102
|
+
optionEl.textContent = option.text;
|
1103
|
+
}
|
1104
|
+
if (this.settings.showOptionTooltips && optionEl.textContent) {
|
1105
|
+
optionEl.setAttribute('title', optionEl.textContent);
|
1106
|
+
}
|
1107
|
+
if (!option.display) {
|
1108
|
+
optionEl.classList.add(this.classes.hide);
|
1109
|
+
}
|
1110
|
+
if (option.disabled) {
|
1111
|
+
optionEl.classList.add(this.classes.disabled);
|
1112
|
+
}
|
1113
|
+
if (option.selected && this.settings.hideSelected) {
|
1114
|
+
optionEl.classList.add(this.classes.hide);
|
1115
|
+
}
|
1116
|
+
if (option.selected) {
|
1117
|
+
optionEl.classList.add(this.classes.selected);
|
1118
|
+
optionEl.setAttribute('aria-selected', 'true');
|
1119
|
+
this.main.main.setAttribute('aria-activedescendant', optionEl.id);
|
1120
|
+
}
|
1121
|
+
else {
|
1122
|
+
optionEl.classList.remove(this.classes.selected);
|
1123
|
+
optionEl.setAttribute('aria-selected', 'false');
|
1124
|
+
}
|
1125
|
+
optionEl.addEventListener('click', (e) => {
|
1126
|
+
e.preventDefault();
|
1127
|
+
e.stopPropagation();
|
1128
|
+
const selectedOptions = this.store.getSelected();
|
1129
|
+
const element = e.currentTarget;
|
1130
|
+
const elementID = String(element.dataset.id);
|
1131
|
+
if (option.disabled || (option.selected && !this.settings.allowDeselect)) {
|
1132
|
+
return;
|
1133
|
+
}
|
1134
|
+
if ((this.settings.isMultiple && this.settings.maxSelected <= selectedOptions.length && !option.selected) ||
|
1135
|
+
(this.settings.isMultiple && this.settings.minSelected >= selectedOptions.length && option.selected)) {
|
1136
|
+
return;
|
1137
|
+
}
|
1138
|
+
let shouldUpdate = false;
|
1139
|
+
const before = this.store.getSelectedOptions();
|
1140
|
+
let after = [];
|
1141
|
+
if (this.settings.isMultiple) {
|
1142
|
+
if (option.selected) {
|
1143
|
+
after = before.filter((o) => o.id !== elementID);
|
1144
|
+
}
|
1145
|
+
else {
|
1146
|
+
after = before.concat(option);
|
1147
|
+
}
|
1148
|
+
}
|
1149
|
+
if (!this.settings.isMultiple) {
|
1150
|
+
if (option.selected) {
|
1151
|
+
after = [];
|
1152
|
+
}
|
1153
|
+
else {
|
1154
|
+
after = [option];
|
1155
|
+
}
|
1156
|
+
}
|
1157
|
+
if (!this.callbacks.beforeChange) {
|
1158
|
+
shouldUpdate = true;
|
1159
|
+
}
|
1160
|
+
if (this.callbacks.beforeChange) {
|
1161
|
+
if (this.callbacks.beforeChange(after, before) === false) {
|
1162
|
+
shouldUpdate = false;
|
1163
|
+
}
|
1164
|
+
else {
|
1165
|
+
shouldUpdate = true;
|
1166
|
+
}
|
1167
|
+
}
|
1168
|
+
if (shouldUpdate) {
|
1169
|
+
if (!this.store.getOptionByID(elementID)) {
|
1170
|
+
this.callbacks.addOption(option);
|
1171
|
+
}
|
1172
|
+
this.callbacks.setSelected(after.map((o) => o.value), false);
|
1173
|
+
if (this.settings.closeOnSelect) {
|
1174
|
+
this.callbacks.close();
|
1175
|
+
}
|
1176
|
+
if (this.callbacks.afterChange) {
|
1177
|
+
this.callbacks.afterChange(after);
|
1178
|
+
}
|
1179
|
+
}
|
1180
|
+
});
|
1181
|
+
return optionEl;
|
1182
|
+
}
|
1183
|
+
destroy() {
|
1184
|
+
this.main.main.remove();
|
1185
|
+
this.content.main.remove();
|
1186
|
+
}
|
1187
|
+
highlightText(str, search, className) {
|
1188
|
+
let completedString = str;
|
1189
|
+
const regex = new RegExp('(' + search.trim() + ')(?![^<]*>[^<>]*</)', 'i');
|
1190
|
+
if (!str.match(regex)) {
|
1191
|
+
return str;
|
1192
|
+
}
|
1193
|
+
const matchStartPosition = str.match(regex).index;
|
1194
|
+
const matchEndPosition = matchStartPosition + str.match(regex)[0].toString().length;
|
1195
|
+
const originalTextFoundByRegex = str.substring(matchStartPosition, matchEndPosition);
|
1196
|
+
completedString = completedString.replace(regex, `<mark class="${className}">${originalTextFoundByRegex}</mark>`);
|
1197
|
+
return completedString;
|
1198
|
+
}
|
1199
|
+
moveContentAbove() {
|
1200
|
+
const mainHeight = this.main.main.offsetHeight;
|
1201
|
+
const contentHeight = this.content.main.offsetHeight;
|
1202
|
+
this.main.main.classList.remove(this.classes.openBelow);
|
1203
|
+
this.main.main.classList.add(this.classes.openAbove);
|
1204
|
+
this.content.main.classList.remove(this.classes.openBelow);
|
1205
|
+
this.content.main.classList.add(this.classes.openAbove);
|
1206
|
+
const containerRect = this.main.main.getBoundingClientRect();
|
1207
|
+
this.content.main.style.margin = '-' + (mainHeight + contentHeight - 1) + 'px 0px 0px 0px';
|
1208
|
+
this.content.main.style.top = containerRect.top + containerRect.height + window.scrollY + 'px';
|
1209
|
+
this.content.main.style.left = containerRect.left + window.scrollX + 'px';
|
1210
|
+
this.content.main.style.width = containerRect.width + 'px';
|
1211
|
+
}
|
1212
|
+
moveContentBelow() {
|
1213
|
+
this.main.main.classList.remove(this.classes.openAbove);
|
1214
|
+
this.main.main.classList.add(this.classes.openBelow);
|
1215
|
+
this.content.main.classList.remove(this.classes.openAbove);
|
1216
|
+
this.content.main.classList.add(this.classes.openBelow);
|
1217
|
+
const containerRect = this.main.main.getBoundingClientRect();
|
1218
|
+
this.content.main.style.margin = '-1px 0px 0px 0px';
|
1219
|
+
if (this.settings.contentPosition !== 'relative') {
|
1220
|
+
this.content.main.style.top = containerRect.top + containerRect.height + window.scrollY + 'px';
|
1221
|
+
this.content.main.style.left = containerRect.left + window.scrollX + 'px';
|
1222
|
+
this.content.main.style.width = containerRect.width + 'px';
|
1223
|
+
}
|
1224
|
+
}
|
1225
|
+
ensureElementInView(container, element) {
|
1226
|
+
const cTop = container.scrollTop + container.offsetTop;
|
1227
|
+
const cBottom = cTop + container.clientHeight;
|
1228
|
+
const eTop = element.offsetTop;
|
1229
|
+
const eBottom = eTop + element.clientHeight;
|
1230
|
+
if (eTop < cTop) {
|
1231
|
+
container.scrollTop -= cTop - eTop;
|
1232
|
+
}
|
1233
|
+
else if (eBottom > cBottom) {
|
1234
|
+
container.scrollTop += eBottom - cBottom;
|
1235
|
+
}
|
1236
|
+
}
|
1237
|
+
putContent() {
|
1238
|
+
const mainHeight = this.main.main.offsetHeight;
|
1239
|
+
const mainRect = this.main.main.getBoundingClientRect();
|
1240
|
+
const contentHeight = this.content.main.offsetHeight;
|
1241
|
+
const spaceBelow = window.innerHeight - (mainRect.top + mainHeight);
|
1242
|
+
if (spaceBelow <= contentHeight) {
|
1243
|
+
if (mainRect.top > contentHeight) {
|
1244
|
+
return 'up';
|
1245
|
+
}
|
1246
|
+
else {
|
1247
|
+
return 'down';
|
1248
|
+
}
|
1249
|
+
}
|
1250
|
+
return 'down';
|
1251
|
+
}
|
1252
|
+
updateDeselectAll() {
|
1253
|
+
if (!this.store || !this.settings) {
|
1254
|
+
return;
|
1255
|
+
}
|
1256
|
+
const selected = this.store.getSelectedOptions();
|
1257
|
+
const hasSelectedItems = selected && selected.length > 0;
|
1258
|
+
const isMultiple = this.settings.isMultiple;
|
1259
|
+
const allowDeselect = this.settings.allowDeselect;
|
1260
|
+
const deselectButton = this.main.deselect.main;
|
1261
|
+
const hideClass = this.classes.hide;
|
1262
|
+
if (allowDeselect && !(isMultiple && !hasSelectedItems)) {
|
1263
|
+
deselectButton.classList.remove(hideClass);
|
1264
|
+
}
|
1265
|
+
else {
|
1266
|
+
deselectButton.classList.add(hideClass);
|
1267
|
+
}
|
1268
|
+
}
|
1269
|
+
}
|
1270
|
+
|
1271
|
+
class Select {
|
1272
|
+
constructor(select) {
|
1273
|
+
this.listen = false;
|
1274
|
+
this.observer = null;
|
1275
|
+
this.select = select;
|
1276
|
+
this.select.addEventListener('change', this.valueChange.bind(this), {
|
1277
|
+
passive: true,
|
1278
|
+
});
|
1279
|
+
this.observer = new MutationObserver(this.observeCall.bind(this));
|
1280
|
+
this.changeListen(true);
|
1281
|
+
}
|
1282
|
+
enable() {
|
1283
|
+
this.select.disabled = false;
|
1284
|
+
}
|
1285
|
+
disable() {
|
1286
|
+
this.select.disabled = true;
|
1287
|
+
}
|
1288
|
+
hideUI() {
|
1289
|
+
this.select.tabIndex = -1;
|
1290
|
+
this.select.style.display = 'none';
|
1291
|
+
this.select.setAttribute('aria-hidden', 'true');
|
1292
|
+
}
|
1293
|
+
showUI() {
|
1294
|
+
this.select.removeAttribute('tabindex');
|
1295
|
+
this.select.style.display = '';
|
1296
|
+
this.select.removeAttribute('aria-hidden');
|
1297
|
+
}
|
1298
|
+
changeListen(listen) {
|
1299
|
+
this.listen = listen;
|
1300
|
+
if (listen) {
|
1301
|
+
if (this.observer) {
|
1302
|
+
this.observer.observe(this.select, {
|
1303
|
+
subtree: true,
|
1304
|
+
childList: true,
|
1305
|
+
attributes: true,
|
1306
|
+
});
|
1307
|
+
}
|
1308
|
+
}
|
1309
|
+
if (!listen) {
|
1310
|
+
if (this.observer) {
|
1311
|
+
this.observer.disconnect();
|
1312
|
+
}
|
1313
|
+
}
|
1314
|
+
}
|
1315
|
+
valueChange(ev) {
|
1316
|
+
if (this.listen && this.onValueChange) {
|
1317
|
+
this.onValueChange(this.getSelectedValues());
|
1318
|
+
}
|
1319
|
+
return true;
|
1320
|
+
}
|
1321
|
+
observeCall(mutations) {
|
1322
|
+
if (!this.listen) {
|
1323
|
+
return;
|
1324
|
+
}
|
1325
|
+
let classChanged = false;
|
1326
|
+
let disabledChanged = false;
|
1327
|
+
let optgroupOptionChanged = false;
|
1328
|
+
for (const m of mutations) {
|
1329
|
+
if (m.target === this.select) {
|
1330
|
+
if (m.attributeName === 'disabled') {
|
1331
|
+
disabledChanged = true;
|
1332
|
+
}
|
1333
|
+
if (m.attributeName === 'class') {
|
1334
|
+
classChanged = true;
|
1335
|
+
}
|
1336
|
+
}
|
1337
|
+
if (m.target.nodeName === 'OPTGROUP' || m.target.nodeName === 'OPTION') {
|
1338
|
+
optgroupOptionChanged = true;
|
1339
|
+
}
|
1340
|
+
}
|
1341
|
+
if (classChanged && this.onClassChange) {
|
1342
|
+
this.onClassChange(this.select.className.split(' '));
|
1343
|
+
}
|
1344
|
+
if (disabledChanged && this.onDisabledChange) {
|
1345
|
+
this.changeListen(false);
|
1346
|
+
this.onDisabledChange(this.select.disabled);
|
1347
|
+
this.changeListen(true);
|
1348
|
+
}
|
1349
|
+
if (optgroupOptionChanged && this.onOptionsChange) {
|
1350
|
+
this.changeListen(false);
|
1351
|
+
this.onOptionsChange(this.getData());
|
1352
|
+
this.changeListen(true);
|
1353
|
+
}
|
1354
|
+
}
|
1355
|
+
getData() {
|
1356
|
+
let data = [];
|
1357
|
+
const nodes = this.select.childNodes;
|
1358
|
+
for (const n of nodes) {
|
1359
|
+
if (n.nodeName === 'OPTGROUP') {
|
1360
|
+
data.push(this.getDataFromOptgroup(n));
|
1361
|
+
}
|
1362
|
+
if (n.nodeName === 'OPTION') {
|
1363
|
+
data.push(this.getDataFromOption(n));
|
1364
|
+
}
|
1365
|
+
}
|
1366
|
+
return data;
|
1367
|
+
}
|
1368
|
+
getDataFromOptgroup(optgroup) {
|
1369
|
+
let data = {
|
1370
|
+
id: optgroup.id,
|
1371
|
+
label: optgroup.label,
|
1372
|
+
selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
|
1373
|
+
selectAllText: optgroup.dataset ? optgroup.dataset.selectalltext : 'Select all',
|
1374
|
+
closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
|
1375
|
+
options: [],
|
1376
|
+
};
|
1377
|
+
const options = optgroup.childNodes;
|
1378
|
+
for (const o of options) {
|
1379
|
+
if (o.nodeName === 'OPTION') {
|
1380
|
+
data.options.push(this.getDataFromOption(o));
|
1381
|
+
}
|
1382
|
+
}
|
1383
|
+
return data;
|
1384
|
+
}
|
1385
|
+
getDataFromOption(option) {
|
1386
|
+
return {
|
1387
|
+
id: option.id,
|
1388
|
+
value: option.value,
|
1389
|
+
text: option.text,
|
1390
|
+
html: option.dataset && option.dataset.html ? option.dataset.html : '',
|
1391
|
+
selected: option.selected,
|
1392
|
+
display: option.style.display === 'none' ? false : true,
|
1393
|
+
disabled: option.disabled,
|
1394
|
+
mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
|
1395
|
+
placeholder: option.dataset.placeholder === 'true',
|
1396
|
+
class: option.className,
|
1397
|
+
style: option.style.cssText,
|
1398
|
+
data: option.dataset,
|
1399
|
+
};
|
1400
|
+
}
|
1401
|
+
getSelectedValues() {
|
1402
|
+
let values = [];
|
1403
|
+
const options = this.select.childNodes;
|
1404
|
+
for (const o of options) {
|
1405
|
+
if (o.nodeName === 'OPTGROUP') {
|
1406
|
+
const optgroupOptions = o.childNodes;
|
1407
|
+
for (const oo of optgroupOptions) {
|
1408
|
+
if (oo.nodeName === 'OPTION') {
|
1409
|
+
const option = oo;
|
1410
|
+
if (option.selected) {
|
1411
|
+
values.push(option.value);
|
1412
|
+
}
|
1413
|
+
}
|
1414
|
+
}
|
1415
|
+
}
|
1416
|
+
if (o.nodeName === 'OPTION') {
|
1417
|
+
const option = o;
|
1418
|
+
if (option.selected) {
|
1419
|
+
values.push(option.value);
|
1420
|
+
}
|
1421
|
+
}
|
1422
|
+
}
|
1423
|
+
return values;
|
1424
|
+
}
|
1425
|
+
setSelected(value) {
|
1426
|
+
this.changeListen(false);
|
1427
|
+
const options = this.select.childNodes;
|
1428
|
+
for (const o of options) {
|
1429
|
+
if (o.nodeName === 'OPTGROUP') {
|
1430
|
+
const optgroup = o;
|
1431
|
+
const optgroupOptions = optgroup.childNodes;
|
1432
|
+
for (const oo of optgroupOptions) {
|
1433
|
+
if (oo.nodeName === 'OPTION') {
|
1434
|
+
const option = oo;
|
1435
|
+
option.selected = value.includes(option.value);
|
1436
|
+
}
|
1437
|
+
}
|
1438
|
+
}
|
1439
|
+
if (o.nodeName === 'OPTION') {
|
1440
|
+
const option = o;
|
1441
|
+
option.selected = value.includes(option.value);
|
1442
|
+
}
|
1443
|
+
}
|
1444
|
+
this.changeListen(true);
|
1445
|
+
}
|
1446
|
+
updateSelect(id, style, classes) {
|
1447
|
+
this.changeListen(false);
|
1448
|
+
if (id) {
|
1449
|
+
this.select.dataset.id = id;
|
1450
|
+
}
|
1451
|
+
if (style) {
|
1452
|
+
this.select.style.cssText = style;
|
1453
|
+
}
|
1454
|
+
if (classes) {
|
1455
|
+
this.select.className = '';
|
1456
|
+
classes.forEach((c) => {
|
1457
|
+
if (c.trim() !== '') {
|
1458
|
+
this.select.classList.add(c.trim());
|
1459
|
+
}
|
1460
|
+
});
|
1461
|
+
}
|
1462
|
+
this.changeListen(true);
|
1463
|
+
}
|
1464
|
+
updateOptions(data) {
|
1465
|
+
this.changeListen(false);
|
1466
|
+
this.select.innerHTML = '';
|
1467
|
+
for (const d of data) {
|
1468
|
+
if (d instanceof Optgroup) {
|
1469
|
+
this.select.appendChild(this.createOptgroup(d));
|
1470
|
+
}
|
1471
|
+
if (d instanceof Option) {
|
1472
|
+
this.select.appendChild(this.createOption(d));
|
1473
|
+
}
|
1474
|
+
}
|
1475
|
+
this.select.dispatchEvent(new Event('change'));
|
1476
|
+
this.changeListen(true);
|
1477
|
+
}
|
1478
|
+
createOptgroup(optgroup) {
|
1479
|
+
const optgroupEl = document.createElement('optgroup');
|
1480
|
+
optgroupEl.id = optgroup.id;
|
1481
|
+
optgroupEl.label = optgroup.label;
|
1482
|
+
if (optgroup.selectAll) {
|
1483
|
+
optgroupEl.dataset.selectAll = 'true';
|
1484
|
+
}
|
1485
|
+
if (optgroup.closable !== 'off') {
|
1486
|
+
optgroupEl.dataset.closable = optgroup.closable;
|
1487
|
+
}
|
1488
|
+
if (optgroup.options) {
|
1489
|
+
for (const o of optgroup.options) {
|
1490
|
+
optgroupEl.appendChild(this.createOption(o));
|
1491
|
+
}
|
1492
|
+
}
|
1493
|
+
return optgroupEl;
|
1494
|
+
}
|
1495
|
+
createOption(info) {
|
1496
|
+
const optionEl = document.createElement('option');
|
1497
|
+
optionEl.id = info.id;
|
1498
|
+
optionEl.value = info.value;
|
1499
|
+
optionEl.innerHTML = info.text;
|
1500
|
+
if (info.html !== '') {
|
1501
|
+
optionEl.setAttribute('data-html', info.html);
|
1502
|
+
}
|
1503
|
+
if (info.selected) {
|
1504
|
+
optionEl.selected = info.selected;
|
1505
|
+
}
|
1506
|
+
if (info.disabled) {
|
1507
|
+
optionEl.disabled = true;
|
1508
|
+
}
|
1509
|
+
if (info.display === false) {
|
1510
|
+
optionEl.style.display = 'none';
|
1511
|
+
}
|
1512
|
+
if (info.placeholder) {
|
1513
|
+
optionEl.setAttribute('data-placeholder', 'true');
|
1514
|
+
}
|
1515
|
+
if (info.mandatory) {
|
1516
|
+
optionEl.setAttribute('data-mandatory', 'true');
|
1517
|
+
}
|
1518
|
+
if (info.class) {
|
1519
|
+
info.class.split(' ').forEach((optionClass) => {
|
1520
|
+
optionEl.classList.add(optionClass);
|
1521
|
+
});
|
1522
|
+
}
|
1523
|
+
if (info.data && typeof info.data === 'object') {
|
1524
|
+
Object.keys(info.data).forEach((key) => {
|
1525
|
+
optionEl.setAttribute('data-' + kebabCase(key), info.data[key]);
|
1526
|
+
});
|
1527
|
+
}
|
1528
|
+
return optionEl;
|
1529
|
+
}
|
1530
|
+
destroy() {
|
1531
|
+
this.changeListen(false);
|
1532
|
+
this.select.removeEventListener('change', this.valueChange.bind(this));
|
1533
|
+
if (this.observer) {
|
1534
|
+
this.observer.disconnect();
|
1535
|
+
this.observer = null;
|
1536
|
+
}
|
1537
|
+
delete this.select.dataset.id;
|
1538
|
+
this.showUI();
|
1539
|
+
}
|
1540
|
+
}
|
1541
|
+
|
1542
|
+
class SlimSelect {
|
1543
|
+
constructor(config) {
|
1544
|
+
var _a;
|
1545
|
+
this.events = {
|
1546
|
+
search: undefined,
|
1547
|
+
searchFilter: (opt, search) => {
|
1548
|
+
return opt.text.toLowerCase().indexOf(search.toLowerCase()) !== -1;
|
1549
|
+
},
|
1550
|
+
addable: undefined,
|
1551
|
+
beforeChange: undefined,
|
1552
|
+
afterChange: undefined,
|
1553
|
+
beforeOpen: undefined,
|
1554
|
+
afterOpen: undefined,
|
1555
|
+
beforeClose: undefined,
|
1556
|
+
afterClose: undefined,
|
1557
|
+
};
|
1558
|
+
this.windowResize = debounce(() => {
|
1559
|
+
if (!this.settings.isOpen && !this.settings.isFullOpen) {
|
1560
|
+
return;
|
1561
|
+
}
|
1562
|
+
this.render.moveContent();
|
1563
|
+
});
|
1564
|
+
this.windowScroll = debounce(() => {
|
1565
|
+
if (!this.settings.isOpen && !this.settings.isFullOpen) {
|
1566
|
+
return;
|
1567
|
+
}
|
1568
|
+
this.render.moveContent();
|
1569
|
+
});
|
1570
|
+
this.documentClick = (e) => {
|
1571
|
+
if (!this.settings.isOpen) {
|
1572
|
+
return;
|
1573
|
+
}
|
1574
|
+
if (e.target && !hasClassInTree(e.target, this.settings.id)) {
|
1575
|
+
this.close(e.type);
|
1576
|
+
}
|
1577
|
+
};
|
1578
|
+
this.windowVisibilityChange = () => {
|
1579
|
+
if (document.hidden) {
|
1580
|
+
this.close();
|
1581
|
+
}
|
1582
|
+
};
|
1583
|
+
this.selectEl = (typeof config.select === 'string' ? document.querySelector(config.select) : config.select);
|
1584
|
+
if (!this.selectEl) {
|
1585
|
+
if (config.events && config.events.error) {
|
1586
|
+
config.events.error(new Error('Could not find select element'));
|
1587
|
+
}
|
1588
|
+
return;
|
1589
|
+
}
|
1590
|
+
if (this.selectEl.tagName !== 'SELECT') {
|
1591
|
+
if (config.events && config.events.error) {
|
1592
|
+
config.events.error(new Error('Element isnt of type select'));
|
1593
|
+
}
|
1594
|
+
return;
|
1595
|
+
}
|
1596
|
+
if (this.selectEl.dataset.ssid) {
|
1597
|
+
this.destroy();
|
1598
|
+
}
|
1599
|
+
this.settings = new Settings(config.settings);
|
1600
|
+
const debounceEvents = ['afterChange', 'beforeOpen', 'afterOpen', 'beforeClose', 'afterClose'];
|
1601
|
+
for (const key in config.events) {
|
1602
|
+
if (!config.events.hasOwnProperty(key)) {
|
1603
|
+
continue;
|
1604
|
+
}
|
1605
|
+
if (debounceEvents.indexOf(key) !== -1) {
|
1606
|
+
this.events[key] = debounce(config.events[key], 100);
|
1607
|
+
}
|
1608
|
+
else {
|
1609
|
+
this.events[key] = config.events[key];
|
1610
|
+
}
|
1611
|
+
}
|
1612
|
+
this.settings.disabled = ((_a = config.settings) === null || _a === void 0 ? void 0 : _a.disabled) ? config.settings.disabled : this.selectEl.disabled;
|
1613
|
+
this.settings.isMultiple = this.selectEl.multiple;
|
1614
|
+
this.settings.style = this.selectEl.style.cssText;
|
1615
|
+
this.settings.class = this.selectEl.className.split(' ');
|
1616
|
+
this.select = new Select(this.selectEl);
|
1617
|
+
this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class);
|
1618
|
+
this.select.hideUI();
|
1619
|
+
this.select.onValueChange = (values) => {
|
1620
|
+
this.setSelected(values);
|
1621
|
+
};
|
1622
|
+
this.select.onClassChange = (classes) => {
|
1623
|
+
this.settings.class = classes;
|
1624
|
+
this.render.updateClassStyles();
|
1625
|
+
};
|
1626
|
+
this.select.onDisabledChange = (disabled) => {
|
1627
|
+
if (disabled) {
|
1628
|
+
this.disable();
|
1629
|
+
}
|
1630
|
+
else {
|
1631
|
+
this.enable();
|
1632
|
+
}
|
1633
|
+
};
|
1634
|
+
this.select.onOptionsChange = (data) => {
|
1635
|
+
this.setData(data);
|
1636
|
+
};
|
1637
|
+
this.store = new Store(this.settings.isMultiple ? 'multiple' : 'single', config.data ? config.data : this.select.getData());
|
1638
|
+
if (config.data) {
|
1639
|
+
this.select.updateOptions(this.store.getData());
|
1640
|
+
}
|
1641
|
+
const callbacks = {
|
1642
|
+
open: this.open.bind(this),
|
1643
|
+
close: this.close.bind(this),
|
1644
|
+
addable: this.events.addable ? this.events.addable : undefined,
|
1645
|
+
setSelected: this.setSelected.bind(this),
|
1646
|
+
addOption: this.addOption.bind(this),
|
1647
|
+
search: this.search.bind(this),
|
1648
|
+
beforeChange: this.events.beforeChange,
|
1649
|
+
afterChange: this.events.afterChange,
|
1650
|
+
};
|
1651
|
+
this.render = new Render(this.settings, this.store, callbacks);
|
1652
|
+
this.render.renderValues();
|
1653
|
+
this.render.renderOptions(this.store.getData());
|
1654
|
+
const selectAriaLabel = this.selectEl.getAttribute('aria-label');
|
1655
|
+
const selectAriaLabelledBy = this.selectEl.getAttribute('aria-labelledby');
|
1656
|
+
if (selectAriaLabel) {
|
1657
|
+
this.render.main.main.setAttribute('aria-label', selectAriaLabel);
|
1658
|
+
}
|
1659
|
+
else if (selectAriaLabelledBy) {
|
1660
|
+
this.render.main.main.setAttribute('aria-labelledby', selectAriaLabelledBy);
|
1661
|
+
}
|
1662
|
+
if (this.selectEl.parentNode) {
|
1663
|
+
this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
|
1664
|
+
}
|
1665
|
+
document.addEventListener('click', this.documentClick);
|
1666
|
+
window.addEventListener('resize', this.windowResize, false);
|
1667
|
+
if (this.settings.openPosition === 'auto') {
|
1668
|
+
window.addEventListener('scroll', this.windowScroll, false);
|
1669
|
+
}
|
1670
|
+
document.addEventListener('visibilitychange', this.windowVisibilityChange);
|
1671
|
+
if (this.settings.disabled) {
|
1672
|
+
this.disable();
|
1673
|
+
}
|
1674
|
+
if (this.settings.alwaysOpen) {
|
1675
|
+
this.open();
|
1676
|
+
}
|
1677
|
+
this.selectEl.slim = this;
|
1678
|
+
}
|
1679
|
+
enable() {
|
1680
|
+
this.settings.disabled = false;
|
1681
|
+
this.select.enable();
|
1682
|
+
this.render.enable();
|
1683
|
+
}
|
1684
|
+
disable() {
|
1685
|
+
this.settings.disabled = true;
|
1686
|
+
this.select.disable();
|
1687
|
+
this.render.disable();
|
1688
|
+
}
|
1689
|
+
getData() {
|
1690
|
+
return this.store.getData();
|
1691
|
+
}
|
1692
|
+
setData(data) {
|
1693
|
+
const selected = this.store.getSelected();
|
1694
|
+
const err = this.store.validateDataArray(data);
|
1695
|
+
if (err) {
|
1696
|
+
if (this.events.error) {
|
1697
|
+
this.events.error(err);
|
1698
|
+
}
|
1699
|
+
return;
|
1700
|
+
}
|
1701
|
+
this.store.setData(data);
|
1702
|
+
const dataClean = this.store.getData();
|
1703
|
+
this.select.updateOptions(dataClean);
|
1704
|
+
this.render.renderValues();
|
1705
|
+
this.render.renderOptions(dataClean);
|
1706
|
+
if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
|
1707
|
+
this.events.afterChange(this.store.getSelectedOptions());
|
1708
|
+
}
|
1709
|
+
}
|
1710
|
+
getSelected() {
|
1711
|
+
return this.store.getSelected();
|
1712
|
+
}
|
1713
|
+
setSelected(value, runAfterChange = true) {
|
1714
|
+
const selected = this.store.getSelected();
|
1715
|
+
this.store.setSelectedBy('value', Array.isArray(value) ? value : [value]);
|
1716
|
+
const data = this.store.getData();
|
1717
|
+
this.select.updateOptions(data);
|
1718
|
+
this.render.renderValues();
|
1719
|
+
if (this.render.content.search.input.value !== '') {
|
1720
|
+
this.search(this.render.content.search.input.value);
|
1721
|
+
}
|
1722
|
+
else {
|
1723
|
+
this.render.renderOptions(data);
|
1724
|
+
}
|
1725
|
+
if (runAfterChange && this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
|
1726
|
+
this.events.afterChange(this.store.getSelectedOptions());
|
1727
|
+
}
|
1728
|
+
}
|
1729
|
+
addOption(option) {
|
1730
|
+
const selected = this.store.getSelected();
|
1731
|
+
if (!this.store.getDataOptions().some((o) => { var _a; return o.value === ((_a = option.value) !== null && _a !== void 0 ? _a : option.text); })) {
|
1732
|
+
this.store.addOption(option);
|
1733
|
+
}
|
1734
|
+
const data = this.store.getData();
|
1735
|
+
this.select.updateOptions(data);
|
1736
|
+
this.render.renderValues();
|
1737
|
+
this.render.renderOptions(data);
|
1738
|
+
if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
|
1739
|
+
this.events.afterChange(this.store.getSelectedOptions());
|
1740
|
+
}
|
1741
|
+
}
|
1742
|
+
open() {
|
1743
|
+
if (this.settings.disabled || this.settings.isOpen) {
|
1744
|
+
return;
|
1745
|
+
}
|
1746
|
+
if (this.events.beforeOpen) {
|
1747
|
+
this.events.beforeOpen();
|
1748
|
+
}
|
1749
|
+
this.render.open();
|
1750
|
+
if (this.settings.showSearch) {
|
1751
|
+
this.render.searchFocus();
|
1752
|
+
}
|
1753
|
+
this.settings.isOpen = true;
|
1754
|
+
setTimeout(() => {
|
1755
|
+
if (this.events.afterOpen) {
|
1756
|
+
this.events.afterOpen();
|
1757
|
+
}
|
1758
|
+
if (this.settings.isOpen) {
|
1759
|
+
this.settings.isFullOpen = true;
|
1760
|
+
}
|
1761
|
+
}, this.settings.timeoutDelay);
|
1762
|
+
if (this.settings.contentPosition === 'absolute') {
|
1763
|
+
if (this.settings.intervalMove) {
|
1764
|
+
clearInterval(this.settings.intervalMove);
|
1765
|
+
}
|
1766
|
+
this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500);
|
1767
|
+
}
|
1768
|
+
}
|
1769
|
+
close(eventType = null) {
|
1770
|
+
if (!this.settings.isOpen || this.settings.alwaysOpen) {
|
1771
|
+
return;
|
1772
|
+
}
|
1773
|
+
if (this.events.beforeClose) {
|
1774
|
+
this.events.beforeClose();
|
1775
|
+
}
|
1776
|
+
this.render.close();
|
1777
|
+
if (this.render.content.search.input.value !== '') {
|
1778
|
+
this.search('');
|
1779
|
+
}
|
1780
|
+
this.render.mainFocus(eventType);
|
1781
|
+
this.settings.isOpen = false;
|
1782
|
+
this.settings.isFullOpen = false;
|
1783
|
+
setTimeout(() => {
|
1784
|
+
if (this.events.afterClose) {
|
1785
|
+
this.events.afterClose();
|
1786
|
+
}
|
1787
|
+
}, this.settings.timeoutDelay);
|
1788
|
+
if (this.settings.intervalMove) {
|
1789
|
+
clearInterval(this.settings.intervalMove);
|
1790
|
+
}
|
1791
|
+
}
|
1792
|
+
search(value) {
|
1793
|
+
if (this.render.content.search.input.value !== value) {
|
1794
|
+
this.render.content.search.input.value = value;
|
1795
|
+
}
|
1796
|
+
if (!this.events.search) {
|
1797
|
+
this.render.renderOptions(value === '' ? this.store.getData() : this.store.search(value, this.events.searchFilter));
|
1798
|
+
return;
|
1799
|
+
}
|
1800
|
+
this.render.renderSearching();
|
1801
|
+
const searchResp = this.events.search(value, this.store.getSelectedOptions());
|
1802
|
+
if (searchResp instanceof Promise) {
|
1803
|
+
searchResp
|
1804
|
+
.then((data) => {
|
1805
|
+
this.render.renderOptions(this.store.partialToFullData(data));
|
1806
|
+
})
|
1807
|
+
.catch((err) => {
|
1808
|
+
this.render.renderError(typeof err === 'string' ? err : err.message);
|
1809
|
+
});
|
1810
|
+
return;
|
1811
|
+
}
|
1812
|
+
else if (Array.isArray(searchResp)) {
|
1813
|
+
this.render.renderOptions(this.store.partialToFullData(searchResp));
|
1814
|
+
}
|
1815
|
+
else {
|
1816
|
+
this.render.renderError('Search event must return a promise or an array of data');
|
1817
|
+
}
|
1818
|
+
}
|
1819
|
+
destroy() {
|
1820
|
+
document.removeEventListener('click', this.documentClick);
|
1821
|
+
window.removeEventListener('resize', this.windowResize, false);
|
1822
|
+
if (this.settings.openPosition === 'auto') {
|
1823
|
+
window.removeEventListener('scroll', this.windowScroll, false);
|
1824
|
+
}
|
1825
|
+
document.removeEventListener('visibilitychange', this.windowVisibilityChange);
|
1826
|
+
this.store.setData([]);
|
1827
|
+
this.render.destroy();
|
1828
|
+
this.select.destroy();
|
1829
|
+
}
|
1830
|
+
}
|
1831
|
+
|
1832
|
+
return SlimSelect;
|
1833
|
+
|
1834
|
+
}));
|