@brandup/ui-dom 1.0.2 → 1.0.4
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 -173
- package/dist/cjs/index.js.map +1 -1
- package/dist/mjs/index.js +213 -173
- package/dist/mjs/index.js.map +1 -1
- package/dist/types.d.ts +42 -19
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -1,196 +1,236 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
static queryElement(parentElement, query) {
|
|
29
|
-
return parentElement.querySelector(query);
|
|
30
|
-
}
|
|
31
|
-
static queryElements(parentElement, query) {
|
|
32
|
-
return parentElement.querySelectorAll(query);
|
|
33
|
-
}
|
|
34
|
-
static nextElementByClass(currentElement, className) {
|
|
35
|
-
let n = currentElement.nextSibling;
|
|
36
|
-
while (n) {
|
|
37
|
-
if (n.nodeType === 1) {
|
|
38
|
-
if (n.classList.contains(className))
|
|
39
|
-
return n;
|
|
40
|
-
}
|
|
41
|
-
n = n.nextSibling;
|
|
42
|
-
}
|
|
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)
|
|
43
28
|
return null;
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
if (n.classList.contains(className))
|
|
50
|
-
return n;
|
|
51
|
-
}
|
|
52
|
-
n = n.previousSibling;
|
|
53
|
-
}
|
|
29
|
+
return elements.item(0);
|
|
30
|
+
}
|
|
31
|
+
function getByName(name) {
|
|
32
|
+
const elements = document.getElementsByName(name);
|
|
33
|
+
if (elements.length === 0)
|
|
54
34
|
return null;
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
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))
|
|
60
57
|
return n;
|
|
61
|
-
}
|
|
62
|
-
n = n.previousSibling;
|
|
63
58
|
}
|
|
64
|
-
|
|
59
|
+
n = n.nextSibling;
|
|
65
60
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
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))
|
|
70
68
|
return n;
|
|
71
|
-
}
|
|
72
|
-
n = n.nextSibling;
|
|
73
69
|
}
|
|
74
|
-
|
|
70
|
+
n = n.previousSibling;
|
|
75
71
|
}
|
|
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
|
-
|
|
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];
|
|
141
158
|
}
|
|
159
|
+
break;
|
|
142
160
|
}
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
if (
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
const chdElem = chd(elem);
|
|
156
|
-
if (chdElem)
|
|
157
|
-
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];
|
|
158
173
|
}
|
|
159
|
-
|
|
160
|
-
|
|
174
|
+
break;
|
|
175
|
+
}
|
|
176
|
+
case "events": {
|
|
177
|
+
if (value) {
|
|
178
|
+
for (const eventName in value)
|
|
179
|
+
elem.addEventListener(eventName, value[eventName]);
|
|
161
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;
|
|
162
191
|
}
|
|
163
192
|
}
|
|
164
|
-
else if (typeof children === "string") {
|
|
165
|
-
elem.innerHTML = children;
|
|
166
|
-
}
|
|
167
|
-
else if (typeof children === "function") {
|
|
168
|
-
children(elem);
|
|
169
|
-
}
|
|
170
|
-
else
|
|
171
|
-
throw new Error();
|
|
172
193
|
}
|
|
173
|
-
return elem;
|
|
174
194
|
}
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
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}.`);
|
|
179
219
|
}
|
|
180
220
|
}
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
}
|
|
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
|
+
};
|
|
194
234
|
|
|
195
235
|
exports.DOM = DOM;
|
|
196
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,194 +1,234 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
return
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
static queryElement(parentElement, query) {
|
|
27
|
-
return parentElement.querySelector(query);
|
|
28
|
-
}
|
|
29
|
-
static queryElements(parentElement, query) {
|
|
30
|
-
return parentElement.querySelectorAll(query);
|
|
31
|
-
}
|
|
32
|
-
static nextElementByClass(currentElement, className) {
|
|
33
|
-
let n = currentElement.nextSibling;
|
|
34
|
-
while (n) {
|
|
35
|
-
if (n.nodeType === 1) {
|
|
36
|
-
if (n.classList.contains(className))
|
|
37
|
-
return n;
|
|
38
|
-
}
|
|
39
|
-
n = n.nextSibling;
|
|
40
|
-
}
|
|
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)
|
|
41
26
|
return null;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
if (n.classList.contains(className))
|
|
48
|
-
return n;
|
|
49
|
-
}
|
|
50
|
-
n = n.previousSibling;
|
|
51
|
-
}
|
|
27
|
+
return elements.item(0);
|
|
28
|
+
}
|
|
29
|
+
function getByName(name) {
|
|
30
|
+
const elements = document.getElementsByName(name);
|
|
31
|
+
if (elements.length === 0)
|
|
52
32
|
return null;
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
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))
|
|
58
55
|
return n;
|
|
59
|
-
}
|
|
60
|
-
n = n.previousSibling;
|
|
61
56
|
}
|
|
62
|
-
|
|
57
|
+
n = n.nextSibling;
|
|
63
58
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
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))
|
|
68
66
|
return n;
|
|
69
|
-
}
|
|
70
|
-
n = n.nextSibling;
|
|
71
67
|
}
|
|
72
|
-
|
|
68
|
+
n = n.previousSibling;
|
|
73
69
|
}
|
|
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
|
-
|
|
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];
|
|
139
156
|
}
|
|
157
|
+
break;
|
|
140
158
|
}
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
if (
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
const chdElem = chd(elem);
|
|
154
|
-
if (chdElem)
|
|
155
|
-
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];
|
|
156
171
|
}
|
|
157
|
-
|
|
158
|
-
|
|
172
|
+
break;
|
|
173
|
+
}
|
|
174
|
+
case "events": {
|
|
175
|
+
if (value) {
|
|
176
|
+
for (const eventName in value)
|
|
177
|
+
elem.addEventListener(eventName, value[eventName]);
|
|
159
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;
|
|
160
189
|
}
|
|
161
190
|
}
|
|
162
|
-
else if (typeof children === "string") {
|
|
163
|
-
elem.innerHTML = children;
|
|
164
|
-
}
|
|
165
|
-
else if (typeof children === "function") {
|
|
166
|
-
children(elem);
|
|
167
|
-
}
|
|
168
|
-
else
|
|
169
|
-
throw new Error();
|
|
170
191
|
}
|
|
171
|
-
return elem;
|
|
172
192
|
}
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
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}.`);
|
|
177
217
|
}
|
|
178
218
|
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
}
|
|
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
|
+
};
|
|
192
232
|
|
|
193
233
|
export { DOM };
|
|
194
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,25 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
static getElementByName(name: string): HTMLElement | null;
|
|
5
|
-
static getElementByTagName(parentElement: Element, tagName: string): HTMLElement | null;
|
|
6
|
-
static getElementsByTagName(parentElement: Element, tagName: string): HTMLCollectionOf<Element>;
|
|
7
|
-
static queryElement(parentElement: Element, query: string): HTMLElement | null;
|
|
8
|
-
static queryElements(parentElement: Element, query: string): NodeListOf<HTMLElement>;
|
|
9
|
-
static nextElementByClass(currentElement: Element, className: string): HTMLElement | null;
|
|
10
|
-
static prevElementByClass(currentElement: Element, className: string): HTMLElement | null;
|
|
11
|
-
static prevElement(currentElement: Element): HTMLElement | null;
|
|
12
|
-
static nextElement(currentElement: Element): HTMLElement | null;
|
|
13
|
-
static tag(tagName: string, options?: ElementOptions | string | null, children?: ((elem: Element) => void) | Element | string | Array<Element | string | ((parent: Element) => Element)>): HTMLElement;
|
|
14
|
-
static addClass(container: Element, selectors: string, className: string): void;
|
|
15
|
-
static removeClass(container: Element, selectors: string, className: string): void;
|
|
16
|
-
static empty(element: Element): void;
|
|
17
|
-
}
|
|
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[];
|
|
18
4
|
interface ElementOptions {
|
|
19
5
|
id?: string;
|
|
6
|
+
class?: CssClass;
|
|
20
7
|
dataset?: ElementData;
|
|
21
8
|
styles?: ElementStyles;
|
|
22
|
-
class?: string | string[];
|
|
23
9
|
events?: {
|
|
24
10
|
[name: string]: EventListenerOrEventListenerObject;
|
|
25
11
|
};
|
|
@@ -342,4 +328,41 @@ interface ElementStyles {
|
|
|
342
328
|
zIndex?: string;
|
|
343
329
|
}
|
|
344
330
|
|
|
345
|
-
|
|
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 };
|