lib and sample split

static/index.html

@@ -64,6 +64,7 @@
         <pre id='state' style='background-color: lightgray;'>
             2 seconds timeout
         </pre>
+        <script src="nb.js"></script>
         <script src="index.js"></script>
     </body>
 </html>

static/index.js

@@ -1,150 +1,3 @@
-function nbInit($s){
-    function nBind(callback, prop, direction){
-        direction = direction || "write";
-        for (var selector in $s){
-            var result = [];
-            selector = prop || selector; //change selector to passed if it
-
-            var items = [document.getElementById(selector)]; 
-            items     = items[0]     ? items :  document.querySelectorAll(selector);
-            items     = items.length ? items :  document.getElementsByName(selector); 
-            items     = items.length ? items :  document.getElementsByClassName(selector); 
-            for (var i=0,item=items[i];i<items.length;i++,item=items[i]){
-                if (direction == "write" && item.children.length == 0 && Array.isArray($s[selector])){
-                    callback(item, $s, selector, $s[selector][i]);
-                }
-                else {
-                    var res = callback(item, $s, selector);
-                    if (typeof res !== "undefined"){
-                        result.push(res)
-                    }
-                }
-            }
-
-            
-            $s[selector] = result.length ? (result.length == 1 ? result[0] : result) : $s[selector];
-
-            if (prop) return;  //exit if selector passed, no iteration
-        }
-    }
-
-    function syncToDOM(prop){
-        nBind(function (item, $s, selector, value, key){
-            value = typeof value === 'undefined' ? $s[selector] : value;
-            var keyExists = typeof key !== 'undefined';
-            if (!item.children.length && !Array.isArray(value) && typeof value === 'object'){ //hash array on single leaf node -> set attrs on the tag
-                for (var key in value){
-                    item[key] = value[key];
-                }
-                return;
-            }
-            if (keyExists && "value" in item){ //if hash key-value pair. Usable for select > option
-                item.value = key;
-            }
-            if (typeof value === "boolean" && item.type !== 'checkbox'){ //boolean means visibility, except checkbox
-                if (value){
-                    item.style.display = "originalDisplay" in item ? item.originalDisplay : "";
-                }
-                else {
-                    item.originalDisplay = item.style.display;
-                    item.style.display   = "none";
-                }
-                return;
-            }
-            if (item.type === 'radio' && !keyExists){ //radiogroup set
-                if (item.value === value){ //only item with right value to set
-                    item.checked = true;
-                }
-                return;
-            }
-            if (item.type === 'checkbox' && !keyExists){ //checkbox setting by boolean
-                item.checked = !!value;
-                return;
-            }
-            if (item.children.length && typeof value === "object"){ //recursive fill
-                item.copy = item.copy || item.cloneNode(true); //original node
-                var originalChildren = item.copy.children;
-                var i = 0;
-                var isArray = Array.isArray(value);      //different logic for array and objects
-                if (!isArray){ // if first key in array find as class name in one of subnodes
-                    var classFound = false;
-                    for (var key in value){
-                        if (item.getElementsByClassName(key).length){
-                            classFound = true;
-                            break;
-                        }
-                    }
-                    if (classFound){
-                        for (var key in value){
-                            var classSubnodes = item.getElementsByClassName(key);
-                            for (var i=0;i<classSubnodes.length;i++){
-                                arguments.callee(classSubnodes[i], $s, selector, value[key]); // recursively fill subnode with that data. No reason to pass a key, because key are class selector, not value for option
-                            }
-                        }
-                        return;
-                    }
-                }
-                item.innerHTML = "";                     //remove sub nodes
-                for (var key in value){ //otherwise iterate over array or object
-                    var newNode = originalChildren[i].cloneNode(true);
-                    item.appendChild(newNode);
-                    if (isArray){
-                        arguments.callee(newNode, $s, selector, value[key]);
-                    }
-                    else {
-                        arguments.callee(newNode, $s, selector, value[key], key);
-                    }
-                    i = (i +1) % originalChildren.length;
-                }
-                return;
-            }
-            if (!keyExists){ //default logic: set text or value to data value
-                item["value" in item ? "value" : "innerText"] = value;
-            }
-            else {
-                item.innerText = value; // do not try to overwrite value on option nodes
-            }
-        },prop, "write");
-    }
-
-    function syncFromDOM(prop){
-        nBind(function(item, $s, selector){
-            if (item.type === 'radio'){
-                if (item.checked) 
-                    return item.value; 
-                return;
-            }
-            if (item.type === 'checkbox'){
-                return item.checked;
-            }
-            return item["value" in item ? "value" : "innerText"]; 
-        },prop, "read");
-    }
-
-    syncToDOM();
-
-    var scopeProxy = new Proxy($s,{
-        get(target, prop){
-            if (!(prop in target) && (document.getElementById(prop) || 
-                                      document.querySelectorAll(prop).length || 
-                                      document.getElementsByName(prop).length ||
-                                      document.getElementsByClassName(prop).length)){
-                target[prop] = null;
-            }
-            syncFromDOM(prop);
-            return target[prop];
-        },
-        set(target, prop, value){
-            //syncFromDOM();
-            target[prop] = value
-            syncToDOM(prop);
-            return true;
-        },
-    })
-
-    return scopeProxy;
-}
-
 var $s;
 
 setTimeout(function(){
@@ -158,31 +11,7 @@ setTimeout(function(){
     numberTable: [[1,2,3,4,5,6],
                     [7,8,9,10,11,12],
                     [13,14,15,16,17,18],
-                    /*[19,20,21,22,23,24]*/],
-    //numberTable: [[[{"": "--",
-                     //M:  "Male",
-                     //F:  "Female",
-                     //X:  "Xenomorph"}],
-                    //[{"": "--",
-                     //M:  "Male",
-                     //F:  "Female",
-                     //X:  "Xenomorph"}],
-                    //[{"": "--",
-                     //M:  "Male",
-                     //F:  "Female",
-                     //X:  "Xenomorph"}]],
-                    //[[{"": "--",
-                     //M:  "Male",
-                     //F:  "Female",
-                     //X:  "Xenomorph"}],
-                    //[{"": "--",
-                     //M:  "Male",
-                     //F:  "Female",
-                     //X:  "Xenomorph"}],
-                    //[{"": "--",
-                     //M:  "Male",
-                     //F:  "Female",
-                     //X:  "Xenomorph"}]]],
+                    [19,20,21,22,23,24]],
     hashTable: [{ name: "Ivan",
                   surname: "Ivanovv",
                   age: "57",
@@ -208,9 +37,9 @@ setTimeout(function(){
              description: "third check"},
     ],
     radios: [
-            {radio: {name: "sexism", value: "M", checked: true},
+            {radio: {name: "sexism", value: "M"},
              description: "Male"},
-            {radio: {name: "sexism", value: "F"},
+            {radio: {name: "sexism", value: "F", checked: true},
              description: "Female"},
             {radio: {name: "racism", value: "white", checked: true},
              description: "White"},

static/nb.js

@@ -0,0 +1,146 @@
+function nbInit($s){
+    function nBind(callback, prop, direction){
+        direction = direction || "write";
+        for (var selector in $s){
+            var result = [];
+            selector = prop || selector; //change selector to passed if it
+
+            var items = [document.getElementById(selector)]; 
+            items     = items[0]     ? items :  document.querySelectorAll(selector);
+            items     = items.length ? items :  document.getElementsByName(selector); 
+            items     = items.length ? items :  document.getElementsByClassName(selector); 
+            for (var i=0,item=items[i];i<items.length;i++,item=items[i]){
+                if (direction == "write" && item.children.length == 0 && Array.isArray($s[selector])){
+                    callback(item, $s, selector, $s[selector][i]);
+                }
+                else {
+                    var res = callback(item, $s, selector);
+                    if (typeof res !== "undefined"){
+                        result.push(res)
+                    }
+                }
+            }
+
+            
+            $s[selector] = result.length ? (result.length == 1 ? result[0] : result) : $s[selector];
+
+            if (prop) return;  //exit if selector passed, no iteration
+        }
+    }
+
+    function syncToDOM(prop){
+        nBind(function (item, $s, selector, value, key){
+            value = typeof value === 'undefined' ? $s[selector] : value;
+            var keyExists = typeof key !== 'undefined';
+            if (!item.children.length && !Array.isArray(value) && typeof value === 'object'){ //hash array on single leaf node -> set attrs on the tag
+                for (var key in value){
+                    item[key] = value[key];
+                }
+                return;
+            }
+            if (keyExists && "value" in item){ //if hash key-value pair. Usable for select > option
+                item.value = key;
+            }
+            if (typeof value === "boolean" && item.type !== 'checkbox'){ //boolean means visibility, except checkbox
+                if (value){
+                    item.style.display = "originalDisplay" in item ? item.originalDisplay : "";
+                }
+                else {
+                    item.originalDisplay = item.style.display;
+                    item.style.display   = "none";
+                }
+                return;
+            }
+            if (item.type === 'radio' && !keyExists){ //radiogroup set
+                if (item.value === value){ //only item with right value to set
+                    item.checked = true;
+                }
+                return;
+            }
+            if (item.type === 'checkbox' && !keyExists){ //checkbox setting by boolean
+                item.checked = !!value;
+                return;
+            }
+            if (item.children.length && typeof value === "object"){ //recursive fill
+                item.copy = item.copy || item.cloneNode(true); //original node
+                var originalChildren = item.copy.children;
+                var i = 0;
+                var isArray = Array.isArray(value);      //different logic for array and objects
+                if (!isArray){ // if first key in array find as class name in one of subnodes
+                    var classFound = false;
+                    for (var key in value){
+                        if (item.getElementsByClassName(key).length){
+                            classFound = true;
+                            break;
+                        }
+                    }
+                    if (classFound){
+                        for (var key in value){
+                            var classSubnodes = item.getElementsByClassName(key);
+                            for (var i=0;i<classSubnodes.length;i++){
+                                arguments.callee(classSubnodes[i], $s, selector, value[key]); // recursively fill subnode with that data. No reason to pass a key, because key are class selector, not value for option
+                            }
+                        }
+                        return;
+                    }
+                }
+                item.innerHTML = "";                     //remove sub nodes
+                for (var key in value){ //otherwise iterate over array or object
+                    var newNode = originalChildren[i].cloneNode(true);
+                    item.appendChild(newNode);
+                    if (isArray){
+                        arguments.callee(newNode, $s, selector, value[key]);
+                    }
+                    else {
+                        arguments.callee(newNode, $s, selector, value[key], key);
+                    }
+                    i = (i +1) % originalChildren.length;
+                }
+                return;
+            }
+            if (!keyExists){ //default logic: set text or value to data value
+                item["value" in item ? "value" : "innerText"] = value;
+            }
+            else {
+                item.innerText = value; // do not try to overwrite value on option nodes
+            }
+        },prop, "write");
+    }
+
+    function syncFromDOM(prop){
+        nBind(function(item, $s, selector){
+            if (item.type === 'radio'){
+                if (item.checked) 
+                    return item.value; 
+                return;
+            }
+            if (item.type === 'checkbox'){
+                return item.checked;
+            }
+            return item["value" in item ? "value" : "innerText"]; 
+        },prop, "read");
+    }
+
+    syncToDOM();
+
+    var scopeProxy = new Proxy($s,{
+        get(target, prop){
+            if (!(prop in target) && (document.getElementById(prop) || 
+                                      document.querySelectorAll(prop).length || 
+                                      document.getElementsByName(prop).length ||
+                                      document.getElementsByClassName(prop).length)){
+                target[prop] = null;
+            }
+            syncFromDOM(prop);
+            return target[prop];
+        },
+        set(target, prop, value){
+            //syncFromDOM();
+            target[prop] = value
+            syncToDOM(prop);
+            return true;
+        },
+    })
+
+    return scopeProxy;
+}