-
Notifications
You must be signed in to change notification settings - Fork 8
/
bijou_node.js
6510 lines (6331 loc) · 191 KB
/
bijou_node.js
1
2
3
4
5
6
7
8
9
10
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
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
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
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
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
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
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
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
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
603
604
605
606
607
608
609
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
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
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
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
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
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
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
991
992
993
994
995
996
997
998
999
1000
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
/**
* @file bijou.js
* @author Explosion-Scratch, Bijou.js contributors
* @since v0.0.0
* @copyright © Explosion-Scratch, All rights reserved.
*/
/* --------------------------------------------------------------------------|
____ ___ _ ___ _ _ _
| __ )_ _| | |/ _ \| | | | (_)___
| _ \| |_ | | | | | | | | | / __|
| |_) | | |_| | |_| | |_| | | \__ \
|____/___\___/ \___/ \___(_)/ |___/
|__/
------------------------------------------------------------------------------|
Bijou.js is copyrighted by Explosion-Scratch of GitHub and released under the GPL-3.0 License.
This software comes with ABSOLUTELY NO WARRANTY and is provided "As is" (with the best intentions of Explosion-Scratch and contributors! =D )
-----------------------------------------------------------------------------|
____ ___ _ _ _____ ____ ___ ____ _ _ _____ ___ ____ ____
/ ___/ _ \| \ | |_ _| _ \|_ _| __ )| | | |_ _/ _ \| _ \/ ___|
| | | | | | \| | | | | |_) || || _ \| | | | | || | | | |_) \___ \
| |__| |_| | |\ | | | | _ < | || |_) | |_| | | || |_| | _ < ___) |
\____\___/|_| \_| |_| |_| \_\___|____/ \___/ |_| \___/|_| \_\____/
-----------------------------------------------------------------------------|
NOTE: Please see https://github.com/bijou-js/bijou.js#contributors- for up to date contributors with what they did.
Contributors to Bijou.js:
╔═══════════════════╦════════════════════════════╗
║ GITHUB USERNAME ║ CONTRIBUTIONS ║
╠═══════════════════╬════════════════════════════╣
║ Explosion-Scratch ║ Founder and creator of ║
║ ║ Bijou.js, over 1500 ║
║ ║ commits to the source ║
║ ║ repository. ║
╠═══════════════════╬════════════════════════════╣
║ GrahamSH-LLK ║ Great guy, contributed ║
║ ║ a ton towards the ║
║ ║ development of this ║
║ ║ project. He fixed glitches ║
║ ║ suggested new features, ║
║ ║ and helped publish this ║
║ ║ to NPM and fix the GitHub ║
║ ║ actions on the project. ║
╠═══════════════════╬════════════════════════════╣
║ Touchcreator ║ Pointed out several bugs ║
║ ║ in Bijou.js and suggested ║
║ ║ several new features. ║
╠═══════════════════╬════════════════════════════╣
║ TheColaber ║ Collaborated?? (lol) ║
║ ║ Fixed tons of bugs ║
╠═══════════════════╬════════════════════════════╣
║ Hans5958 ║ Helped fix glitches in the ║
║ ║ website and suggested ║
║ ║ fixes for GitHub actions ║
║ ║ glitches. ║
╠═══════════════════╬════════════════════════════╣
║ retronbv ║ Suggested a lot of ║
║ ║ features and bug fixes. ║
║═══════════════════║════════════════════════════║
║ thecoder876 ║ Made some improvements. ║
╚═══════════════════╩════════════════════════════╝
(c) 2021 Explosion-Scratch, all rights reserved.
*/
let isNode = false;
if (
typeof window === "undefined" ||
typeof document === "undefined"
) {
isNode = true;
} else {
isNode = false;
}
if (isNode) {
console.warn(
"There is no document element in Node so some functions of bijou.js will not work. If you need these functions consider using a package like jsDom to recreate the document element.",
);
}
/**
* @description Tests if the user is using Node.js or not and throws an error in specific functions (that require the DOM) if they are.
*/
let node = () => {
if (isNode) {
throw new Error(
"You are using Node.js, this function does not work in Node.js! Sorry!",
);
}
};
const req = (type, desc, condition = true) => {
if (!condition) return;
let err = "[Bijou.js] Missing parameter";
if (type) {
err += " of type " + type;
}
if (desc) {
err = `Parameter ${desc} ${type ? `(${type})` : ""} required.`;
}
throw new Error(err);
};
//#region bijou
//#region Array
/**
* Counts the items in an array, returning a separate count for each object.
* @returns {Object}
* @memberOf array
* @function
* @example
* _$.count(['a', 'b', 'c', 'd', 'e', 'f'])//{'a': 1, 'b': 1, 'c': 1, 'd': 1, 'e': 1, 'f': 1}
*
* //But if you have multiple items:
* _$.count(['a', 'a', b', 'b', 'c', 'd', 'e']);//{'a': 2, 'b': 2, 'c': 1, 'd': 1, 'e': 1}
* @param {Array} arr The array to count items in.
*/
let count = (arr = req("array", "array")) =>
arr.reduce((counts, item) => {
counts[item] = (counts[item] || 0) + 1;
return counts;
}, {});
/**
* Returns the difference between two arrays or strings.
* @memberOf array
* @function
* @returns {Array|String} The difference between two arrays or strings.
* @example
* console.log(_$.arrayDiff(['a', 'b'], ['a', 'b', 'c', 'd'])); // ["c", "d"]
* @param {Array|String} a1 The first array or string
* @param {Array|String} a2 The 2nd array or string.
*/
let arrayDiff = (
a1 = req("array", "array 1"),
a2 = req("array", "array 2"),
) => {
var a = [],
diff = [];
for (var i = 0; i < a1.length; i++) {
a[a1[i]] = true;
}
for (var i = 0; i < a2.length; i++) {
if (a[a2[i]]) {
delete a[a2[i]];
} else {
a[a2[i]] = true;
}
}
for (var k in a) {
diff.push(k);
}
return diff;
};
/**
* Gets the difference between two strings.
* @memberOf array
* @function
* @param {String} text1 The 1st text to compare
* @param {String} text2 The 2nd text to compare with the 1st one.
* @example
* console.log(_$.diff("hello earthlings", "hello world"); // [[6,8],[9,16]]
* @returns {Array.<Array.<number>>} An array of arrays, each array in the main array contains 2 numbers, the start and then end of the difference.
*/
let diff = function (
text1 = req("string", "Text 1"),
text2 = req("string", "Text 2"),
) {
//Takes in two strings
//Returns an array of the span of the differences
//So if given:
// text1: "that is number 124"
// text2: "this is number 123"
//It will return:
// [[2,4],[17,18]]
//If the strings are of different lengths, it will check up to the end of text1
//If you want it to do case-insensitive difference, just convert the texts to lowercase before passing them in
var diffRange = [];
var currentRange = undefined;
for (var i = 0; i < text1.length; i++) {
if (text1[i] != text2[i]) {
//Found a diff!
if (currentRange == undefined) {
//Start a new range
currentRange = [i];
}
}
if (currentRange != undefined && text1[i] == text2[i]) {
//End of range!
currentRange.push(i);
diffRange.push(currentRange);
currentRange = undefined;
}
}
//Push any last range if there's still one at the end
if (currentRange != undefined) {
currentRange.push(i);
diffRange.push(currentRange);
}
return diffRange;
};
/**
* Removes an item from the array specified.
* @memberOf array
* @function
* @param {Array} array The array to remove the item from.
* @param {*} item The item to remove.
* @example
* console.log(_$.remove([5, 4, 3, 2, 1], 4)); // [5, 3, 2, 1]
*/
let remove = (
array = req("array", "array"),
item = req(undefined, "item"),
) => {
if (typeof array === "string") {
return array.replace(item, "");
}
if (typeof array === "object") {
array[`${item}`] = undefined;
array = _$.clone(array, (itm) => itm !== undefined);
return array;
}
if (array.indexOf(item) > -1) {
array.splice(array.indexOf(item), 1);
}
return array;
};
/**
* Splices an ArrayBuffer.
* @function
* @memberOf array
* @param {ArrayBuffer|Buffer} arr The ArrayBuffer to splice.
* @param {Number} start The start index.
* @param {Number} end The end index.
* @param {Boolean} [endian=false] Whether to use big endian or not.
* @returns {Number} The hex representation of part of the ArrayBuffer.
*/
let spliceArrayBuffer = (
arr = req("ArrayBuffer"),
start = req("number"),
end = req("number"),
endian = false,
) => {
var direction = endian ? -1 : 1;
if (endian) [start, end] = [end, start];
start = Math.floor(start);
end = Math.floor(end) + direction;
for (var i = start, value = 0; i != end; i += direction)
value = 256 * value + arr[i];
return value;
};
/**
* Flattens an array `level` times.
* @memberOf array
* @function
* @returns {Array} The flattened array.
* @example
* console.log(_$.flatten(['a', 'b', ['c', 'd']])); // ['a', 'b', 'c', 'd'];
* @param {Array} array The array to flatten.
* @param {Number} [level=1] The number of iterations to flatten it.
*/
let flatten = (array = req("array", "array"), level = 1) => {
var output = array;
_$.each(level, () => {
output = [].concat.apply([], array);
});
return output;
};
/**
* Flattens an array recursively.
* @function
* @memberOf array
* @param {Array} arr The array to flatten.
* @returns {Array} The flattened array.
* @example
* console.log(_$.nFlatten([5,[[9,4],0],[7,6]])); // [5,9,4,0,6,7]
*/
let nFlatten = (arr = req("array", "array")) => {
return arr.reduce(function (flat, toFlatten) {
return flat.concat(
Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten,
);
}, []);
};
/**
* Returns whether the specified array or string contains the item given.
* @memberOf array
* @function
* @param {Array} array The array to test with.
* @param {String} item The item to see if the array contains.
* @example
* console.log(_$.contains([1,2,3,4,5], 3)); // true
* @returns {Boolean} True or false depending on if the array contains that item.
*/
let contains = (array = req("array"), item = req("string")) =>
array.includes(item);
/**
* Shuffles an array
* @function
* @memberOf array
* @param {Array} array The array to shuffle.
* @example
* let array = [1,2,3,4,5];
* console.log(_$.shuffleArray(array)); // e.g. [2,4,1,5,3]
* @returns {Array} The shuffled array.
*/
let shuffleArray = (array = req("array")) =>
array.sort(() => Math.random() - 0.5);
/**
* Splice but also for strings
* @memberOf array
* @function
* @param {String|Array} array The array or string to operate on
* @param {Number} index The index to splice
* @param {*} item The item
* @param {Number} [remove=0] How many to remove.
* @returns {String|Array} the spliced array or string
* @example
* console.log(_$.splice("hello earthlings", 5, " puny")); // "hello puny earthlings"
*/
let splice = (
array = req("array", "array"),
index = req("number", "index"),
remove = 0,
item,
) => {
let args = Array.from(arguments);
args.shift();
return typeof array === "string"
? array
.split("")
.splice(...args)
.join("")
: array.splice(...args);
};
/**
* Joins two arrays together and removes duplicate items.
* @function
* @memberOf array
* @param {Array} x The first array to join.
* @param {Array} y The second array to join.
* @example
* console.log(_$.unionArrays([1,2,3,4], [4,5,6])); // [1,2,3,4,5,6]
* @returns {Array} The joined array from the two other arrays.
*/
let unionArrays = (
x = req("array", "array1"),
y = req("array", "array2"),
) => {
var obj = {};
for (var i = x.length - 1; i >= 0; --i) obj[x[i]] = x[i];
for (var i = y.length - 1; i >= 0; --i) obj[y[i]] = y[i];
var res = [];
for (var k in obj) {
if (obj.hasOwnProperty(k)) res.push(obj[k]);
}
return res;
};
/**
* @callback averageByFn
* @param {Number} number The number to perform the operation on
* @returns {Number} The number to average
*/
/**
* averageBy
* @function
* @memberOf array
* @param {Array.<number>} arr The array to average
* @param {averageByFn} fn The function to apply to each item of the array.
* @example
* Logs the average of the first 4 square numbers:
* console.log(_$.averageBy([1,2,3,4], (v) => v ** 2)); // 7.5
* @returns {Number} The average of the array.
*/
let averageBy = (
arr = req("array", "array"),
fn = req("function", "callback"),
) =>
arr
.map(typeof fn === "function" ? fn : (val) => val[fn])
.reduce((acc, val) => acc + val, 0) / arr.length;
/**
* Removes duplicates from an array
* @function
* @memberOf array
* @param {Array} array The array to remove duplicates from.
* @example
* console.log(_$.uniqueArray([1,1,2,3,4,4,4,5,6)); // [1,2,3,4,5,6]
* @returns {Array} The array with no duplicates.
*/
let uniqueArray = (array = req("array", "array")) => [
...new Set(array),
];
/**
* @callback eachCallback
* @param {any} x The item of the array/string/number range
* @param {Number} i The index of the item in the array/string/number range
* @param {any[]} array The original array
*/
/**
* For each item in an array, run a callback with it.
* @function
* @memberOf array
* @param {Array|String|Number} array The array, string or number to run the callback with.
* @param {eachCallback} callback The callback function to run on the array items.
* @example
* _$.each(new Array(6), (array_item, i) => console.log(i));
* // 0
* // 1
* // 2
* // 3
* // 4
* // 5
* @returns {any[]} The array passed at the beginning.
*/
let each = (
array = req("Array|Number|String", "array"),
callback = req("function", "callback"),
) => {
array =
typeof array === "number"
? _$.range(1, array)
: typeof array === "string"
? array.split("")
: array;
for (let i = 0; i < array.length; i++) {
callback(array[i], i, array);
}
return array;
};
//#endregion Array
//#region Color
/**
* Converts a rgb(a) color to hex.
* @memberOf color
* @function
* @example
* console.log(_$.rgbToHex("rgb(255,255,255)")); // "#ffffff"
* @param {String} rgb The string of RGB colors.
* @returns {String} The hex color.
*/
let rgbToHex = (rgb = req("string", "RGB color")) => {
let sep = rgb.indexOf(",") > -1 ? "," : " ";
rgb = rgb.substr(4).split(")")[0].split(sep);
let r = (+rgb[0]).toString(16),
g = (+rgb[1]).toString(16),
b = (+rgb[2]).toString(16);
if (r.length === 1) r = "0" + r;
if (g.length === 1) g = "0" + g;
if (b.length === 1) b = "0" + b;
return "#" + r + g + b;
};
/**
* Converts a hex code to a RGB color.
* @function
* @memberOf color
* @param {String} hex The hex code to convert.
* @example
* console.log(_$.rgbToHex("#ffffff")); // "rgb(255,255,255)"
* @returns {String} The RGB color converted from the hex code.
*/
let hexToRGB = (hex = req("string", "hex color")) => {
if (
((hex.length - 1 === 6 ||
hex.length - 1 === 8 ||
hex.length - 1 === 4 ||
hex.length - 1 === 3) &&
hex.startsWith("#")) ||
((hex.length === 6 ||
hex.length === 8 ||
hex.length === 4 ||
hex.length === 3) &&
!hex.startsWith("#"))
) ; else {
throw new Error("Invalid hex");
}
let alpha = false,
h = hex.slice(hex.startsWith("#") ? 1 : 0);
if (h.length === 3) h = [...h].map((x) => x + x).join("");
else if (h.length === 8) alpha = true;
h = parseInt(h, 16);
return (
"rgb" +
(alpha ? "a" : "") +
"(" +
(h >>> (alpha ? 24 : 16)) +
", " +
((h & (alpha ? 0x00ff0000 : 0x00ff00)) >>> (alpha ? 16 : 8)) +
", " +
((h & (alpha ? 0x0000ff00 : 0x0000ff)) >>> (alpha ? 8 : 0)) +
(alpha ? `, ${h & 0x000000ff}` : "") +
")"
);
};
/**
* Blends two colors through additive blending by a percentage.
* @function
* @memberOf color
* @param {String} color1 The hex code of the first color to be blended
* @param {String} color2 The hex code of the second color to be blended.
* @param {Number} [percent=50] A number between 0 and 100 of the percentage to blend the two colors, 0 being completely the first color and 100 being completely the second color.
* @example
* console.log(_$.blendColors("#ffffff", "#000000", 80)); // #333333
* @returns {String} The blended color (A hex code).
*/
let blendColors = (
color1 = req("string", "color 1"),
color2 = req("string", "color 2"),
percent = 50,
) => {
const generateHex = (r, g, b) => {
let R = r.toString(16);
let G = g.toString(16);
let B = b.toString(16);
while (R.length < 2) {
R = `0${R}`;
}
while (G.length < 2) {
G = `0${G}`;
}
while (B.length < 2) {
B = `0${B}`;
}
return `#${R}${G}${B}`;
};
const mix = (start, end, percent) =>
start + (percent / 100) * (end - start);
const red1 = parseInt(`${color1[1]}${color1[2]}`, 16);
const green1 = parseInt(`${color1[3]}${color1[4]}`, 16);
const blue1 = parseInt(`${color1[5]}${color1[6]}`, 16);
const red2 = parseInt(`${color2[1]}${color2[2]}`, 16);
const green2 = parseInt(`${color2[3]}${color2[4]}`, 16);
const blue2 = parseInt(`${color2[5]}${color2[6]}`, 16);
const red = Math.round(mix(red1, red2, percent));
const green = Math.round(mix(green1, green2, percent));
const blue = Math.round(mix(blue1, blue2, percent));
return generateHex(red, green, blue);
};
/**
* Generates a random hex color.
* @function
* @memberOf color
* @example
* console.log(_$.randomColor()); // e.g. #5bf462
* @returns {String} A random Hex color
*/
let randomColor = () =>
`#${Math.floor(Math.random() * 16777215).toString(16)}`;
/**
* Lighten or darken a color by a certain amount
* @function
* @memberOf color
* @param {String} col The color to lighten/darken
* @param {Number} amt The amount to lighten the color (out of 255).
* @example
* _$.lightenColor("#000000", 50); // #323232
* @returns {String} The color lightened.
*/
let lightenColor = (
col = req("string", "hex color"),
amt = req("number", "amount"),
) => {
var usePound = false;
if (col[0] == "#") {
col = col.slice(1);
usePound = true;
}
var num = parseInt(col, 16);
var r = (num >> 16) + amt;
if (r > 255) r = 255;
else if (r < 0) r = 0;
var b = ((num >> 8) & 0x00ff) + amt;
if (b > 255) b = 255;
else if (b < 0) b = 0;
var g = (num & 0x0000ff) + amt;
if (g > 255) g = 255;
else if (g < 0) g = 0;
return (
(usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16)
);
};
/**
* Tests if a color is light or dark and returns an object representation.
* @function
* @memberOf color
* @param {string} color The hex color to test.
* @example
* if (_$.lightOrDark("#333333").lightOrDark === 'dark'){
document.querySelector("DIV").style.color = "white";
} else {
document.querySelector("DIV").style.color = "black";
}
* @returns {Object} An object that represents if the color is light or dark and how much. The object key "hsp" represents a value out of 255 of how light the color is and the object's key "lightOrDark" is a string (Either "light" or "dark") of whether the color is light or dark.
*/
let lightOrDark = (
color = req("string", "hex or RGB color"),
) => {
var r, g, b, hsp;
if (color.match(/^rgb/)) {
color = color.match(
/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/,
);
r = color[1];
g = color[2];
b = color[3];
} else {
color = +(
"0x" + color.slice(1).replace(color.length < 5 && /./g, "$&$&")
);
r = color >> 16;
g = (color >> 8) & 255;
b = color & 255;
}
hsp = Math.sqrt(
0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b),
);
if (hsp > 127.5) {
return { lightOrDark: "light", hsp: hsp };
} else {
return { lightOrDark: "dark", hsp: hsp };
}
};
//#endregion Color
//#region Date
/**
* Returns the name of the weekday from the Date object specified.
* @function
* @memberOf date
* @param {Date} [date=new Date()] The date object to use.
* @param {String} [locale=en-US] The locale to use.
* @example
* console.log(_$.dayName)); // e.g. "Friday"
* @returns {String} The day name from the date.
*/
let dayName = (date = new Date(), locale = "en-US") =>
date.toLocaleDateString(locale, {
weekday: "long",
});
/**
* Formats a number of milliseconds
* @function
* @memberOf date
* @param {Number|String} ms The number of milliseconds to format to a string.
* @example
* console.log(_$.formatMilliseconds(1324765128475)); // "1 century, 7 years, 2 days, 22 hours, 18 minutes, 48 seconds, 475 milliseconds"
* @returns {String} The string of formatted milliseconds.
*/
let formatMilliseconds = (
ms = req("number", "milliseconds"),
) => {
ms = typeof ms === "string" ? +ms : ms;
if (ms < 0) ms = -ms;
const time = {
century: Math.floor(ms / 1144800000000),
year: Math.floor(ms / 22896000000) % 50,
day: Math.floor(ms / 86400000) % 365,
hour: Math.floor(ms / 3600000) % 24,
minute: Math.floor(ms / 60000) % 60,
second: Math.floor(ms / 1000) % 60,
millisecond: Math.floor(ms) % 1000,
};
return Object.entries(time)
.filter((val) => val[1] !== 0)
.map(([key, val]) => `${val} ${key}${val !== 1 ? "s" : ""}`)
.join(", ");
};
/**
* Adds a certain number of minutes to a date object.
* @memberof date
* @function
* @example
* _$.addMinutesToDate(new Date(), 4);//Create a date 4 minutes from now.
* @param {Date|string} date The date to add minutes to.
* @param {Number} n How many minutes to add to the date.
* @returns {Date} The date with minutes added.
*/
let addMinutesToDate = (
date = req("date", "date or date string"),
n = req("number", "minutes"),
) => {
const d = new Date(date);
d.setTime(d.getTime() + n * 60000);
return d.toISOString().split(".")[0].replace("T", " ");
};
/**
* Validates a date from a string.
* @memberOf date
* @function
* @example
* _$.isDateValid('December 17, 1995 03:24:00'); // true
_$.isDateValid('1995-12-17T03:24:00'); // true
_$.isDateValid('1995-12-17 T03:24:00'); // false
_$.isDateValid('Duck'); // false
_$.isDateValid(1995, 11, 17); // true
_$.isDateValid(1995, 11, 17, 'Duck'); // false
_$.isDateValid({}); // false
* @param {...any} val The arguments of the date to validate.
* @returns {Boolean} Returns if the date is valid or not.
*/
let isDateValid = (...val) => {
req("any", "date arguments", ![...val].length);
return !Number.isNaN(new Date(...val).valueOf());
};
/**
* Adds a specified number of days to a date.
* @memberOf date
* @function
* @param {Date} date The date to add days to
* @param {Number} n How many days to add to the date.
* @returns {Date} The date with the specified number of days added.
*/
let addDaysToDate = (
date = req("date", "date or date string"),
n = req("number", "days"),
) => {
const d = new Date(date);
d.setDate(d.getDate() + n);
return d.toISOString().split("T")[0];
};
//#endregion Date
//#region Element
/**
* Applies a material design ripple effect to the element specified. Works best with buttons and similar elements.
* This comes from my GitHub repo here: https://github.com/explosion-scratch/ripple
* @memberOf element
* @function
* @example
* _$.each(document.querySelectorAll("button"), _$.ripple)
* //Accepts attributes too!
* // data-time: The time in milliseconds that it takes the ripple to fade away
* // data-color: A CSS color that the ripple should have as it's color
* // data-opacity: The starting opacity of the ripple effect.
* // data-event: The event to listen for to apply the ripple.
* @param {HTMLElement} el The element to apply the ripple effect to.
* @param {Object} obj The object with (optional) time, color, opacity and event parameters for controlling the ripple effect. If these are not present the effect relies on data-* attributes, and then defaults and look good in general.
* @param {Number} [obj.time=1000] The time in milliseconds the ripple should take.
* @param {String} [obj.color="currentColor"] The color of the ripple effect.
* @param {Number} [obj.opacity=.3] The opacity of the ripple effect.
* @param {String} [obj.event="mousedown"] The event to listen for to trigger the ripple effect.
* @returns {HTMLElement} The HTML element that the ripple effect was applied to. (The same one passed in the first param).
*/
let ripple = (
el = req("element", "element"),
{ time, color, opacity, event },
) => {
node();
time = time || (+el.getAttribute("data-time") || 1000) * 3;
color = color || el.getAttribute("data-color") || "currentColor";
opacity = opacity || el.getAttribute("data-opacity") || ".3";
event = event || el.getAttribute("data-event") || "mousedown";
el.style.overflow = "hidden";
el.style.position = "relative";
el.addEventListener(event, (e) => {
var ripple_div = document.createElement("DIV");
ripple_div.style.position = "absolute";
ripple_div.style.background = `${color}`;
ripple_div.style.borderRadius = "50%";
var bx = el.getBoundingClientRect();
var largestdemensions;
if (bx.width > bx.height) {
largestdemensions = bx.width * 3;
} else {
largestdemensions = bx.height * 3;
}
ripple_div.style.pointerEvents = "none";
ripple_div.style.height = `${largestdemensions}px`;
ripple_div.style.width = `${largestdemensions}px`;
ripple_div.style.transform = `translate(-50%, -50%) scale(0)`;
ripple_div.style.top = `${e.pageY - (bx.top + window.scrollY)}px`;
ripple_div.style.left = `${
e.pageX - (bx.left + window.scrollX)
}px`;
ripple_div.style.transition = `opacity ${time}ms ease, transform ${time}ms ease`;
ripple_div.removeAttribute("data-ripple");
ripple_div.style.opacity = opacity;
el.appendChild(ripple_div);
setTimeout(() => {
ripple_div.style.transform = `translate(-50%, -50%) scale(1)`;
ripple_div.style.opacity = "0";
setTimeout(() => {
ripple_div.remove();
}, time);
}, 1);
});
};
/**
* Waits for an element satisfying selector to exist, then resolves promise with the element.
* @param {HTMLElement} [parent=document.documentElement] The parent element to watch.
* @param {String} selector The querySelector to watch for.
* @returns {Promise} A promise resolved when the element exists.
* @memberOf element
* @function
* @example
* _$.elementReady("#text").then((e) => e.remove());//Wait for an element with an ID of "text" then removes it.
*/
function elementReady(
selector = req("string", "query selector"),
parent = document.documentElement,
) {
node();
return new Promise((resolve, reject) => {
const el = parent.querySelector(selector);
if (el) {
resolve(el);
}
new MutationObserver((mutationRecords, observer) => {
// Query for elements matching the specified selector
Array.from(parent.querySelectorAll(selector)).forEach(
(element) => {
resolve(element);
//Once we have resolved we don't need the observer anymore.
observer.disconnect();
},
);
}).observe(parent, {
childList: true,
subtree: true,
});
});
}
/**
* Tests if an element is a child element of another element.
* @returns {Boolean} If the element is a child or not
* @memberOf element
* @function
* @example
* _$.elementContains(document.querySelector("#container"), document.querySelector("#img"));//If the element with an id of "img" is inside the #container element this will return true, otherwise it will return false
* @example
* //Note that the easiest way to do this would be to use _$.onOutsideClick(), but this is another way that demonstrates the use of this function.
* //Listen for a click outside of an element (in this case the div#popup element) then remove the popup element.
* document.querySelector("div#popup").addEventListener("click", (e) => {
* let contains = _$.elementContains(document.querySelector("div#popup"), e.target);
* if (!contains){
* document.querySelector("div#popup".remove()
* }
* })
* @param {HTMLElement} parent The parent element to test.
* @param {HTMLElement} child The child element to test.
*/
let elementContains = (
parent = req("HTMLElement", "parent"),
child = req("HTMLElement", "child"),
) => {
node();
return parent !== child && parent.contains(child);
};
/**
* Gets the parent elements of the element given.
* @returns {Array.<HTMLElement>} An array of the parent elements from deepest to outermost.
* @memberOf element
* @function
* @example
* //Where the html is like so:
* ```
* <html>
* <head>
* </head>
* <body>
* <div id="img">
* <img src="https://example.com/example.png">
* </div>
* </body>
* </html>
* ```
* _$.parents(document.querySelector("img"));//[div#img, body, html]
* @param {HTMLElement} el The element
*/
let parents = (el = req("element")) => {
node();
return [
...(function* (e) {
while ((e = e.parentNode)) {
yield e;
}
})(el),
];
};
/**
* Gets all the images that are children of the specified element.
* @returns {Array} The array of image urls.
* @memberOf element
* @function
* @example
* //Get all the images on the page and convert their url's to data urls then log that list to console.
* _$.getImages().forEach(image_url => {
* image_data_list.push(_$.imageToData(image_url))
* })
* console.log(image_data_list);
* @param {HTMLElement} [el=document.documentElement] The element to get images from (e.g. document.body)
* @param {Boolean} [includeDuplicates=false] Whether to include duplicate images, defaults to false.
*/
let getImages = (
el = document.documentElement,
includeDuplicates = false,
) => {
node();
const images = [...el.getElementsByTagName("img")].map((img) =>
img.getAttribute("src"),
);
return includeDuplicates ? images : [...new Set(images)];
};
/**
* Renders an HTML element from an object in the container specified.
* @memberOf element
* @function
* @example
* //Renders a button in the document body.
* _$.renderElement({
type: 'button',
props: {
type: 'button',
className: 'btn',
onClick: () => alert('Clicked'),
children: [{ props: { nodeValue: 'Click me' } }]
}
}, document.body)
* @param {Object} param The type of object (the HTML tagName)
* @param {HTMLElement} container The html element to render it in.
* @returns {HTMLElement} The HTML element rendered.
*/
let renderElement = (
{ type, props = {} } = req("object", "options"),
container = req("HTMLElement", "container"),
) => {
node();
const isTextElement = !type;
const element = isTextElement
? document.createTextNode("")
: document.createElement(type);
const isListener = (p) => p.startsWith("on");
const isAttribute = (p) => !isListener(p) && p !== "children";
Object.keys(props).forEach((p) => {
if (isAttribute(p)) element[p] = props[p];
if (!isTextElement && isListener(p))
element.addEventListener(p.toLowerCase().slice(2), props[p]);
});
if (!isTextElement && props.children && props.children.length)
props.children.forEach((childElement) =>
renderElement(childElement, element),
);
container.appendChild(element);
return element;
};
/**
* Create a DOM element from a querySelector with option to include content
* @memberOf element
* @function
* @param {String} querySelector (optional) default to div
* @param {...String|Number|DOMElement} [content] (optional)
* @returns DOMElement
*
* @example
* - _$.create(); // <div>
* - _$.create('span#my-id.my-class.second-class'); // <span id="my-id" class="my-class second-class">
* - _$.create('#my-id.my-class.second-class', 'text to insert', 12345); // <div id="my-id" class="my-class second-class">
*/
function create(querySelector = "div", ...content) {
node();
let nodeType = querySelector.match(/^[a-z0-9]+/i);