domelemjs 1.2.3 → 2.0.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-hu.md +284 -0
- package/README.md +286 -182
- package/dist/index.browser.js +2 -0
- package/dist/index.browser.js.map +1 -0
- package/dist/index.cjs +2 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +168 -0
- package/dist/index.d.ts +168 -0
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -0
- package/package.json +63 -52
- package/dist/DOMElem.html +0 -142
- package/dist/createDOMElem.html +0 -95
package/dist/DOMElem.html
DELETED
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>Document</title>
|
|
8
|
-
</head>
|
|
9
|
-
<body>
|
|
10
|
-
<script src="./index.js"></script>
|
|
11
|
-
<script>
|
|
12
|
-
/* használata */
|
|
13
|
-
|
|
14
|
-
let myDOM = {};
|
|
15
|
-
|
|
16
|
-
/* 1. Úgy is haszálhatom, hogy változóba hozom létre, és azt appendolom külön */
|
|
17
|
-
|
|
18
|
-
myDOM.selectControlContainer = DOMElem.Create({
|
|
19
|
-
tag: "div",
|
|
20
|
-
attrs: { class: "első próbálkozás" },
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
document.body.appendChild(myDOM.selectControlContainer);
|
|
24
|
-
|
|
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
|
-
|
|
27
|
-
function generateOption(options) {
|
|
28
|
-
return options.map((option) =>
|
|
29
|
-
DOMElem.Create({
|
|
30
|
-
tag: "option",
|
|
31
|
-
text: option,
|
|
32
|
-
})
|
|
33
|
-
);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
let animals = ["Maci", "Nyuszi", "Cica", "Kutya"];
|
|
37
|
-
let animalOption = generateOption(animals);
|
|
38
|
-
|
|
39
|
-
myDOM.selectControl = DOMElem.Create({
|
|
40
|
-
tag: "label",
|
|
41
|
-
text: "állatkák:",
|
|
42
|
-
attrs: { for: "selectControl" },
|
|
43
|
-
parent: myDOM.selectControlContainer,
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
myDOM.selectControl = DOMElem.Create({
|
|
47
|
-
tag: "select",
|
|
48
|
-
attrs: { id: "selectControl" },
|
|
49
|
-
style: { color: "red" },
|
|
50
|
-
parent: myDOM.selectControlContainer,
|
|
51
|
-
children: animalOption,
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
/* 3. Úgy is haszálhatom, hogy egyből appendolom és azt változónak adom */
|
|
55
|
-
|
|
56
|
-
let plants = ["Fenyő", "Juhar", "Cédrus", "Mahagóni"];
|
|
57
|
-
|
|
58
|
-
myDOM.selectControl = myDOM.selectControl.appendChild(
|
|
59
|
-
DOMElem.Create({
|
|
60
|
-
tag: "label",
|
|
61
|
-
text: "fák:",
|
|
62
|
-
attrs: { for: "selectControl" },
|
|
63
|
-
parent: myDOM.selectControlContainer,
|
|
64
|
-
})
|
|
65
|
-
);
|
|
66
|
-
myDOM.selectControl = myDOM.selectControl.appendChild(
|
|
67
|
-
DOMElem.Create({
|
|
68
|
-
tag: "select",
|
|
69
|
-
attrs: { id: "selectControl" },
|
|
70
|
-
parent: myDOM.selectControlContainer,
|
|
71
|
-
children: generateOption(plants),
|
|
72
|
-
})
|
|
73
|
-
);
|
|
74
|
-
|
|
75
|
-
/* Példa egy komplexebb struktúra előállítására */
|
|
76
|
-
|
|
77
|
-
myDOM.dateFilterContainer = document.body.appendChild(
|
|
78
|
-
DOMElem.Create({
|
|
79
|
-
tag: "div",
|
|
80
|
-
attrs: { class: "dateFilter-Container", id: "dateFilter-Container" },
|
|
81
|
-
children: [
|
|
82
|
-
DOMElem.Create({
|
|
83
|
-
tag: "div",
|
|
84
|
-
attrs: {
|
|
85
|
-
class: "beginDate-container",
|
|
86
|
-
id: "beginDate-container",
|
|
87
|
-
},
|
|
88
|
-
children: [
|
|
89
|
-
DOMElem.Create({
|
|
90
|
-
tag: "label",
|
|
91
|
-
attrs: {
|
|
92
|
-
class: "beginDate-lable",
|
|
93
|
-
},
|
|
94
|
-
text: "Kezdő dátum: ",
|
|
95
|
-
}),
|
|
96
|
-
DOMElem.Create({
|
|
97
|
-
tag: "input",
|
|
98
|
-
attrs: {
|
|
99
|
-
type: "date",
|
|
100
|
-
class: "beginDate",
|
|
101
|
-
id: "beginDate",
|
|
102
|
-
},
|
|
103
|
-
eventStarter: "change",
|
|
104
|
-
eventFunction: function (e) {
|
|
105
|
-
e.preventDefault();
|
|
106
|
-
console.log(this.value);
|
|
107
|
-
},
|
|
108
|
-
}),
|
|
109
|
-
],
|
|
110
|
-
}),
|
|
111
|
-
DOMElem.Create({
|
|
112
|
-
tag: "div",
|
|
113
|
-
attrs: { class: "endDate-container", id: "endDate-container" },
|
|
114
|
-
children: [
|
|
115
|
-
DOMElem.Create({
|
|
116
|
-
tag: "label",
|
|
117
|
-
attrs: {
|
|
118
|
-
class: "endDate-lable",
|
|
119
|
-
},
|
|
120
|
-
text: "Befejező dátum: ",
|
|
121
|
-
}),
|
|
122
|
-
DOMElem.Create({
|
|
123
|
-
tag: "input",
|
|
124
|
-
attrs: {
|
|
125
|
-
type: "date",
|
|
126
|
-
class: "endDate",
|
|
127
|
-
id: "endDate",
|
|
128
|
-
},
|
|
129
|
-
eventStarter: "change",
|
|
130
|
-
eventFunction: function (e) {
|
|
131
|
-
e.preventDefault();
|
|
132
|
-
console.log(this.value);
|
|
133
|
-
},
|
|
134
|
-
}),
|
|
135
|
-
],
|
|
136
|
-
}),
|
|
137
|
-
],
|
|
138
|
-
})
|
|
139
|
-
);
|
|
140
|
-
</script>
|
|
141
|
-
</body>
|
|
142
|
-
</html>
|
package/dist/createDOMElem.html
DELETED
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>Document</title>
|
|
8
|
-
</head>
|
|
9
|
-
<body>
|
|
10
|
-
<script src="./index.js"></script>
|
|
11
|
-
<script>
|
|
12
|
-
const app = createDOMElem({
|
|
13
|
-
tag: "div",
|
|
14
|
-
attrs: { id: "app" },
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
/* styling is easy */
|
|
18
|
-
createDOMElem({
|
|
19
|
-
tag: h1,
|
|
20
|
-
text: "Hello World!",
|
|
21
|
-
parent: app,
|
|
22
|
-
style: "color: red; background-color: green",
|
|
23
|
-
attrs: {
|
|
24
|
-
id: "title1",
|
|
25
|
-
class: "áéőúóüűöí/*-",
|
|
26
|
-
dataset: { text: "redText" },
|
|
27
|
-
},
|
|
28
|
-
});
|
|
29
|
-
createDOMElem({
|
|
30
|
-
tag: h2,
|
|
31
|
-
text: "It's amazing",
|
|
32
|
-
parent: app,
|
|
33
|
-
style: { color: "red", backgroundColor: "pink" },
|
|
34
|
-
attrs: [
|
|
35
|
-
{
|
|
36
|
-
id: "title2",
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
dataset: [{ text: "redText" }, { bg: "greenBG" }],
|
|
40
|
-
},
|
|
41
|
-
],
|
|
42
|
-
});
|
|
43
|
-
createDOMElem({
|
|
44
|
-
tag: h3,
|
|
45
|
-
text: "I can write style as I want to",
|
|
46
|
-
parent: app,
|
|
47
|
-
style: ["color: red", "background-color: blue"],
|
|
48
|
-
attrs: { id: "title3" },
|
|
49
|
-
});
|
|
50
|
-
createDOMElem({
|
|
51
|
-
tag: h4,
|
|
52
|
-
text: "Awesome",
|
|
53
|
-
parent: app,
|
|
54
|
-
style: [{ color: "red" }, { backgroundColor: "green" }],
|
|
55
|
-
attrs: { id: "title4" },
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
/* creating a select with 2 options and eventHandler */
|
|
59
|
-
const selector = createDOMElem({
|
|
60
|
-
tag: select,
|
|
61
|
-
parent: app,
|
|
62
|
-
attrs: { id: "selector" },
|
|
63
|
-
children: [
|
|
64
|
-
{
|
|
65
|
-
tag: option,
|
|
66
|
-
text: "foo",
|
|
67
|
-
attrs: { value: "foo" },
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
tag: option,
|
|
71
|
-
text: "bar",
|
|
72
|
-
attrs: { value: "bar" },
|
|
73
|
-
},
|
|
74
|
-
],
|
|
75
|
-
handleEvent: {
|
|
76
|
-
event: "change",
|
|
77
|
-
cb: (e) => console.log(e.target.value),
|
|
78
|
-
},
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
DOMElem.Create({
|
|
82
|
-
tag: div,
|
|
83
|
-
parent: app,
|
|
84
|
-
children: [
|
|
85
|
-
DOMElem.Create({
|
|
86
|
-
tag: label,
|
|
87
|
-
content: "Write Something",
|
|
88
|
-
attrs: { for: "inputText" },
|
|
89
|
-
}),
|
|
90
|
-
DOMElem.Create({ tag: "input", attrs: { id: "inputText" } }),
|
|
91
|
-
],
|
|
92
|
-
});
|
|
93
|
-
</script>
|
|
94
|
-
</body>
|
|
95
|
-
</html>
|