@duckafire/html.js 0.2.2 → 0.3.0
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 +119 -62
- package/html.js +228 -41
- package/html.min.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,10 +5,11 @@
|
|
|
5
5
|
[event-listeners]: https://www.w3schools.com/js/js_htmldom_eventlistener.asp "DOM Event Listeners"
|
|
6
6
|
[style-property]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style "The HTML `style` property"
|
|
7
7
|
[camel-case]: https://en.wikipedia.org/wiki/Camel_case "Understanding the camelCase"
|
|
8
|
+
[window-api]: https://developer.mozilla.org/en-US/docs/Web/API/Window "Window: API and environment"
|
|
8
9
|
|
|
9
10
|
# html.js
|
|
10
11
|
|
|
11
|
-
This is a web component library
|
|
12
|
+
This is a web component library thought to be:
|
|
12
13
|
|
|
13
14
|
* Light
|
|
14
15
|
* Minimalist
|
|
@@ -24,8 +25,11 @@ This is a web component library, thought to be:
|
|
|
24
25
|
* [Start library](#start-library)
|
|
25
26
|
* [Create an element](#create-an-element)
|
|
26
27
|
* [Closing the element creation](#closing-the-element-creation)
|
|
28
|
+
* [Adding your self tags](#adding-your-self-tags)
|
|
27
29
|
* [Special properties](#special-properties)
|
|
28
|
-
* [
|
|
30
|
+
* [Managing default values to properties](#managing-default-values-to-properties)
|
|
31
|
+
* [Set default values](#set-default-values)
|
|
32
|
+
* [Unset default values](#unset-default-values)
|
|
29
33
|
|
|
30
34
|
## Installing
|
|
31
35
|
|
|
@@ -36,7 +40,7 @@ Just copy and paste this code chunk in your HTML file:
|
|
|
36
40
|
|
|
37
41
|
```
|
|
38
42
|
|
|
39
|
-
> [!TIP]
|
|
43
|
+
> [!TIP] \
|
|
40
44
|
> Put it in the `<head>`.
|
|
41
45
|
|
|
42
46
|
After this, run the JavaScript code below:
|
|
@@ -47,9 +51,12 @@ After this, run the JavaScript code below:
|
|
|
47
51
|
</script>
|
|
48
52
|
```
|
|
49
53
|
|
|
50
|
-
> [!NOTE]
|
|
54
|
+
> [!NOTE] \
|
|
51
55
|
> See more about `declare_htmljs` [here](#start-library).
|
|
52
56
|
|
|
57
|
+
> [!TIP] \
|
|
58
|
+
> Put it after the request tag (presented above), in the `<head>`.
|
|
59
|
+
|
|
53
60
|
## How to use
|
|
54
61
|
|
|
55
62
|
### Start library
|
|
@@ -59,38 +66,37 @@ start the library:
|
|
|
59
66
|
|
|
60
67
|
* `{} declare_htmljs( [prefix: string = ""], [createObject: boolean = false], [useUpperCase: boolean = false] )`
|
|
61
68
|
* `{} declare_htmljs( [ args: object = {[prefix: string = ""], [createObject: boolean = false], [useUpperCase: boolean = false]} ] )`
|
|
62
|
-
* `prefix`: prefixs the name of the
|
|
63
|
-
|
|
64
|
-
* `createObject`: specifics that the methods have to be declared
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
> [!
|
|
71
|
-
>
|
|
72
|
-
>
|
|
73
|
-
|
|
74
|
-
> [!
|
|
69
|
+
* `prefix`: prefixs the name of the *Creation Functions*. They are used to create
|
|
70
|
+
the elements.
|
|
71
|
+
* `createObject`: specifics that the methods have to be declared in a new object,
|
|
72
|
+
that it will be created by the function.
|
|
73
|
+
* `useUpperCase`: specifics that the *Creation Functions* names have to be formated
|
|
74
|
+
with upper case characters, instead lower case characteres.
|
|
75
|
+
* `args`: an object containing the wanted options (these above).
|
|
76
|
+
|
|
77
|
+
> [!IMPORTANT] \
|
|
78
|
+
> Call any *Creation Function* without call this function (probably) will generate an
|
|
79
|
+
> error.
|
|
80
|
+
|
|
81
|
+
> [!NOTE] \
|
|
82
|
+
> If `!createObject` the *Creation Functions* will be declared in
|
|
83
|
+
> [`window`][window-api], that it also will be returned.
|
|
84
|
+
|
|
85
|
+
> [!TIP] \
|
|
75
86
|
> Try `declare_htmljs({useUpperCase: true})` instead `declare_html(null, false, true)`.
|
|
76
87
|
|
|
77
|
-
Call any function, from this library, without call this function (probably) will
|
|
78
|
-
generate an error.
|
|
79
|
-
|
|
80
|
-
> [!NOTE]
|
|
81
|
-
> Originally, the plan was declare them as constants (like `const div = (...`), but
|
|
82
|
-
> it generate one problem: some of these names are too simple (like `a`, `b`, and `q`).
|
|
83
|
-
> It can cause some confusion, then I decided to allow that **you** can decide where
|
|
84
|
-
> these methods have to be declared and how they have to look like.
|
|
85
|
-
|
|
86
88
|
### Create an element
|
|
87
89
|
|
|
88
|
-
To create a HTML element, you need to call its respective
|
|
89
|
-
below:
|
|
90
|
+
To create a HTML element, you need to call its respective *Creation Function* like
|
|
91
|
+
shown below (their names are defined by [`declare_htmljs`][start-library]):
|
|
90
92
|
|
|
91
93
|
``` js
|
|
92
|
-
// create a <div> that it contains
|
|
93
|
-
//
|
|
94
|
+
// create a <div> that it contains:
|
|
95
|
+
// * one text node
|
|
96
|
+
// * one `<br/>`
|
|
97
|
+
// * one `<span>` (that it contains one text node)
|
|
98
|
+
// * one `<input/>`
|
|
99
|
+
|
|
94
100
|
div( {className: "foo"},
|
|
95
101
|
"Lorem ipsum",
|
|
96
102
|
br(),
|
|
@@ -101,69 +107,88 @@ div( {className: "foo"},
|
|
|
101
107
|
div);
|
|
102
108
|
```
|
|
103
109
|
|
|
104
|
-
> [!TIP]
|
|
110
|
+
> [!TIP] \
|
|
105
111
|
> Defining a property as `"~"` makes it equal itself, in other words, `open: "~"` is
|
|
106
112
|
> equal `open: "open"`.
|
|
107
113
|
|
|
108
|
-
All these
|
|
109
|
-
is their names/identifiers, because of this, I will not to list all them here,
|
|
110
|
-
|
|
114
|
+
All these *Creation Functions* have the same parameter structure, the only difference
|
|
115
|
+
it is their names/identifiers, because of this, I will not to list all them here, I will
|
|
116
|
+
only explain their structure (of generic way):
|
|
111
117
|
|
|
112
|
-
* `{}
|
|
118
|
+
* `{} CreationFunction( [htmlProperties: object = undefined, [...children: HTMLElement | string = undefined, [closeTag: any = undefined]]] )`
|
|
113
119
|
* `htmlProperties`: all the HTML properties that will be implemented in the created
|
|
114
120
|
element.
|
|
115
121
|
* `children`: all elements that will be appended in the created element. If it is a
|
|
116
122
|
string, a *text node* will added to the element.
|
|
117
|
-
* `closeTag`: an optional
|
|
123
|
+
* `closeTag`: an optional stuff, to explicit the end of the element creation. I
|
|
118
124
|
recommend that it to be equal the itself function (like the previous
|
|
119
125
|
example). See [this](#closing-the-element-creation) to learn how to
|
|
120
126
|
disable this optional parameter.
|
|
121
127
|
|
|
122
|
-
> [!WARNING]
|
|
128
|
+
> [!WARNING] \
|
|
123
129
|
> Unlike HTML and CSS, the JavaScript syntax do not support the use of the hyphen (`-`)
|
|
124
130
|
> in identifiers name. So *compound properties* only can be declared:
|
|
125
131
|
> * Between single/double quotes: `"padding-top"`; `"background-color"`; `"font-size"`.
|
|
126
132
|
> * In [camelCase][camel-case]: `paddingTop`; `backgroundColor`; `fontSize`.
|
|
127
133
|
|
|
128
|
-
> [!IMPORTANT]
|
|
134
|
+
> [!IMPORTANT] \
|
|
129
135
|
> Deprecated tags are not available.
|
|
130
136
|
|
|
131
|
-
> [!NOTE]
|
|
132
|
-
> See [example.html][example-html] to obtain the list of available *tag-functions*
|
|
133
|
-
> (they are stored in `__htmljs_element_tags__`).
|
|
134
|
-
|
|
135
137
|
### Closing the element creation
|
|
136
138
|
|
|
137
|
-
To disable the parameter `closeTag` of the *
|
|
139
|
+
To disable the parameter `closeTag` of the *Creation Functions* it is necessary call the
|
|
138
140
|
functions below:
|
|
139
141
|
|
|
140
|
-
* `
|
|
141
|
-
* `ignore`: sets if `closeTag` is required by *
|
|
142
|
+
* `void htmljs_set_ignore_last( [ignore: boolean = false] )`
|
|
143
|
+
* `ignore`: sets if `closeTag` is required by *Creation Functions*.
|
|
142
144
|
|
|
143
|
-
> [!NOTE]
|
|
145
|
+
> [!NOTE] \
|
|
144
146
|
> `closeTag` is required by default. Its value is global, it affects all the
|
|
145
|
-
> *
|
|
147
|
+
> *Creation Functions* call that occur after that it is called.
|
|
148
|
+
|
|
149
|
+
> [!TIP] \
|
|
150
|
+
> Run [example.html][example-html] (in your browser) to see how all these to work.
|
|
146
151
|
|
|
147
|
-
|
|
148
|
-
|
|
152
|
+
### Adding your self tags
|
|
153
|
+
|
|
154
|
+
It also is possible to add yourself customized tags to the library, to do this it is
|
|
155
|
+
necessary to use this function:
|
|
156
|
+
|
|
157
|
+
* `void htmljs_add_custom_tag(tag: string | array, [isNoContainer: boolean = false], [force: boolean = false])`
|
|
158
|
+
* `tag`: tag, or list of tags, that will be saved, by the library, as a valid HTML
|
|
159
|
+
tag.
|
|
160
|
+
* `isNoContainer`: specifics if the tag is a *no-container* or not.
|
|
161
|
+
* `force`: indicates that the addition of the tag must to be forced or not.
|
|
162
|
+
|
|
163
|
+
> [!NOTE] \
|
|
164
|
+
> If `!force` and `tag` already was saved an error will occur.
|
|
165
|
+
|
|
166
|
+
It save the tag name in a library list, that it is used during the tag validations,
|
|
167
|
+
what it avoid that the using of the customized tag throw an error.
|
|
149
168
|
|
|
150
169
|
### Special properties
|
|
151
170
|
|
|
152
171
|
In addition of the *common element properties*, the `htmlProperties` support the
|
|
153
172
|
properties bellow:
|
|
154
173
|
|
|
174
|
+
---
|
|
175
|
+
|
|
155
176
|
* `dataSets`: a list of customized properties that will be prefixed by `data-`.
|
|
156
177
|
|
|
157
178
|
``` js
|
|
158
179
|
SPAN({ dataSets: { property: "value" } });
|
|
159
180
|
```
|
|
160
181
|
|
|
182
|
+
---
|
|
183
|
+
|
|
161
184
|
* `ariaAttributes`: a list of properties that will be prefixed by `aria-`.
|
|
162
185
|
|
|
163
186
|
``` js
|
|
164
187
|
SPAN({ ariaProperties: { property: "value" } });
|
|
165
188
|
```
|
|
166
189
|
|
|
190
|
+
---
|
|
191
|
+
|
|
167
192
|
* `eventListeners`: a list of events that will be added to the created element.
|
|
168
193
|
|
|
169
194
|
``` js
|
|
@@ -171,6 +196,8 @@ SPAN({ eventListeners: { event: action } });
|
|
|
171
196
|
SPAN({ eventListeners: { event: [action0, actionN] } });
|
|
172
197
|
```
|
|
173
198
|
|
|
199
|
+
---
|
|
200
|
+
|
|
174
201
|
* `cssRules`: a list of CSS style rules and variables that will be added to the created
|
|
175
202
|
element.
|
|
176
203
|
|
|
@@ -179,12 +206,14 @@ SPAN({ cssRules: { rule: value } });
|
|
|
179
206
|
SPAN({ cssRules: { "--variable": value } });
|
|
180
207
|
```
|
|
181
208
|
|
|
182
|
-
|
|
209
|
+
---
|
|
210
|
+
|
|
211
|
+
> [!IMPORTANT] \
|
|
183
212
|
> These *compound properties* follow the same writing rules of the ***common***
|
|
184
213
|
> *compound properties*. See [Create an element](#create-an-element) to more
|
|
185
214
|
> information about.
|
|
186
215
|
|
|
187
|
-
> [!NOTE]
|
|
216
|
+
> [!NOTE] \
|
|
188
217
|
> See more about these concepts bellow:
|
|
189
218
|
>
|
|
190
219
|
> * [data-][data-property]
|
|
@@ -192,17 +221,45 @@ SPAN({ cssRules: { "--variable": value } });
|
|
|
192
221
|
> * [Event Listeners][event-listeners]
|
|
193
222
|
> * [The `style` property][style-property]
|
|
194
223
|
|
|
195
|
-
###
|
|
224
|
+
### Setting default values to properties
|
|
225
|
+
|
|
226
|
+
It is possible (un)set default values to elements properties. They are based in tags,
|
|
227
|
+
so if you define a default value (e.g.) to `href`, from `<a>`, all tags (`<a>`)
|
|
228
|
+
create after this will receive this default value automatically. But if during the
|
|
229
|
+
call of the *Creation Function* (of `<a>`) the `href` is defined, the default value
|
|
230
|
+
will be overrided.
|
|
231
|
+
|
|
232
|
+
#### Set default values
|
|
233
|
+
|
|
234
|
+
* `void htmljs_set_default_properties_values(tag: string[, validateTag: boolean = false], htmlProperties: object)`
|
|
235
|
+
* `void htmljs_set_default_properties_values( [validateTag: boolean = false ,] args: array )`
|
|
236
|
+
* `tag`: element whose properties will receive a, or more, default value(s).
|
|
237
|
+
* `validateTag`: specifics if `tag` have to be validated (check if it exists or not).
|
|
238
|
+
* `htmlProperties`: all tags, and their default values, that will receive a default
|
|
239
|
+
value.
|
|
240
|
+
* `args`: an object containing a list of tags, with their HTML properties.
|
|
241
|
+
|
|
242
|
+
> [!NOTE] \
|
|
243
|
+
> These values are global, they affects all the *Creation Functions* call that occur
|
|
244
|
+
> after that it is called. *Special Properties* are included too, but their
|
|
245
|
+
> *subproperties* cannot receive a default value individually.
|
|
246
|
+
|
|
247
|
+
> [!TIP] \
|
|
248
|
+
> This is a example of value to `args`: `{a: {href: "#"}, div: {className: "div"}}`.
|
|
249
|
+
|
|
250
|
+
#### Unset default values
|
|
196
251
|
|
|
197
|
-
|
|
198
|
-
|
|
252
|
+
* `void htmljs_unset_default_properties_values(tag: string[, validateTag: boolean = false], htmlProperties: array)`
|
|
253
|
+
* `void htmljs_unset_default_properties_values( [validateTag: boolean = false ,] args: array )`
|
|
254
|
+
* `tag`: element whose properties will lose a, or more, default value(s).
|
|
255
|
+
* `validateTag`: specifics if `tag` have to be validated (check if it exists or not).
|
|
256
|
+
* `htmlProperties`: a list of properties that will lose their default values.
|
|
257
|
+
* `args`: an object containing a list of tags, with their HTML properties.
|
|
199
258
|
|
|
200
|
-
|
|
201
|
-
*
|
|
202
|
-
*
|
|
203
|
-
*
|
|
259
|
+
> [!NOTE] \
|
|
260
|
+
> These values are global, they affects all the *Creation Functions* call that occur
|
|
261
|
+
> after that it is called. *Special Properties* are included too, but their
|
|
262
|
+
> *subproperties* cannot receive a default value individually.
|
|
204
263
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
underscores). I will not explain more about them here, but you can get some information
|
|
208
|
-
about these stuff [here][html-js].
|
|
264
|
+
> [!TIP] \
|
|
265
|
+
> This is a example of value to `args`: `{a: ["href"], div: ["className"]}`.
|
package/html.js
CHANGED
|
@@ -23,31 +23,44 @@
|
|
|
23
23
|
let __htmljs_ignore_last__ = 1;
|
|
24
24
|
let __htmljs_debug_func__ = console.warn;
|
|
25
25
|
|
|
26
|
+
const __htmljs_default_properties_values__ = {};
|
|
27
|
+
|
|
26
28
|
const __htmljs_is_not_object__ = (thing) =>
|
|
27
29
|
{
|
|
28
30
|
return typeof thing != "object" || Array.isArray(thing);
|
|
29
31
|
};
|
|
30
32
|
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
33
|
+
const __htmljs_is_object__ = (thing) =>
|
|
34
|
+
{
|
|
35
|
+
return thing !== null && typeof thing == "object" && !Array.isArray(thing);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
const __htmljs_is_empty_object__ = (object) =>
|
|
39
|
+
{
|
|
40
|
+
return Object.keys(object).length === 0;
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
const __htmljs_element_tags__ = {
|
|
44
|
+
noContainers: [
|
|
45
|
+
"area", "base", "br", "col", "hr", "img", "input", "link",
|
|
46
|
+
"meta", "source", "track", "wbr",
|
|
47
|
+
],
|
|
48
|
+
|
|
49
|
+
containers: [
|
|
50
|
+
"a", "abbr", "address", "article", "audio", "b", "bdi", "bdo",
|
|
51
|
+
"blockquote", "body", "button", "canvas", "caption", "cite",
|
|
52
|
+
"code", "colgroup", "data", "datalist", "dd", "del", "details",
|
|
53
|
+
"dfn", "dialog", "div", "dl", "dt", "em", "fieldset", "figcaption",
|
|
54
|
+
"figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6",
|
|
55
|
+
"head", "header", "hgroup", "html", "i", "iframe", "ins", "kbd",
|
|
56
|
+
"label", "legend", "li", "main", "map", "mark", "meter", "nav",
|
|
57
|
+
"noscript", "object", "ol", "optgroup", "option", "output", "p",
|
|
58
|
+
"picture", "pre", "progress", "q", "rp", "rt", "ruby", "samp",
|
|
59
|
+
"script", "section", "select", "small", "span", "strong", "sub",
|
|
60
|
+
"summary", "sup", "table", "tbody", "td", "template", "textarea",
|
|
61
|
+
"tfoot", "th", "thead", "time", "title", "tr", "ul", "vari", "video",
|
|
62
|
+
]
|
|
63
|
+
};
|
|
51
64
|
|
|
52
65
|
const __htmljs_set_prefixed_property__ = (prefix, elem, field, value) =>
|
|
53
66
|
{
|
|
@@ -106,10 +119,43 @@ const __htmljs_treat_special_properties__ = (elem, property, htmlProperties) =>
|
|
|
106
119
|
return true;
|
|
107
120
|
}
|
|
108
121
|
|
|
122
|
+
const __htmljs_set_element_properties__ = (elem, htmlProperties) =>
|
|
123
|
+
{
|
|
124
|
+
for(const PROPERTY in htmlProperties)
|
|
125
|
+
{
|
|
126
|
+
if(__htmljs_treat_special_properties__(elem, PROPERTY, htmlProperties))
|
|
127
|
+
continue;
|
|
128
|
+
|
|
129
|
+
const VALUE = (htmlProperties[PROPERTY] == "~" ? PROPERTY.toLowerCase() : htmlProperties[PROPERTY]);
|
|
130
|
+
|
|
131
|
+
if(elem[PROPERTY] !== undefined || PROPERTY == "className")
|
|
132
|
+
elem[PROPERTY] = VALUE;
|
|
133
|
+
else
|
|
134
|
+
elem.setAttribute(PROPERTY, VALUE);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
}
|
|
138
|
+
|
|
109
139
|
const __htmljs_core__ = (elementTag, htmlProperties, ...children) =>
|
|
110
140
|
{
|
|
111
141
|
const ELEM = document.createElement(elementTag);
|
|
112
142
|
|
|
143
|
+
if(__htmljs_default_properties_values__[elementTag] != undefined)
|
|
144
|
+
{
|
|
145
|
+
let ref = __htmljs_default_properties_values__[elementTag];
|
|
146
|
+
|
|
147
|
+
if(__htmljs_is_not_object__(ref))
|
|
148
|
+
{
|
|
149
|
+
__htmljs_debug_func__(new TypeError(`Excepting object to \`htmlProperties\`, instead "${typeof htmlProperties}".`));
|
|
150
|
+
|
|
151
|
+
// this allows to jump the for-loop below,
|
|
152
|
+
// if the Debug Mode is != 2
|
|
153
|
+
ref = {};
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
__htmljs_set_element_properties__(ELEM, ref);
|
|
157
|
+
}
|
|
158
|
+
|
|
113
159
|
if(htmlProperties !== undefined)
|
|
114
160
|
{
|
|
115
161
|
let textnode = "";
|
|
@@ -119,24 +165,14 @@ const __htmljs_core__ = (elementTag, htmlProperties, ...children) =>
|
|
|
119
165
|
{
|
|
120
166
|
if(__htmljs_is_not_object__( htmlProperties ))
|
|
121
167
|
{
|
|
122
|
-
__htmljs_debug_func__(new TypeError(`Excepting
|
|
123
|
-
|
|
168
|
+
__htmljs_debug_func__(new TypeError(`Excepting object to \`htmlProperties\`, instead "${typeof htmlProperties}".`));
|
|
169
|
+
|
|
124
170
|
// this allows to jump the for-loop below,
|
|
125
171
|
// if the Debug Mode is != 2
|
|
126
172
|
htmlProperties = {};
|
|
127
173
|
}
|
|
128
174
|
|
|
129
|
-
|
|
130
|
-
if(__htmljs_treat_special_properties__(ELEM, PROPERTY, htmlProperties))
|
|
131
|
-
continue;
|
|
132
|
-
|
|
133
|
-
const VALUE = (htmlProperties[PROPERTY] == "~" ? PROPERTY.toLowerCase() : htmlProperties[PROPERTY]);
|
|
134
|
-
|
|
135
|
-
if(ELEM[PROPERTY] !== undefined || PROPERTY == "className")
|
|
136
|
-
ELEM[PROPERTY] = VALUE;
|
|
137
|
-
else
|
|
138
|
-
ELEM.setAttribute(PROPERTY, VALUE);
|
|
139
|
-
}
|
|
175
|
+
__htmljs_set_element_properties__(ELEM, htmlProperties);
|
|
140
176
|
}
|
|
141
177
|
|
|
142
178
|
for(let i = 0; i < ARGS_MAX; i++)
|
|
@@ -149,7 +185,7 @@ const __htmljs_core__ = (elementTag, htmlProperties, ...children) =>
|
|
|
149
185
|
|
|
150
186
|
if(!(children[i] instanceof HTMLElement))
|
|
151
187
|
{
|
|
152
|
-
__htmljs_debug_func__(new TypeError(`Excepting
|
|
188
|
+
__htmljs_debug_func__(new TypeError(`Excepting object or String to \`children[${i}]\`, instead "${typeof children[i]}".`));
|
|
153
189
|
continue;
|
|
154
190
|
}
|
|
155
191
|
|
|
@@ -212,15 +248,166 @@ const declare_htmljs = (...args) =>
|
|
|
212
248
|
const PREF = prefix || "";
|
|
213
249
|
let tag;
|
|
214
250
|
|
|
215
|
-
|
|
251
|
+
for(const FIELD in __htmljs_element_tags__)
|
|
216
252
|
{
|
|
217
|
-
|
|
253
|
+
__htmljs_element_tags__[FIELD].forEach((elementTag, id) =>
|
|
254
|
+
{
|
|
255
|
+
tag = PREF + elementTag;
|
|
256
|
+
|
|
257
|
+
if(elementTag == "vari")
|
|
258
|
+
elementTag = "var";
|
|
218
259
|
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
260
|
+
DEST[ (useUpperCase ? tag.toUpperCase() : tag) ] =
|
|
261
|
+
(FIELD == "noContainers")
|
|
262
|
+
? (properties) => __htmljs_core__(elementTag, properties)
|
|
263
|
+
: (properties, ...children) => __htmljs_core__(elementTag, properties, ...children);
|
|
264
|
+
});
|
|
265
|
+
}
|
|
224
266
|
|
|
225
267
|
return DEST;
|
|
226
268
|
};
|
|
269
|
+
|
|
270
|
+
const __htmljs_save_custom_tag__ = (dest, tag, force) =>
|
|
271
|
+
{
|
|
272
|
+
if(typeof tag != "string")
|
|
273
|
+
{
|
|
274
|
+
__htmljs_debug_func__(new TypeError(`Expecting a string, instead a "${typeof tag}".`));
|
|
275
|
+
return;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
if(force)
|
|
279
|
+
{
|
|
280
|
+
for(const TAG of dest)
|
|
281
|
+
{
|
|
282
|
+
if(tag == TAG)
|
|
283
|
+
{
|
|
284
|
+
console.warn(new Error(`"${tag}" already was added.`));
|
|
285
|
+
return;
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
dest.push(tag);
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
const htmljs_add_custom_tag = (tag, isNoContainer, force) =>
|
|
294
|
+
{
|
|
295
|
+
const DEST = __htmljs_element_tags__[ (isNoContainer ? "noC" : "c") + "ontainers" ];
|
|
296
|
+
|
|
297
|
+
if(!Array.isArray(tag))
|
|
298
|
+
{
|
|
299
|
+
__htmljs_save_custom_tag__(DEST, tag, force);
|
|
300
|
+
return;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
for(const TAG of tag)
|
|
304
|
+
__htmljs_save_custom_tag__(DEST, TAG, force);
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
const __htmljs_validate_tags__ = (tag) =>
|
|
308
|
+
{
|
|
309
|
+
for(const ELEMENT_TYPE in __htmljs_element_tags__)
|
|
310
|
+
for(const TAG of __htmljs_element_tags__[ ELEMENT_TYPE ])
|
|
311
|
+
if(tag == TAG)
|
|
312
|
+
return true;
|
|
313
|
+
|
|
314
|
+
__htmljs_debug_func__(new TypeError(`Invalid HTML tag: "${tag}".`));
|
|
315
|
+
return false;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
const __htmljs_manager_default_properties_values__ = (userFunc, ...args) =>
|
|
319
|
+
{
|
|
320
|
+
let validateTags, tagsList;
|
|
321
|
+
|
|
322
|
+
if(__htmljs_is_object__(args[0]))
|
|
323
|
+
{
|
|
324
|
+
validateTags = false;
|
|
325
|
+
tagsList = args[0];
|
|
326
|
+
}
|
|
327
|
+
else if(typeof args[0] == "boolean" && __htmljs_is_object__(args[1]))
|
|
328
|
+
{
|
|
329
|
+
validateTags = args[0];
|
|
330
|
+
tagsList = args[1];
|
|
331
|
+
}
|
|
332
|
+
else
|
|
333
|
+
{
|
|
334
|
+
validateTags = (typeof args[1] == "boolean" && args[1]);
|
|
335
|
+
tagsList = null;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
if(tagsList !== null)
|
|
339
|
+
{
|
|
340
|
+
for(const TAG in tagsList)
|
|
341
|
+
userFunc(TAG, validateTags, tagsList[ TAG ]);
|
|
342
|
+
|
|
343
|
+
return null;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
const ARG_TAG = args[0].toLowerCase();
|
|
347
|
+
|
|
348
|
+
// TAG == args[0]
|
|
349
|
+
if(typeof ARG_TAG != "string")
|
|
350
|
+
throw new TypeError(`Expecting a string, instead a "${typeof args[0]}".`);
|
|
351
|
+
|
|
352
|
+
if(validateTags)
|
|
353
|
+
{
|
|
354
|
+
if(__htmljs_validate_tags__(ARG_TAG))
|
|
355
|
+
return ARG_TAG;
|
|
356
|
+
|
|
357
|
+
return null;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
return ARG_TAG;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
const htmljs_set_default_properties_values = (...args) =>
|
|
364
|
+
{
|
|
365
|
+
const TAG = __htmljs_manager_default_properties_values__(htmljs_set_default_properties_values, ...args);
|
|
366
|
+
|
|
367
|
+
if(TAG === null)
|
|
368
|
+
return;
|
|
369
|
+
|
|
370
|
+
const VALIDATE_TAGS = args[1];
|
|
371
|
+
const HTML_PROPERTIES = args[2];
|
|
372
|
+
|
|
373
|
+
if(!__htmljs_is_object__(HTML_PROPERTIES))
|
|
374
|
+
throw new TypeError("Invalid type to `htmlProperties`. Expecting an object.");
|
|
375
|
+
|
|
376
|
+
if(VALIDATE_TAGS)
|
|
377
|
+
__htmljs_validate_tags__(TAG);
|
|
378
|
+
|
|
379
|
+
if(__htmljs_default_properties_values__[TAG] === undefined)
|
|
380
|
+
__htmljs_default_properties_values__[TAG] = {};
|
|
381
|
+
|
|
382
|
+
for(const PROPERTY in HTML_PROPERTIES)
|
|
383
|
+
__htmljs_default_properties_values__[TAG][PROPERTY] = HTML_PROPERTIES[ PROPERTY ];
|
|
384
|
+
|
|
385
|
+
if(__htmljs_is_empty_object__(__htmljs_default_properties_values__[TAG]))
|
|
386
|
+
delete __htmljs_default_properties_values__[TAG];
|
|
387
|
+
};
|
|
388
|
+
|
|
389
|
+
const htmljs_unset_default_properties_values = (...args) =>
|
|
390
|
+
{
|
|
391
|
+
const TAG = __htmljs_manager_default_properties_values__(htmljs_unset_default_properties_values, ...args);
|
|
392
|
+
|
|
393
|
+
if(TAG === null)
|
|
394
|
+
return;
|
|
395
|
+
|
|
396
|
+
const VALIDATE_TAGS = args[1];
|
|
397
|
+
const HTML_PROPERTIES = args[2];
|
|
398
|
+
|
|
399
|
+
if(!Array.isArray(HTML_PROPERTIES))
|
|
400
|
+
throw new TypeError("Invalid type to `htmlProperties`. Expecting an object.");
|
|
401
|
+
|
|
402
|
+
if(VALIDATE_TAGS)
|
|
403
|
+
__htmljs_validate_tags__(TAG);
|
|
404
|
+
|
|
405
|
+
if(__htmljs_default_properties_values__[TAG] === undefined)
|
|
406
|
+
return;
|
|
407
|
+
|
|
408
|
+
for(const PROPERTY of HTML_PROPERTIES)
|
|
409
|
+
delete __htmljs_default_properties_values__[TAG][PROPERTY];
|
|
410
|
+
|
|
411
|
+
if(__htmljs_is_empty_object__(__htmljs_default_properties_values__[TAG]))
|
|
412
|
+
delete __htmljs_default_properties_values__[TAG];
|
|
413
|
+
}
|
package/html.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";let __htmljs_ignore_last__=1,__htmljs_debug_func__=console.warn;const __htmljs_is_not_object__=
|
|
1
|
+
"use strict";let __htmljs_ignore_last__=1,__htmljs_debug_func__=console.warn;const __htmljs_default_properties_values__={},__htmljs_is_not_object__=_=>"object"!=typeof _||Array.isArray(_),__htmljs_is_object__=_=>null!==_&&"object"==typeof _&&!Array.isArray(_),__htmljs_is_empty_object__=_=>0===Object.keys(_).length,__htmljs_element_tags__={noContainers:["area","base","br","col","hr","img","input","link","meta","source","track","wbr"],containers:["a","abbr","address","article","audio","b","bdi","bdo","blockquote","body","button","canvas","caption","cite","code","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","html","i","iframe","ins","kbd","label","legend","li","main","map","mark","meter","nav","noscript","object","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","samp","script","section","select","small","span","strong","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","ul","vari","video"]},__htmljs_set_prefixed_property__=(_,e,t,s)=>{e.setAttribute(_+"-"+t,s)},__htmljs_data_sets__=(_,e,t)=>{__htmljs_set_prefixed_property__("data",_,e,t)},__htmljs_aria_attributes__=(_,e,t)=>{__htmljs_set_prefixed_property__("aria",_,e,t)},__htmljs_event_listeners__=(_,e,t)=>{if(Array.isArray(t))for(const s of t)_.addEventListener(e,s);else _.addEventListener(e,t)},__htmljs_css_rules__=(_,e,t)=>{"-"==e.charAt(0)?_.style.setProperty(e,t):_.style[e]=t},__htmljs_treat_special_properties__=(_,e,t)=>{let s;switch(e){case"dataSets":s=__htmljs_data_sets__;break;case"ariaAttributes":s=__htmljs_aria_attributes__;break;case"eventListeners":s=__htmljs_event_listeners__;break;case"cssRules":s=__htmljs_css_rules__;break;default:return!1}if(__htmljs_is_not_object__(t[e]))return __htmljs_debug_func__(new TypeError(`Invalid value attributed to \`${e}\`, expecting an object.`)),!1;for(const r in t[e])s(_,r,t[e][r]);return!0},__htmljs_set_element_properties__=(_,e)=>{for(const t in e){if(__htmljs_treat_special_properties__(_,t,e))continue;const s="~"==e[t]?t.toLowerCase():e[t];void 0!==_[t]||"className"==t?_[t]=s:_.setAttribute(t,s)}},__htmljs_core__=(_,e,...t)=>{const s=document.createElement(_);if(null!=__htmljs_default_properties_values__[_]){let t=__htmljs_default_properties_values__[_];__htmljs_is_not_object__(t)&&(__htmljs_debug_func__(new TypeError(`Excepting object to \`htmlProperties\`, instead "${typeof e}".`)),t={}),__htmljs_set_element_properties__(s,t)}if(void 0!==e){let _="";const r=t.length-__htmljs_ignore_last__;null!==e&&(__htmljs_is_not_object__(e)&&(__htmljs_debug_func__(new TypeError(`Excepting object to \`htmlProperties\`, instead "${typeof e}".`)),e={}),__htmljs_set_element_properties__(s,e));for(let e=0;e<r;e++)if("string"!=typeof t[e])if(t[e]instanceof HTMLElement){""!=_&&(s.appendChild(document.createTextNode(_)),_="");try{s.appendChild(t[e])}catch(_){__htmljs_debug_func__(_);break}}else __htmljs_debug_func__(new TypeError(`Excepting object or String to \`children[${e}]\`, instead "${typeof t[e]}".`));else _+=(""==_?"":" ")+t[e];""!=_&&s.appendChild(document.createTextNode(_))}return s},htmljs_set_ignore_last=_=>{__htmljs_ignore_last__=_?1:0},htmljs_set_debug_mode=_=>{const e=typeof _;if("number"!=e)throw new TypeError(`Invalid mode type: "${e}". Use only integer numbers.`);if(_>2)throw new RangeError(`Invalid mode value: "${_}". Use only 0, 1, or 2.`);__htmljs_debug_func__=[()=>{},console.warn,_=>{throw _}][Math.floor(_)]},declare_htmljs=(..._)=>{let e,t,s;null!==_[0]&&"object"==typeof _[0]?({prefix:e,createObject:t,useUpperCase:s}=_[0]):[e,t,s]=_;const r=t?{}:window,l=e||"";let o;for(const _ in __htmljs_element_tags__)__htmljs_element_tags__[_].forEach((e,t)=>{o=l+e,"vari"==e&&(e="var"),r[s?o.toUpperCase():o]="noContainers"==_?_=>__htmljs_core__(e,_):(_,...t)=>__htmljs_core__(e,_,...t)});return r},__htmljs_save_custom_tag__=(_,e,t)=>{if("string"==typeof e){if(t)for(const t of _)if(e==t)return void console.warn(new Error(`"${e}" already was added.`));_.push(e)}else __htmljs_debug_func__(new TypeError(`Expecting a string, instead a "${typeof e}".`))},htmljs_add_custom_tag=(_,e,t)=>{const s=__htmljs_element_tags__[(e?"noC":"c")+"ontainers"];if(Array.isArray(_))for(const e of _)__htmljs_save_custom_tag__(s,e,t);else __htmljs_save_custom_tag__(s,_,t)},__htmljs_validate_tags__=_=>{for(const e in __htmljs_element_tags__)for(const t of __htmljs_element_tags__[e])if(_==t)return!0;return __htmljs_debug_func__(new TypeError(`Invalid HTML tag: "${_}".`)),!1},__htmljs_manager_default_properties_values__=(_,...e)=>{let t,s;if(__htmljs_is_object__(e[0])?(t=!1,s=e[0]):"boolean"==typeof e[0]&&__htmljs_is_object__(e[1])?(t=e[0],s=e[1]):(t="boolean"==typeof e[1]&&e[1],s=null),null!==s){for(const e in s)_(e,t,s[e]);return null}const r=e[0].toLowerCase();if("string"!=typeof r)throw new TypeError(`Expecting a string, instead a "${typeof e[0]}".`);return t?__htmljs_validate_tags__(r)?r:null:r},htmljs_set_default_properties_values=(..._)=>{const e=__htmljs_manager_default_properties_values__(htmljs_set_default_properties_values,..._);if(null===e)return;const t=_[1],s=_[2];if(!__htmljs_is_object__(s))throw new TypeError("Invalid type to `htmlProperties`. Expecting an object.");t&&__htmljs_validate_tags__(e),void 0===__htmljs_default_properties_values__[e]&&(__htmljs_default_properties_values__[e]={});for(const _ in s)__htmljs_default_properties_values__[e][_]=s[_];__htmljs_is_empty_object__(__htmljs_default_properties_values__[e])&&delete __htmljs_default_properties_values__[e]},htmljs_unset_default_properties_values=(..._)=>{const e=__htmljs_manager_default_properties_values__(htmljs_unset_default_properties_values,..._);if(null===e)return;const t=_[1],s=_[2];if(!Array.isArray(s))throw new TypeError("Invalid type to `htmlProperties`. Expecting an object.");if(t&&__htmljs_validate_tags__(e),void 0!==__htmljs_default_properties_values__[e]){for(const _ of s)delete __htmljs_default_properties_values__[e][_];__htmljs_is_empty_object__(__htmljs_default_properties_values__[e])&&delete __htmljs_default_properties_values__[e]}};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@duckafire/html.js",
|
|
3
3
|
"author": "duckafire",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.3.0",
|
|
5
5
|
"license": "Zlib",
|
|
6
6
|
"description": "Just a very simple components library.",
|
|
7
7
|
"keywords": ["front-end", "client", "html", "dom", "light", "components", "web", "simple", "minimalist", "easy"],
|