Correction [partielle] du cas ou une valeur de 'next' ou 'prev' dans la méthode 'buildElements', pour ajouter récursivement, car si on lie en cascade, 'next' peut contenir un objet built, donc récursion (idem pour 'prev')
This commit is contained in:
xdrm-brackets
parent
410e3f2359
commit
ca3c151867
|
|
@ -1,4 +1,4 @@
|
|||
var ElementObject={node:"node name defined earlier",attributes:{attr_name_1:"attr_value_1",attr_name_2:"attr_value_2"},children:[ElementObject],next_nodes:[ElementObject],prev_nodes:[ElementObject],text:"some text to be the innerHTML",repeat:"number to repeat ElementObject || {{array}} to repeat ElementObject",node_type:"html tag name",listeners:[EventListener]},default_definition={input:{node_type:"input"},"/^h([1-6])$/":{node_type:"h{$1}"},br:{node_type:"br"},option:{node_type:"option"},select:{node_type:"select"},
|
||||
span:{node_type:"span"}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},listeners:{click:"{onclick()}"},next_nodes:[{node:"br"}]},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select",attributes:{"data-name":"{name}"},children:[{node:"option",attribute:{value:"{options.value}"},text:"{options.value}",browse:{array:"{options[]}"}}]}],next_nodes:[{node:"br"}]},
|
||||
"mult-text":{node:"span",attributes:{id:"text_{rep.i}"},text:"{rep.i} sur {rep.n}",repeat:{n:10,id:"rep"}}},form={node:"h4",attributes:{"data-icon":"o","class":"new-contact color2"},children:[{node:"input:hidden",$name:"uid",$value:"{uid}"},{node:"input:hidden",$name:"call",$value:"{call}"},{node:"input:hidden",$name:"sms",$value:"{sms}"},{node:"input:hidden",$name:"countcall",$value:"{countcall}"},{node:"input:hidden",$name:"countsms",$value:"{countsms}"},{node:"input:text",$name:"number",$value:"{number}",
|
||||
$placeholder:"{Num\u00e9ro de t\u00e9l\u00e9phone}"},{node:"custom-select",$name:"existing",$$options:"{{options}}"}]};
|
||||
var ElementObject={node:"node name defined earlier",attributes:{attr_name_1:"attr_value_1",attr_name_2:"attr_value_2"},children:[ElementObject],next_nodes:[ElementObject],prev_nodes:[ElementObject],text:"some text to be the innerHTML, all element will be repeated {repeater:i} times on {repeater:n}",repeat:{n:10,id:"repeater"},node_type:"html tag name",listeners:[EventListener]},default_definition={input:{node_type:"input"},"/^h([1-6])$/":{node_type:"h{$1}"},br:{node_type:"br"},option:{node_type:"option"},
|
||||
select:{node_type:"select"},span:{node_type:"span"}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},listeners:{click:"{onclick()}"},next_nodes:[{node:"br"}]},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select",attributes:{"data-name":"{name}"},children:[{node:"option",attribute:{value:"{options.value}"},text:"{options.value}",browse:{array:"{options[]}"}}]}],
|
||||
next_nodes:[{node:"br"}]},"mult-text":{node:"span",attributes:{id:"text_{rep.i}"},text:"{rep.i} sur {rep.n}",repeat:{n:10,id:"rep"}}},form={node:"h4",attributes:{"data-icon":"o","class":"new-contact color2"},children:[{node:"input:hidden",$name:"uid",$value:"{uid}"},{node:"input:hidden",$name:"call",$value:"{call}"},{node:"input:hidden",$name:"sms",$value:"{sms}"},{node:"input:hidden",$name:"countcall",$value:"{countcall}"},{node:"input:hidden",$name:"countsms",$value:"{countsms}"},{node:"input:text",
|
||||
$name:"number",$value:"{number}",$placeholder:"{Num\u00e9ro de t\u00e9l\u00e9phone}"},{node:"custom-select",$name:"existing",$$options:"{{options}}"}]};
|
||||
|
|
|
|||
|
|
@ -81,8 +81,8 @@
|
|||
// and they are spread by references
|
||||
|
||||
// REPEAT: '$01abcdef$' ->ref-> {
|
||||
// repeat: 'repeatAttr',
|
||||
// references: ['myTab.attr1', 'myTab.attr2', 'repeat.i', 'repeat.n']
|
||||
// array: 'repeatAttr',
|
||||
// funcs: ['myTab.attr1', 'myTab.attr2', 'repeat.i', 'repeat.n']
|
||||
// }
|
||||
|
||||
////////////////////////
|
||||
|
|
@ -97,8 +97,8 @@ var ElementObject = {
|
|||
next_nodes: [ElementObject],
|
||||
prev_nodes: [ElementObject],
|
||||
|
||||
text: 'some text to be the innerHTML',
|
||||
repeat: 'number to repeat ElementObject || {{array}} to repeat ElementObject',
|
||||
text: 'some text to be the innerHTML, all element will be repeated {repeater:i} times on {repeater:n}',
|
||||
repeat: { n: 10, id: 'repeater' },
|
||||
|
||||
node_type: 'html tag name',
|
||||
listeners: [EventListener]
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
var ref=function(a,b){for(var f=null;null==f||a.hasOwnProperty(f);)f="$"+(268435456+Math.floor(4026531839*Math.random())).toString(16)+"$";a[f]=b;return f},FormBuilder=function(a){this.form_object=a};FormBuilder.prototype={form_object:this.form_object,defs_object:{},parent_element:null,built_form:null,root_element:null,ref_table:{$00000000$:null},ref_assoc:{NULL:"$00000000$"}};
|
||||
FormBuilder.regex={reg_in_key:/^\/\^(.+)\$\/$/,reg_out_val:/\{(\$[1-9])\}/,pri_out_val:/\{([a-z-]+)\}/g,pri_in_key:/^\$([a-z-]+)$/,arr_out_set:/^\{([a-z-]+)\[\]\}$/,arr_out_val:/\{([a-z-]+)([\.:])([a-z-]+)\}/g,arr_in_key:/^\$([a-z-]+)$/,fun_out_val:/^\{([a-z-]+)\(\)\}$/,ref_pri:/^\$[a-f0-9]{8}\$$/};FormBuilder.spread_attr="children next_nodes prev_nodes attributes node_link listeners repeat browse funcs".split(" ");
|
||||
FormBuilder.prototype.add_definition=function(a){for(var b in a)this.defs_object[b]=a[b]};FormBuilder.prototype.build=function(a){a=null==a?{}:a;for(var b in a)a[b]=ref(this.ref_table,a[b]),this.ref_assoc[b]=a[b];this.built_form=JSON.parse(JSON.stringify(this.form_object));this.built_form=FormBuilder.formatFormObject(this.built_form,this.defs_object);this.built_form=FormBuilder.replaceStatements(this.built_form,a,this.defs_object,this.ref_table,this.ref_assoc)};
|
||||
FormBuilder.prototype.update=function(a){a=null==a?{}:a;for(var b in a)this.ref_assoc.hasOwnProperty(b)&&(this.ref_table[this.ref_assoc[b]]=a[b])};
|
||||
FormBuilder.prototype.attach=function(a){if(!(a instanceof Element)&&null===this.parent_element)return!1;this.parent_element=a instanceof Element?a:this.parent_element;var b,f;a=FormBuilder.buildElements(this.built_form,this.ref_table,this.ref_assoc);for(b in a){for(f in a[b].prev)this.parent_element.appendChild(a[b].prev[f]);this.parent_element.appendChild(a[b].node);for(f in a[b].next)this.parent_element.appendChild(a[b].next[f])}};FormBuilder.formatFormObject=function(a,b){return a};
|
||||
FormBuilder.prototype.update=function(a){a=null==a?{}:a;for(var b in a)this.ref_assoc.hasOwnProperty(b)&&(this.ref_table[this.ref_assoc[b]]=a[b])};FormBuilder.prototype.attach=function(a){if(!(a instanceof Element)&&null===this.parent_element)return!1;this.parent_element=a instanceof Element?a:this.parent_element;a=FormBuilder.buildElements(this.built_form,this.ref_table,this.ref_assoc);FormBuilder.attachElements(this.parent_element,a)};FormBuilder.formatFormObject=function(a,b){return a};
|
||||
FormBuilder.fetchNodeDefinition=function(a,b){var f,d;r=FormBuilder.regex.reg_in_key;if("undefined"!=typeof b&&b.hasOwnProperty(a))return{def:b[a]};for(f in b)if(r.test(f)&&(d=new RegExp(f.slice(1,-1)),d.test(a))){matches={};for(d=1;d<RegExp.length&&10>d;d++)matches["$"+d]=RegExp["$"+d];return{def:b[f],scope:matches}}return{}};
|
||||
FormBuilder.replaceStatements=function(a,b,f,d,e){a=a instanceof Object?a:{};b=b instanceof Object?JSON.parse(JSON.stringify(b)):{};var c,k;if(a.hasOwnProperty("scope")&&a.scope instanceof Object)for(c in a.scope)b[c]=a.scope[c];if(a.hasOwnProperty("node")&&"string"==typeof a.node&&(k=FormBuilder.fetchNodeDefinition(a.node,f),k.hasOwnProperty("def")&&(a.node_link=JSON.parse(JSON.stringify(k.def)),k.hasOwnProperty("scope"))))for(c in k.scope)b[c]=k.scope[c];a.hasOwnProperty("browse")&&(a.browse.hasOwnProperty("array")&&
|
||||
FormBuilder.regex.arr_out_set.test(a.browse.array)?a.browse.id=RegExp.$1:delete a.browse);for(c in a)"string"==typeof a[c]?(a[c]=[a[c]],k=FormBuilder.replaceStatementsFunction(d,a[c][0],b),!1!==k?a[c]=k:(k=FormBuilder.replaceStatementsArray(a[c][0],b,d),!1!==k?a[c]=k:(a[c]=FormBuilder.replaceStatementsRegex(a[c],b),a[c]=FormBuilder.replaceStatementsPrimary(a[c],b),a[c]=FormBuilder.replaceStatementsArrayValue(a[c],b,d,e)))):"number"===typeof a[c]&&(a[c]=[ref(d,a[c])]);for(c in a)FormBuilder.regex.pri_in_key.test(c)?
|
||||
FormBuilder.replaceStatements=function(a,b,f,d,e){a=a instanceof Object?a:{};b=b instanceof Object?JSON.parse(JSON.stringify(b)):{};var c,h;if(a.hasOwnProperty("scope")&&a.scope instanceof Object)for(c in a.scope)b[c]=a.scope[c];if(a.hasOwnProperty("node")&&"string"==typeof a.node&&(h=FormBuilder.fetchNodeDefinition(a.node,f),h.hasOwnProperty("def")&&(a.node_link=JSON.parse(JSON.stringify(h.def)),h.hasOwnProperty("scope"))))for(c in h.scope)b[c]=h.scope[c];a.hasOwnProperty("browse")&&(a.browse.hasOwnProperty("array")&&
|
||||
FormBuilder.regex.arr_out_set.test(a.browse.array)?a.browse.id=RegExp.$1:delete a.browse);for(c in a)"string"==typeof a[c]?(a[c]=[a[c]],h=FormBuilder.replaceStatementsFunction(d,a[c][0],b),!1!==h?a[c]=h:(h=FormBuilder.replaceStatementsArray(a[c][0],b,d),!1!==h?a[c]=h:(a[c]=FormBuilder.replaceStatementsRegex(a[c],b),a[c]=FormBuilder.replaceStatementsPrimary(a[c],b),a[c]=FormBuilder.replaceStatementsArrayValue(a[c],b,d,e)))):"number"===typeof a[c]&&(a[c]=[ref(d,a[c])]);for(c in a)FormBuilder.regex.pri_in_key.test(c)?
|
||||
b[c.substring(1)]=ref(d,a[c]):FormBuilder.regex.arr_in_key.test(c)&&(b[c.substring(2)]=ref(d,a[c]));b=JSON.parse(JSON.stringify(b));for(c in a)if(-1<FormBuilder.spread_attr.indexOf(c))if(a[c]instanceof Array)for(var g in a[c])FormBuilder.replaceStatements(a[c][g],b,f,d,e);else a[c]instanceof Object&&FormBuilder.replaceStatements(a[c],b,f,d,e);return a};
|
||||
FormBuilder.replaceStatementsFunction=function(a,b,f){var d=null,d=FormBuilder.regex.fun_out_val.exec(b);if(null===d)return!1;f.hasOwnProperty(d[1])||(f[d[1]]=ref(a,function(){}));return f[d[1]]};FormBuilder.replaceStatementsArray=function(a,b,f){var d=null,d=FormBuilder.regex.arr_out_set.exec(a);if(null===d)return!1;b.hasOwnProperty(d[1])||(b[d[1]]=ref(f,[]));return b[d[1]]};
|
||||
FormBuilder.replaceStatementsRegex=function(a,b){var f=FormBuilder.regex.reg_out_val,d=null,e=[],c,k,g,h;for(g=0;g<a.length;g++){m=null;e=[];c=-1;for(k=[];null!==(d=f.exec(a[g]))&&!(c>=f.lastIndex);)c=f.lastIndex,e.push(d);for(d=c=0;d<e.length;d++)h=e[d][1],(0<c||0<e[d].index)&&k.push(a[g].substr(c,e[d].index-c)),b.hasOwnProperty(h)||(b[h]=""),k.push(b[h]),c=e[d].index+e[d][0].length;c<a[g].length&&k.push(a[g].substr(c,a[g].length));a=a.slice(0,g).concat(k).concat(a.slice(g+1))}return a};
|
||||
FormBuilder.replaceStatementsPrimary=function(a,b){var f=FormBuilder.regex.pri_out_val,d=null,e=[],c,k,g,h;for(g=0;g<a.length;g++){m=null;e=[];c=0;for(k=[];null!==(d=f.exec(a[g]));)e.push(d);for(d=0;d<e.length;d++)h=e[d][1],(0<c||0<e[d].index)&&k.push(a[g].substr(c,e[d].index-c)),b.hasOwnProperty(h)||(b[h]=""),k.push(b[h]),c=e[d].index+e[d][0].length;c<a[g].length&&k.push(a[g].substr(c,a[g].length));a=a.slice(0,g).concat(k).concat(a.slice(g+1))}return a};
|
||||
FormBuilder.replaceStatementsArrayValue=function(a,b,f,d){b=FormBuilder.regex.arr_out_val;var e=null,c=[],k,g,h,l;for(h=0;h<a.length;h++){m=null;c=[];k=0;for(g=[];null!==(e=b.exec(a[h]));)c.push(e);for(e=0;e<c.length;e++)l=c[e][1]+c[e][2]+c[e][3],(0<k||0<c[e].index)&&g.push(a[h].substr(k,c[e].index-k)),d.hasOwnProperty(l)||(d[l]=ref(f)),g.push(d[l]),k=c[e].index+c[e][0].length;k<a[h].length&&g.push(a[h].substr(k,a[h].length));a=a.slice(0,h).concat(g).concat(a.slice(h+1))}return a};
|
||||
FormBuilder.replaceStatementsRegex=function(a,b){var f=FormBuilder.regex.reg_out_val,d=null,e=[],c,h,g,k;for(g=0;g<a.length;g++){m=null;e=[];c=-1;for(h=[];null!==(d=f.exec(a[g]))&&!(c>=f.lastIndex);)c=f.lastIndex,e.push(d);for(d=c=0;d<e.length;d++)k=e[d][1],(0<c||0<e[d].index)&&h.push(a[g].substr(c,e[d].index-c)),b.hasOwnProperty(k)||(b[k]=""),h.push(b[k]),c=e[d].index+e[d][0].length;c<a[g].length&&h.push(a[g].substr(c,a[g].length));a=a.slice(0,g).concat(h).concat(a.slice(g+1))}return a};
|
||||
FormBuilder.replaceStatementsPrimary=function(a,b){var f=FormBuilder.regex.pri_out_val,d=null,e=[],c,h,g,k;for(g=0;g<a.length;g++){m=null;e=[];c=0;for(h=[];null!==(d=f.exec(a[g]));)e.push(d);for(d=0;d<e.length;d++)k=e[d][1],(0<c||0<e[d].index)&&h.push(a[g].substr(c,e[d].index-c)),b.hasOwnProperty(k)||(b[k]=""),h.push(b[k]),c=e[d].index+e[d][0].length;c<a[g].length&&h.push(a[g].substr(c,a[g].length));a=a.slice(0,g).concat(h).concat(a.slice(g+1))}return a};
|
||||
FormBuilder.replaceStatementsArrayValue=function(a,b,f,d){b=FormBuilder.regex.arr_out_val;var e=null,c=[],h,g,k,l;for(k=0;k<a.length;k++){m=null;c=[];h=0;for(g=[];null!==(e=b.exec(a[k]));)c.push(e);for(e=0;e<c.length;e++)l=c[e][1]+c[e][2]+c[e][3],(0<h||0<c[e].index)&&g.push(a[k].substr(h,c[e].index-h)),d.hasOwnProperty(l)||(d[l]=ref(f)),g.push(d[l]),h=c[e].index+c[e][0].length;h<a[k].length&&g.push(a[k].substr(h,a[k].length));a=a.slice(0,k).concat(g).concat(a.slice(k+1))}return a};
|
||||
FormBuilder.readRef=function(a,b){var f,d="";if("string"==typeof b&&FormBuilder.regex.ref_pri.test(b)){for(;"string"==typeof b&&FormBuilder.regex.ref_pri.test(b);)b=a[b],b instanceof Array&&1==b.length&&(b=b[0]);return b}for(f in b)d=FormBuilder.regex.ref_pri.test(b[f])&&a.hasOwnProperty(b[f])?a[b[f]]instanceof Array?d+FormBuilder.readRef(a,a[b[f]]):d+a[b[f]]:d+b[f].toString();return d};
|
||||
FormBuilder.buildElements=function(a,b,f){var d=[],e,c,k,g,h,l=["NULL"],n;if(a.hasOwnProperty("repeat")&&(g=FormBuilder.readRef(b,a.repeat.n),!isNaN(g)))for(l=[],f.hasOwnProperty(a.repeat.id+":i")||(f[a.repeat.id+":i"]=ref(0)),f.hasOwnProperty(a.repeat.id+":n")||(f[a.repeat.id+":n"]=ref(g)),e=0;e<g;e++)l[e]={},l[e][a.repeat.id+":i"]=e,l[e][a.repeat.id+":n"]=g;if(a.hasOwnProperty("browse")&&(g=FormBuilder.readRef(b,a.browse.array),g instanceof Array)){l=[];h=[];n={};k=new RegExp(a.browse.id+".(.+)");
|
||||
for(e in f)k.test(e)&&h.push(RegExp.$1);if(a.browse.hasOwnProperty("funcs"))for(e in a.browse.funcs)k.test(e)&&(n[RegExp.$1]=FormBuilder.readRef(b,a.browse.funcs[e]));f.hasOwnProperty(a.browse.id+":i")||(f[a.browse.id+":i"]=ref(0));f.hasOwnProperty(a.browse.id+":n")||(f[a.browse.id+":n"]=ref(g));for(e=0;e<g.length;e++){l[e]={};for(c in h)g[e].hasOwnProperty(h[c])?l[e][a.browse.id+"."+h[c]]=g[e][h[c]]:n.hasOwnProperty(h[c])&&(l[e][a.browse.id+"."+h[c]]=n[h[c]](g[e]));l[e][a.browse.id+":i"]=e;l[e][a.browse.id+
|
||||
":n"]=g.length}}for(h=0;h<l.length;h++){d[h]={prev:[],node:null,next:[]};if(l[h]instanceof Object)for(e in l[h])b[f[e]]=l[h][e];if(a.hasOwnProperty("prev_nodes"))for(e in a.prev_nodes)d[h].prev=FormBuilder.buildElements(a.prev_nodes[e],b,f);if(a.hasOwnProperty("next_nodes"))for(e in a.next_nodes)d[h].next=FormBuilder.buildElements(a.next_nodes[e],b,f);if(a.hasOwnProperty("node_type"))d[h].node=document.createElement(FormBuilder.readRef(b,a.node_type));else if(a.hasOwnProperty("node_link"))for(e in g=
|
||||
FormBuilder.buildElements(a.node_link,b,f),g)d[h].prev=d[h].prev.concat(g[e].prev),d[h].node=g[e].node,d[h].next=g[e].next.concat(d[h].next);if(a.hasOwnProperty("attributes"))for(e in a.attributes)d[h].node.setAttribute(e,FormBuilder.readRef(b,a.attributes[e]));a.hasOwnProperty("text")&&(d[h].node.innerHTML=FormBuilder.readRef(b,a.text));if(a.hasOwnProperty("listeners"))for(e in a.listeners)d[h].node.addEventListener(e,FormBuilder.readRef(b,a.listeners[e]),!1);if(a.hasOwnProperty("children"))for(e in a.children)for(k in g=
|
||||
FormBuilder.buildElements(a.children[e],b,f),g){for(c in g[k].prev)d[h].node.appendChild(g[k].prev[c]);d[h].node.appendChild(g[k].node);for(c in g[k].prev)d[h].node.appendChild(g[k].next[c])}}return a.dom=d};
|
||||
FormBuilder.buildElements=function(a,b,f){var d=[],e,c,h,g,k=["NULL"],l,n;if(a.hasOwnProperty("repeat")&&(g=FormBuilder.readRef(b,a.repeat.n),!isNaN(g)))for(k=[],f.hasOwnProperty(a.repeat.id+":i")||(f[a.repeat.id+":i"]=ref(0)),f.hasOwnProperty(a.repeat.id+":n")||(f[a.repeat.id+":n"]=ref(g)),e=0;e<g;e++)k[e]={},k[e][a.repeat.id+":i"]=e,k[e][a.repeat.id+":n"]=g;if(a.hasOwnProperty("browse")&&(g=FormBuilder.readRef(b,a.browse.array),g instanceof Array)){k=[];l=[];n={};h=new RegExp(a.browse.id+".(.+)");
|
||||
for(e in f)h.test(e)&&l.push(RegExp.$1);if(a.browse.hasOwnProperty("funcs"))for(e in a.browse.funcs)h.test(e)&&(n[RegExp.$1]=FormBuilder.readRef(b,a.browse.funcs[e]));f.hasOwnProperty(a.browse.id+":i")||(f[a.browse.id+":i"]=ref(0));f.hasOwnProperty(a.browse.id+":n")||(f[a.browse.id+":n"]=ref(g));for(e=0;e<g.length;e++){k[e]={};for(c in l)g[e].hasOwnProperty(l[c])?k[e][a.browse.id+"."+l[c]]=g[e][l[c]]:n.hasOwnProperty(l[c])&&(k[e][a.browse.id+"."+l[c]]=n[l[c]](g[e]));k[e][a.browse.id+":i"]=e;k[e][a.browse.id+
|
||||
":n"]=g.length}}for(c=0;c<k.length;c++){d[c]={prev:[],node:null,next:[]};if(k[c]instanceof Object)for(e in k[c])b[f[e]]=k[c][e];if(a.hasOwnProperty("prev_nodes"))for(e in a.prev_nodes)d[c].prev=FormBuilder.buildElements(a.prev_nodes[e],b,f);if(a.hasOwnProperty("next_nodes"))for(e in a.next_nodes)d[c].next=FormBuilder.buildElements(a.next_nodes[e],b,f);if(a.hasOwnProperty("node_type"))d[c].node=document.createElement(FormBuilder.readRef(b,a.node_type));else if(a.hasOwnProperty("node_link"))for(e in g=
|
||||
FormBuilder.buildElements(a.node_link,b,f),g)d[c].prev=d[c].prev.concat(g[e].prev),d[c].node=g[e].node,d[c].next=g[e].next.concat(d[c].next);if(a.hasOwnProperty("attributes"))for(e in a.attributes)d[c].node.setAttribute(e,FormBuilder.readRef(b,a.attributes[e]));a.hasOwnProperty("text")&&(d[c].node.innerHTML=FormBuilder.readRef(b,a.text));if(a.hasOwnProperty("listeners"))for(e in a.listeners)d[c].node.addEventListener(e,FormBuilder.readRef(b,a.listeners[e]),!1);if(a.hasOwnProperty("children"))for(e in a.children)g=
|
||||
FormBuilder.buildElements(a.children[e],b,f),FormBuilder.attachElements(d[c].node,g)}return a.dom=d};FormBuilder.attachElements=function(a,b){var f,d;for(f in b){for(d in b[f].prev)b[f].prev[d]instanceof Element?a.appendChild(b[f].prev[d]):b[f].prev[d]instanceof Object&&FormBuilder.attachElements(a,[b[f].prev[d]]);a.appendChild(b[f].node);for(d in b[f].next)b[f].next[d]instanceof Element?a.appendChild(b[f].next[d]):b[f].next[d]instanceof Object&&FormBuilder.attachElements(a,[b[f].next[d]])}};
|
||||
|
|
|
|||
|
|
@ -205,26 +205,14 @@ FormBuilder.prototype.attach = function(parent){
|
|||
|
||||
this.parent_element = (parent instanceof Element) ? parent : this.parent_element;
|
||||
|
||||
var d, i;
|
||||
var d, i, j;
|
||||
|
||||
|
||||
/* [1] On construit le DOM
|
||||
=========================================================*/
|
||||
var dom = FormBuilder.buildElements(this.built_form, this.ref_table, this.ref_assoc);
|
||||
|
||||
for( d in dom ){
|
||||
|
||||
/* (1) On ajoute les éléments précédents */
|
||||
for( i in dom[d].prev )
|
||||
this.parent_element.appendChild( dom[d].prev[i] );
|
||||
|
||||
/* (2) On ajoute l'élément cible */
|
||||
this.parent_element.appendChild( dom[d].node );
|
||||
|
||||
/* (3) On ajoute les éléments suivants */
|
||||
for( i in dom[d].next )
|
||||
this.parent_element.appendChild( dom[d].next[i] );
|
||||
}
|
||||
FormBuilder.attachElements(this.parent_element, dom);
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -893,7 +881,6 @@ FormBuilder.buildElements = function(definition, ref_table, ref_assoc){
|
|||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1076,20 +1063,7 @@ FormBuilder.buildElements = function(definition, ref_table, ref_assoc){
|
|||
for( i in definition.children ){
|
||||
tmp = FormBuilder.buildElements(definition.children[i], ref_table, ref_assoc);
|
||||
|
||||
for( k in tmp ){
|
||||
|
||||
/* (2) On ajoute les éléments précédent l'enfant */
|
||||
for( j in tmp[k].prev )
|
||||
built[b].node.appendChild( tmp[k].prev[j] );
|
||||
|
||||
/* (3) On ajoute l'enfant */
|
||||
built[b].node.appendChild( tmp[k].node );
|
||||
|
||||
/* (4) On ajoute les éléments suivants l'enfant */
|
||||
for( j in tmp[k].prev )
|
||||
built[b].node.appendChild( tmp[k].next[j] );
|
||||
|
||||
}
|
||||
FormBuilder.attachElements(built[b].node, tmp);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1103,3 +1077,58 @@ FormBuilder.buildElements = function(definition, ref_table, ref_assoc){
|
|||
definition.dom = built;
|
||||
return built;
|
||||
};
|
||||
|
||||
|
||||
/* ATTACHE UN JEU D'ELEMENTS A UN PARENT
|
||||
*
|
||||
* @parent<Element> Element parent
|
||||
* @set<Array> Set d'enfants à attacher
|
||||
*
|
||||
*/
|
||||
FormBuilder.attachElements = function(parent, set){
|
||||
|
||||
var c, a;
|
||||
|
||||
/* [1] Pour chaque contexte (élément + prev + next)
|
||||
=========================================================*/
|
||||
for( c in set ){
|
||||
|
||||
|
||||
/* (1) On attache les éléments précédents
|
||||
---------------------------------------------------------*/
|
||||
for( a in set[c].prev ){
|
||||
|
||||
/* (1) Si on a un élément */
|
||||
if( set[c].prev[a] instanceof Element )
|
||||
parent.appendChild( set[c].prev[a] );
|
||||
|
||||
/* (2) Si c'est un autre élément -> récursion */
|
||||
else if( set[c].prev[a] instanceof Object )
|
||||
FormBuilder.attachElements(parent, [ set[c].prev[a] ]);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* (2) On ajoute l'élément actuel
|
||||
---------------------------------------------------------*/
|
||||
parent.appendChild( set[c].node );
|
||||
|
||||
|
||||
/* (3) On attache les éléments suivants
|
||||
---------------------------------------------------------*/
|
||||
for( a in set[c].next ){
|
||||
|
||||
/* (1) Si on a un élément */
|
||||
if( set[c].next[a] instanceof Element )
|
||||
parent.appendChild( set[c].next[a] );
|
||||
|
||||
/* (2) Si c'est un autre élément -> récursion */
|
||||
else if( set[c].next[a] instanceof Object )
|
||||
FormBuilder.attachElements(parent, [ set[c].next[a] ]);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
document.body.innerHTML="";"use strict";
|
||||
var default_definition={input:{node_type:"input"},"/^h([1-6])$/":{node_type:"h{$1}"},br:{node_type:"br"},option:{node_type:"option"},select:{node_type:"select"},span:{node_type:"span"}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},next_nodes:[{node:"br"}],listeners:{focus:"{xx()}"}},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select",attributes:{"data-name":"{name}"},
|
||||
children:[{node:"option",attributes:{value:"{options.id}"},text:"{options.value} - {options:i}/{options:n}",browse:{array:"{options[]}",funcs:{"options.value":"{getval()}","options.id":"{getnam()}"}}}]}],next_nodes:[{node:"br"}]}},form={node:"h4",attributes:{"data-icon":"o","class":"new-contact color2"},children:[{node:"input.hidden",$name:"uid",$value:"{uid}"},{node:"input.hidden",$name:"call",$value:"{call}"},{node:"input.hidden",$name:"sms",$value:"{sms}"},{node:"input.hidden",$name:"countcall",
|
||||
$value:"{countcall}"},{node:"input.hidden",$name:"countsms",$value:"{countsms}"},{node:"input.text",$name:"total",$value:"xx{countcall} calls + {countsms} sms to {number}xx"},{node:"input.text",$name:"count{rep:i}",$value:"{rep:i} sur {rep:n}",repeat:{n:10,id:"rep"}},{node:"input.text",$name:"number",$value:"{number}",$xx:"{clicklistener}"},{node:"custom-select",$name:"existing",$options:"{options[]}"}]},fb=new FormBuilder(form);fb.add_definition(default_definition);fb.add_definition(custom_definition);
|
||||
fb.build({uid:1,call:2,sms:3,countcall:4,countsms:5,number:"01 02 03 04 05",options:["a","b","c","d"],clicklistener:function(a){console.log("clicked",a)},getval:function(a){return a},getnam:function(a){return"["+a+"]"}});console.log(fb.built_form);var str=function(a){return FormBuilder.readRef(fb.ref_table,a)};fb.attach(document.body);
|
||||
var default_definition={input:{node_type:"input"},"/^h([1-6])$/":{node_type:"h{$1}"},br:{node_type:"br"},option:{node_type:"option"},select:{node_type:"select"},span:{node_type:"span"},"/^br([0-9]+)$/":{node_type:"br",repeat:{n:"{$1}",id:"brs"}}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},next_nodes:[{node:"br"}],listeners:{click:"{xx()}"}},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},
|
||||
children:[{node:"select",attributes:{"data-name":"{name}"},children:[{node:"option",attributes:{value:"{options:i}"},text:"{options.value}",browse:{array:"{options[]}",funcs:{"options.value":"{getoptval()}"}}}],listeners:{change:"{listener()}"}}],next_nodes:[{node:"br"}]}},form={node:"h4",attributes:{"data-icon":"o","class":"new-contact color2"},children:[{node:"input.hidden",$name:"uid",$value:"{uid}"},{node:"input.hidden",$name:"call",$value:"{call}"},{node:"input.hidden",$name:"sms",$value:"{sms}"},
|
||||
{node:"input.hidden",$name:"countcall",$value:"{countcall}"},{node:"input.hidden",$name:"countsms",$value:"{countsms}"},{node:"input.text",$name:"total",$value:"xx{countcall} calls + {countsms} sms to {number}xx"},{node:"input.text",$name:"count{rep:i}",$value:"{rep:i} sur {rep:n}",repeat:{n:10,id:"rep"}},{node:"input.text",$name:"number",$value:"{number}",$xx:"{clicklistener}"},{node:"custom-select",$name:"existing",$options:"{options[]}"}]},contactForm={node:"h4",attributes:{"data-icon":"o","class":"new-contact colo2"},
|
||||
children:[{node:"input.hidden",$name:"uid",$value:"{uid}"},{node:"input.hidden",$name:"call",$value:"{call}"},{node:"input.hidden",$name:"sms",$value:"{sms}"},{node:"input.hidden",$name:"countcall",$value:"{countcall}"},{node:"input.hidden",$name:"countsms",$value:"{countsms}"},{node:"input.text",$name:"number",$value:"{number}"},{node:"custom-select",$name:"existing",$options:"{existing[]}",$listener:"{existingsel()}"},{node:"br2"},{node:"input.text",$name:"username",$placeholder:"{usernameph}",
|
||||
$value:"{username}"},{node:"input.submit",$value:"Enregistrer",attributes:{"class":"primary sub-number"}}],next_nodes:[{node:"br2"}]},a="<h4 data-icon='o' class='new-contact color2'> \n\t<input type='hidden' data-name='uid' value='@uid'>\n\t<input type='hidden' data-name='call' value='@call'>\n\t<input type='hidden' data-name='sms' value='@sms'>\n\t<input type='hidden' data-name='countcall' value='@countcall'>\n\t<input type='hidden' data-name='countsms' value='@countsms'>\n\t<input type='text' data-name='number' placeholder='Num\u00e9ro de t\u00e9l\u00e9phone' value='@number' > \n\t<span class='select-container nobold'><select data-name='existing'>\n\t\t<option value='.'>Utiliser pseudo</option>\n@contacts\t</select></span>\n\t ou \n\t<input type='text' data-name='username' placeholder='Pseudo' value='@username' > \n\t<input type='submit' class='primary sub-number' value='Enregistrer'>\n</h4>\n\n",
|
||||
fb=new FormBuilder(contactForm);fb.add_definition(default_definition);fb.add_definition(custom_definition);fb.build({uid:1,call:2,sms:3,countcall:4,countsms:5,number:"01 02 03 04 05",existing:["Jean","Archibald","Daniel","Maurice"],username:"moi-meme",usernameph:"Pseudo",clicklistener:function(b){console.log("clicked",b)},existingsel:function(b){console.log("selected",b)},getoptval:function(b){return b}});fb.attach(document.body);
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ var default_definition = {
|
|||
'br': { node_type: 'br' },
|
||||
'option': { node_type: 'option' },
|
||||
'select': { node_type: 'select' },
|
||||
'span': { node_type: 'span' }
|
||||
'span': { node_type: 'span' },
|
||||
'/^br([0-9]+)$/': { node_type: 'br', repeat: { n: '{$1}', id: 'brs' } }
|
||||
};
|
||||
|
||||
var custom_definition = {
|
||||
|
|
@ -24,9 +25,7 @@ var custom_definition = {
|
|||
'placeholder': '{placeholder}'
|
||||
},
|
||||
next_nodes: [ { node: 'br' } ],
|
||||
listeners: {
|
||||
'focus': '{xx()}'
|
||||
}
|
||||
listeners: { 'click': '{xx()}' }
|
||||
},
|
||||
|
||||
|
||||
|
|
@ -40,17 +39,15 @@ var custom_definition = {
|
|||
children: [
|
||||
{
|
||||
node: 'option',
|
||||
attributes: { value: '{options.id}' },
|
||||
text: '{options.value} - {options:i}/{options:n}',
|
||||
attributes: { value: '{options:i}' },
|
||||
text: '{options.value}',
|
||||
browse: {
|
||||
array: '{options[]}',
|
||||
funcs: {
|
||||
'options.value': '{getval()}',
|
||||
'options.id': '{getnam()}'
|
||||
funcs: { 'options.value': '{getoptval()}' }
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
listeners: { 'change': '{listener()}' }
|
||||
}
|
||||
],
|
||||
next_nodes: [{ node: 'br' }]
|
||||
|
|
@ -75,13 +72,56 @@ var form = {
|
|||
]
|
||||
};
|
||||
|
||||
var contactForm = {
|
||||
node: 'h4',
|
||||
attributes: { 'data-icon': 'o', class: 'new-contact colo2' },
|
||||
children: [
|
||||
{ node: 'input.hidden', $name: 'uid', $value: '{uid}' },
|
||||
{ node: 'input.hidden', $name: 'call', $value: '{call}' },
|
||||
{ node: 'input.hidden', $name: 'sms', $value: '{sms}' },
|
||||
{ node: 'input.hidden', $name: 'countcall', $value: '{countcall}' },
|
||||
{ node: 'input.hidden', $name: 'countsms', $value: '{countsms}' },
|
||||
|
||||
{ node: 'input.text', $name: 'number', $value: '{number}' },
|
||||
|
||||
{ node: 'custom-select', $name: 'existing', $options: '{existing[]}', $listener: '{existingsel()}' },
|
||||
|
||||
{ node: 'br2' },
|
||||
|
||||
{ node: 'input.text', $name: 'username', $placeholder: '{usernameph}', $value: '{username}'},
|
||||
{ node: 'input.submit', $value: 'Enregistrer', attributes: { class: 'primary sub-number'} }
|
||||
],
|
||||
next_nodes: [ { node: 'br2' } ]
|
||||
|
||||
};
|
||||
var a = ("<h4 data-icon='o' class='new-contact color2'> \n"+
|
||||
|
||||
"\t<input type='hidden' data-name='uid' value='@uid'>\n"+
|
||||
"\t<input type='hidden' data-name='call' value='@call'>\n"+
|
||||
"\t<input type='hidden' data-name='sms' value='@sms'>\n"+
|
||||
|
||||
"\t<input type='hidden' data-name='countcall' value='@countcall'>\n"+
|
||||
"\t<input type='hidden' data-name='countsms' value='@countsms'>\n"+
|
||||
|
||||
"\t<input type='text' data-name='number' placeholder='Numéro de téléphone' value='@number' > \n"+
|
||||
|
||||
"\t<span class='select-container nobold'><select data-name='existing'>\n"+
|
||||
"\t\t<option value='.'>Utiliser pseudo</option>\n"+
|
||||
"@contacts"+
|
||||
"\t</select></span>\n"+
|
||||
|
||||
"\t ou \n"+
|
||||
|
||||
"\t<input type='text' data-name='username' placeholder='Pseudo' value='@username' > \n"+
|
||||
"\t<input type='submit' class='primary sub-number' value='Enregistrer'>\n"+
|
||||
|
||||
"</h4>\n\n");
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var fb = new FormBuilder(form);
|
||||
var fb = new FormBuilder(contactForm);
|
||||
fb.add_definition(default_definition);
|
||||
fb.add_definition(custom_definition);
|
||||
fb.build({
|
||||
|
|
@ -91,12 +131,12 @@ fb.build({
|
|||
countcall: 4,
|
||||
countsms: 5,
|
||||
number: '01 02 03 04 05',
|
||||
options: ['a', 'b', 'c', 'd'],
|
||||
existing: ['Jean', 'Archibald', 'Daniel', 'Maurice'],
|
||||
username: 'moi-meme',
|
||||
usernameph: 'Pseudo',
|
||||
clicklistener: function(e){ console.log('clicked', e); },
|
||||
getval: function(item){ return item; },
|
||||
getnam: function(item){ return '['+item+']'; }
|
||||
existingsel: function(e){ console.log('selected', e); },
|
||||
getoptval: function(opt){ return opt; }
|
||||
});
|
||||
console.log(fb.built_form);
|
||||
|
||||
var str = function(attr){ return FormBuilder.readRef(fb.ref_table, attr); };
|
||||
fb.attach(document.body);
|
||||
|
|
|
|||
Loading…
Reference in New Issue