$dom.component / $dom / component_add
$dom.component_add
Name | Type |
---|---|
cEL |
extends keyof T_DOM_HETNM |
-
component_main
<T_DOM_HETNM
[cEL
]>↳
component_add
- add
- addText
- component
- destroy
- dynamicComponent
- getReference
- isStatic
- mount
- on
- ondestroy
- oninit
- onmount
- onupdate
- setShift
- update
• share: component_mainOut
<T_DOM_HETNM
[cEL
]>
▸ add<K
>(tag_name
, attrs?
, shift?
): component_add
<K
>
This add element to component
const UL= document.getElementById('SOME UL');
const { add }= $dom.component("LI", { className: "list_item" });
//result: <li class="list_item">...</li>
add("DIV", { textContent: "Child of .list_item", className: "deep1" });
//result: <li class="list_item"><div class="deep1">...</div></li>
add("DIV", { textContent: "Child of div.deep1", className: "deep2" });
//result: ...<div class="deep1"><div class="deep2">...</div></div>...
add("DIV", { textContent: "Child of div.deep2", className: "deep3" });
//result: ...<div class="deep1"><div class="deep2"><div class="deep3">...</div></div></div>...
add("DIV", { textContent: "Child of div.deep2", className: "deep3 mark" }, -1);
//result: ...<div class="deep2"><div class="deep3">...</div><div class="deep3">...</div></div>...
//next add(*) schoul be child of div.deep3.mark, by -1 it is ch.of div.deep2, by -2 ch.of div.deep1, by -3 ch.of li.list_item because div.deep3.mark is on 3rd level
add("DIV", { textContent: "Child of div.deep1", className: "deep2 nextone" }, -2);
//result: this is on 2nd level
add("DIV", { textContent: "Child of div.deep1", className: "deep2 nextone" }, -2);
//result: this is on 0 level
add("DIV", null);
//just DIV without attributes
Name | Type |
---|---|
K |
extends "" | "symbol" | "object" | "link" | "small" | "sub" | "sup" | "map" | "filter" | "input" | "set" | "code" | "data" | "progress" | "stop" | "track" | "source" | "button" | "address" | "view" | "clipPath" | "font" | "marker" | "mask" | "a" | "abbr" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "caption" | "cite" | "col" | "colgroup" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "u" | "ul" | "var" | "video" | "wbr" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "<>" | "zzz_text" |
Name | Type | Description |
---|---|---|
tag_name |
K |
- |
attrs? |
T_DOM_ATTRS <K > |
- |
shift? |
number |
Modify nesting behaviour. By default (shift= 0 ), new element is child of previus element. Every -1 means moving to the upper level against current one - see example. |
▸ addText(text
, shift?
): component_add
<"zzz_text"
>
This add element to component
const c1= $dom.component("P", { textContent: "TEXT" });
const c2= $dom.component("P", null);
c2.addText("TEXT");
//c1-> <p>TEXT</p> === <p>TEXT</p> <-c2
function testTextLi({ href= "https://www.seznam.cz" }= {}){
const c= $dom.component("LI", null);
c.add("P", { textContent: "Link test: " });
c.add("A", { textContent: "link ", href });
c.add("STRONG", { textContent: `(${href.replace("https://www.", "")})` });
c.addText("!", -2);
c.add("BR", null, -1);
c.addText("Test new line.", -1);
return c.share;
}
//result: '<p>Link test: <a href="...">link <strong>...</strong></a>!<br>Test new line.</p>'
Name | Type |
---|---|
text |
string |
shift? |
number |
component_add
<"zzz_text"
>
▸ component(share
, shift
): component_main
<T_DOM_HETNM
[cEL
]>
Method for including another component by usint its share
key.
function p({ textContent }){
const cP= $dom.component("P", { textContent });
return cP.share;
}
const c= $dom.component("DIV", null);
for(let i=0; i<3; i++){ c.component(p({ textContent: i })); }
c.mount(document.body, "replaceContent");
//= <body><div><p>0</p><p>1</p><p>2</p></div></body>
Name | Type |
---|---|
share |
component_mainOut <HTMLElement > |
shift |
number |
component_main
<T_DOM_HETNM
[cEL
]>
▸ destroy(): void
Method remove element form live DOM and returns null
let c= $dom.component("DIV", null);
c.mount(document.body, "replaceContent");
c= c.share.destroy();
//=> c===null AND <body></body>
void
▸ dynamicComponent<DATA
>(data
, generator
, shift
): component_main
<T_DOM_HETNM
[cEL
]>
Method for including another component by using generator
function, which can change final component
based on updated data data
.
Name | Type |
---|---|
DATA |
extends object |
Name | Type | Description |
---|---|---|
data |
DATA |
Includes all subsribed keys from data see method onupdate |
generator |
dynamicComponentGenerator <DATA > |
Function for registering components based on updates of data . |
shift |
number |
- |
component_main
<T_DOM_HETNM
[cEL
]>
component_main.dynamicComponent
▸ getReference(): T_DOM_HETNM
[cEL
]
Returns reference of currently added element
T_DOM_HETNM
[cEL
]
▸ isStatic(): boolean
Methods returns if it was onupdate
used
boolean
▸ mount(el
, type?
): T_DOM_HETNM
[cEL
]
Add element to live DOM
Name | Type | Description |
---|---|---|
el |
HTMLElement |
Element where to places this component |
type? |
"replace" | "after" | "before" | "replaceContent" | "childFirst" | "childLast" |
Default childLast |
T_DOM_HETNM
[cEL
]
▸ on(...events
): component_add
<cEL
>
Method for batch registering on*
methods for current element.
const select_component= select();
select_component.mount(parent);
// default ⇣
select_component.update({ value: "no_default_1" });
// no_default_1 ⇣
function select(init= { value: "default" }){
const default_value= $dom.componentListener("mount", ()=> init);
const update_value= $dom.componentListener("update", init, ({ value })=> ({ value }));
const c= $dom.component("SELECT", null).on( default_value, update_value );
c.add("OPTION", { value: "no_default_1", textContent: "no_default_1" });
c.add("OPTION", { value: "default", textContent: "default" }, -1);
return share;
}
Name | Type | Description |
---|---|---|
...events |
component_listener [] |
Consumes component_listener. |
component_add
<cEL
>
▸ ondestroy(cb
): component_main
<T_DOM_HETNM
[cEL
]>
This provide ability to register function which should be called when the component will be destroyed.
Name | Type |
---|---|
cb |
(onDestroyFunction : HTMLElement ) => void |
component_main
<T_DOM_HETNM
[cEL
]>
▸ oninit(cb
): component_add
<cEL
>
This procedure allows to call given function cb
during registering element.
Name | Type |
---|---|
cb |
(el : T_DOM_HETNM [cEL ]) => void |
component_add
<cEL
>
▸ onmount(cb
): component_add
<cEL
>
This procedure allows to call given function cb
during mounting component.
It can for example solve problem setting default value for select
(option
s elements not exist when the select
itself is declared!).
As alternative for some cases, you can use active
label for option
s instead.
For now, only first mount!
const select_component= select({ value: "default" });
select_component.mount(parent);
// default ⇣
function select(init){
const c= $dom.component("SELECT", null)
.onmount(()=> init);
c.add("OPTION", { value: "no_default_1", textContent: "no_default_1" });
c.add("OPTION", { value: "no_default_2", textContent: "no_default_2" }, -1);
c.add("OPTION", { value: "no_default_3", textContent: "no_default_3" }, -1);
c.add("OPTION", { value: "default", textContent: "default" }, -1);
return c.share;
}
Name | Type |
---|---|
cb |
() => T_DOM_ATTRS <cEL > |
component_add
<cEL
>
▸ onupdate<DATA
>(data
, onUpdate
): component_add
<cEL
>
This method allows to register function which shoul be invoke when given keys in data
will be changed (see update).
const c= $dom.component("DIV", null);
…
c.add("P", null).onupdate({ key: "This is init value" }, ({ key })=> ({ textContent: key }));//=> <p>This is init value</p>
…
c.update({ key: "Value changed" });//=> <p>Value changed</p>
const c= $dom.component("DIV", null);
…
c.add("P", null).onupdate({ A: "A", B: "b" }, ({ A, B })=> ({ textContent: A+B }));//=> <p>Ab</p>
…
c.update({ B: "B" });//=> <p>AB</p>
Name | Type |
---|---|
DATA |
extends object |
Name | Type | Description |
---|---|---|
data |
DATA |
This allows register listener for given keys of Object data . For data= { a: "A", b: "B" } it means that when a or b will be changed the onUpdate is called. |
onUpdate |
(data : DATA ) => T_DOM_ATTRS <cEL > |
- |
component_add
<cEL
>
▸ setShift(shift
): component_main
<T_DOM_HETNM
[cEL
]>
Method provide way to change nesting behaviour. It can be helpful for loops
function testNesting(){
const c= $dom.component("DIV", null);
c.setShift(0);
for(let i= 0; i<5; i++){
c.add("P", { textContent: `Paragraph no. ${i}.` }, -1);
}
return c.share;
}
//=> div> 5*p
function testNesting(){
const c= $dom.component("DIV", null);
for(let i= 0; i<5; i++){
c.add("P", { textContent: `Paragraph no. ${i}.` });
//c.setShift();//or 0 => div> p> p> p> …
//c.setShift(-1); => div> p> p> p> …
c.setShift(-2);
}
return c.share;
}
//=> div> 5*p
Name | Type | Description |
---|---|---|
shift |
number |
See add |
component_main
<T_DOM_HETNM
[cEL
]>
▸ update(data
): boolean
Method updates all registered varibles by keys onupdates
and calls follower functions
// SIMPLE example
const data_A= { a: "A" };
const data_A_update= { a: "AAA" };
const c= $dom.component("UL", null);
c.add("LI", null)
.onupdate(data_A, ({ a })=>({ textContent: a }));//`{ a }` add listener for "a"
c.mount(document.body);
c.update(data_A_update);
// EXAMPLE WITH `mapUpdate`
const data_B= { a: { b: "A" }};
const data_B_update= { a: { b: "AAA" }};
const c= $dom.component("UL", null, { mapUpdate: d=>({ a: d.a.b }) });
c.add("LI", null)
.onupdate(data_B, ({ a })=>({ textContent: a }));
c.mount(document.body);
c.update(data_B_update);
Name | Type | Description |
---|---|---|
data |
object |
Updates internal storage (via Object.assign – no deep copy!) |
boolean
▸ update(map
): boolean
Method updates all registered varibles by keys onupdates
and calls follower functions
// EXAMPLE WITH FUNCTION AS ARGUMENT OF `update`
const c= $dom.component("UL", null, { mapUpdate: d=>({ a: d.a.b }) });
c.add("LI", null)
.onupdate({ a: 1 }, ({ a })=>({ textContent: a }));
c.mount(document.body);
c.update(({ a })=> { a: ++a });
Name | Type | Description |
---|---|---|
map |
(data : object ) => object |
Function takes as parameter previous internal storage and returns updated one (internally used Object.assign – no deep copy!) |
boolean