@duckafire/html.js 0.2.1 → 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 +125 -66
- 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,109 +66,129 @@ 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
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
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
|
+
|
|
100
|
+
div( {className: "foo"},
|
|
101
|
+
"Lorem ipsum",
|
|
102
|
+
br(),
|
|
103
|
+
span( null,
|
|
104
|
+
"Lorem ipsum",
|
|
105
|
+
span),
|
|
98
106
|
input( {type: "text", value: "foobar", readOnly: "~"}),
|
|
99
107
|
div);
|
|
100
108
|
```
|
|
101
109
|
|
|
102
|
-
> [!TIP]
|
|
110
|
+
> [!TIP] \
|
|
103
111
|
> Defining a property as `"~"` makes it equal itself, in other words, `open: "~"` is
|
|
104
112
|
> equal `open: "open"`.
|
|
105
113
|
|
|
106
|
-
All these
|
|
107
|
-
is their names/identifiers, because of this, I will not to list all them here,
|
|
108
|
-
|
|
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):
|
|
109
117
|
|
|
110
|
-
* `{}
|
|
118
|
+
* `{} CreationFunction( [htmlProperties: object = undefined, [...children: HTMLElement | string = undefined, [closeTag: any = undefined]]] )`
|
|
111
119
|
* `htmlProperties`: all the HTML properties that will be implemented in the created
|
|
112
120
|
element.
|
|
113
121
|
* `children`: all elements that will be appended in the created element. If it is a
|
|
114
122
|
string, a *text node* will added to the element.
|
|
115
|
-
* `closeTag`: an optional
|
|
123
|
+
* `closeTag`: an optional stuff, to explicit the end of the element creation. I
|
|
116
124
|
recommend that it to be equal the itself function (like the previous
|
|
117
125
|
example). See [this](#closing-the-element-creation) to learn how to
|
|
118
126
|
disable this optional parameter.
|
|
119
127
|
|
|
120
|
-
> [!WARNING]
|
|
128
|
+
> [!WARNING] \
|
|
121
129
|
> Unlike HTML and CSS, the JavaScript syntax do not support the use of the hyphen (`-`)
|
|
122
130
|
> in identifiers name. So *compound properties* only can be declared:
|
|
123
131
|
> * Between single/double quotes: `"padding-top"`; `"background-color"`; `"font-size"`.
|
|
124
132
|
> * In [camelCase][camel-case]: `paddingTop`; `backgroundColor`; `fontSize`.
|
|
125
133
|
|
|
126
|
-
> [!IMPORTANT]
|
|
134
|
+
> [!IMPORTANT] \
|
|
127
135
|
> Deprecated tags are not available.
|
|
128
136
|
|
|
129
|
-
> [!NOTE]
|
|
130
|
-
> See [example.html][example-html] to obtain the list of available *tag-functions*
|
|
131
|
-
> (they are stored in `__htmljs_element_tags__`).
|
|
132
|
-
|
|
133
137
|
### Closing the element creation
|
|
134
138
|
|
|
135
|
-
To disable the parameter `closeTag` of the *
|
|
139
|
+
To disable the parameter `closeTag` of the *Creation Functions* it is necessary call the
|
|
136
140
|
functions below:
|
|
137
141
|
|
|
138
|
-
* `
|
|
139
|
-
* `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*.
|
|
140
144
|
|
|
141
|
-
> [!NOTE]
|
|
145
|
+
> [!NOTE] \
|
|
142
146
|
> `closeTag` is required by default. Its value is global, it affects all the
|
|
143
|
-
> *
|
|
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.
|
|
144
151
|
|
|
145
|
-
|
|
146
|
-
|
|
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.
|
|
147
168
|
|
|
148
169
|
### Special properties
|
|
149
170
|
|
|
150
171
|
In addition of the *common element properties*, the `htmlProperties` support the
|
|
151
172
|
properties bellow:
|
|
152
173
|
|
|
174
|
+
---
|
|
175
|
+
|
|
153
176
|
* `dataSets`: a list of customized properties that will be prefixed by `data-`.
|
|
154
177
|
|
|
155
178
|
``` js
|
|
156
179
|
SPAN({ dataSets: { property: "value" } });
|
|
157
180
|
```
|
|
158
181
|
|
|
182
|
+
---
|
|
183
|
+
|
|
159
184
|
* `ariaAttributes`: a list of properties that will be prefixed by `aria-`.
|
|
160
185
|
|
|
161
186
|
``` js
|
|
162
187
|
SPAN({ ariaProperties: { property: "value" } });
|
|
163
188
|
```
|
|
164
189
|
|
|
190
|
+
---
|
|
191
|
+
|
|
165
192
|
* `eventListeners`: a list of events that will be added to the created element.
|
|
166
193
|
|
|
167
194
|
``` js
|
|
@@ -169,6 +196,8 @@ SPAN({ eventListeners: { event: action } });
|
|
|
169
196
|
SPAN({ eventListeners: { event: [action0, actionN] } });
|
|
170
197
|
```
|
|
171
198
|
|
|
199
|
+
---
|
|
200
|
+
|
|
172
201
|
* `cssRules`: a list of CSS style rules and variables that will be added to the created
|
|
173
202
|
element.
|
|
174
203
|
|
|
@@ -177,12 +206,14 @@ SPAN({ cssRules: { rule: value } });
|
|
|
177
206
|
SPAN({ cssRules: { "--variable": value } });
|
|
178
207
|
```
|
|
179
208
|
|
|
180
|
-
|
|
209
|
+
---
|
|
210
|
+
|
|
211
|
+
> [!IMPORTANT] \
|
|
181
212
|
> These *compound properties* follow the same writing rules of the ***common***
|
|
182
213
|
> *compound properties*. See [Create an element](#create-an-element) to more
|
|
183
214
|
> information about.
|
|
184
215
|
|
|
185
|
-
> [!NOTE]
|
|
216
|
+
> [!NOTE] \
|
|
186
217
|
> See more about these concepts bellow:
|
|
187
218
|
>
|
|
188
219
|
> * [data-][data-property]
|
|
@@ -190,17 +221,45 @@ SPAN({ cssRules: { "--variable": value } });
|
|
|
190
221
|
> * [Event Listeners][event-listeners]
|
|
191
222
|
> * [The `style` property][style-property]
|
|
192
223
|
|
|
193
|
-
###
|
|
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
|
|
194
251
|
|
|
195
|
-
|
|
196
|
-
|
|
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.
|
|
197
258
|
|
|
198
|
-
|
|
199
|
-
*
|
|
200
|
-
*
|
|
201
|
-
*
|
|
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.
|
|
202
263
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
underscores). I will not explain more about them here, but you can get some information
|
|
206
|
-
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])
|
|
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"],
|