|
|
@@ -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"},
|
me@helium