domelemjs 1.1.0 → 1.1.1
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/README.md +2 -2
- package/index.js +87 -159
- package/index.min.js +1 -1
- package/index.min.js.map +51 -60
- package/package.json +1 -1
- package/test/DOMElem.html +23 -26
package/README.md
CHANGED
package/index.js
CHANGED
|
@@ -1,121 +1,3 @@
|
|
|
1
|
-
const noSpecChars = (text, lowercase = false) => {
|
|
2
|
-
function replaceAll(string, search, replace) {
|
|
3
|
-
return string.split(search).join(replace);
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
let specialChars = {
|
|
7
|
-
é: "e",
|
|
8
|
-
á: "a",
|
|
9
|
-
ó: "o",
|
|
10
|
-
ö: "o",
|
|
11
|
-
ő: "o",
|
|
12
|
-
ú: "u",
|
|
13
|
-
ü: "u",
|
|
14
|
-
ű: "u",
|
|
15
|
-
í: "i",
|
|
16
|
-
É: "E",
|
|
17
|
-
Á: "A",
|
|
18
|
-
Ó: "O",
|
|
19
|
-
Ö: "O",
|
|
20
|
-
Ő: "O",
|
|
21
|
-
Ú: "U",
|
|
22
|
-
Ü: "U",
|
|
23
|
-
Ű: "U",
|
|
24
|
-
Í: "I",
|
|
25
|
-
" ": "-",
|
|
26
|
-
"/": "-",
|
|
27
|
-
":": "-",
|
|
28
|
-
";": "-",
|
|
29
|
-
"=": "-",
|
|
30
|
-
};
|
|
31
|
-
for (let char in specialChars) {
|
|
32
|
-
text = replaceAll(text, char, specialChars[char]);
|
|
33
|
-
}
|
|
34
|
-
return lowercase ? text.toLowerCase() : text;
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
const DOMElem = {
|
|
38
|
-
Create: function (parameters) {
|
|
39
|
-
let tag = parameters.tag || "div";
|
|
40
|
-
let attrs = parameters.attrs || {};
|
|
41
|
-
let children = parameters.children || [];
|
|
42
|
-
let eventStarter = parameters.eventStarter || null;
|
|
43
|
-
let eventFunction = parameters.eventFunction || null;
|
|
44
|
-
let content = parameters.content || null;
|
|
45
|
-
let text = parameters.text || null;
|
|
46
|
-
let style = parameters.style || null;
|
|
47
|
-
|
|
48
|
-
let targetParent =
|
|
49
|
-
typeof parameters.targetParent == "string"
|
|
50
|
-
? document.getElementById(parameters.targetParent) ||
|
|
51
|
-
document.querySelector(parameters.targetParent)
|
|
52
|
-
: typeof parameters.targetParent == "object"
|
|
53
|
-
? parameters.targetParent
|
|
54
|
-
: null;
|
|
55
|
-
|
|
56
|
-
let elem = document.createElement(tag);
|
|
57
|
-
|
|
58
|
-
if (content) elem.innerHTML = content;
|
|
59
|
-
if (text) elem.textContent = text;
|
|
60
|
-
|
|
61
|
-
for (let attr in attrs) {
|
|
62
|
-
elem.setAttribute(
|
|
63
|
-
attr,
|
|
64
|
-
attr == "class" || attr == "id" ? noSpecChars(attrs[attr]) : attrs[attr]
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
/*
|
|
69
|
-
* Adding stye is possible as:
|
|
70
|
-
* * a string, with a bunch of style properties, it can be:
|
|
71
|
-
* * * CCS style (e.g. background-color) or
|
|
72
|
-
* * * JS/camelCase (e.g. backgroundColor) style formatted version also.
|
|
73
|
-
* * or an object formatted (e.g. style: { backgroundColor: red })
|
|
74
|
-
* * or an array with multiple style strings with CSS or JS vesrion, or mixed
|
|
75
|
-
*/
|
|
76
|
-
|
|
77
|
-
if (style) {
|
|
78
|
-
let styleText;
|
|
79
|
-
if (typeof style === "string") {
|
|
80
|
-
styleText = style;
|
|
81
|
-
} else if (Array.isArray(style)) {
|
|
82
|
-
styleText = style.join("; ");
|
|
83
|
-
} else if (typeof style === "object") {
|
|
84
|
-
styleText = [];
|
|
85
|
-
for (let s in style) {
|
|
86
|
-
styleText.push(`${s}: ${style[s]}`);
|
|
87
|
-
}
|
|
88
|
-
styleText = styleText.join("; ");
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
styleText.split(";").forEach((styleText) => {
|
|
92
|
-
let [s, p] = styleText.split(":").map((c) => c.trim());
|
|
93
|
-
s = s
|
|
94
|
-
.split("-")
|
|
95
|
-
.map((ss, i) => {
|
|
96
|
-
return i > 0 ? ss.charAt(0).toUpperCase() + ss.slice(1) : ss;
|
|
97
|
-
})
|
|
98
|
-
.join("");
|
|
99
|
-
elem.style[s] = p;
|
|
100
|
-
});
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
children.map((child) => {
|
|
104
|
-
typeof child != "object"
|
|
105
|
-
? (child = document.createTextNode(child))
|
|
106
|
-
: null;
|
|
107
|
-
elem.appendChild(child);
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
if (eventStarter && eventFunction)
|
|
111
|
-
elem.addEventListener(eventStarter, eventFunction);
|
|
112
|
-
|
|
113
|
-
if (targetParent) targetParent.appendChild(elem);
|
|
114
|
-
|
|
115
|
-
return elem;
|
|
116
|
-
},
|
|
117
|
-
};
|
|
118
|
-
|
|
119
1
|
const createDOMElem = ({
|
|
120
2
|
tag,
|
|
121
3
|
content,
|
|
@@ -140,36 +22,29 @@ const createDOMElem = ({
|
|
|
140
22
|
*/
|
|
141
23
|
text && (elem.textContent = text);
|
|
142
24
|
|
|
143
|
-
function makeThatArray(arr) {
|
|
144
|
-
if (Array.isArray(arr)) {
|
|
145
|
-
return arr;
|
|
146
|
-
} else {
|
|
147
|
-
return [arr];
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
|
|
151
25
|
/*
|
|
152
26
|
* add all the attributes they want
|
|
153
27
|
*/
|
|
154
28
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
29
|
+
attrs &&
|
|
30
|
+
Object.keys(attrs).forEach((attr) => {
|
|
31
|
+
if (attr === "checked") {
|
|
32
|
+
elem.checked = attrs[attr];
|
|
33
|
+
} else if (attr === "dataset") {
|
|
34
|
+
makeThatArray(attrs[attr]).map((data) =>
|
|
35
|
+
Object.keys(data).forEach((d) => (elem.dataset[d] = data[d]))
|
|
36
|
+
);
|
|
37
|
+
} else if (attr === "class" || attr === "id") {
|
|
38
|
+
elem.setAttribute(
|
|
39
|
+
attr,
|
|
40
|
+
makeThatArray(attrs[attr])
|
|
41
|
+
.map((a) => noSpecChars(a))
|
|
42
|
+
.join(" ")
|
|
43
|
+
);
|
|
44
|
+
} else {
|
|
45
|
+
elem.setAttribute(attr, makeThatArray(attrs[attr]).join(" "));
|
|
46
|
+
}
|
|
47
|
+
});
|
|
173
48
|
|
|
174
49
|
/*
|
|
175
50
|
* Adding stye is possible as:
|
|
@@ -180,16 +55,7 @@ const createDOMElem = ({
|
|
|
180
55
|
* * or an array with multiple style strings with CSS or JS vesrion, or mixed
|
|
181
56
|
*/
|
|
182
57
|
|
|
183
|
-
|
|
184
|
-
return s
|
|
185
|
-
.split("-")
|
|
186
|
-
.map((ss, i) => {
|
|
187
|
-
return i > 0 ? ss.charAt(0).toUpperCase() + ss.slice(1) : ss;
|
|
188
|
-
})
|
|
189
|
-
.join("");
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
if (style) {
|
|
58
|
+
style &&
|
|
193
59
|
makeThatArray(style)
|
|
194
60
|
.map((styleElem) => {
|
|
195
61
|
if (typeof styleElem === "object") {
|
|
@@ -206,15 +72,13 @@ const createDOMElem = ({
|
|
|
206
72
|
let [styleTxt, val] = styleTxts.split(":").map((c) => c.trim());
|
|
207
73
|
elem.style[makeCamelCase(styleTxt)] = val;
|
|
208
74
|
});
|
|
209
|
-
}
|
|
210
75
|
|
|
211
|
-
|
|
76
|
+
children &&
|
|
212
77
|
makeThatArray(children).map((child) => {
|
|
213
78
|
let childElem = child;
|
|
214
79
|
if (typeof child === "object") childElem = createDOMElem(child);
|
|
215
80
|
elem.appendChild(childElem);
|
|
216
81
|
});
|
|
217
|
-
}
|
|
218
82
|
|
|
219
83
|
/*
|
|
220
84
|
* Add the eventListener or more eventListeners it hey comes in array
|
|
@@ -222,11 +86,10 @@ const createDOMElem = ({
|
|
|
222
86
|
* event, what will fire the event?
|
|
223
87
|
* and a cb, that is the callback function
|
|
224
88
|
*/
|
|
225
|
-
|
|
89
|
+
handleEvent &&
|
|
226
90
|
makeThatArray(handleEvent).forEach((newEvent) => {
|
|
227
91
|
elem.addEventListener(newEvent.event, newEvent.cb);
|
|
228
92
|
});
|
|
229
|
-
}
|
|
230
93
|
|
|
231
94
|
/*
|
|
232
95
|
* Append the created elem to the parent what is given, or add to the body of the Document if not given.
|
|
@@ -256,3 +119,68 @@ const createDOMElem = ({
|
|
|
256
119
|
*/
|
|
257
120
|
return elem;
|
|
258
121
|
};
|
|
122
|
+
|
|
123
|
+
/* object caller of the funcion */
|
|
124
|
+
const DOMElem = {
|
|
125
|
+
Create: createDOMElem,
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
/******************/
|
|
129
|
+
/* HELPER METHODS */
|
|
130
|
+
/******************/
|
|
131
|
+
|
|
132
|
+
/* removing special chars form a string */
|
|
133
|
+
const noSpecChars = (text, lowercase = false) => {
|
|
134
|
+
function replaceAll(string, search, replace) {
|
|
135
|
+
return string.split(search).join(replace);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
let specialChars = {
|
|
139
|
+
é: "e",
|
|
140
|
+
á: "a",
|
|
141
|
+
ó: "o",
|
|
142
|
+
ö: "o",
|
|
143
|
+
ő: "o",
|
|
144
|
+
ú: "u",
|
|
145
|
+
ü: "u",
|
|
146
|
+
ű: "u",
|
|
147
|
+
í: "i",
|
|
148
|
+
É: "E",
|
|
149
|
+
Á: "A",
|
|
150
|
+
Ó: "O",
|
|
151
|
+
Ö: "O",
|
|
152
|
+
Ő: "O",
|
|
153
|
+
Ú: "U",
|
|
154
|
+
Ü: "U",
|
|
155
|
+
Ű: "U",
|
|
156
|
+
Í: "I",
|
|
157
|
+
" ": "-",
|
|
158
|
+
"/": "-",
|
|
159
|
+
":": "-",
|
|
160
|
+
";": "-",
|
|
161
|
+
"=": "-",
|
|
162
|
+
};
|
|
163
|
+
for (let char in specialChars) {
|
|
164
|
+
text = replaceAll(text, char, specialChars[char]);
|
|
165
|
+
}
|
|
166
|
+
return lowercase ? text.toLowerCase() : text;
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
/* check is it is array do nothing, if not maki it array */
|
|
170
|
+
const makeThatArray = (arr) => {
|
|
171
|
+
if (Array.isArray(arr)) {
|
|
172
|
+
return arr;
|
|
173
|
+
} else {
|
|
174
|
+
return [arr];
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
/* removing the "-" symbol form the string adn makind the afterward word to uppercase, that is named as camelCase */
|
|
179
|
+
function makeCamelCase(s) {
|
|
180
|
+
return s
|
|
181
|
+
.split("-")
|
|
182
|
+
.map((ss, i) => {
|
|
183
|
+
return i > 0 ? ss.charAt(0).toUpperCase() + ss.slice(1) : ss;
|
|
184
|
+
})
|
|
185
|
+
.join("");
|
|
186
|
+
}
|
package/index.min.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const
|
|
1
|
+
const createDOMElem=({tag:tag,content:content,text:text,attrs:attrs,style:style,children:children,parent:parent,handleEvent:handleEvent})=>{let elem=document.createElement(tag);return content&&(elem.innerHTML=content),text&&(elem.textContent=text),attrs&&Object.keys(attrs).forEach(attr=>{"checked"===attr?elem.checked=attrs[attr]:"dataset"===attr?makeThatArray(attrs[attr]).map(data=>Object.keys(data).forEach(d=>elem.dataset[d]=data[d])):"class"===attr||"id"===attr?elem.setAttribute(attr,makeThatArray(attrs[attr]).map(a=>noSpecChars(a)).join(" ")):elem.setAttribute(attr,makeThatArray(attrs[attr]).join(" "))}),style&&makeThatArray(style).map(styleElem=>"object"==typeof styleElem?Object.keys(styleElem).map(styleTxt=>`${styleTxt}: ${styleElem[styleTxt]}`).join("; "):makeThatArray(styleElem).join("; ")).join("; ").split(";").forEach(styleTxts=>{let[styleTxt,val]=styleTxts.split(":").map(c=>c.trim());elem.style[makeCamelCase(styleTxt)]=val}),children&&makeThatArray(children).map(child=>{let childElem=child;"object"==typeof child&&(childElem=createDOMElem(child)),elem.appendChild(childElem)}),handleEvent&&makeThatArray(handleEvent).forEach(newEvent=>{elem.addEventListener(newEvent.event,newEvent.cb)}),parent?"string"==typeof parent&&(parent=[".","#"].map(prep=>document.querySelector(prep+parent)).filter(pe=>null!==pe)[0]):parent=document.querySelector("body"),parent.appendChild(elem),elem},DOMElem={Create:createDOMElem},noSpecChars=(text,lowercase=!1)=>{function replaceAll(string,search,replace){return string.split(search).join(replace)}let specialChars={"é":"e","á":"a","ó":"o","ö":"o","ő":"o","ú":"u","ü":"u","ű":"u","í":"i","É":"E","Á":"A","Ó":"O","Ö":"O","Ő":"O","Ú":"U","Ü":"U","Ű":"U","Í":"I"," ":"-","/":"-",":":"-",";":"-","=":"-"};for(let char in specialChars)text=replaceAll(text,char,specialChars[char]);return lowercase?text.toLowerCase():text},makeThatArray=arr=>Array.isArray(arr)?arr:[arr];function makeCamelCase(s){return s.split("-").map((ss,i)=>i>0?ss.charAt(0).toUpperCase()+ss.slice(1):ss).join("")}
|
|
2
2
|
//# sourceMappingURL=index.min.js.map
|
package/index.min.js.map
CHANGED
|
@@ -4,15 +4,60 @@
|
|
|
4
4
|
"index.js"
|
|
5
5
|
],
|
|
6
6
|
"names": [
|
|
7
|
-
"
|
|
7
|
+
"createDOMElem",
|
|
8
|
+
"tag",
|
|
9
|
+
"content",
|
|
8
10
|
"text",
|
|
11
|
+
"attrs",
|
|
12
|
+
"style",
|
|
13
|
+
"children",
|
|
14
|
+
"parent",
|
|
15
|
+
"handleEvent",
|
|
16
|
+
"elem",
|
|
17
|
+
"document",
|
|
18
|
+
"createElement",
|
|
19
|
+
"innerHTML",
|
|
20
|
+
"textContent",
|
|
21
|
+
"Object",
|
|
22
|
+
"keys",
|
|
23
|
+
"forEach",
|
|
24
|
+
"attr",
|
|
25
|
+
"checked",
|
|
26
|
+
"makeThatArray",
|
|
27
|
+
"map",
|
|
28
|
+
"data",
|
|
29
|
+
"d",
|
|
30
|
+
"dataset",
|
|
31
|
+
"setAttribute",
|
|
32
|
+
"a",
|
|
33
|
+
"noSpecChars",
|
|
34
|
+
"join",
|
|
35
|
+
"styleElem",
|
|
36
|
+
"styleTxt",
|
|
37
|
+
"split",
|
|
38
|
+
"styleTxts",
|
|
39
|
+
"val",
|
|
40
|
+
"c",
|
|
41
|
+
"trim",
|
|
42
|
+
"makeCamelCase",
|
|
43
|
+
"child",
|
|
44
|
+
"childElem",
|
|
45
|
+
"appendChild",
|
|
46
|
+
"newEvent",
|
|
47
|
+
"addEventListener",
|
|
48
|
+
"event",
|
|
49
|
+
"cb",
|
|
50
|
+
"prep",
|
|
51
|
+
"querySelector",
|
|
52
|
+
"filter",
|
|
53
|
+
"pe",
|
|
54
|
+
"DOMElem",
|
|
55
|
+
"Create",
|
|
9
56
|
"lowercase",
|
|
10
57
|
"replaceAll",
|
|
11
58
|
"string",
|
|
12
59
|
"search",
|
|
13
60
|
"replace",
|
|
14
|
-
"split",
|
|
15
|
-
"join",
|
|
16
61
|
"specialChars",
|
|
17
62
|
"é",
|
|
18
63
|
"á",
|
|
@@ -39,70 +84,16 @@
|
|
|
39
84
|
"=",
|
|
40
85
|
"char",
|
|
41
86
|
"toLowerCase",
|
|
42
|
-
"
|
|
43
|
-
"Create",
|
|
44
|
-
"parameters",
|
|
45
|
-
"tag",
|
|
46
|
-
"attrs",
|
|
47
|
-
"children",
|
|
48
|
-
"eventStarter",
|
|
49
|
-
"eventFunction",
|
|
50
|
-
"content",
|
|
51
|
-
"style",
|
|
52
|
-
"targetParent",
|
|
53
|
-
"document",
|
|
54
|
-
"getElementById",
|
|
55
|
-
"querySelector",
|
|
56
|
-
"elem",
|
|
57
|
-
"createElement",
|
|
58
|
-
"innerHTML",
|
|
59
|
-
"textContent",
|
|
60
|
-
"attr",
|
|
61
|
-
"setAttribute",
|
|
62
|
-
"styleText",
|
|
87
|
+
"arr",
|
|
63
88
|
"Array",
|
|
64
89
|
"isArray",
|
|
65
90
|
"s",
|
|
66
|
-
"push",
|
|
67
|
-
"forEach",
|
|
68
|
-
"p",
|
|
69
|
-
"map",
|
|
70
|
-
"c",
|
|
71
|
-
"trim",
|
|
72
91
|
"ss",
|
|
73
92
|
"i",
|
|
74
93
|
"charAt",
|
|
75
94
|
"toUpperCase",
|
|
76
|
-
"slice"
|
|
77
|
-
"child",
|
|
78
|
-
"createTextNode",
|
|
79
|
-
"appendChild",
|
|
80
|
-
"addEventListener",
|
|
81
|
-
"createDOMElem",
|
|
82
|
-
"parent",
|
|
83
|
-
"handleEvent",
|
|
84
|
-
"makeThatArray",
|
|
85
|
-
"arr",
|
|
86
|
-
"makeCamelCase",
|
|
87
|
-
"Object",
|
|
88
|
-
"keys",
|
|
89
|
-
"checked",
|
|
90
|
-
"data",
|
|
91
|
-
"d",
|
|
92
|
-
"dataset",
|
|
93
|
-
"a",
|
|
94
|
-
"styleElem",
|
|
95
|
-
"styleTxt",
|
|
96
|
-
"styleTxts",
|
|
97
|
-
"val",
|
|
98
|
-
"childElem",
|
|
99
|
-
"newEvent",
|
|
100
|
-
"event",
|
|
101
|
-
"cb",
|
|
102
|
-
"prep",
|
|
103
|
-
"filter",
|
|
104
|
-
"pe"
|
|
95
|
+
"slice"
|
|
105
96
|
],
|
|
106
|
-
"mappings": "AAAA,MAAMA,
|
|
97
|
+
"mappings": "AAAA,MAAMA,cAAgB,EACpBC,IAAAA,IACAC,QAAAA,QACAC,KAAAA,KACAC,MAAAA,MACAC,MAAAA,MACAC,SAAAA,SACAC,OAAAA,OACAC,YAAAA,gBAKA,IAAIC,KAAOC,SAASC,cAAcV,KA0GlC,OArGAC,UAAYO,KAAKG,UAAYV,SAI7BC,OAASM,KAAKI,YAAcV,MAM5BC,OACEU,OAAOC,KAAKX,OAAOY,QAASC,OACb,YAATA,KACFR,KAAKS,QAAUd,MAAMa,MACH,YAATA,KACTE,cAAcf,MAAMa,OAAOG,IAAKC,MAC9BP,OAAOC,KAAKM,MAAML,QAASM,GAAOb,KAAKc,QAAQD,GAAKD,KAAKC,KAEzC,UAATL,MAA6B,OAATA,KAC7BR,KAAKe,aACHP,KACAE,cAAcf,MAAMa,OACjBG,IAAKK,GAAMC,YAAYD,IACvBE,KAAK,MAGVlB,KAAKe,aAAaP,KAAME,cAAcf,MAAMa,OAAOU,KAAK,QAa9DtB,OACEc,cAAcd,OACXe,IAAKQ,WACqB,iBAAdA,UACFd,OAAOC,KAAKa,WAChBR,IAAKS,UAAa,GAAGA,aAAaD,UAAUC,aAC5CF,KAAK,MAEDR,cAAcS,WAAWD,KAAK,OAGxCA,KAAK,MACLG,MAAM,KACNd,QAASe,YACR,IAAKF,SAAUG,KAAOD,UAAUD,MAAM,KAAKV,IAAKa,GAAMA,EAAEC,QACxDzB,KAAKJ,MAAM8B,cAAcN,WAAaG,MAG5C1B,UACEa,cAAcb,UAAUc,IAAKgB,QAC3B,IAAIC,UAAYD,MACK,iBAAVA,QAAoBC,UAAYrC,cAAcoC,QACzD3B,KAAK6B,YAAYD,aASrB7B,aACEW,cAAcX,aAAaQ,QAASuB,WAClC9B,KAAK+B,iBAAiBD,SAASE,MAAOF,SAASG,MAY/CnC,OACoB,iBAAXA,SACTA,OAAS,CAAC,IAAK,KACZa,IAAKuB,MACGjC,SAASkC,cAAcD,KAAOpC,SAEtCsC,OAAQC,IACO,OAAPA,IACN,IAEFvC,OAASG,SAASkC,cAAc,QAEvCrC,OAAO+B,YAAY7B,MAKZA,MAIHsC,QAAU,CACdC,OAAQhD,eAQJ0B,YAAc,CAACvB,KAAM8C,WAAY,KACrC,SAASC,WAAWC,OAAQC,OAAQC,SAClC,OAAOF,OAAOrB,MAAMsB,QAAQzB,KAAK0B,SAGnC,IAAIC,aAAe,CACjBC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAK,IACLC,IAAK,IACLC,IAAK,IACLC,IAAK,IACLC,IAAK,KAEP,IAAK,IAAIC,QAAQxB,aACfnD,KAAO+C,WAAW/C,KAAM2E,KAAMxB,aAAawB,OAE7C,OAAO7B,UAAY9C,KAAK4E,cAAgB5E,MAIpCgB,cAAiB6D,KACjBC,MAAMC,QAAQF,KACTA,IAEA,CAACA,KAKZ,SAAS7C,cAAcgD,GACrB,OAAOA,EACJrD,MAAM,KACNV,IAAI,CAACgE,GAAIC,IACDA,EAAI,EAAID,GAAGE,OAAO,GAAGC,cAAgBH,GAAGI,MAAM,GAAKJ,IAE3DzD,KAAK",
|
|
107
98
|
"file": "index.js"
|
|
108
99
|
}
|
package/package.json
CHANGED
package/test/DOMElem.html
CHANGED
|
@@ -25,53 +25,50 @@
|
|
|
25
25
|
/* 2. Úgy is használhatom, hogy a szülőelemet már az Elem létrehozásakor megadom neki, és akkor befűzi oda. */
|
|
26
26
|
|
|
27
27
|
function generateOption(options) {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
let optionElem = DOMElem.Create({
|
|
28
|
+
return options.map((option) =>
|
|
29
|
+
DOMElem.Create({
|
|
31
30
|
tag: "option",
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
optionElems.push(optionElem);
|
|
36
|
-
});
|
|
37
|
-
return optionElems;
|
|
31
|
+
text: option,
|
|
32
|
+
})
|
|
33
|
+
);
|
|
38
34
|
}
|
|
39
35
|
|
|
40
36
|
let animals = ["Maci", "Nyuszi", "Cica", "Kutya"];
|
|
41
37
|
let animalOption = generateOption(animals);
|
|
42
38
|
|
|
39
|
+
myDOM.selectControl = DOMElem.Create({
|
|
40
|
+
tag: "label",
|
|
41
|
+
text: "állatkák:",
|
|
42
|
+
attrs: { for: "selectControl" },
|
|
43
|
+
parent: myDOM.selectControlContainer,
|
|
44
|
+
});
|
|
45
|
+
|
|
43
46
|
myDOM.selectControl = DOMElem.Create({
|
|
44
47
|
tag: "select",
|
|
45
48
|
attrs: { id: "selectControl" },
|
|
46
49
|
style: { color: "red" },
|
|
47
|
-
|
|
50
|
+
parent: myDOM.selectControlContainer,
|
|
48
51
|
children: animalOption,
|
|
49
52
|
});
|
|
50
53
|
|
|
51
|
-
myDOM.selectControl = DOMElem.Create({
|
|
52
|
-
tag: "label",
|
|
53
|
-
attrs: { for: "selectControl" },
|
|
54
|
-
targetParent: myDOM.selectControlContainer,
|
|
55
|
-
});
|
|
56
|
-
|
|
57
54
|
/* 3. Úgy is haszálhatom, hogy egyből appendolom és azt változónak adom */
|
|
58
55
|
|
|
59
56
|
let plants = ["Fenyő", "Juhar", "Cédrus", "Mahagóni"];
|
|
60
57
|
|
|
61
58
|
myDOM.selectControl = myDOM.selectControl.appendChild(
|
|
62
59
|
DOMElem.Create({
|
|
63
|
-
tag: "
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
60
|
+
tag: "label",
|
|
61
|
+
text: "fák:",
|
|
62
|
+
attrs: { for: "selectControl" },
|
|
63
|
+
parent: myDOM.selectControlContainer,
|
|
67
64
|
})
|
|
68
65
|
);
|
|
69
|
-
|
|
70
66
|
myDOM.selectControl = myDOM.selectControl.appendChild(
|
|
71
67
|
DOMElem.Create({
|
|
72
|
-
tag: "
|
|
73
|
-
attrs: {
|
|
74
|
-
|
|
68
|
+
tag: "select",
|
|
69
|
+
attrs: { id: "selectControl" },
|
|
70
|
+
parent: myDOM.selectControlContainer,
|
|
71
|
+
children: generateOption(plants),
|
|
75
72
|
})
|
|
76
73
|
);
|
|
77
74
|
|
|
@@ -94,7 +91,7 @@
|
|
|
94
91
|
attrs: {
|
|
95
92
|
class: "beginDate-lable",
|
|
96
93
|
},
|
|
97
|
-
|
|
94
|
+
text: "Kezdő dátum: ",
|
|
98
95
|
}),
|
|
99
96
|
DOMElem.Create({
|
|
100
97
|
tag: "input",
|
|
@@ -120,7 +117,7 @@
|
|
|
120
117
|
attrs: {
|
|
121
118
|
class: "endDate-lable",
|
|
122
119
|
},
|
|
123
|
-
|
|
120
|
+
text: "Befejező dátum: ",
|
|
124
121
|
}),
|
|
125
122
|
DOMElem.Create({
|
|
126
123
|
tag: "input",
|