Inicio Explorar Ayuda
Iniciar sesión
gitgod
/
nanobind
Seguir 1
Destacar 1
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

more handy sample page with evaluation

me@helium hace 8 años
padre
bfe17f350b
commit
e74ab27760
Se han modificado 4 ficheros con 283 adiciones y 97 borrados
Dividir vista Mostrar estadísticas de diff
  1. 30 0
      static/index.css
  2. 162 52
      static/index.html
  3. 71 27
      static/index.js
  4. 20 18
      static/nb.js

+ 30 - 0
static/index.css
Ver fichero 

@@ -0,0 +1,30 @@
 
+body {
 
+    display: flex;
 
+    flex-direction: column;
 
+}
 
+
 
+.oneVar {
 
+    display: flex;
 
+    flex-direction: row;
 
+    border-radius: 10px;
 
+    border: 3px red solid;
 
+    margin: 5px;
 
+    padding: 5px;
 
+}
 
+
 
+.leftColumn {
 
+    flex-basis: 50%;
 
+}
 
+
 
+.rightColumn {
 
+    flex-basis: 50%;
 
+    border-radius: 10px;
 
+    border: 3px #AFF solid;
 
+    margin: 5px;
 
+    /*padding: 5px;*/
 
+}
 
+
 
+.rightColumn .data {
 
+    height: 200px;
 
+    width: 98%;
 
+}

+ 162 - 52
static/index.html
Ver fichero 

@@ -7,64 +7,174 @@
 
         <link href="index.css" rel="stylesheet" type="text/css" />
 
     </head>
 
     <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" style="background-color: gray;">Male</option>-->
 
-                <!--<option value="F">Female</option>-->
 
-                <!--<option value="X">Xenomorph</option> -->
 
-            </select>
 
-        </p>
 
-        <input type='checkbox' id='check1'><br/>
 
-        <table>
 
-            <tbody id="numberTable">
 
-                <tr>
 
-                    <td>table template line 1</td>
 
-                    <td style='background-color: blue;'>table template line 1</td>
 
-                </tr>
 
-                <tr style='background-color: gray;'>
 
-                    <td>table template line 2</td>
 
-                    <td style='background-color: red;'>table template line 2</td>
 
-                </tr>
 
-            </tbody>
 
-        </table>
 
-        <table>
 
-            <thead>
 
-                <th> age</th>
 
-                <th> married</th>
 
-                <th> surname</th>
 
-                <th> name</th>
 
-                <th> note</th>
 
-            </thead>
 
-            <tbody id="hashTable">
 
-                <tr>
 
-                    <td class='age'></td>
 
-                    <td><input type='checkbox' class='married'></td>
 
-                    <td class='surname'></td>
 
-                    <td class='name'></td>
 
-                    <td><textarea class='note'></textarea></td>
 
-                    <td><button class='btn'>+</button></td>
 
-                </tr>
 
-            </tbody>
 
-        </table>
 
-        <div id="checks">
 
-            <label><input type='checkbox' class='check'><span class='description'></span><br/></label>
 
+        <div class='oneVar'>
 
+            <div class='leftColumn'>
 
+                <input type="text" id="text1">
 
+            </div>
 
+            <div class='rightColumn'>
 
+                <h3 class='key'></h3>
 
+                <textarea class='data'>
 
+                </textarea>
 
+                <button class='update'>Update</button>
 
+            </div>
 
         </div>
 
-        <div id="radios">
 
-            <label><input type='radio' class='radio'><span class='description'></span><br/></label>
 
+<!--        <div class='oneVar'>
 
+            <div class='leftColumn'>
 
+                <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>
 
+            </div>
 
+            <div class='rightColumn'>
 
+                <h3 class='key'></h3>
 
+                <textarea class='data'>
 
+                </textarea>
 
+            </div>
 
+        </div> -->
 
+        <div class='oneVar'>
 
+            <div class='leftColumn'>
 
+                <textarea id="textarea"></textarea>
 
+            </div>
 
+            <div class='rightColumn'>
 
+                <h3 class='key'></h3>
 
+                <textarea class='data'>
 
+                </textarea>
 
+                <button class='update'>Update</button>
 
+            </div>
 
         </div>
 
+        <div class='oneVar'>
 
+            <div class='leftColumn'>
 
+                <select id="select">
 
+                    <option value="">--</option>
 
+                    <!--<option value="M" style="background-color: gray;">Male</option>-->
 
+                    <!--<option value="F">Female</option>-->
 
+                    <!--<option value="X">Xenomorph</option> -->
 
+                </select>
 
+            </div>
 
+            <div class='rightColumn'>
 
+                <h3 class='key'></h3>
 
+                <textarea class='data'>
 
+                </textarea>
 
+                <button class='update'>Update</button>
 
+            </div>
 
+        </div>
 
+        <div class='oneVar'>
 
+            <div class='leftColumn'>
 
+                <input type='checkbox' id='check1'>
 
+            </div>
 
+            <div class='rightColumn'>
 
+                <h3 class='key'></h3>
 
+                <textarea class='data'>
 
+                </textarea>
 
+                <button class='update'>Update</button>
 
