data-context-binding/demo.html at master · manuel-lohmus/data-context-binding · 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title path="arr[0].str" bind>DEMO 'data-context-binding'</title>
    <script async src="https://cdn.jsdelivr.net/npm/data-context"></script>
    <script async src="https://cdn.jsdelivr.net/npm/data-context-binding"></script>
    <!--<script async src="./datacontext.js"></script>-->
    <!--<script async type="text/javascript" src="./browser.js"></script>-->
    <script id="data" type="application/json">
        {"arr":[{"str":"DB - DEMO"},{"str":"111"},{"str":"222"},{"str":"333"},{"str":"444"},{"str":"555"}]}
    </script>
    <script>

        var _count = 0;

        importModules(['data-context', 'data-context-binding'], function (dataContext, dataContextBinding) {
            // We're making modules easier to find.
            window.DC = dataContext;
            window.DB = dataContextBinding;
            // Extension bind functions
            DB.innerHTML_toString = function (event) {

                // Initial setup
                if (event.eventName === "bind") {
                    // Set listener
                    this.contextValue().on('-change', function () {
                        // We get context data
                        var data = this.contextValue();
                        // We put the value on the screen
                        this.innerText = data;
                        // I am alive!
                        return true;
                    },
                        // Set DOM element.
                        // I am monitoring the attribute 'isConnected'.
                        // If it's true, it's alive.
                        this
                    );
                }

                // I am dead!
                return false;
            };
            DB.innerHTML_stringify = function (event) {

                // Initial setup
                if (event.eventName === "bind") {
                    // Set listener
                    this.contextValue().on('-change', function () {
                        // Get context data
                        var data = this.contextValue();
                        // Put the value on the screen
                        this.innerText = DC.stringify(data);
                        // I am alive!
                        return true;
                    },
                        // Set DOM element.
                        // I am monitoring the attribute 'isConnected'.
                        // If it's true, it's alive.
                        this
                    );
                }

                // I am dead!
                return false;
            };
        });


        function importModules(importIdentifierArray, cb) {

            var thisScope = "undefined" != typeof globalThis
                ? globalThis
                : "undefined" != typeof window
                    ? window
                    : "undefined" != typeof global
                        ? global : "undefined" != typeof self
                            ? self
                            : {};

            if (!thisScope.modules) { thisScope.modules = {}; }

            waitModules();


            function waitModules() {

                if (importIdentifierArray.length) {

                    for (let i = 0; i < importIdentifierArray.length; i++) {

                        if (!thisScope.modules[importIdentifierArray[i]]) { return setTimeout(waitModules, 10); }
                    }
                }

                cb.call(thisScope, ...importIdentifierArray.map(function (id) { return thisScope.modules[id]; }));
            }
        }

    </script>
    <style>
        [unbinded] {
            border: 2px dashed red;
        }
    </style>
</head>
<body path="arr">
    <h3>DEMO 'data-context-binding'</h3>
    <div path="1">
        <span>dc[1] = </span>
        <input path="str" bind />
        <span> => </span>
        <span path="str" bind></span>
    </div>
    <div path="2">
        <span>dc[2] = </span>
        <input path="str" bind />
        <span> => </span>
        <span path="str" bind></span>
    </div>
    <p>dc.toString() => <code bind="innerHTML_toString"></code></p>
    <p>DC.stringify(dc) => <code bind="innerHTML_stringify"></code></p>
    <label>dc.on('-change', ...)</label>   count: <span id="count"></span><br />
    <textarea cols="50" rows="10" bind="change"></textarea>
    <fieldset>
        <legend style="background-color: #555; color: #fff; padding: 3px 6px;">Template binding:</legend>
        <div templates="template#temp">
            <template id="temp">
                <div style="border:.5px solid #555; margin:1px;"><button onclick="DB.bindingContext(this).remove();">del</button>  <span path="str" bind></span></div>
            </template>

        </div>
    </fieldset>
    <div style="margin:0 2px; background-color:#555; color:#fff; padding:3px;">
        <span>Template: </span>
        <input id="str" />
        <button onclick="
    // We get root context data
    var dc = DB();
    // Push to array
    if (Array.isArray(dc?.arr)) { dc.arr.push({ str: str.value }); }
    // Clear screen
    str.value = '';
    // Set to focus
    str.focus();
    ">add</button>
    </div>
    <br />
    <!--<button onclick="DB.bindAllElements(null, true)">rebind all</button>-->
</body>
</html>