@aegis-framework/artemis 0.3.28 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/LICENSE +1 -1
  2. package/dist/artemis.browser.js +4 -0
  3. package/dist/artemis.browser.js.map +24 -0
  4. package/dist/artemis.js +3 -1
  5. package/dist/artemis.js.map +23 -1
  6. package/dist/types/DOM.d.ts +383 -0
  7. package/dist/types/DOM.d.ts.map +1 -0
  8. package/dist/types/Debug.d.ts +118 -0
  9. package/dist/types/Debug.d.ts.map +1 -0
  10. package/dist/types/FileSystem.d.ts +69 -0
  11. package/dist/types/FileSystem.d.ts.map +1 -0
  12. package/dist/types/Form.d.ts +32 -0
  13. package/dist/types/Form.d.ts.map +1 -0
  14. package/dist/types/Platform.d.ts +93 -0
  15. package/dist/types/Platform.d.ts.map +1 -0
  16. package/dist/types/Preload.d.ts +26 -0
  17. package/dist/types/Preload.d.ts.map +1 -0
  18. package/dist/types/Request.d.ts +86 -0
  19. package/dist/types/Request.d.ts.map +1 -0
  20. package/dist/types/Space.d.ts +205 -0
  21. package/dist/types/Space.d.ts.map +1 -0
  22. package/dist/types/SpaceAdapter/IndexedDB.d.ts +130 -0
  23. package/dist/types/SpaceAdapter/IndexedDB.d.ts.map +1 -0
  24. package/dist/types/SpaceAdapter/LocalStorage.d.ts +125 -0
  25. package/dist/types/SpaceAdapter/LocalStorage.d.ts.map +1 -0
  26. package/dist/types/SpaceAdapter/RemoteStorage.d.ts +122 -0
  27. package/dist/types/SpaceAdapter/RemoteStorage.d.ts.map +1 -0
  28. package/dist/types/SpaceAdapter/SessionStorage.d.ts +30 -0
  29. package/dist/types/SpaceAdapter/SessionStorage.d.ts.map +1 -0
  30. package/dist/types/SpaceAdapter/types.d.ts +76 -0
  31. package/dist/types/SpaceAdapter/types.d.ts.map +1 -0
  32. package/dist/types/Text.d.ts +47 -0
  33. package/dist/types/Text.d.ts.map +1 -0
  34. package/dist/types/Util.d.ts +31 -0
  35. package/dist/types/Util.d.ts.map +1 -0
  36. package/dist/types/browser.d.ts +7 -0
  37. package/dist/types/browser.d.ts.map +1 -0
  38. package/dist/types/index.d.ts +11 -0
  39. package/dist/types/index.d.ts.map +1 -0
  40. package/package.json +42 -53
  41. package/dist/artemis.min.js +0 -2
  42. package/dist/artemis.min.js.map +0 -1
  43. package/dist/index.js +0 -2
  44. package/dist/index.js.map +0 -1
  45. package/index.js +0 -10
  46. package/src/DOM.js +0 -993
  47. package/src/Debug.js +0 -233
  48. package/src/FileSystem.js +0 -109
  49. package/src/Form.js +0 -73
  50. package/src/Platform.js +0 -166
  51. package/src/Preload.js +0 -48
  52. package/src/Request.js +0 -163
  53. package/src/Space.js +0 -334
  54. package/src/SpaceAdapter/IndexedDB.js +0 -345
  55. package/src/SpaceAdapter/LocalStorage.js +0 -395
  56. package/src/SpaceAdapter/RemoteStorage.js +0 -219
  57. package/src/SpaceAdapter/SessionStorage.js +0 -46
  58. package/src/Text.js +0 -133
  59. package/src/Util.js +0 -55