+            </div>
 
+        </div>
 
+        <div class='oneVar'>
 
+            <div class='leftColumn'>
 
+                <table>
 
+                    <tbody id="numberTable">
 
+                        <tr>
 
+                            <td><input>table template line 1</td>
 
+                            <td style='background-color: blue;'>table template line 1</td>
 
+                        </tr>
 
+                        <tr style='background-color: gray;'>
 
+                            <td>table template line 2</td>
 
+                            <td style='background-color: red;'>table template line 2</td>
 
+                        </tr>
 
+                    </tbody>
 
+                </table>
 
+            </div>
 
+            <div class='rightColumn'>
 
+                <h3 class='key'></h3>
 
+                <textarea class='data'>
 
+                </textarea>
 
+                <button class='update'>Update</button>
 
+            </div>
 
+        </div>
 
+        <div class='oneVar'>
 
+            <div class='leftColumn'>
 
+                <table>
 
+                    <thead>
 
+                        <th> age</th>
 
+                        <th> married</th>
 
+                        <th> surname</th>
 
+                        <th> name</th>
 
+                        <th> note</th>
 
+                    </thead>
 
+                    <tbody id="hashTable">
 
+                        <tr>
 
+                            <td class='age'></td>
 
+                            <td><input type='checkbox' class='married'></td>
 
+                            <td class='surname'></td>
 
+                            <td class='name'></td>
 
+                            <td><textarea class='note'></textarea></td>
 
+                            <td><button class='btn'>+</button></td>
 
+                        </tr>
 
+                    </tbody>
 
+                </table>
 
+            </div>
 
+            <div class='rightColumn'>
 
+                <h3 class='key'></h3>
 
+                <textarea class='data'>
 
+                </textarea>
 
+                <button class='update'>Update</button>
 
+            </div>
 
+        </div>
 
+<!--        <div class='oneVar'>
 
+            <table>
 
+                <tbody id="persons">
 
+                    <tr>
 
+                        <td><input type='number' style='max-width:50px;'></td>
 
+                    </tr>
 
+                </tbody>
 
+            </table>
 
+        </div> -->
 
+        <div class='oneVar'>
 
+            <div class='leftColumn' id="checks">
 
+                <label><input type='checkbox' class='check'><span class='description'></span><br/></label>
 
+            </div>
 
+            <div class='rightColumn'>
 
+                <h3 class='key'></h3>
 
+                <textarea class='data'>
 
+                </textarea>
 
+                <button class='update'>Update</button>
 
+            </div>
 
+        </div>
 
+        <div class='oneVar'>
 
+            <div id="radios" class='leftColumn'>
 
+                <label><input type='radio' class='radio'><span class='description'></span><br/></label>
 
+            </div>
 
+            <div class='rightColumn'>
 
+                <h3 class='key'></h3>
 
+                <textarea class='data'>
 
+                </textarea>
 
+                <button class='update'>Update</button>
 
+            </div>
 
+        </div>
 
+        <div class='oneVar'>
 
+            <div class='leftColumn'>
 
+                <table>
 
+                    <tbody id="ediTable">
 
+                        <tr>
 
+                            <td><!--<input type='number' style='max-width:50px;'>--></td>
 
+                        </tr>
 
+                    </tbody>
 
+                </table>
 
+            </div>
 
+            <div class='rightColumn'>
 
+                <h3 class='key'></h3>
 
+                <textarea class='data'>
 
+                </textarea>
 
+                <button class='update'>Update</button>
 
+            </div>
 
+        </div>
 
+        <!--
 
         <strong>Use $s variable for accessing data in DOM</strong>
 
         <pre id='state' style='background-color: lightgray;'>
 
             2 seconds timeout
 
         </pre>
 
+        -->
 
+
 
         <script src="nb.js"></script>
 
         <script src="index.js"></script>
 
     </body>

+ 71 - 27
static/index.js
Ver fichero 

@@ -1,18 +1,5 @@
 
-var $s;
 
-
 
