-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (120 loc) · 3.96 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Utils-Full</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/normalize.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="shortcut icon" href="//carry0987.github.io/favicon.png">
</head>
<body class="container">
<div class="d-flex flex-column justify-content-center align-items-center">
<div id="app">
<h1 class="mb-3 text-center"></h1>
</div>
<div id="demo-log" class="bg-light bg-gradient p-1 rounded w-50 w-sm-auto">
<pre class="mb-0"><code></code></pre>
</div>
</div>
<script src="dist/utils-full.min.js"></script>
<script type="text/javascript">
let util = new Utils({
ll: (msg, data = null) => {
console.log(msg);
if (data) console.log(data);
let demoLog = Utils.getElem('#demo-log pre > code');
if (demoLog) {
demoLog.innerHTML += msg instanceof Object ? `${JSON.stringify(msg, null, 4)}\n\n` : `${msg}\n\n`;
if (data) {
demoLog.innerHTML += `${JSON.stringify(data, null, 4)}\n\n`;
}
}
}
});
util.ll('Utils-Full');
Utils.getElem('#app h1.mb-3').innerHTML = 'Utils';
Utils.insertAfter(Utils.getElem('#app h1.mb-3'), `<h2 class="mb-3">Utils-Full v${Utils.version}</h2>`);
Utils.insertAfter(Utils.getElem('#app h2.mb-3'), `<h2 class="mb-3 text-center">Core v${Utils.utilsVersion}</h2>`);
Utils.addClass(Utils.getElem('#app h2.mb-3'), 'text-center');
let styles = {
h1: {
color: '#818181',
fontSize: '50px'
}
};
Utils.setStylesheetId('test');
Utils.injectStylesheet(styles, 1);
Utils.setLocalValue('test', {1:2,2:4,3:5});
util.ll(Utils.getLocalValue('test'));
Utils.removeLocalValue('test');
Utils.setSessionValue('test', {1:2,2:4,3:5});
util.ll(Utils.getSessionValue('test'));
// Test deepMerge
const target = {
a: 1,
b: {
c: 2,
d: 3,
},
};
const source1 = {
b: {
c: 3,
e: 4,
haha: {
a: 1,
b: 2,
}
},
f: 5,
};
const source2 = {
g: {
h: 6,
},
};
const merged = Utils.deepMerge(target, source1, source2);
util.ll(JSON.stringify(merged, null, 4));
// Test sendFormData
Utils.sendFormData({
url: 'https://httpbin.org/post',
data: {
name: 'test',
age: 18
},
success: (res) => {
util.ll(res);
},
error: (err) => {
util.ll(err);
}
});
// Test Cookie operations
Utils.setCookie('testCookie', 'TEST-Value', {expires: '2024-02-16T10:01:15.000Z'});
util.ll(Utils.getCookie('testCookie'));
// Test Event operations
function customEventHandler(event) {
util.ll('============');
util.ll('Custom event triggered!');
util.ll('Clicked!');
util.ll('Event detail:', event.detail);
}
const h1Element = Utils.getElem('#app h1.mb-3');
if (h1Element && h1Element instanceof Element) {
Utils.addEventListener(h1Element, 'click', () => {
const myCustomEvent = Utils.createEvent('testEvent', {
detail: {
name: 'test',
age: 18
}
});
Utils.dispatchEvent(myCustomEvent, h1Element);
});
Utils.addEventListener(h1Element, 'testEvent', customEventHandler);
}
// Test getUrlParameter
util.ll(Utils.getUrlParam('#gty'));
</script>
</body>
</html>