@brandup/ui-dom 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +213 -174
- package/dist/cjs/index.js.map +1 -1
- package/dist/mjs/index.js +213 -174
- package/dist/mjs/index.js.map +1 -1
- package/dist/types.d.ts +42 -20
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -1,197 +1,236 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
return
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
static queryElement(parentElement, query) {
|
|
30
|
-
return parentElement.querySelector(query);
|
|
31
|
-
}
|
|
32
|
-
static queryElements(parentElement, query) {
|
|
33
|
-
return parentElement.querySelectorAll(query);
|
|
34
|
-
}
|
|
35
|
-
static nextElementByClass(currentElement, className) {
|
|
36
|
-
let n = currentElement.nextSibling;
|
|
37
|
-
while (n) {
|
|
38
|
-
if (n.nodeType === 1) {
|
|
39
|
-
if (n.classList.contains(className))
|
|
40
|
-
return n;
|
|
41
|
-
}
|
|
42
|
-
n = n.nextSibling;
|
|
43
|
-
}
|
|
3
|
+
const addCssClass = (elem, cssClass) => {
|
|
4
|
+
if (!cssClass)
|
|
5
|
+
return;
|
|
6
|
+
if (!Array.isArray(cssClass))
|
|
7
|
+
cssClass = [cssClass];
|
|
8
|
+
elem.classList.add(...cssClass);
|
|
9
|
+
};
|
|
10
|
+
const removeCssClass = (elem, cssClass) => {
|
|
11
|
+
if (!cssClass)
|
|
12
|
+
return;
|
|
13
|
+
if (!Array.isArray(cssClass))
|
|
14
|
+
cssClass = [cssClass];
|
|
15
|
+
elem.classList.remove(...cssClass);
|
|
16
|
+
};
|
|
17
|
+
var helpers = {
|
|
18
|
+
addCssClass,
|
|
19
|
+
removeCssClass
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
function getById(id) {
|
|
23
|
+
return document.getElementById(id);
|
|
24
|
+
}
|
|
25
|
+
function getByClass(container, className) {
|
|
26
|
+
const elements = container.getElementsByClassName(className);
|
|
27
|
+
if (elements.length === 0)
|
|
44
28
|
return null;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
if (n.classList.contains(className))
|
|
51
|
-
return n;
|
|
52
|
-
}
|
|
53
|
-
n = n.previousSibling;
|
|
54
|
-
}
|
|
29
|
+
return elements.item(0);
|
|
30
|
+
}
|
|
31
|
+
function getByName(name) {
|
|
32
|
+
const elements = document.getElementsByName(name);
|
|
33
|
+
if (elements.length === 0)
|
|
55
34
|
return null;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
35
|
+
return elements.item(0);
|
|
36
|
+
}
|
|
37
|
+
function getElementByTagName(container, tagName) {
|
|
38
|
+
const elements = container.getElementsByTagName(tagName);
|
|
39
|
+
if (elements.length === 0)
|
|
40
|
+
return null;
|
|
41
|
+
return elements.item(0);
|
|
42
|
+
}
|
|
43
|
+
function getElementsByTagName(container, tagName) {
|
|
44
|
+
return container.getElementsByTagName(tagName);
|
|
45
|
+
}
|
|
46
|
+
function queryElement(container, query) {
|
|
47
|
+
return container.querySelector(query);
|
|
48
|
+
}
|
|
49
|
+
function queryElements(container, query) {
|
|
50
|
+
return container.querySelectorAll(query);
|
|
51
|
+
}
|
|
52
|
+
function nextElementByClass(currentElement, className) {
|
|
53
|
+
let n = currentElement.nextSibling;
|
|
54
|
+
while (n) {
|
|
55
|
+
if (n.nodeType === 1) {
|
|
56
|
+
if (n.classList.contains(className))
|
|
61
57
|
return n;
|
|
62
|
-
}
|
|
63
|
-
n = n.previousSibling;
|
|
64
58
|
}
|
|
65
|
-
|
|
59
|
+
n = n.nextSibling;
|
|
66
60
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
61
|
+
return null;
|
|
62
|
+
}
|
|
63
|
+
function prevElementByClass(currentElement, className) {
|
|
64
|
+
let n = currentElement.previousSibling;
|
|
65
|
+
while (n) {
|
|
66
|
+
if (n.nodeType === 1) {
|
|
67
|
+
if (n.classList.contains(className))
|
|
71
68
|
return n;
|
|
72
|
-
}
|
|
73
|
-
n = n.nextSibling;
|
|
74
69
|
}
|
|
75
|
-
|
|
70
|
+
n = n.previousSibling;
|
|
76
71
|
}
|
|
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
|
-
|
|
72
|
+
return null;
|
|
73
|
+
}
|
|
74
|
+
function prevElement(currentElement) {
|
|
75
|
+
let n = currentElement.previousSibling;
|
|
76
|
+
while (n) {
|
|
77
|
+
if (n.nodeType === 1) {
|
|
78
|
+
return n;
|
|
79
|
+
}
|
|
80
|
+
n = n.previousSibling;
|
|
81
|
+
}
|
|
82
|
+
return null;
|
|
83
|
+
}
|
|
84
|
+
function nextElement(currentElement) {
|
|
85
|
+
let n = currentElement.nextSibling;
|
|
86
|
+
while (n) {
|
|
87
|
+
if (n.nodeType === 1) {
|
|
88
|
+
return n;
|
|
89
|
+
}
|
|
90
|
+
n = n.nextSibling;
|
|
91
|
+
}
|
|
92
|
+
return null;
|
|
93
|
+
}
|
|
94
|
+
function addClass(container, selectors, cssClass) {
|
|
95
|
+
if (!cssClass)
|
|
96
|
+
return;
|
|
97
|
+
const nodes = container.querySelectorAll(selectors);
|
|
98
|
+
nodes.forEach(node => helpers.addCssClass(node, cssClass));
|
|
99
|
+
}
|
|
100
|
+
function removeClass(container, selectors, cssClass) {
|
|
101
|
+
if (!cssClass)
|
|
102
|
+
return;
|
|
103
|
+
const nodes = container.querySelectorAll(selectors);
|
|
104
|
+
nodes.forEach(elem => helpers.removeCssClass(elem, cssClass));
|
|
105
|
+
}
|
|
106
|
+
function empty(container) {
|
|
107
|
+
while (container.hasChildNodes()) {
|
|
108
|
+
if (container.firstChild)
|
|
109
|
+
container.removeChild(container.firstChild);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
var DomHelpers = /*#__PURE__*/Object.freeze({
|
|
114
|
+
__proto__: null,
|
|
115
|
+
addClass: addClass,
|
|
116
|
+
empty: empty,
|
|
117
|
+
getByClass: getByClass,
|
|
118
|
+
getById: getById,
|
|
119
|
+
getByName: getByName,
|
|
120
|
+
getElementByTagName: getElementByTagName,
|
|
121
|
+
getElementsByTagName: getElementsByTagName,
|
|
122
|
+
nextElement: nextElement,
|
|
123
|
+
nextElementByClass: nextElementByClass,
|
|
124
|
+
prevElement: prevElement,
|
|
125
|
+
prevElementByClass: prevElementByClass,
|
|
126
|
+
queryElement: queryElement,
|
|
127
|
+
queryElements: queryElements,
|
|
128
|
+
removeClass: removeClass
|
|
129
|
+
});
|
|
130
|
+
|
|
131
|
+
function tag(tagName, options, children) {
|
|
132
|
+
const elem = document.createElement(tagName);
|
|
133
|
+
applyOptions(elem, options);
|
|
134
|
+
if (children instanceof Array)
|
|
135
|
+
children.forEach(child => appendChild(elem, "beforeend", child));
|
|
136
|
+
else
|
|
137
|
+
appendChild(elem, "beforeend", children);
|
|
138
|
+
return elem;
|
|
139
|
+
}
|
|
140
|
+
const applyOptions = (elem, options) => {
|
|
141
|
+
if (!options)
|
|
142
|
+
return;
|
|
143
|
+
if (typeof options === "string" || Array.isArray(options))
|
|
144
|
+
helpers.addCssClass(elem, options);
|
|
145
|
+
else {
|
|
146
|
+
for (let key in options) {
|
|
147
|
+
const value = options[key];
|
|
148
|
+
if (value === undefined)
|
|
149
|
+
continue;
|
|
150
|
+
switch (key) {
|
|
151
|
+
case "id":
|
|
152
|
+
elem.id = value;
|
|
153
|
+
break;
|
|
154
|
+
case "styles": {
|
|
155
|
+
if (value) {
|
|
156
|
+
for (const sKey in value)
|
|
157
|
+
elem.style[sKey] = value[sKey];
|
|
142
158
|
}
|
|
159
|
+
break;
|
|
143
160
|
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
if (
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
const chdElem = chd(elem);
|
|
157
|
-
if (chdElem)
|
|
158
|
-
elem.insertAdjacentElement("beforeend", chdElem);
|
|
161
|
+
case "class": {
|
|
162
|
+
helpers.addCssClass(elem, value);
|
|
163
|
+
break;
|
|
164
|
+
}
|
|
165
|
+
case "command": {
|
|
166
|
+
elem.dataset["command"] = value;
|
|
167
|
+
break;
|
|
168
|
+
}
|
|
169
|
+
case "dataset": {
|
|
170
|
+
if (value) {
|
|
171
|
+
for (const dataName in value)
|
|
172
|
+
elem.dataset[dataName] = value[dataName];
|
|
159
173
|
}
|
|
160
|
-
|
|
161
|
-
|
|
174
|
+
break;
|
|
175
|
+
}
|
|
176
|
+
case "events": {
|
|
177
|
+
if (value) {
|
|
178
|
+
for (const eventName in value)
|
|
179
|
+
elem.addEventListener(eventName, value[eventName]);
|
|
162
180
|
}
|
|
181
|
+
break;
|
|
182
|
+
}
|
|
183
|
+
default: {
|
|
184
|
+
if (typeof value === "object")
|
|
185
|
+
elem.setAttribute(key, value ? JSON.stringify(value) : "");
|
|
186
|
+
else if (typeof value === "string")
|
|
187
|
+
elem.setAttribute(key, value ? value : "");
|
|
188
|
+
else
|
|
189
|
+
elem.setAttribute(key, value ? value.toString() : "");
|
|
190
|
+
break;
|
|
163
191
|
}
|
|
164
192
|
}
|
|
165
|
-
else if (typeof children === "string") {
|
|
166
|
-
elem.innerHTML = children;
|
|
167
|
-
}
|
|
168
|
-
else if (typeof children === "function") {
|
|
169
|
-
children(elem);
|
|
170
|
-
}
|
|
171
|
-
else
|
|
172
|
-
throw new Error();
|
|
173
193
|
}
|
|
174
|
-
return elem;
|
|
175
194
|
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
195
|
+
};
|
|
196
|
+
const appendChild = (container, where, children) => {
|
|
197
|
+
if (!children)
|
|
198
|
+
return;
|
|
199
|
+
if (children instanceof Element)
|
|
200
|
+
container.insertAdjacentElement(where, children);
|
|
201
|
+
else if (children instanceof Promise)
|
|
202
|
+
children.then((child) => appendChild(container, where, child));
|
|
203
|
+
else {
|
|
204
|
+
const typeName = typeof children;
|
|
205
|
+
switch (typeName) {
|
|
206
|
+
case "string":
|
|
207
|
+
container.insertAdjacentHTML(where, children);
|
|
208
|
+
break;
|
|
209
|
+
case "number":
|
|
210
|
+
container.insertAdjacentHTML(where, children.toString());
|
|
211
|
+
break;
|
|
212
|
+
case "function":
|
|
213
|
+
const child = children(container);
|
|
214
|
+
if (child)
|
|
215
|
+
appendChild(container, where, child);
|
|
216
|
+
break;
|
|
217
|
+
default:
|
|
218
|
+
throw new Error(`Not support child type of ${typeName}.`);
|
|
180
219
|
}
|
|
181
220
|
}
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
}
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
var TagHelpers = /*#__PURE__*/Object.freeze({
|
|
224
|
+
__proto__: null,
|
|
225
|
+
appendChild: appendChild,
|
|
226
|
+
applyOptions: applyOptions,
|
|
227
|
+
tag: tag
|
|
228
|
+
});
|
|
229
|
+
|
|
230
|
+
const DOM = {
|
|
231
|
+
...DomHelpers,
|
|
232
|
+
...TagHelpers
|
|
233
|
+
};
|
|
195
234
|
|
|
196
235
|
exports.DOM = DOM;
|
|
197
236
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/mjs/index.js
CHANGED
|
@@ -1,195 +1,234 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
return
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
static queryElement(parentElement, query) {
|
|
28
|
-
return parentElement.querySelector(query);
|
|
29
|
-
}
|
|
30
|
-
static queryElements(parentElement, query) {
|
|
31
|
-
return parentElement.querySelectorAll(query);
|
|
32
|
-
}
|
|
33
|
-
static nextElementByClass(currentElement, className) {
|
|
34
|
-
let n = currentElement.nextSibling;
|
|
35
|
-
while (n) {
|
|
36
|
-
if (n.nodeType === 1) {
|
|
37
|
-
if (n.classList.contains(className))
|
|
38
|
-
return n;
|
|
39
|
-
}
|
|
40
|
-
n = n.nextSibling;
|
|
41
|
-
}
|
|
1
|
+
const addCssClass = (elem, cssClass) => {
|
|
2
|
+
if (!cssClass)
|
|
3
|
+
return;
|
|
4
|
+
if (!Array.isArray(cssClass))
|
|
5
|
+
cssClass = [cssClass];
|
|
6
|
+
elem.classList.add(...cssClass);
|
|
7
|
+
};
|
|
8
|
+
const removeCssClass = (elem, cssClass) => {
|
|
9
|
+
if (!cssClass)
|
|
10
|
+
return;
|
|
11
|
+
if (!Array.isArray(cssClass))
|
|
12
|
+
cssClass = [cssClass];
|
|
13
|
+
elem.classList.remove(...cssClass);
|
|
14
|
+
};
|
|
15
|
+
var helpers = {
|
|
16
|
+
addCssClass,
|
|
17
|
+
removeCssClass
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
function getById(id) {
|
|
21
|
+
return document.getElementById(id);
|
|
22
|
+
}
|
|
23
|
+
function getByClass(container, className) {
|
|
24
|
+
const elements = container.getElementsByClassName(className);
|
|
25
|
+
if (elements.length === 0)
|
|
42
26
|
return null;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
if (n.classList.contains(className))
|
|
49
|
-
return n;
|
|
50
|
-
}
|
|
51
|
-
n = n.previousSibling;
|
|
52
|
-
}
|
|
27
|
+
return elements.item(0);
|
|
28
|
+
}
|
|
29
|
+
function getByName(name) {
|
|
30
|
+
const elements = document.getElementsByName(name);
|
|
31
|
+
if (elements.length === 0)
|
|
53
32
|
return null;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
33
|
+
return elements.item(0);
|
|
34
|
+
}
|
|
35
|
+
function getElementByTagName(container, tagName) {
|
|
36
|
+
const elements = container.getElementsByTagName(tagName);
|
|
37
|
+
if (elements.length === 0)
|
|
38
|
+
return null;
|
|
39
|
+
return elements.item(0);
|
|
40
|
+
}
|
|
41
|
+
function getElementsByTagName(container, tagName) {
|
|
42
|
+
return container.getElementsByTagName(tagName);
|
|
43
|
+
}
|
|
44
|
+
function queryElement(container, query) {
|
|
45
|
+
return container.querySelector(query);
|
|
46
|
+
}
|
|
47
|
+
function queryElements(container, query) {
|
|
48
|
+
return container.querySelectorAll(query);
|
|
49
|
+
}
|
|
50
|
+
function nextElementByClass(currentElement, className) {
|
|
51
|
+
let n = currentElement.nextSibling;
|
|
52
|
+
while (n) {
|
|
53
|
+
if (n.nodeType === 1) {
|
|
54
|
+
if (n.classList.contains(className))
|
|
59
55
|
return n;
|
|
60
|
-
}
|
|
61
|
-
n = n.previousSibling;
|
|
62
56
|
}
|
|
63
|
-
|
|
57
|
+
n = n.nextSibling;
|
|
64
58
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
59
|
+
return null;
|
|
60
|
+
}
|
|
61
|
+
function prevElementByClass(currentElement, className) {
|
|
62
|
+
let n = currentElement.previousSibling;
|
|
63
|
+
while (n) {
|
|
64
|
+
if (n.nodeType === 1) {
|
|
65
|
+
if (n.classList.contains(className))
|
|
69
66
|
return n;
|
|
70
|
-
}
|
|
71
|
-
n = n.nextSibling;
|
|
72
67
|
}
|
|
73
|
-
|
|
68
|
+
n = n.previousSibling;
|
|
74
69
|
}
|
|
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
|
-
|
|
70
|
+
return null;
|
|
71
|
+
}
|
|
72
|
+
function prevElement(currentElement) {
|
|
73
|
+
let n = currentElement.previousSibling;
|
|
74
|
+
while (n) {
|
|
75
|
+
if (n.nodeType === 1) {
|
|
76
|
+
return n;
|
|
77
|
+
}
|
|
78
|
+
n = n.previousSibling;
|
|
79
|
+
}
|
|
80
|
+
return null;
|
|
81
|
+
}
|
|
82
|
+
function nextElement(currentElement) {
|
|
83
|
+
let n = currentElement.nextSibling;
|
|
84
|
+
while (n) {
|
|
85
|
+
if (n.nodeType === 1) {
|
|
86
|
+
return n;
|
|
87
|
+
}
|
|
88
|
+
n = n.nextSibling;
|
|
89
|
+
}
|
|
90
|
+
return null;
|
|
91
|
+
}
|
|
92
|
+
function addClass(container, selectors, cssClass) {
|
|
93
|
+
if (!cssClass)
|
|
94
|
+
return;
|
|
95
|
+
const nodes = container.querySelectorAll(selectors);
|
|
96
|
+
nodes.forEach(node => helpers.addCssClass(node, cssClass));
|
|
97
|
+
}
|
|
98
|
+
function removeClass(container, selectors, cssClass) {
|
|
99
|
+
if (!cssClass)
|
|
100
|
+
return;
|
|
101
|
+
const nodes = container.querySelectorAll(selectors);
|
|
102
|
+
nodes.forEach(elem => helpers.removeCssClass(elem, cssClass));
|
|
103
|
+
}
|
|
104
|
+
function empty(container) {
|
|
105
|
+
while (container.hasChildNodes()) {
|
|
106
|
+
if (container.firstChild)
|
|
107
|
+
container.removeChild(container.firstChild);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
var DomHelpers = /*#__PURE__*/Object.freeze({
|
|
112
|
+
__proto__: null,
|
|
113
|
+
addClass: addClass,
|
|
114
|
+
empty: empty,
|
|
115
|
+
getByClass: getByClass,
|
|
116
|
+
getById: getById,
|
|
117
|
+
getByName: getByName,
|
|
118
|
+
getElementByTagName: getElementByTagName,
|
|
119
|
+
getElementsByTagName: getElementsByTagName,
|
|
120
|
+
nextElement: nextElement,
|
|
121
|
+
nextElementByClass: nextElementByClass,
|
|
122
|
+
prevElement: prevElement,
|
|
123
|
+
prevElementByClass: prevElementByClass,
|
|
124
|
+
queryElement: queryElement,
|
|
125
|
+
queryElements: queryElements,
|
|
126
|
+
removeClass: removeClass
|
|
127
|
+
});
|
|
128
|
+
|
|
129
|
+
function tag(tagName, options, children) {
|
|
130
|
+
const elem = document.createElement(tagName);
|
|
131
|
+
applyOptions(elem, options);
|
|
132
|
+
if (children instanceof Array)
|
|
133
|
+
children.forEach(child => appendChild(elem, "beforeend", child));
|
|
134
|
+
else
|
|
135
|
+
appendChild(elem, "beforeend", children);
|
|
136
|
+
return elem;
|
|
137
|
+
}
|
|
138
|
+
const applyOptions = (elem, options) => {
|
|
139
|
+
if (!options)
|
|
140
|
+
return;
|
|
141
|
+
if (typeof options === "string" || Array.isArray(options))
|
|
142
|
+
helpers.addCssClass(elem, options);
|
|
143
|
+
else {
|
|
144
|
+
for (let key in options) {
|
|
145
|
+
const value = options[key];
|
|
146
|
+
if (value === undefined)
|
|
147
|
+
continue;
|
|
148
|
+
switch (key) {
|
|
149
|
+
case "id":
|
|
150
|
+
elem.id = value;
|
|
151
|
+
break;
|
|
152
|
+
case "styles": {
|
|
153
|
+
if (value) {
|
|
154
|
+
for (const sKey in value)
|
|
155
|
+
elem.style[sKey] = value[sKey];
|
|
140
156
|
}
|
|
157
|
+
break;
|
|
141
158
|
}
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
if (
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
const chdElem = chd(elem);
|
|
155
|
-
if (chdElem)
|
|
156
|
-
elem.insertAdjacentElement("beforeend", chdElem);
|
|
159
|
+
case "class": {
|
|
160
|
+
helpers.addCssClass(elem, value);
|
|
161
|
+
break;
|
|
162
|
+
}
|
|
163
|
+
case "command": {
|
|
164
|
+
elem.dataset["command"] = value;
|
|
165
|
+
break;
|
|
166
|
+
}
|
|
167
|
+
case "dataset": {
|
|
168
|
+
if (value) {
|
|
169
|
+
for (const dataName in value)
|
|
170
|
+
elem.dataset[dataName] = value[dataName];
|
|
157
171
|
}
|
|
158
|
-
|
|
159
|
-
|
|
172
|
+
break;
|
|
173
|
+
}
|
|
174
|
+
case "events": {
|
|
175
|
+
if (value) {
|
|
176
|
+
for (const eventName in value)
|
|
177
|
+
elem.addEventListener(eventName, value[eventName]);
|
|
160
178
|
}
|
|
179
|
+
break;
|
|
180
|
+
}
|
|
181
|
+
default: {
|
|
182
|
+
if (typeof value === "object")
|
|
183
|
+
elem.setAttribute(key, value ? JSON.stringify(value) : "");
|
|
184
|
+
else if (typeof value === "string")
|
|
185
|
+
elem.setAttribute(key, value ? value : "");
|
|
186
|
+
else
|
|
187
|
+
elem.setAttribute(key, value ? value.toString() : "");
|
|
188
|
+
break;
|
|
161
189
|
}
|
|
162
190
|
}
|
|
163
|
-
else if (typeof children === "string") {
|
|
164
|
-
elem.innerHTML = children;
|
|
165
|
-
}
|
|
166
|
-
else if (typeof children === "function") {
|
|
167
|
-
children(elem);
|
|
168
|
-
}
|
|
169
|
-
else
|
|
170
|
-
throw new Error();
|
|
171
191
|
}
|
|
172
|
-
return elem;
|
|
173
192
|
}
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
193
|
+
};
|
|
194
|
+
const appendChild = (container, where, children) => {
|
|
195
|
+
if (!children)
|
|
196
|
+
return;
|
|
197
|
+
if (children instanceof Element)
|
|
198
|
+
container.insertAdjacentElement(where, children);
|
|
199
|
+
else if (children instanceof Promise)
|
|
200
|
+
children.then((child) => appendChild(container, where, child));
|
|
201
|
+
else {
|
|
202
|
+
const typeName = typeof children;
|
|
203
|
+
switch (typeName) {
|
|
204
|
+
case "string":
|
|
205
|
+
container.insertAdjacentHTML(where, children);
|
|
206
|
+
break;
|
|
207
|
+
case "number":
|
|
208
|
+
container.insertAdjacentHTML(where, children.toString());
|
|
209
|
+
break;
|
|
210
|
+
case "function":
|
|
211
|
+
const child = children(container);
|
|
212
|
+
if (child)
|
|
213
|
+
appendChild(container, where, child);
|
|
214
|
+
break;
|
|
215
|
+
default:
|
|
216
|
+
throw new Error(`Not support child type of ${typeName}.`);
|
|
178
217
|
}
|
|
179
218
|
}
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
}
|
|
219
|
+
};
|
|
220
|
+
|
|
221
|
+
var TagHelpers = /*#__PURE__*/Object.freeze({
|
|
222
|
+
__proto__: null,
|
|
223
|
+
appendChild: appendChild,
|
|
224
|
+
applyOptions: applyOptions,
|
|
225
|
+
tag: tag
|
|
226
|
+
});
|
|
227
|
+
|
|
228
|
+
const DOM = {
|
|
229
|
+
...DomHelpers,
|
|
230
|
+
...TagHelpers
|
|
231
|
+
};
|
|
193
232
|
|
|
194
233
|
export { DOM };
|
|
195
234
|
//# sourceMappingURL=index.js.map
|
package/dist/mjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,26 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
static getElementByClass(parentElement: Element, className: string): HTMLElement | null;
|
|
5
|
-
static getElementByName(name: string): HTMLElement | null;
|
|
6
|
-
static getElementByTagName(parentElement: Element, tagName: string): HTMLElement | null;
|
|
7
|
-
static getElementsByTagName(parentElement: Element, tagName: string): HTMLCollectionOf<Element>;
|
|
8
|
-
static queryElement(parentElement: Element, query: string): HTMLElement | null;
|
|
9
|
-
static queryElements(parentElement: Element, query: string): NodeListOf<HTMLElement>;
|
|
10
|
-
static nextElementByClass(currentElement: Element, className: string): HTMLElement | null;
|
|
11
|
-
static prevElementByClass(currentElement: Element, className: string): HTMLElement | null;
|
|
12
|
-
static prevElement(currentElement: Element): HTMLElement | null;
|
|
13
|
-
static nextElement(currentElement: Element): HTMLElement | null;
|
|
14
|
-
static tag(tagName: string, options?: ElementOptions | string | null, children?: ((elem: Element) => void) | Element | string | Array<Element | string | ((parent: Element) => Element)>): HTMLElement;
|
|
15
|
-
static addClass(container: Element, selectors: string, className: string): void;
|
|
16
|
-
static removeClass(container: Element, selectors: string, className: string): void;
|
|
17
|
-
static empty(element: Element): void;
|
|
18
|
-
}
|
|
1
|
+
type TagChildrenLike = TagChildrenPrimitive | Promise<TagChildrenPrimitive> | ((elem: HTMLElement) => Promise<TagChildrenPrimitive> | TagChildrenPrimitive | void);
|
|
2
|
+
type TagChildrenPrimitive = Element | string | number | null | undefined;
|
|
3
|
+
type CssClass = string | string[];
|
|
19
4
|
interface ElementOptions {
|
|
20
5
|
id?: string;
|
|
6
|
+
class?: CssClass;
|
|
21
7
|
dataset?: ElementData;
|
|
22
8
|
styles?: ElementStyles;
|
|
23
|
-
class?: string | string[];
|
|
24
9
|
events?: {
|
|
25
10
|
[name: string]: EventListenerOrEventListenerObject;
|
|
26
11
|
};
|
|
@@ -343,4 +328,41 @@ interface ElementStyles {
|
|
|
343
328
|
zIndex?: string;
|
|
344
329
|
}
|
|
345
330
|
|
|
346
|
-
|
|
331
|
+
declare function getById(id: string): HTMLElement | null;
|
|
332
|
+
declare function getByClass(container: Element, className: string): HTMLElement | null;
|
|
333
|
+
declare function getByName(name: string): HTMLElement | null;
|
|
334
|
+
declare function getElementByTagName(container: Element, tagName: string): HTMLElement | null;
|
|
335
|
+
declare function getElementsByTagName(container: Element, tagName: string): HTMLCollectionOf<Element>;
|
|
336
|
+
declare function queryElement(container: Element, query: string): HTMLElement | null;
|
|
337
|
+
declare function queryElements(container: Element, query: string): NodeListOf<HTMLElement>;
|
|
338
|
+
declare function nextElementByClass(currentElement: Element, className: string): HTMLElement | null;
|
|
339
|
+
declare function prevElementByClass(currentElement: Element, className: string): HTMLElement | null;
|
|
340
|
+
declare function prevElement(currentElement: Element): HTMLElement | null;
|
|
341
|
+
declare function nextElement(currentElement: Element): HTMLElement | null;
|
|
342
|
+
declare function addClass(container: Element, selectors: string, cssClass: CssClass): void;
|
|
343
|
+
declare function removeClass(container: Element, selectors: string, cssClass: CssClass): void;
|
|
344
|
+
declare function empty(container: Element): void;
|
|
345
|
+
|
|
346
|
+
declare function tag(tagName: string, options?: ElementOptions | CssClass | null, children?: TagChildrenLike | Array<TagChildrenLike>): HTMLElement;
|
|
347
|
+
|
|
348
|
+
declare const DOM: {
|
|
349
|
+
tag: typeof tag;
|
|
350
|
+
applyOptions: (elem: HTMLElement, options?: ElementOptions | CssClass | null) => void;
|
|
351
|
+
appendChild: (container: HTMLElement, where: InsertPosition, children?: TagChildrenLike) => void;
|
|
352
|
+
getById: typeof getById;
|
|
353
|
+
getByClass: typeof getByClass;
|
|
354
|
+
getByName: typeof getByName;
|
|
355
|
+
getElementByTagName: typeof getElementByTagName;
|
|
356
|
+
getElementsByTagName: typeof getElementsByTagName;
|
|
357
|
+
queryElement: typeof queryElement;
|
|
358
|
+
queryElements: typeof queryElements;
|
|
359
|
+
nextElementByClass: typeof nextElementByClass;
|
|
360
|
+
prevElementByClass: typeof prevElementByClass;
|
|
361
|
+
prevElement: typeof prevElement;
|
|
362
|
+
nextElement: typeof nextElement;
|
|
363
|
+
addClass: typeof addClass;
|
|
364
|
+
removeClass: typeof removeClass;
|
|
365
|
+
empty: typeof empty;
|
|
366
|
+
};
|
|
367
|
+
|
|
368
|
+
export { type CssClass, DOM, type ElementData, type ElementOptions, type ElementStyles, type TagChildrenLike, type TagChildrenPrimitive };
|