Home Explore Help
Sign In
gitgod
/
nanobind
Watch 1
Star 1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

pre-alpha

me@helium 8 years ago
parent
c6587fb14b
commit
2add589d08
3 changed files with 87 additions and 1 deletions
Unified View Show Diff Stats
  1. 0 0
      static/index.css
  2. 18 1
      static/index.html
  3. 69 0
      static/index.js

+ 0 - 0
static/index.css
View File


+ 18 - 1
static/index.html
View File 

@@ -3,10 +3,27 @@
 
     <head>
 
     <head>
 
         <meta charset="utf-8">
 
         <meta charset="utf-8">
 
         <meta name="viewport" content="width=device-width">
 
         <meta name="viewport" content="width=device-width">
 
-        <title>repl.it</title>
 
+        <title>Nano Bind Sample</title>
 
         <link href="index.css" rel="stylesheet" type="text/css" />
 
         <link href="index.css" rel="stylesheet" type="text/css" />
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
+        <input type="text" id="text1">
 
+        <p id='p1'></p>
 
+        <p><input name="dzen" type="radio" value="nedzen"> Не дзен</p>
 
+        <p><input name="dzen" type="radio" value="dzen"> Дзен</p>
 
+        <p><input name="dzen" type="radio" value="pdzen" checked> Полный дзен</p>
 
+        <p>
 
+            <textarea id="textarea"></textarea>
 
+        </p>
 
+        <p>
 
+            <select id="select">
 
+                <option value="">--</option>
 
+                <option value="M">Male</option>
 
+                <option value="F">Female</option>
 
+                <option value="X">Xenomorph</option>
 
+            </select>
 
+        </p>
 
+        <input type='checkbox' id='check1'>
 
         <script src="index.js"></script>
 
         <script src="index.js"></script>
 
     </body>
 
     </body>
 
 </html>
 
 </html>

+ 69 - 0
static/index.js
View File 

@@ -0,0 +1,69 @@
 
+function nbInit($s){
 
+    function nBind(callback){
 
+        for (var selector in $s){
 
+            var items = document.querySelectorAll(selector);
 
+            items     = items.length ? items : document.querySelectorAll("#" + selector); 
+            for (var i=0,item=items[i];i<items.length;i++,item=items[i]){
 
+                callback(item, $s, selector)
 
+            }
 
+        }
 
+    }
 
+
 
+    function syncToDOM(){
 
+        nBind(function(item, $s, selector){
 
+            if (item.type === 'radio'){
 
+                if (item.value === $s[selector]){
 
+                    item.checked = true;
 
+                }
 
+                return;
 
+            }
 
+            if (item.type === 'checkbox'){
 
+                item.checked = !!$s[selector];
 
+                return;
 
+            }
 
+            item["value" in item ? "value" : "innerText"] = $s[selector];
 
+        });
 
+    }
 
+
 
+    function syncFromDOM(){
 
+        nBind(function(item, $s, selector){
 
+            if (item.type === 'radio'){
 
+                if (item.checked) 
+                    $s[selector] = item.value; 
+                return;
 
+            }
 
+            if (item.type === 'checkbox'){
 
+                $s[selector] = item.checked;
 
+                return;
 
+            }
 
+            $s[selector] = item["value" in item ? "value" : "innerText"]; 
+        });
 
+    }
 
+
 
+    syncToDOM();
 
+
 
+    var scopeProxy = new Proxy($s,{
 
+        get(target, prop){
 
+            if (!(prop in target) && (document.querySelectorAll(prop).length || document.querySelectorAll("#" +prop).length)){
 
+                target[prop] = null;
 
+            }
 
+            syncFromDOM();
 
+            return target[prop];
 
+        },
 
+        set(target, prop, value){
 
+            syncFromDOM();
 
+            target[prop] = value
 
+            syncToDOM();
 
+            return true;
 
+        },
 
+    })
 
+
 
+    return scopeProxy;
 
+}
 
+
 
+var $s = nbInit({
 
+    text1: "txt",
 
+    p1: "para"
 
+});
 
+
 
+