package/src/DOM.js DELETED
@@ -1,993 +0,0 @@
1
- /**
2
- * ==============================
3
- * DOM
4
- * ==============================
5
- */
6
-
7
- /**
8
- * Simple DOM manipulation functions
9
- *
10
- * @class
11
- */
12
- export class DOM {
13
-
14
- /**
15
- * Create a new DOM object
16
- *
17
- * @constructor
18
- * @param {string|Object|array} selector - Selector or DOM element to use
19
- * @return {DOM} - New instance of DOM
20
- */
21
- constructor (selector) {
22
-
23
- if (selector === null) {
24
- this.collection = [];
25
- this.length = 0;
26
- return;
27
- }
28
-
29
- if (typeof selector == 'string') {
30
- this.collection = document.querySelectorAll (selector);
31
- this.length = this.collection.length;
32
- this._selector = selector;
33
- } else if (selector instanceof NodeList) {
34
- this.collection = selector;
35
- this.length = selector.length;
36
- this._selector = selector;
37
- } else if (selector instanceof DOM) {
38
- this.collection = selector.collection;
39
- this.length = this.collection.length;
40
- this._selector = selector._selector;
41
- } else if (selector instanceof HTMLElement) {
42
- this.collection = [selector];
43
- this.length = this.collection.length;
44
- this._selector = selector;
45
- } else if (typeof selector == 'object') {
46
- if (selector.length >= 1) {
47
- this.collection = selector;
48
- } else {
49
- this.collection = [selector];
50
- }
51
- this.length = this.collection.length;
52
- this._selector = selector;
53
- } else {
54
- return undefined;
55
- }
56
-
57
- }
58
-
59
- /**
60
- * Hide elements by setting their `display` property to 'none'.
61
- *
62
- * @return {DOM} - Current instance
63
- */
64
- hide () {
65
- for (const element of this.collection) {
66
- element.style.display = 'none';
67
- }
68
-
69
- return this;
70
- }
71
-
72
- /**
73
- * Show elements by setting their `display` property to the given value.
74
- *
75
- * @param {string} [display='block'] - Display property to set
76
- *
77
- * @return {DOM} - Current instance
78
- */
79
- show (display = 'block') {
80
- for (const element of this.collection) {
81
- element.style.display = display;
82
- }
83
-
84
- return this;
85
- }
86
-
87
- /**
88
- * Add a class to the classList object
89
- *
90
- * @param {string} newClass - Class name to add
91
- *
92
- * @return {DOM} - Current instance
93
- */
94
- addClass (newClass) {
95
- for (const element of this.collection) {
96
- element.classList.add (newClass);
97
- }
98
-
99
- return this;
100
- }
101
-
102
- /**
103
- * Remove a given class from the classList object
104
- *
105
- * @param {string} [oldClass=null] - Class to remove. If it's empty or null,
106
- * all classes will be removed
107
- *
108
- * @return {DOM} - Current instance
109
- */
110
- removeClass (oldClass = null) {
111
- if (oldClass !== null) {
112
- for (const element of this.collection) {
113
- element.classList.remove (oldClass);
114
- }
115
- } else {
116
- for (const element of this.collection) {
117
- while (element.classList.length > 0) {
118
- element.classList.remove (element.classList.item (0));
119
- }
120
- }
121
- }
122
-
123
- return this;
124
- }
125
-
126
- /**
127
- * Toggle between two classes
128
- *
129
- * @param {string} classes - Space separated class names
130
- *
131
- * @return {DOM} - Current instance
132
- */
133
- toggleClass (classes) {
134
- classes = classes.split (' ');
135
- for (const element of this.collection) {
136
- for (let j = 0; j < classes.length; j++) {
137
- element.classList.toggle (classes[j]);
138
- }
139
- }
140
-
141
- return this;
142
- }
143
-
144
- /**
145
- * Check if the first element matching the selector has the given class
146
- *
147
- * @param {string} classToCheck - Class name to check for
148
- *
149
- * @return {boolean} - Whether the class is present or not
150
- */
151
- hasClass (classToCheck) {
152
- for (const element of this.collection) {
153
- if (!element.classList.contains (classToCheck)) {
154
- return false;
155
- }
156
- }
157
- return true;
158
- }
159
-
160
- /**
161
- * Get or set the value from the first element matching the selector
162
- *
163
- * @param {string} value - Value to set to the element.
164
- *
165
- * @return {string|DOM} - If a value is provided, this returns the current
166
- * instance, otherwise it returns the value of the element instead of
167
- * setting it
168
- */
169
- value (value) {
170
- if (typeof value !== 'undefined') {
171
- for (const element of this.collection) {
172
- element.value = value;
173
- }
174
-
175
- return this;
176
- } else {
177
- if (this.length > 0) {
178
- return this.collection[0].value;
179
- }
180
- }
181
- }
182
-
183
- /**
184
- * Focus on the first element matching the selector
185
- *
186
- * @return {DOM} - Current instance
187
- */
188
- focus () {
189
- if (this.length > 0) {
190
- this.collection[0].focus ();
191
- }
192
-
193
- return this;
194
- }
195
-
196
- /**
197
- * Add a callback for the 'click' event on every element matching the selector
198
- *
199
- * @param {function} callback - Callback function to run when the event is triggered
200
- *
201
- * @return {DOM} - Current instance
202
- */
203
- click (callback) {
204
- for (const element of this.collection) {
205
- element.addEventListener ('click', callback, false);
206
- }
207
-
208
- return this;
209
- }
210
-
211
- /**
212
- * Add a callback for the 'keyup' event on every element matching the selector
213
- *
214
- * @param {function} callback - Callback function to run when the event is triggered
215
- *
216
- * @return {DOM} - Current instance
217
- */
218
- keyup (callback) {
219
- for (const element of this.collection) {
220
- element.addEventListener ('keyup', callback, false);
221
- }
222
-
223
- return this;
224
- }
225
-
226
- /**
227
- * Add a callback for the 'keydown' event on every element matching the selector
228
- *
229
- * @param {function} callback - Callback function to run when the event is triggered
230
- *
231
- * @return {DOM} - Current instance
232
- */
233
- keydown (callback) {
234
- for (const element of this.collection) {
235
- element.addEventListener ('keydown', callback, false);
236
- }
237
-
238
- return this;
239
- }
240
-
241
- /**
242
- * Add a callback for the 'submit' event on every element matching the selector
243
- *
244
- * @param {function} callback - Callback function to run when the event is triggered
245
- *
246
- * @return {DOM} - Current instance
247
- */
248
- submit (callback) {
249
- for (const element of this.collection) {
250
- element.addEventListener ('submit', callback, false);
251
- }
252
-
253
- return this;
254
- }
255
-
256
- /**
257
- * Add a callback for the 'change' event on every element matching the selector
258
- *
259
- * @param {function} callback - Callback function to run when the event is triggered
260
- *
261
- * @return {DOM} - Current instance
262
- */
263
- change (callback) {
264
- for (const element of this.collection) {
265
- element.addEventListener ('change', callback, false);
266
- }
267
-
268
- return this;
269
- }
270
-
271
- /**
272
- * Add a callback for the 'scroll' event on every element matching the selector
273
- *
274
- * @param {function} callback - Callback function to run when the event is triggered
275
- *
276
- * @return {DOM} - Current instance
277
- */
278
- scroll (callback) {
279
- for (const element of this.collection) {
280
- element.addEventListener ('scroll', callback, false);
281
- }
282
-
283
- return this;
284
- }
285
-
286
- /**
287
- * Add a callback function to a given event
288
- *
289
- * @param {string} event - Event to add the listener to
290
- * @param {string} target - Target element on which to detect the event
291
- * @param {function} callback - Callback function to run when the event is triggered
292
- *
293
- * @return {DOM} - Current instance
294
- */
295
- on (event, target, callback) {
296
- event = event.split(' ');
297
- for (const element of this.collection) {
298
- for (let j = 0; j < event.length; j++) {
299
-
300
- // Check if no target was defined and just a function was provided
301
- if (typeof target === 'function') {
302
- element.addEventListener(event[j], target, false);
303
- } else if (typeof target === 'string' && typeof callback === 'function') {
304
- element.addEventListener(event[j], (e) => {
305
- if (!e.target) {
306
- return;
307
- }
308
-
309
- const targetElement = $_(e.target).closestParent (target, this._selector);
310
-
311
- if (targetElement.exists ()) {
312
- callback.call (targetElement.get (0), e);
313
- } else {
314
- return;
315
- }
316
- }, false);
317
- }
318
- }
319
- }
320
-
321
- return this;
322
- }
323
-
324
- /**
325
- * Filter from the current collection to only those matching the new selector
326
- *
327
- * @param {string} element - Selector to filter the collection with
328
- *
329
- * @return {DOM} - New DOM instance with the filtered collection
330
- */
331
- filter (selector) {
332
- if (this.length > 0) {
333
- return new DOM (this.collection[0].querySelector (selector));
334
- }
335
-
336
- return new DOM (null);
337
- }
338
-
339
- /**
340
- * Check if there are any elements that match the selector.
341
- *
342
- * @return {boolean} - Whether elements matching the selector existed or not
343
- */
344
- exists () {
345
- return this.length > 0;
346
- }
347
-
348
- /**
349
- * Get or set a `data` property
350
- *
351
- * @param {string} name - Name of the data property
352
- * @param {string} [value] - Value of the property
353
- *
354
- * @return {string|DOM} - If no value is provided, this function returns
355
- * the first matching element value, otherwise it returns the current instance
356
- */
357
- data (name, value) {
358
- if (typeof value !== 'undefined') {
359
- for (const element of this.collection) {
360
- element.dataset[name] = value;
361
- }
362
-
363
- return this;
364
- } else {
365
- if (this.length > 0) {
366
- return this.collection[0].dataset[name];
367
- }
368
- }
369
- }
370
-
371
- /**
372
- * Remove a data property from all the elements on the collection given its
373
- * name.
374
- *
375
- * @param {string} name - Name of the data property to remove
376
- *
377
- * @return {DOM} - Current instance
378
- */
379
- removeData (name) {
380
- for (const element of this.collection) {
381
- delete element.dataset[name];
382
- }
383
-
384
- return this;
385
- }
386
-
387
- /**
388
- * Get or set the text of the first element matching the selector
389
- *
390
- * @param {string} [value] - Value to set the text to
391
- *
392
- * @return {string|DOM} - If no value is provided, this function returns the
393
- * inner text of the first matching element. Otherwise it returns the current
394
- * instance.
395
- */
396
- text (value) {
397
- if (typeof value !== 'undefined') {
398
- for (const element of this.collection) {
399
- element.textContent = value;
400
- }
401
-
402
- return this;
403
- } else {
404
- if (this.length > 0) {
405
- return this.collection[0].textContent;
406
- }
407
- }
408
- }
409
-
410
- /**
411
- * Get or set the inner HTML of the first element matching the selector
412
- *
413
- * @param {string} [value] - Value to set the HTML to
414
- *
415
- * @return {string|DOM} - If no value is provided, this function returns the
416
- * first matching element HTML. Otherwise it returns the current instance
417
- */
418
- html (value) {
419
- if (typeof value !== 'undefined') {
420
- for (const element of this.collection) {
421
- element.innerHTML = value;
422
- }
423
-
424
- return this;
425
- } else {
426
- if (this.length > 0) {
427
- return this.collection[0].innerHTML;
428
- }
429
- }
430
- }
431
-
432
- /**
433
- * Append an element to the first element matching the selector
434
- *
435
- * @param {string} element - String representation of the element to add
436
- *
437
- * @return {DOM} - Current instance
438
- */
439
- append (element) {
440
- if (this.length > 0) {
441
- if (typeof element === 'string') {
442
- const div = document.createElement ('div');
443
- if (typeof element === 'string') {
444
- div.innerHTML = element.trim ();
445
- } else {
446
- div.innerHTML = element;
447
- }
448
- this.collection[0].appendChild (div.firstChild);
449
- } else {
450
- this.collection[0].appendChild (element);
451
- }
452
- }
453
-
454
- return this;
455
- }
456
-
457
- /**
458
- * Prepend an element to the first element matching the selector
459
- *
460
- * @param {string} element - String representation of the element to add
461
- *
462
- * @return {DOM} - Current instance
463
- */
464
- prepend (element) {
465
- if (this.length > 0) {
466
- if (typeof element === 'string') {
467
- const div = document.createElement ('div');
468
- if (typeof element === 'string') {
469
- div.innerHTML = element.trim ();
470
- } else {
471
- div.innerHTML = element;
472
- }
473
- if (this.collection[0].childNodes.length > 0) {
474
- this.collection[0].insertBefore (div.firstChild, this.collection[0].childNodes[0]);
475
- } else {
476
- this.collection[0].appendChild (div.firstChild);
477
- }
478
- } else {
479
- if (this.collection[0].childNodes.length > 0) {
480
- this.collection[0].insertBefore (element, this.collection[0].childNodes[0]);
481
- } else {
482
- this.collection[0].appendChild (element);
483
- }
484
- }
485
- }
486
-
487
- return this;
488
- }
489
-
490
- /**
491
- * Iterate over the collection of elements matching the selector
492
- *
493
- * @param {function} callback - Callback to run for every element
494
- *
495
- * @return {DOM} - Current instance
496
- */
497
- each (callback) {
498
- for (const element of this.collection) {
499
- callback (element);
500
- }
501
-
502
- return this;
503
- }
504
-
505
- /**
506
- * Get an element from the collection given it's index
507
- *
508
- * @param {int} index - Index of the element to retrieve
509
- *
510
- * @return {HTMLElement} - HTML Element in the position indicated by the index
511
- */
512
- get (index) {
513
- return this.collection[index];
514
- }
515
-
516
- /**
517
- * Get the first element in the collection
518
- *
519
- * @return {DOM} - DOM instance with the first element
520
- */
521
- first () {
522
- if (this.length > 0) {
523
- return new DOM (this.collection[0]);
524
- }
525
-
526
- return new DOM (null);
527
- }
528
-
529
- /**
530
- * Get the last element in the collection
531
- *
532
- * @return {DOM} - DOM instance with the last element
533
- */
534
- last () {
535
- if (this.length > 0) {
536
- return new DOM (this.collection[this.collection.length - 1]);
537
- }
538
-
539
- return new DOM (null);
540
- }
541
-
542
- /**
543
- * Check if the elements in the collection are visible by checking their
544
- * display, offsetWidth and offsetHeight properties
545
- *
546
- * @return {boolean} - Whether the elements are visible or not
547
- */
548
- isVisible () {
549
- for (const element of this.collection) {
550
- if (element.display != 'none' && element.offsetWidth > 0 && element.offsetHeight > 0) {
551
- return true;
552
- }
553
- }
554
- return false;
555
- }
556
-
557
- /**
558
- * Get the parent of the first element matching the selector
559
- *
560
- * @return {DOM} - DOM instance of the parent element
561
- */
562
- parent () {
563
- if (this.length > 0) {
564
- return new DOM (this.collection[0].parentElement);
565
- }
566
-
567
- return new DOM (null);
568
- }
569
-
570
- /**
571
- * Find an element that matches the given selector in the first element of the collection
572
- *
573
- * @param {string} selector - Selector to find the element with
574
- *
575
- * @return {DOM} - DOM instance with the element if found
576
- */
577
- find (selector) {
578
- if (this.length > 0) {
579
- return new DOM (this.collection[0].querySelectorAll (selector));
580
- }
581
-
582
- return new DOM (null);
583
- }
584
-
585
- /**
586
- * Get the top and left offsets of the first element matching the selector
587
- *
588
- * @return {object|void} - Object with `top` and `left` offsets
589
- */
590
- offset () {
591
- if (this.length > 0) {
592
- const rect = this.collection[0].getBoundingClientRect ();
593
- return {
594
- top: rect.top + document.body.scrollTop,
595
- left: rect.left + document.body.scrollLeft
596
- };
597
- }
598
- }
599
-
600
- /**
601
- * Find the closest element matching the given selector. This bubbles up
602
- * from the initial object and then follows to its parents.
603
- *
604
- * @param {string} selector - Selector to match the closest element with
605
- *
606
- * @return {DOM} - DOM instance with the closest HTML element matching the selector
607
- */
608
- closest (selector) {
609
- let found = null;
610
- let element = this;
611
- while (element.exists () && found === null) {
612
- // Check if the current element matches the selector
613
- const matches = element.matches (selector);
614
-
615
- if (matches === true) {
616
- return element;
617
- }
618
-
619
- const search = element.find (selector);
620
- if (search) {
621
- if (search.length > 0) {
622
- found = search;
623
- }
624
- }
625
- element = element.parent ();
626
- }
627
-
628
- if (found !== null) {
629
- return found;
630
- }
631
-
632
- return element;
633
- }
634
-
635
- /**
636
- * Find the closest parent element matching the given selector. This bubbles up
637
- * from the initial object and then follows to its parents.
638
- *
639
- * @param {string} selector - Selector to match the closest element with
640
- * @param {string} limit - Selector for limit element. If the limit is reached
641
- * and no element matching the provided selector was found, it will cause an
642
- * early return.
643
- *
644
- * @return {DOM} - DOM instance with the closest HTML element matching the selector
645
- */
646
- closestParent (selector, limit) {
647
- let element = this;
648
- while (element.exists ()) {
649
-
650
- // Check if the current element matches the selector
651
- const matches = element.matches (selector);
652
-
653
- if (matches === true) {
654
- return element;
655
- }
656
-
657
- if (typeof limit === 'string') {
658
- if (element.matches (limit)) {
659
- break;
660
- }
661
- }
662
-
663
- element = element.parent ();
664
- }
665
-
666
- return new DOM (null);
667
- }
668
-
669
- /**
670
- * Get or set the value of a given attribute
671
- *
672
- * @param {string} attribute - Attribute's name
673
- * @param {string|Number} [value] - Value to set the attribute to
674
- *
675
- * @return {string|number|DOM} - If no value is provided, this function returns the current
676
- * value of the provided attribute
677
- */
678
- attribute (attribute, value) {
679
- if (typeof value !== 'undefined') {
680
- for (const element of this.collection) {
681
- element.setAttribute (attribute, value);
682
- }
683
-
684
- return this;
685
- } else {
686
- if (this.length > 0) {
687
- return this.collection[0].getAttribute (attribute);
688
- }
689
- }
690
- }
691
-
692
- /**
693
- * Check whether an element has an attribute or not
694
- *
695
- * @param {string} attribute - The name of the attribute to check existance for
696
- *
697
- * @returns {boolean} - Whether or not the attribute is present
698
- */
699
- hasAttribute (attribute) {
700
- for (const element of this.collection) {
701
- if (!element.hasAttribute (attribute)) {
702
- return false;
703
- }
704
- }
705
- return true;
706
- }
707
-
708
- /**
709
- * Insert content to the `after` property of an element
710
- *
711
- * @param {string} content - String representation of the content to add
712
- *
713
- * @return {DOM} - Current instance
714
- */
715
- after (content) {
716
- for (const element of this.collection) {
717
- element.insertAdjacentHTML ('afterend', content);
718
- }
719
-
720
- return this;
721
- }
722
-
723
- /**
724
- * Insert content to the `before` property of an element
725
- *
726
- * @param {string} content - String representation of the content to add
727
- *
728
- * @return {DOM} - Current instance
729
- */
730
- before (content) {
731
- for (const element of this.collection) {
732
- element.insertAdjacentHTML ('beforebegin', content);
733
- }
734
-
735
- return this;
736
- }
737
-
738
- /**
739
- * Get or modify the `style` properties of the elements matching the selector
740
- *
741
- * @param {string|Object} properties - Properties to change or get. Can be
742
- * either an individual property or a JSON object with key-value pairs
743
- * @param {string} [value] - Value to set the property to when only changing
744
- * one property
745
- *
746
- * @return {string|DOM} - If a property is given but not a value for it, this
747
- * function will return its current value
748
- */
749
- style (properties, value) {
750
- for (let i = 0; i < this.collection.length; i++) {
751
- if (typeof properties === 'string' && typeof value !== 'undefined') {
752
- this.collection[i].style[properties] = value;
753
- } else if (typeof properties === 'string' && typeof value === 'undefined') {
754
- return this.collection[i].style[properties];
755
- } else if (typeof properties === 'object') {
756
- for (const property in properties) {
757
- this.collection[i].style[property] = properties[property];
758
- }
759
- }
760
- }
761
- return this;
762
- }
763
-
764
- /**
765
- * Animate the given `style` properties on all elements in the collection in
766
- * with a given time duration
767
- *
768
- * @param {Object} style - JSON object with the key-value pairs of properties
769
- * to animate
770
- * @param {int} time - Time in milliseconds during which the properties will
771
- * be animated
772
- *
773
- * @return {DOM} - Current instance
774
- */
775
- animate (style, time) {
776
- for (let i = 0; i < this.collection.length; i++) {
777
- for (const property in style) {
778
-
779
- const start = new Date().getTime();
780
- const collection = this.collection;
781
- let timer;
782
- let initialValue;
783
- if (typeof this.collection[i].style[property] !== 'undefined') {
784
- initialValue = this.collection[i].style[property];
785
-
786
- timer = setInterval (() => {
787
- const step = Math.min (1, (new Date ().getTime () - start) / time);
788
-
789
- collection[i].style[property] = (initialValue + step * (style[property] - initialValue));
790
-
791
- if (step == 1) {
792
- clearInterval (timer);
793
- }
794
- }, 25);
795
- this.collection[i].style[property] = initialValue;
796
-
797
- } else if (typeof (this.collection[i])[property] !== 'undefined') {
798
- initialValue = (this.collection[i])[property];
799
-
800
- timer = setInterval(() => {
801
- const step = Math.min (1, (new Date ().getTime () - start) / time);
802
-
803
- (collection[i])[property] = (initialValue + step * (style[property] - initialValue));
804
-
805
- if (step == 1) {
806
- clearInterval (timer);
807
- }
808
- }, 25);
809
- (this.collection[i])[property] = initialValue;
810
- }
811
- }
812
- }
813
-
814
- return this;
815
- }
816
-
817
- /**
818
- * Use a fade in animation i the first element matching the selector
819
- *
820
- * @param {type} [time=400] - Time duration for the animation
821
- * @param {type} callback - Callback function to run once the animation is over
822
- *
823
- * @return {DOM} - Current instance
824
- */
825
- fadeIn (time = 400, callback) {
826
- if (this.length > 0) {
827
- const element = this.collection[0];
828
- element.style.opacity = 0;
829
-
830
- let last = +new Date();
831
-
832
- const tick = () => {
833
- element.style.opacity = +element.style.opacity + (new Date() - last) / time;
834
- last = +new Date();
835
-
836
- if (+element.style.opacity < 1) {
837
- (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
838
- } else {
839
- if (typeof callback === 'function') {
840
- callback();
841
- }
842
- }
843
- };
844
-
845
- tick();
846
- }
847
-
848
- return this;
849
- }
850
-
851
- /**
852
- * Use a fade out animation i the first element matching the selector
853
- *
854
- * @param {type} [time=400] - Time duration for the animation
855
- * @param {type} callback - Callback function to run once the animation is over
856
- *
857
- * @return {DOM} - Current instance
858
- */
859
- fadeOut (time = 400, callback) {
860
- if (this.length > 0) {
861
- let last = +new Date ();
862
- const element = this.collection[0];
863
- const tick = () => {
864
- element.style.opacity = +element.style.opacity - (new Date() - last) / time;
865
- last = +new Date ();
866
-
867
- if (+element.style.opacity > 0) {
868
- (window.requestAnimationFrame && requestAnimationFrame (tick)) || setTimeout(tick, 16);
869
- } else {
870
- if (typeof callback === 'function') {
871
- callback ();
872
- }
873
- }
874
- };
875
- tick ();
876
- }
877
-
878
- return this;
879
- }
880
-
881
- /** Check if the first element in the collection matches a given selector
882
- *
883
- * @param {string} selector - Selector to match
884
- *
885
- * @return {boolean} - Whether the element matches the selector or not
886
- */
887
- matches (selector) {
888
- const check = Element.prototype;
889
- const polyfill = check.matches || check.webkitMatchesSelector || check.mozMatchesSelector || check.msMatchesSelector || function () {
890
- return [].indexOf.call (document.querySelectorAll (selector), this) !== -1;
891
- };
892
-
893
- if (this.length > 0) {
894
- return polyfill.call (this.collection[0], selector);
895
- }
896
-
897
- return false;
898
- }
899
-
900
- /**
901
- * Remove all elements in the collection
902
- *
903
- * @return {DOM} - Current instance
904
- */
905
- remove () {
906
- for (const element of this.collection) {
907
- element.parentNode.removeChild (element);
908
- }
909
-
910
- return this;
911
- }
912
-
913
- /**
914
- * Replace the first element in the collection with a new one
915
- *
916
- * @return {DOM} - Current instance
917
- */
918
- replaceWith (newElement) {
919
- let replaceElement = newElement;
920
-
921
- if (typeof newElement === 'string') {
922
- const div = document.createElement ('div');
923
- div.innerHTML = newElement;
924
- replaceElement = div.firstChild;
925
- }
926
-
927
- for (const element of this.collection) {
928
- element.parentElement.replaceChild (replaceElement, element);
929
- }
930
-
931
- return this;
932
- }
933
-
934
- /**
935
- * Reset every element in the collection
936
- *
937
- * @return {DOM} - Current instance
938
- */
939
- reset () {
940
- for (const element of this.collection) {
941
- element.reset ();
942
- }
943
-
944
- return this;
945
- }
946
-
947
- /**
948
- * Get or set a property for the first element in the collection
949
- *
950
- * @param {string} property - Property name to set or get
951
- * @param {string|Number} [value] - Value to set the property to
952
- *
953
- * @return {string|Number} - If no value is provided, this function will return the
954
- * current value of the indicated property
955
- */
956
- property (property, value) {
957
- if (typeof value !== 'undefined') {
958
- for (const element of this.collection) {
959
- element[property] = value;
960
- }
961
-
962
- return this;
963
- } else {
964
- if (this.length > 0) {
965
- return this.collection[0][property];
966
- }
967
- }
968
- }
969
- }
970
-
971
- /**
972
- * Simple wrapper function to use the DOM library
973
- *
974
- * @param {string|Object|array} selector - Selector or DOM element to use
975
- *
976
- * @return {DOM} - DOM instance or class if no selector is used
977
- */
978
- export function $_ (selector) {
979
- if (typeof selector !== 'undefined') {
980
- return new DOM (selector);
981
- } else {
982
- return DOM;
983
- }
984
- }
985
-
986
- /**
987
- * Utility function to attach the 'load' listener to the window
988
- *
989
- * @param {function} callback - Callback function to run when the window is ready
990
- */
991
- export function $_ready (callback) {
992
- window.addEventListener ('load', callback);
993
- }