-setTimeout(function(){
 
-    $s = nbInit({
 
-    text1: "txt",
 
-    p1: "para",
 
-    select: {"": "--",
 
-             M:  "Male",
 
-             F:  "Female",
 
-             X:  "Xenomorph"},
 
-    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]],
 
-    hashTable: [{ name: "Ivan",
 
+var $s, $show;
 
+var persons = [{ name: "Ivan",
 
                   surname: "Ivanovv",
 
                   age: "57",
 
                   note: {value: "Buhaet", name: 'ivanovvsTextArea'},
 
@@ -27,7 +14,23 @@ setTimeout(function(){
 
                   surname: "Tester",
 
                   married: true,
 
                   note: "Ovulyashka",
 
-                  age: "27"} ],
 
+                  age: "27"} ];
 
+
 
+setTimeout(function(){
 
+    $s = nbInit({
 
+    text1: "txt",
 
+    textarea: "txt area",
 
+//    p1: "para",
 
+    select: {"": "--",
 
+             M:  "Male",
 
+             F:  "Female",
 
+             X:  "Xenomorph"},
 
+    check1: true,
 
+    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]],
 
+    hashTable: persons,
 
     checks: [
 
             {check: {name: "first", checked: true},
 
              description: "first check"},
 
@@ -47,20 +50,61 @@ setTimeout(function(){
 
              description: "Black"}, ],
 
     });
 
 
-    $s.textarea; $s.select; $s.dzen; $s.check1; $s.note; $s.married; //just for init
 
-    $s.btn = {onclick: function(){
 
-        var thisLine = this.parentElement.parentElement;
 
-        var newLine = thisLine.cloneNode(true);
 
-        newLine.nbData = Object.assign({},thisLine.nbData);
 
-        thisLine.parentElement.insertBefore(newLine,thisLine);
 
-        $s.btn = {onclick: arguments.callee};
 
-    }};
 
+//    $s.textarea; $s.select; $s.dzen; $s.check1; $s.note; $s.married; //just for init
 
+    //$s.btn = {onclick: function(){
 
+        //var thisLine = this.parentElement.parentElement;
 
+        //var newLine = thisLine.cloneNode(true);
 
+        //newLine.nbData = Object.assign({},thisLine.nbData);
 
+        //thisLine.parentElement.insertBefore(newLine,thisLine);
 
+        //$s.btn = {onclick: arguments.callee};
 
+    //}};
 
+
 
+    var ediNumbers = [];
 
+    function ediFunc(){
 
+        if ($s.ediInput){
 
+            this.innerHTML = $s.ediInput;
 
+        }
 
+        else {
 
+            var text = this.innerHTML;
 
+            this.innerHTML = "<input id='ediInput'/>";
 
+            $s.ediInput    = text;
 
+        }
 
+    }
 
+    for (var i=0;i<10;i++){
 
+        ediNumbers[i] = [];
 
+        for (var j=0;j<10;j++){
 
+            //ediNumbers[i][j] = [i*j]; //one-level lower trick; uncomment input in html
 
+            //ediNumbers[i][j] = i*j; //read only table
 
+            ediNumbers[i][j] = {onclick: ediFunc,
 
+                                innerHTML:   i*j, //read only table
 
+                                }
 
+        }
 
+    }
 
+    $s.ediTable = ediNumbers;
 
+
 
+    $show = nbInit({});
 
 
     document.onchange();
 
 },2000);
 
 
+function onUpdate(){
 
+    var key   = this.parentElement.getElementsByClassName("key")[0].innerHTML;
 
+    var value = this.parentElement.getElementsByClassName("data")[0].value;
 
+    eval(key + value);
 
+}
 
+
 
+document.onchange = function(evt){
 
+    //$s.state  = "";
 
+    //$s.state  = JSON.stringify($s, null, 4);
 
+    //
 
+    if (evt && evt.target.className == 'data'){
 
+        return;
 
+    }
 
+    
 
-document.onchange = function(){
 
-    $s.state  = "";
 
-    $s.state  = JSON.stringify($s, null, 4);
 
+    var data = [];
 
+    for (key in $s){
 
+        data.push({key: "$s." + key + " = ", data: JSON.stringify($s[key], null, 4), update: {onclick: onUpdate}});
 
+    }
 
+    $show.rightColumn = data;
 
 }

+ 20 - 18
static/nb.js
Ver fichero 

@@ -10,7 +10,7 @@ function nbInit($s){
 
             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])){
 
+                if (direction == "write" &&  Array.isArray($s[selector]) && (item.children.length == 0 || (items.length == $s[selector].length))){
 
                     callback(item, $s, selector, $s[selector][i]);
 
                 }
 
                 else {
 
@@ -124,14 +124,8 @@ function nbInit($s){
 
             }
 
             if ("nbData" in item){
 
                 var value = item.nbData;
 
-                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){
 
-                        value[key] = item[key];
 
-                    }
 
-                    return value;
 
-                }
 
+                var isArray = Array.isArray(value);      //different logic for array and objects
 
                 if (item.children.length && typeof value === "object"){ //recursive fill
 
-                    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){
 
@@ -150,13 +144,21 @@ function nbInit($s){
 
                             return value;
 
                         }
 
                     }
 
-                    for (var key=0;key<item.children.length;key++){ //otherwise iterate over array or object
 
-                        if (isArray){
 
+                    else{
 
+                        for (var key=0;key<item.children.length;key++){ //otherwise iterate over array or object
 
                             value[key] = arguments.callee(item.children[key], $s, selector);
 
                         }
 
-                        else {
 
-                            value[item.children[key].value] = arguments.callee(item.children[key], $s, selector);
 
-                        }
 
+                        return value;
 
+                    }
 
+                    //else {
 
+                        //for (var key in value){
 
+                            //value[key] = arguments.callee(item.children[key], $s, selector);
 
+                        //}
 
+                    //}
 
+                }
 
+                if (!isArray && typeof value === 'object'){ //hash array on single leaf node -> set attrs on the tag
 
+                    for (var key in value){
 
+                        value[key] = item[key];
 
                     }
 
                     return value;
 
                 }
 
@@ -172,12 +174,12 @@ function nbInit($s){
 
 
     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)){
 
+            //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];
 
         },