dollar_dom_component/docs/examples/example_t4.sub.html at master · IndigoMultimediaTeam/dollar_dom_component · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
gulp_place("app._BUILD_.example_el= toELID(app._BUILD_.example_el_id++)", "eval");
gulp_place("app._BUILD_.example_onkeyup= toKeyUp(app._BUILD_.example_el)", "eval");
<p>As previou with different usuage of <a href="https://github.com/jaandrle/dollar_dom_component/blob/master/bin/$dom_component.js#L485"><code>setShift</code></a>:</p>
<div class="output" id="gulp_place('app._BUILD_.example_el', 'variable')"></div>
<script onkeyup="gulp_place('app._BUILD_.example_onkeyup', 'variable')" contenteditable="">
(function(element_id){
    //EXAMPLE START

    const container= document.getElementById(element_id);
    mainComponent({ textContent: "`dynamicComponent` example: " }).mount(container);

    function mainComponent({ textContent }){
        const { add, addText, update, dynamicComponent, share }= $dom.component("DIV");
            add("P", { textContent });
                dynamicComponent({ text: "–" }, function(use, prev_component, { text: textContent }, shared_value){
                    /* use: component mounter, prev_component: previously mounted component, data (see onupdate), shared_value: value setted by return of this function */
                    /* initial component */
                    if(!prev_component){
                        use($dom.component("SPAN", { textContent }).share);
                        return 1;
                    }
                    /* dynamic part */
                    if(shared_value===1) use(spec_text({ textContent }));
                    else prev_component.update({ shared_text: `(update only – ${shared_value-1}×)` });

                    return ++shared_value;
                });
                addText(".", -1);
            add("BUTTON", { textContent: "text1", onclick }, -2);
            add("BUTTON", { textContent: "text2", onclick }, -1);
        return share;

        function onclick(){ update({ text: this.textContent }); }
    }
    function spec_text({ textContent }){
        const { share }= $dom.component("STRONG")
            .onupdate({ shared_text: "" }, ({ shared_text })=> ({ textContent: textContent+(shared_text?" "+shared_text:shared_text) }));
        return share;
    }

    //EXAMPLE END
})("gulp_place('app._BUILD_.example_el', 'variable')");
</script>
<!-- example source links -->