xdrm-brackets
/
NxTIC
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Gestion du debugger (pour les perfs et l'arbre d'exécution' pour le 'form-builder'

This commit is contained in:
xdrm-brackets 2016-09-21 13:09:12 +02:00
parent c8bc92461a
commit 6b325f7198
6 changed files with 226 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc/form-builder/behaviour-min.js vendored
View File

@ -2,4 +2,4 @@ document.body.innerHTML="";
var default_definition={"input.text":{node_type:"input",attributes:{name:"{name}",value:"{value}",type:"text"}},"/^span:(d+)$/":{node_type:"span",text:"span {spanRepeat:i} on {spanRepeat:n} (={$1})",repeat:{n:"{$1}",id:"spanRepeat"},attributes:{"class":"{class}"}},"simple-select":{node_type:"select",attributes:{"class":"{select-class}"},children:[{node_type:"option",browse:{array:"{options[]}",funcs:{"options.value":"{getvalue()}","options.length":"{getlength()}"}},attributes:{"class":"{option-class}",value:"{options:i}"}, var default_definition={"input.text":{node_type:"input",attributes:{name:"{name}",value:"{value}",type:"text"}},"/^span:(d+)$/":{node_type:"span",text:"span {spanRepeat:i} on {spanRepeat:n} (={$1})",repeat:{n:"{$1}",id:"spanRepeat"},attributes:{"class":"{class}"}},"simple-select":{node_type:"select",attributes:{"class":"{select-class}"},children:[{node_type:"option",browse:{array:"{options[]}",funcs:{"options.value":"{getvalue()}","options.length":"{getlength()}"}},attributes:{"class":"{option-class}",value:"{options:i}"},
text:"{options.value} ({options.length} caract\u00e8res)"}],listeners:{change:"{onchange()}"}}},exempleFormulaire={node_type:"form",attributes:{method:"POST",action:"{url}"},prev_nodes:[{node:"span:2",$class:"beforeSpan"}],children:[{node:"input.text",$name:"fname",$value:"{default_firstname}"},{node:"simple-select",$options:"{liste_noms[]}",$select_class:"gui-option",$option_class:"gui-select",$onchange:"{my_onchange()}",$getvalue:"{getitemvalue()}",$getlength:"{getitemlength()}"},{node_type:"input", text:"{options.value} ({options.length} caract\u00e8res)"}],listeners:{change:"{onchange()}"}}},exempleFormulaire={node_type:"form",attributes:{method:"POST",action:"{url}"},prev_nodes:[{node:"span:2",$class:"beforeSpan"}],children:[{node:"input.text",$name:"fname",$value:"{default_firstname}"},{node:"simple-select",$options:"{liste_noms[]}",$select_class:"gui-option",$option_class:"gui-select",$onchange:"{my_onchange()}",$getvalue:"{getitemvalue()}",$getlength:"{getitemlength()}"},{node_type:"input",
attributes:{type:"submit",value:"Valider"}}],next_nodes:[{node:"span:2",$class:"afterSpan"}]},monBuilder=new FormBuilder(exempleFormulaire);monBuilder.add_definition(default_definition);monBuilder.build({url:"https://xdrm.io/page1",default_firstname:"Jean",liste_noms:"Jean Pierre Robert Marie Anna F\u00e9licien Marc J\u00e9sus".split(" "),getitemvalue:function(a){return a},getitemlength:function(a){return a.length}});var monConteneur=document.body;monBuilder.attach(monConteneur); attributes:{type:"submit",value:"Valider"}}],next_nodes:[{node:"span:2",$class:"afterSpan"}]},monBuilder=new FormBuilder(exempleFormulaire);monBuilder.add_definition(default_definition);monBuilder.build({url:"https://xdrm.io/page1",default_firstname:"Jean",liste_noms:"Jean Pierre Robert Marie Anna F\u00e9licien Marc J\u00e9sus".split(" "),getitemvalue:function(a){return a},getitemlength:function(a){return a.length}});var monConteneur=document.body;monBuilder.attach(monConteneur);
monBuilder.update({url:"https://xdrm.io/page2",getitemlength:function(a){return 10}});monBuilder.attach(monConteneur); monBuilder.update({url:"https://xdrm.io/page2",getitemlength:function(a){return a.length+1}});monBuilder.attach(monConteneur);

2
doc/form-builder/behaviour.js
View File

@ -219,7 +219,7 @@ monBuilder.attach(monConteneur);
// les variables ommises lors de la création, ne sont pas modifiables // les variables ommises lors de la création, ne sont pas modifiables
monBuilder.update({ monBuilder.update({
url: 'https://xdrm.io/page2', // on modifie l'URL url: 'https://xdrm.io/page2', // on modifie l'URL
getitemlength: function(item){ return 10; } // on modifie notre fonction (on renvoie taille+1) getitemlength: function(item){ return item.length+1; } // on modifie notre fonction (on renvoie taille+1)
}); });
// reconstruction du DOM // reconstruction du DOM
monBuilder.attach(monConteneur); monBuilder.attach(monConteneur);

46
js/lib/form-builder-min.js vendored
View File

@ -1,23 +1,25 @@
var ref=function(a,b){for(var e=null;null==e||a.hasOwnProperty(e);)e="$"+(268435456+Math.floor(4026531839*Math.random())).toString(16)+"$";a[e]=b;return e},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$"}}; var ref=function(a,b){for(var e=null;null==e||a.hasOwnProperty(e);)e="$"+(268435456+Math.floor(4026531839*Math.random())).toString(16)+"$";a[e]=b;return e},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.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.debug_time=!1;FormBuilder.debug_time_details=!1;
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.debugStart=function(a,b){if(1!=b||!FormBuilder.debug_time)if(2!=b||!FormBuilder.debug_time_details)return{type:0};var e="["+parseInt(64424509439*Math.random()).toString(16)+"]";console.time(e);console.group(a);return{type:b,time_r:e,group:a}};FormBuilder.debug=function(a,b){if(1!=b||!FormBuilder.debug_time)if(2!=b||!FormBuilder.debug_time_details)return{type:0};console.debug(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.debugStop=function(a){if(1!=a.type||!FormBuilder.debug_time)if(2!=a.type||!FormBuilder.debug_time_details)return null;console.timeEnd(a.time_r);console.groupEnd(a.group)};FormBuilder.prototype.add_definition=function(a){var b=FormBuilder.debugStart("FormBuilder.add_definition",1),e;for(e in a)this.defs_object[e]=a[e];FormBuilder.debugStop(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;this.built_form.hasOwnProperty("dom")&&FormBuilder.detachElements(this.parent_element,this.built_form.dom);a=FormBuilder.createElements(this.built_form,this.ref_table,this.ref_assoc);FormBuilder.attachElements(this.parent_element,a)};FormBuilder.formatFormObject=function(a,b){return a}; FormBuilder.prototype.build=function(a){var b=FormBuilder.debugStart("FormBuilder.build",1);a=null==a?{}:a;for(var e in a)a[e]=ref(this.ref_table,a[e]),this.ref_assoc[e]=a[e];this.built_form=JSON.parse(JSON.stringify(this.form_object));this.built_form=FormBuilder.replaceStatements(this.built_form,a,this.defs_object,this.ref_table,this.ref_assoc);FormBuilder.debugStop(b)};
FormBuilder.fetchNodeDefinition=function(a,b){var e,c;r=FormBuilder.regex.reg_in_key;if("undefined"!=typeof b&&b.hasOwnProperty(a))return{def:b[a]};for(e in b)if(r.test(e)&&(c=new RegExp(e.slice(1,-1)),c.test(a))){matches={};for(c=1;c<RegExp.length&&10>c;c++)matches["$"+c]=RegExp["$"+c];return{def:b[e],scope:matches}}return{}}; FormBuilder.prototype.update=function(a){var b=FormBuilder.debugStart("FormBuilder.update",1);a=null==a?{}:a;for(var e in a)this.ref_assoc.hasOwnProperty(e)&&(this.ref_table[this.ref_assoc[e]]=a[e]);FormBuilder.debugStop(b)};
FormBuilder.replaceStatements=function(a,b,e,c,f){a=a instanceof Object?a:{};b=b instanceof Object?JSON.parse(JSON.stringify(b)):{};var d,k;if(a.hasOwnProperty("scope")&&a.scope instanceof Object)for(d in a.scope)b[d]=a.scope[d];if(a.hasOwnProperty("node")&&"string"==typeof a.node&&(k=FormBuilder.fetchNodeDefinition(a.node,e),k.hasOwnProperty("def")&&(a.node_link=JSON.parse(JSON.stringify(k.def)),k.hasOwnProperty("scope"))))for(d in k.scope)b[d]=k.scope[d];a.hasOwnProperty("browse")&&(a.browse.hasOwnProperty("array")&& FormBuilder.prototype.attach=function(a){var b=FormBuilder.debugStart("FormBuilder.attach",1);if(!(a instanceof Element)&&null===this.parent_element)return!1;this.parent_element=a instanceof Element?a:this.parent_element;this.built_form.hasOwnProperty("dom")&&FormBuilder.detachElements(this.parent_element,this.built_form.dom);a=FormBuilder.createElements(this.built_form,this.ref_table,this.ref_assoc);FormBuilder.attachElements(this.parent_element,a);FormBuilder.debugStop(b)};
FormBuilder.regex.arr_out_set.test(a.browse.array)?a.browse.id=RegExp.$1:delete a.browse);for(d in a)"string"==typeof a[d]?(a[d]=[a[d]],k=FormBuilder.replaceStatementsFunction(a[d][0],b,c),!1!==k?a[d]=k:(k=FormBuilder.replaceStatementsArray(a[d][0],b,c),!1!==k?a[d]=k:(a[d]=FormBuilder.replaceStatementsRegex(a[d],b),a[d]=FormBuilder.replaceStatementsPrimary(a[d],b),a[d]=FormBuilder.replaceStatementsArrayValue(a[d],b,c,f)))):"number"===typeof a[d]&&(a[d]=[ref(c,a[d])]);for(d in a)FormBuilder.regex.pri_in_key.test(d)? FormBuilder.fetchNodeDefinition=function(a,b){var e=FormBuilder.debugStart("FormBuilder::fetchNodeDefinition",2);FormBuilder.debug('node = "'+a+'"',2);var d,f;r=FormBuilder.regex.reg_in_key;if("undefined"!=typeof b&&b.hasOwnProperty(a))return FormBuilder.debugStop(e),{def:b[a]};for(d in b)if(r.test(d)&&(f=new RegExp(d.slice(1,-1)),f.test(a))){matches={};for(f=1;f<RegExp.length&&10>f;f++)matches["$"+f]=RegExp["$"+f];FormBuilder.debugStop(e);return{def:b[d],scope:matches}}FormBuilder.debugStop(e);return{}};
b[d.substring(1)]=ref(c,a[d]):FormBuilder.regex.arr_in_key.test(d)&&(b[d.substring(2)]=ref(c,a[d]));b=JSON.parse(JSON.stringify(b));for(d in a)if(-1<FormBuilder.spread_attr.indexOf(d))if(a[d]instanceof Array)for(var h in a[d])FormBuilder.replaceStatements(a[d][h],b,e,c,f);else a[d]instanceof Object&&FormBuilder.replaceStatements(a[d],b,e,c,f);return a}; FormBuilder.replaceStatements=function(a,b,e,d,f){var g=FormBuilder.debugStart("FormBuilder::replaceStatements",2);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,e),h.hasOwnProperty("def")&&(a.node_link=JSON.parse(JSON.stringify(h.def)),h.hasOwnProperty("scope"))))for(c in h.scope)b[c]=
FormBuilder.replaceStatementsFunction=function(a,b,e){var c=null,c=FormBuilder.regex.fun_out_val.exec(a);if(null===c)return!1;b.hasOwnProperty(c[1])||(b[c[1]]=ref(e,function(){}));return b[c[1]]};FormBuilder.replaceStatementsArray=function(a,b,e){var c=null,c=FormBuilder.regex.arr_out_set.exec(a);if(null===c)return!1;b.hasOwnProperty(c[1])||(b[c[1]]=ref(e,[]));return b[c[1]]}; 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(a[c][0],b,d),!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,f)))):
FormBuilder.replaceStatementsRegex=function(a,b){var e=FormBuilder.regex.reg_out_val,c=null,f=[],d,k,h,g;for(h=0;h<a.length;h++){m=null;f=[];d=-1;for(k=[];null!==(c=e.exec(a[h]))&&!(d>=e.lastIndex);)d=e.lastIndex,f.push(c);for(c=d=0;c<f.length;c++)g=f[c][1],(0<d||0<f[c].index)&&k.push(a[h].substr(d,f[c].index-d)),b.hasOwnProperty(g)||(b[g]=""),k.push(b[g]),d=f[c].index+f[c][0].length;d<a[h].length&&k.push(a[h].substr(d,a[h].length));a=a.slice(0,h).concat(k).concat(a.slice(h+1))}return a}; "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 k in a[c])FormBuilder.debug("**"+c+"["+k+"]",2),FormBuilder.replaceStatements(a[c][k],b,e,d,f);else a[c]instanceof Object&&(FormBuilder.debug("**"+c,2),FormBuilder.replaceStatements(a[c],b,e,d,
FormBuilder.replaceStatementsPrimary=function(a,b){var e=FormBuilder.regex.pri_out_val,c=null,f=[],d,k,h,g;for(h=0;h<a.length;h++){m=null;f=[];d=0;for(k=[];null!==(c=e.exec(a[h]));)f.push(c);for(c=0;c<f.length;c++)g=f[c][1],(0<d||0<f[c].index)&&k.push(a[h].substr(d,f[c].index-d)),b.hasOwnProperty(g)||(b[g]=""),k.push(b[g]),d=f[c].index+f[c][0].length;d<a[h].length&&k.push(a[h].substr(d,a[h].length));a=a.slice(0,h).concat(k).concat(a.slice(h+1))}return a}; f));FormBuilder.debugStop(g);return a};FormBuilder.replaceStatementsFunction=function(a,b,e){var d=null,d=FormBuilder.regex.fun_out_val.exec(a);if(null===d)return!1;b.hasOwnProperty(d[1])||(b[d[1]]=ref(e,function(){}));return b[d[1]]};FormBuilder.replaceStatementsArray=function(a,b,e){var d=null,d=FormBuilder.regex.arr_out_set.exec(a);if(null===d)return!1;b.hasOwnProperty(d[1])||(b[d[1]]=ref(e,[]));return b[d[1]]};
FormBuilder.replaceStatementsArrayValue=function(a,b,e,c){b=FormBuilder.regex.arr_out_val;var f=null,d=[],k,h,g,l;for(g=0;g<a.length;g++){m=null;d=[];k=0;for(h=[];null!==(f=b.exec(a[g]));)d.push(f);for(f=0;f<d.length;f++)l=d[f][1]+d[f][2]+d[f][3],(0<k||0<d[f].index)&&h.push(a[g].substr(k,d[f].index-k)),c.hasOwnProperty(l)||(c[l]=ref(e)),h.push(c[l]),k=d[f].index+d[f][0].length;k<a[g].length&&h.push(a[g].substr(k,a[g].length));a=a.slice(0,g).concat(h).concat(a.slice(g+1))}return a}; FormBuilder.replaceStatementsRegex=function(a,b){var e=FormBuilder.regex.reg_out_val,d=null,f=[],g,c,h,k;for(h=0;h<a.length;h++){m=null;f=[];g=-1;for(c=[];null!==(d=e.exec(a[h]))&&!(g>=e.lastIndex);)g=e.lastIndex,f.push(d);for(d=g=0;d<f.length;d++)k=f[d][1],(0<g||0<f[d].index)&&c.push(a[h].substr(g,f[d].index-g)),b.hasOwnProperty(k)||(b[k]=""),c.push(b[k]),g=f[d].index+f[d][0].length;g<a[h].length&&c.push(a[h].substr(g,a[h].length));a=a.slice(0,h).concat(c).concat(a.slice(h+1))}return a};
FormBuilder.readRef=function(a,b){var e,c="";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(e in b)c=FormBuilder.regex.ref_pri.test(b[e])&&a.hasOwnProperty(b[e])?a[b[e]]instanceof Array?c+FormBuilder.readRef(a,a[b[e]]):c+a[b[e]]:c+b[e].toString();return c}; FormBuilder.replaceStatementsPrimary=function(a,b){var e=FormBuilder.regex.pri_out_val,d=null,f=[],g,c,h,k;for(h=0;h<a.length;h++){m=null;f=[];g=0;for(c=[];null!==(d=e.exec(a[h]));)f.push(d);for(d=0;d<f.length;d++)k=f[d][1],(0<g||0<f[d].index)&&c.push(a[h].substr(g,f[d].index-g)),b.hasOwnProperty(k)||(b[k]=""),c.push(b[k]),g=f[d].index+f[d][0].length;g<a[h].length&&c.push(a[h].substr(g,a[h].length));a=a.slice(0,h).concat(c).concat(a.slice(h+1))}return a};
FormBuilder.createElements=function(a,b,e){var c=[],f,d,k,h,g,l=["NULL"],n,p;if(a.hasOwnProperty("repeat")&&(g=FormBuilder.readRef(b,a.repeat.n),!isNaN(g)))for(l=[],e.hasOwnProperty(a.repeat.id+":i")||(e[a.repeat.id+":i"]=ref(0)),e.hasOwnProperty(a.repeat.id+":n")||(e[a.repeat.id+":n"]=ref(g)),f=0;f<g;f++)l[f]={},l[f][a.repeat.id+":i"]=f,l[f][a.repeat.id+":n"]=g;if(a.hasOwnProperty("browse")&&(g=FormBuilder.readRef(b,a.browse.array),g instanceof Array)){l=[];n=[];p={};k=new RegExp(a.browse.id+".(.+)"); FormBuilder.replaceStatementsArrayValue=function(a,b,e,d){b=FormBuilder.regex.arr_out_val;var f=null,g=[],c,h,k,l;for(k=0;k<a.length;k++){m=null;g=[];c=0;for(h=[];null!==(f=b.exec(a[k]));)g.push(f);for(f=0;f<g.length;f++)l=g[f][1]+g[f][2]+g[f][3],(0<c||0<g[f].index)&&h.push(a[k].substr(c,g[f].index-c)),d.hasOwnProperty(l)||(d[l]=ref(e)),h.push(d[l]),c=g[f].index+g[f][0].length;c<a[k].length&&h.push(a[k].substr(c,a[k].length));a=a.slice(0,k).concat(h).concat(a.slice(k+1))}return a};
for(f in e)k.test(f)&&n.push(RegExp.$1);if(a.browse.hasOwnProperty("funcs"))for(f in a.browse.funcs)k.test(f)&&(p[RegExp.$1]=FormBuilder.readRef(b,a.browse.funcs[f]));e.hasOwnProperty(a.browse.id+":i")||(e[a.browse.id+":i"]=ref(0));e.hasOwnProperty(a.browse.id+":n")||(e[a.browse.id+":n"]=ref(g));for(f=0;f<g.length;f++){l[f]={};for(d in n)p.hasOwnProperty(n[d])?l[f][a.browse.id+"."+n[d]]=p[n[d]](g[f]):g[f].hasOwnProperty(n[d])&&(l[f][a.browse.id+"."+n[d]]=g[f][n[d]]);l[f][a.browse.id+":i"]=f;l[f][a.browse.id+ FormBuilder.readRef=function(a,b){var e,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(e in b)d=FormBuilder.regex.ref_pri.test(b[e])&&a.hasOwnProperty(b[e])?a[b[e]]instanceof Array?d+FormBuilder.readRef(a,a[b[e]]):d+a[b[e]]:d+b[e].toString();return d};
":n"]=g.length}}for(d=0;d<l.length;d++){c[d]={prev:[],node:[],next:[]};if(l[d]instanceof Object)for(f in l[d])b[e[f]]=l[d][f];if(a.hasOwnProperty("prev_nodes"))for(f in a.prev_nodes)c[d].prev=FormBuilder.createElements(a.prev_nodes[f],b,e);if(a.hasOwnProperty("next_nodes"))for(f in a.next_nodes)c[d].next=FormBuilder.createElements(a.next_nodes[f],b,e);if(a.hasOwnProperty("node_link"))for(f in g=FormBuilder.createElements(a.node_link,b,e),g)c[d].prev=c[d].prev.concat(g[f].prev),c[d].node=c[d].node.concat(g[f].node), FormBuilder.createElements=function(a,b,e){var d=FormBuilder.debugStart("FormBuilder::createElements",2),f=[],g,c,h,k,l,n=["NULL"],p,q;if(a.hasOwnProperty("repeat")&&(l=FormBuilder.readRef(b,a.repeat.n),!isNaN(l)))for(n=[],e.hasOwnProperty(a.repeat.id+":i")||(e[a.repeat.id+":i"]=ref(0)),e.hasOwnProperty(a.repeat.id+":n")||(e[a.repeat.id+":n"]=ref(l)),g=0;g<l;g++)n[g]={},n[g][a.repeat.id+":i"]=g,n[g][a.repeat.id+":n"]=l;if(a.hasOwnProperty("browse")&&(l=FormBuilder.readRef(b,a.browse.array),l instanceof
c[d].next=g[f].next.concat(c[d].next);else a.hasOwnProperty("node_type")&&c[d].node.push(document.createElement(FormBuilder.readRef(b,a.node_type)));if(a.hasOwnProperty("attributes"))for(f in a.attributes)for(h in c[d].node)c[d].node[h].setAttribute(f,FormBuilder.readRef(b,a.attributes[f]));if(a.hasOwnProperty("css"))for(h in c[d].node)FormBuilder.applyCSS(c[d].node[h],a.css);if(a.hasOwnProperty("text"))for(h in c[d].node)c[d].node[h].innerHTML=FormBuilder.readRef(b,a.text);if(a.hasOwnProperty("listeners"))for(f in a.listeners)for(h in c[d].node)c[d].node[h].addEventListener(f, Array)){n=[];p=[];q={};h=new RegExp(a.browse.id+".(.+)");for(g in e)h.test(g)&&p.push(RegExp.$1);if(a.browse.hasOwnProperty("funcs"))for(g in a.browse.funcs)h.test(g)&&(q[RegExp.$1]=FormBuilder.readRef(b,a.browse.funcs[g]));e.hasOwnProperty(a.browse.id+":i")||(e[a.browse.id+":i"]=ref(0));e.hasOwnProperty(a.browse.id+":n")||(e[a.browse.id+":n"]=ref(l));for(g=0;g<l.length;g++){n[g]={};for(c in p)q.hasOwnProperty(p[c])?n[g][a.browse.id+"."+p[c]]=q[p[c]](l[g]):l[g].hasOwnProperty(p[c])&&(n[g][a.browse.id+
FormBuilder.readRef(b,a.listeners[f]),!1);if(a.hasOwnProperty("children"))for(f in a.children)for(h in g=FormBuilder.createElements(a.children[f],b,e),c[d].node)FormBuilder.attachElements(c[d].node[h],g)}return a.dom=c}; "."+p[c]]=l[g][p[c]]);n[g][a.browse.id+":i"]=g;n[g][a.browse.id+":n"]=l.length}}for(c=0;c<n.length;c++){f[c]={prev:[],node:[],next:[]};if(n[c]instanceof Object)for(g in n[c])b[e[g]]=n[c][g];if(a.hasOwnProperty("prev_nodes"))for(g in a.prev_nodes)f[c].prev=FormBuilder.createElements(a.prev_nodes[g],b,e);if(a.hasOwnProperty("next_nodes"))for(g in a.next_nodes)f[c].next=FormBuilder.createElements(a.next_nodes[g],b,e);if(a.hasOwnProperty("node_link"))for(g in l=FormBuilder.createElements(a.node_link,
FormBuilder.attachElements=function(a,b){var e,c;for(e in b){for(c in b[e].prev)b[e].prev[c]instanceof Element&&a.appendChild(b[e].prev[c]),b[e].prev[c]instanceof Object&&FormBuilder.attachElements(a,[b[e].prev[c]]);for(c in b[e].node)b[e].node[c]instanceof Element&&a.appendChild(b[e].node[c]),b[e].node[c]instanceof Object&&FormBuilder.attachElements(a,[b[e].node[c]]);for(c in b[e].next)b[e].next[c]instanceof Element&&a.appendChild(b[e].next[c]),b[e].next[c]instanceof Object&&FormBuilder.attachElements(a, b,e),l)f[c].prev=f[c].prev.concat(l[g].prev),f[c].node=f[c].node.concat(l[g].node),f[c].next=l[g].next.concat(f[c].next);else a.hasOwnProperty("node_type")&&f[c].node.push(document.createElement(FormBuilder.readRef(b,a.node_type)));if(a.hasOwnProperty("attributes"))for(g in a.attributes)for(k in f[c].node)f[c].node[k].setAttribute(g,FormBuilder.readRef(b,a.attributes[g]));if(a.hasOwnProperty("css"))for(k in f[c].node)FormBuilder.applyCSS(f[c].node[k],a.css);if(a.hasOwnProperty("text"))for(k in f[c].node)f[c].node[k].innerHTML=
[b[e].next[c]])}}; FormBuilder.readRef(b,a.text);if(a.hasOwnProperty("listeners"))for(g in a.listeners)for(k in f[c].node)f[c].node[k].addEventListener(g,FormBuilder.readRef(b,a.listeners[g]),!1);if(a.hasOwnProperty("children"))for(g in a.children)for(k in l=FormBuilder.createElements(a.children[g],b,e),f[c].node)FormBuilder.attachElements(f[c].node[k],l)}b=a.hasOwnProperty("node")?a.node:a.node_type;FormBuilder.debug("<"+b+">",2);FormBuilder.debugStop(d);return a.dom=f};
FormBuilder.detachElements=function(a,b){var e,c;for(e in b){for(c in b[e].prev)b[e].prev[c]instanceof Element&&a.removeChild(b[e].prev[c]),b[e].prev[c]instanceof Object&&FormBuilder.detachElements(a,[b[e].prev[c]]);for(c in b[e].node)b[e].node[c]instanceof Element&&a.removeChild(b[e].node[c]),b[e].node[c]instanceof Object&&FormBuilder.detachElements(a,[b[e].node[c]]);for(c in b[e].next)b[e].next[c]instanceof Element&&a.removeChild(b[e].next[c]),b[e].next[c]instanceof Object&&FormBuilder.detachElements(a,[b[e].next[c]])}}; FormBuilder.attachElements=function(a,b){var e=FormBuilder.debugStart("FormBuilder::attachElements",2),d,f;for(d in b){for(f in b[d].prev)b[d].prev[f]instanceof Element&&a.appendChild(b[d].prev[f]),b[d].prev[f]instanceof Object&&FormBuilder.attachElements(a,[b[d].prev[f]]);for(f in b[d].node)b[d].node[f]instanceof Element&&a.appendChild(b[d].node[f]),b[d].node[f]instanceof Object&&FormBuilder.attachElements(a,[b[d].node[f]]);for(f in b[d].next)b[d].next[f]instanceof Element&&a.appendChild(b[d].next[f]),
FormBuilder.applyCSS=function(a,b){for(var e in b)a.style[e]=b[e]}; b[d].next[f]instanceof Object&&FormBuilder.attachElements(a,[b[d].next[f]])}FormBuilder.debugStop(e)};
FormBuilder.detachElements=function(a,b){var e,d;for(e in b){for(d in b[e].prev)b[e].prev[d]instanceof Element&&a.removeChild(b[e].prev[d]),b[e].prev[d]instanceof Object&&FormBuilder.detachElements(a,[b[e].prev[d]]);for(d in b[e].node)b[e].node[d]instanceof Element&&a.removeChild(b[e].node[d]),b[e].node[d]instanceof Object&&FormBuilder.detachElements(a,[b[e].node[d]]);for(d in b[e].next)b[e].next[d]instanceof Element&&a.removeChild(b[e].next[d]),b[e].next[d]instanceof Object&&FormBuilder.detachElements(a,
[b[e].next[d]])}};FormBuilder.applyCSS=function(a,b){for(var e in b)a.style[e]=b[e]};

121
js/lib/form-builder.js
View File

@ -103,6 +103,53 @@ FormBuilder.spread_attr = [ // Liste des attributs diffusant le scope
'funcs' 'funcs'
]; ];
// DEBUG des performances
FormBuilder.debug_time = false;
FormBuilder.debug_time_details = false;
/* DEMARRAGE DU DEBUG
*/
FormBuilder.debugStart = function(group, type){
if( type == 1 && FormBuilder.debug_time ){}
else if( type == 2 && FormBuilder.debug_time_details ){}
else return {type: 0};
var time_r = '['+ parseInt( Math.random()*0xeffffffff ).toString(16) +']';
console.time(time_r);
console.group(group);
return {
type: type,
time_r: time_r,
group: group
};
};
/* MESSAGE DE DEBUG
*/
FormBuilder.debug = function(message, type){
if( type == 1 && FormBuilder.debug_time ){}
else if( type == 2 && FormBuilder.debug_time_details ){}
else return {type: 0};
console.debug(message);
};
/* AFFICHAGE DU DEBUG
*/
FormBuilder.debugStop = function(obj){
if( obj.type == 1 && FormBuilder.debug_time ){}
else if( obj.type == 2 && FormBuilder.debug_time_details ){}
else return null;
console.timeEnd(obj.time_r);
console.groupEnd(obj.group);
};
// FormBuilder.debugStart = function(){ console.time(); };
// FormBuilder.debugStop = function(s){ console.timeEnd(); };
/************************************************************/ /************************************************************/
/* __ __ _____ _____ _ _ ___ ____ ____ */ /* __ __ _____ _____ _ _ ___ ____ ____ */
@ -118,12 +165,16 @@ FormBuilder.spread_attr = [ // Liste des attributs diffusant le scope
* *
*/ */
FormBuilder.prototype.add_definition = function(def_object){ FormBuilder.prototype.add_definition = function(def_object){
var dbg = FormBuilder.debugStart('FormBuilder.add_definition', 1);
/* [1] On ajoute la définition /* [1] On ajoute la définition
==================================================================*/ ==================================================================*/
for( var key in def_object ) for( var key in def_object )
this.defs_object[key] = def_object[key]; this.defs_object[key] = def_object[key];
FormBuilder.debugStop(dbg);
}; };
@ -133,6 +184,8 @@ FormBuilder.prototype.add_definition = function(def_object){
* *
*/ */
FormBuilder.prototype.build = function(scope){ FormBuilder.prototype.build = function(scope){
var dbg = FormBuilder.debugStart('FormBuilder.build', 1);
/* [0] Gestion du paramètres /* [0] Gestion du paramètres
==================================================================*/ ==================================================================*/
/* (1) On initialise le scope vide s'il n'est pas donné */ /* (1) On initialise le scope vide s'il n'est pas donné */
@ -151,16 +204,11 @@ FormBuilder.prototype.build = function(scope){
=========================================================*/ =========================================================*/
this.built_form = JSON.parse(JSON.stringify(this.form_object)); this.built_form = JSON.parse(JSON.stringify(this.form_object));
/* [2] On formatte l'objet /* [2] On remplace les valeurs
==================================================================*/
// - Ajout des références children[n].parent vers élément parent
// - Ajout des références element.node_link vers définition (en fonction de element.node)
this.built_form = FormBuilder.formatFormObject(this.built_form, this.defs_object);
/* [3] On remplace les valeurs
==================================================================*/ ==================================================================*/
this.built_form = FormBuilder.replaceStatements(this.built_form, scope, this.defs_object, this.ref_table, this.ref_assoc); this.built_form = FormBuilder.replaceStatements(this.built_form, scope, this.defs_object, this.ref_table, this.ref_assoc);
FormBuilder.debugStop(dbg);
}; };
@ -170,6 +218,8 @@ FormBuilder.prototype.build = function(scope){
* *
*/ */
FormBuilder.prototype.update = function(scope){ FormBuilder.prototype.update = function(scope){
var dbg = FormBuilder.debugStart('FormBuilder.update', 1);
/* [0] Gestion du paramètres /* [0] Gestion du paramètres
==================================================================*/ ==================================================================*/
/* (1) On initialise le scope vide s'il n'est pas donné */ /* (1) On initialise le scope vide s'il n'est pas donné */
@ -187,6 +237,8 @@ FormBuilder.prototype.update = function(scope){
} }
} }
FormBuilder.debugStop(dbg);
}; };
@ -197,6 +249,8 @@ FormBuilder.prototype.update = function(scope){
* *
*/ */
FormBuilder.prototype.attach = function(parent){ FormBuilder.prototype.attach = function(parent){
var dbg = FormBuilder.debugStart('FormBuilder.attach', 1);
/* [0] Initialisation /* [0] Initialisation
=========================================================*/ =========================================================*/
/* (1) Gestion du paramètre @parent */ /* (1) Gestion du paramètre @parent */
@ -223,6 +277,7 @@ FormBuilder.prototype.attach = function(parent){
FormBuilder.attachElements(this.parent_element, dom); FormBuilder.attachElements(this.parent_element, dom);
FormBuilder.debugStop(dbg);
}; };
@ -234,22 +289,6 @@ FormBuilder.prototype.attach = function(parent){
/* |____/ |_/_/ \_\_| |___\____| */ /* |____/ |_/_/ \_\_| |___\____| */
/************************************************/ /************************************************/
/* FORMATTE L'OBJET DE DESCRIPTION DU FORMULAIRE
*
* @object<Object> Objet dans lequel remplacer les valeurs
* @defs<Object> Objet de définition des nodes
*
*
* @desc
* 1. Ajoute l'attribut PARENT aux enfants pour qu'ils puisse accéder à l'élément parent
* 2. Ajout l'attribut NODE_LINK aux éléments afin de lier leur définition en fonction de la valeur de 'node'
*
*/
FormBuilder.formatFormObject = function(object, defs){
// TODO: à supprimer
return object;
};
/* CHERCHE UNE DEFINITION CORRESPONDANT A L'ATTRIBUT 'node' /* CHERCHE UNE DEFINITION CORRESPONDANT A L'ATTRIBUT 'node'
* *
@ -261,6 +300,9 @@ FormBuilder.formatFormObject = function(object, defs){
* *
*/ */
FormBuilder.fetchNodeDefinition = function(node, defs){ FormBuilder.fetchNodeDefinition = function(node, defs){
var dbg = FormBuilder.debugStart('FormBuilder::fetchNodeDefinition', 2);
FormBuilder.debug('node = "'+node+'"', 2);
/* [0] Initialisation /* [0] Initialisation
==================================================================*/ ==================================================================*/
var m = null, key, i, regex; var m = null, key, i, regex;
@ -271,6 +313,8 @@ FormBuilder.fetchNodeDefinition = function(node, defs){
==================================================================*/ ==================================================================*/
if( typeof defs != 'undefined' && defs.hasOwnProperty(node) ){ if( typeof defs != 'undefined' && defs.hasOwnProperty(node) ){
FormBuilder.debugStop(dbg);
return { def: defs[node] }; return { def: defs[node] };
@ -297,6 +341,8 @@ FormBuilder.fetchNodeDefinition = function(node, defs){
for( i = 1 ; i < RegExp.length && i < 10 ; i++ ) for( i = 1 ; i < RegExp.length && i < 10 ; i++ )
matches['$'+i] = RegExp['$'+i]; matches['$'+i] = RegExp['$'+i];
FormBuilder.debugStop(dbg);
/* (3) On renvoie le lien + le scope */ /* (3) On renvoie le lien + le scope */
return { def: defs[key], scope: matches }; return { def: defs[key], scope: matches };
@ -309,9 +355,11 @@ FormBuilder.fetchNodeDefinition = function(node, defs){
} }
FormBuilder.debugStop(dbg);
// Si on a rien trouvé, on retourne NULL // Si on a rien trouvé, on retourne NULL
return {}; return {};
}; };
@ -327,6 +375,9 @@ FormBuilder.fetchNodeDefinition = function(node, defs){
* *
*/ */
FormBuilder.replaceStatements = function(object, scope, definitions, ref_table, ref_assoc){ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table, ref_assoc){
var dbg = FormBuilder.debugStart('FormBuilder::replaceStatements', 2);
/* [0] Initialisation /* [0] Initialisation
==================================================================*/ ==================================================================*/
/* (1) Paramètres */ /* (1) Paramètres */
@ -476,15 +527,22 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table,
/* (1) Si c'est un tableau, on lance récursivement pour chaque item */ /* (1) Si c'est un tableau, on lance récursivement pour chaque item */
if( object[key] instanceof Array ){ if( object[key] instanceof Array ){
for( var i in object[key] ) for( var i in object[key] ){
// on lance récursivement // on lance récursivement
FormBuilder.debug('**'+key+'['+i+']', 2);
FormBuilder.replaceStatements(object[key][i], scope, definitions, ref_table, ref_assoc); FormBuilder.replaceStatements(object[key][i], scope, definitions, ref_table, ref_assoc);
}
/* (2) Si c'est un objet, on lance récursivement */ /* (2) Si c'est un objet, on lance récursivement */
}else if( object[key] instanceof Object ) }else if( object[key] instanceof Object ){
// on lance récursivement // on lance récursivement
FormBuilder.debug('**'+key, 2);
FormBuilder.replaceStatements(object[key], scope, definitions, ref_table, ref_assoc); FormBuilder.replaceStatements(object[key], scope, definitions, ref_table, ref_assoc);
}
} }
@ -493,6 +551,8 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table,
/* [5] On retourne l'object courant /* [5] On retourne l'object courant
==================================================================*/ ==================================================================*/
FormBuilder.debugStop(dbg);
return object; return object;
}; };
@ -853,6 +913,8 @@ FormBuilder.readRef = function(ref_table, parts){
* *
*/ */
FormBuilder.createElements = function(definition, ref_table, ref_assoc){ FormBuilder.createElements = function(definition, ref_table, ref_assoc){
var dbg = FormBuilder.debugStart('FormBuilder::createElements', 2);
/* [0] Initialisation /* [0] Initialisation
===========================================================*/ ===========================================================*/
var built = []; var built = [];
@ -1100,6 +1162,10 @@ FormBuilder.createElements = function(definition, ref_table, ref_assoc){
} }
var identifier = definition.hasOwnProperty('node') ? definition.node : definition.node_type
FormBuilder.debug('<'+identifier+'>', 2);
FormBuilder.debugStop(dbg);
/* [8] On ajoute l'élément à la définition et retourne /* [8] On ajoute l'élément à la définition et retourne
=========================================================*/ =========================================================*/
definition.dom = built; definition.dom = built;
@ -1114,6 +1180,7 @@ FormBuilder.createElements = function(definition, ref_table, ref_assoc){
* *
*/ */
FormBuilder.attachElements = function(parent, set){ FormBuilder.attachElements = function(parent, set){
var dbg = FormBuilder.debugStart('FormBuilder::attachElements', 2);
var c, a; var c, a;
@ -1170,6 +1237,8 @@ FormBuilder.attachElements = function(parent, set){
} }
FormBuilder.debugStop(dbg);
}; };

10
js/lib/form-builder/main-min.js vendored
View File

@ -1,5 +1,5 @@
document.body.innerHTML=""; document.body.innerHTML="";"use strict";
var default_definition={"input.text":{node_type:"input",attributes:{name:"{name}",value:"{value}",type:"text"}},"/^span:(d+)$/":{node_type:"span",text:"span {spanRepeat:i} on {spanRepeat:n} (={$1})",repeat:{n:"{$1}",id:"spanRepeat"},attributes:{"class":"{class}"}},"simple-select":{node_type:"select",attributes:{"class":"{select-class}"},children:[{node_type:"option",browse:{array:"{options[]}",funcs:{"options.value":"{getvalue()}","options.length":"{getlength()}"}},attributes:{"class":"{option-class}",value:"{options:i}"}, 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:"br",repeat:{n:"{$1}",id:"brs"}}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},listeners:{click:"{click_listener()}"}},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select",
text:"{options.value} ({options.length} caract\u00e8res)"}],listeners:{change:"{onchange()}"}}},exempleFormulaire={node_type:"form",attributes:{method:"POST",action:"{url}"},prev_nodes:[{node:"span:2",$class:"beforeSpan"}],children:[{node:"input.text",$name:"fname",$value:"{default_firstname}"},{node:"simple-select",$options:"{liste_noms[]}",$select_class:"gui-option",$option_class:"gui-select",$onchange:"{my_onchange()}",$getvalue:"{getitemvalue()}",$getlength:"{getitemlength()}"},{node_type:"input", attributes:{"data-name":"{name}"},children:[{node:"option",attributes:{value:"{options:i}"},text:"{options.value}",browse:{array:"{options[]}",funcs:{"options.value":"{getoptval()}"}}}],listeners:{change:"{listener()}"}}]}},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",
attributes:{type:"submit",value:"Valider"}}],next_nodes:[{node:"span:2",$class:"afterSpan"}]},monBuilder=new FormBuilder(exempleFormulaire);monBuilder.add_definition(default_definition);monBuilder.build({url:"https://xdrm.io/page1",default_firstname:"Jean",liste_noms:"Jean Pierre Robert Marie Anna F\u00e9licien Marc J\u00e9sus".split(" "),getitemvalue:function(a){return a},getitemlength:function(a){return a.length}});var monConteneur=document.body;monBuilder.attach(monConteneur); $value:"{count_call}",$click_listener:"{my_listener()}"},{node:"input.hidden",$name:"countsms",$value:"{count_sms}"},{node:"input.text",$name:"number",$value:"{number}"},{node:"custom-select",$name:"existing",$options:"{existing[]}",$listener:"{existingsel()}"},{node:"input.text",$name:"username",$placeholder:"{username_ph}",$value:"{username}"},{node:"input.submit",$value:"Enregistrer",attributes:{"class":"primary sub-number"}}],next_nodes:[{node:"br"}]},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&nbsp;&nbsp;&nbsp;&nbsp;ou&nbsp;&nbsp;&nbsp;&nbsp;\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",
monBuilder.update({url:"https://xdrm.io/page2",getitemlength:function(a){return 10}});monBuilder.attach(monConteneur); fb=new FormBuilder(contactForm);fb.add_definition(default_definition);fb.add_definition(custom_definition);fb.build({uid:1,call:2,sms:3,count_call:4,count_sms:5,number:"01 02 03 04 05",existing:["Jean","Archibald","Daniel","Maurice"],username:"moi-meme",my_listener:function(b){console.log("clicked",b)},existingsel:function(b){console.log("selected",b)},getoptval:function(b){return b}});fb.attach(document.body);

311
js/lib/form-builder/main.js
View File

@ -1,225 +1,124 @@
/* [0] On efface le <body>
=========================================================*/
document.body.innerHTML = ''; document.body.innerHTML = '';
// CETTE CLASSE PERMET LA CREATION DE HTML A PARTIR D'UN OBJET JAVASCRIPT "use strict";
//
//
// Notation:
// - Une chaine de caractère précédée du symbole '@' correspond à un commentaire pour expliquer une valeur
//
//
// Types de donées:
// - <S> Chaine de caractère
// - <A> Tableau
// - <O> Tableau associatif (objet)
// - <I> Nombre entier
// - <F> Fonction
// - <*> Qu'importe
//
// Structure:
// - L'objet permettant la création du HTML correspond à un #Element
// - L'imbrication de ses #Element permet de construire une structure complète
//
//
// Fonctionnement:
// - En plus de l'objet correspondant à l'élément HMTL, il faut spécifier des #Descriptions permettant
// de générer le HTML
//
//
// Liste des attributs:
// 'node' <S> String permettant de lier l'élément à une définition (qui doit forcément avoir, soit une autre définition, soit 'node_type')
// 'node_type' <S> Type d'élément HTML, aucune définition n'est nécessaire
// 'children' <A> les #Element enfants de l'#Element en question
// 'prev_nodes' <A> les #Element précédant l'#Element en question
// 'next_nodes' <A> les #Element suivant l'#Element en question
// 'text' <S> Contenu textuel de l'#Element (cf. innerHTML)
// 'attributes' <O> Tableau associatif contenant les attributs de l'#Element
// 'listeners' <O> Contient les associations { '@eventName': '@eventFunction' } - @eventName<S> - @eventFunction<F>
// 'repeat' <O> Définit le nombre de fois qu'il faut dupliquer l'#Element { n: @nbRepeat, id: '@idDuRepeat'}
// 'n' <I> Nombre de fois qu'il faut dupliquer l'#Element
// 'id' <S> Identifiant de la répétition, permet d'interpoler l'indice et le total
// *Note: il est possible d'interpoler l'indice de l'#Element avec '{@idRepeat:i}' et le total avec '{@idRepeat:n}'
// 'browse' <A/O> Définit le tableau sur lequel dupliquer l'#Element { array: @tableau, funcs: { @nomValeur1: @func1, @nomValeur2: @func2 } }
// 'array' <A> Tableau pour lequel dupliquer l'#Element (pour chaque valeur), l'interpolation se fait avec '{@nomTab.@nomAttr}'
// 'funcs' <B> Définition d'actions sur chaque élément du tableau (interpolables de la même manière que les vrais attributs)
// *Note: il est possible d'interpoler l'indice de l'#Element avec '{@nomTab:i}' et le total avec '{@nomTab:n}'
// '$@someName' <*> Un attribut commençant par le caractère '$' sera passé au scope de ses enfants, voisins, et définitions
//
//
// Interpolation de valeurs:
// '{@nomVariable}' sera remplacé par la variable 'nomVariable', si elle n'existe pas, par une chaine vide
// *Note: le nom de la variable ne peut contenir que : 1. des lettres en minuscules, des underscore ('_')
// '{@nomTab[]}' sera remplacé par le tableau 'nomTab', si il n'existe pas, par un tableau vide
// *Note: le nom de la variable ne peut contenir que : 1. des lettres en minuscules, des underscore ('_')
// '{@nomFunc()}' sera remplacé par la fonction 'nomFunc', si elle n'existe pas, par une fonction vide
// *Note: le nom de la variable ne peut contenir que : 1. des lettres en minuscules, des underscore ('_')
// '{$@n}' sera remplacé par le @n-ième match de la dernière RegExp valide
// *Note: ne peut qu'être utilisé dans les définitions, car c'est le seul endroit ou peuvent être des RegExp
// '{@tab.@attr}' sera remplacé par l'attribut @attr de l'item en cours du tableau @tab
// *Note: si l'attribut n'existe pas, mais qu'une fonction est définie pour cette valeur, la fonction calculera la valeur
// *Note: n'est utilisable que dans un #Element ayant l'attribut 'browse'
//
//
// Définition
// Les clés de l'objet correspondent à l'attribut 'node', il peut soit être une chaine, soit une RegExp @r de la forme: '/^@r$/'
//
//
//
// Exemple: objet de définition
// ----------------------------
var default_definition = { var default_definition = {
// Les #Element avec 'node' valant 'input' seront liés à cette définition 'input': { node_type: 'input' },
'input.text': { '/^h([1-6])$/': { node_type: 'h{$1}' },
node_type: 'input', // sera un <input> 'br': { node_type: 'br' },
attributes: { 'option': { node_type: 'option' },
name: '{name}', // l'attribut 'name' vaudra la valeur de la variable 'name' 'select': { node_type: 'select' },
value: '{value}', // l'attribut 'value' vaudra la valeur de la variable 'value' 'span': { node_type: 'span' },
type: 'text' // l'attribut 'type' vaudra 'text' '/^br([0-9]+)$/': { node: 'br', repeat: { n: '{$1}', id: 'brs' } }
}
},
// Les #Element avec 'node' valant 'span:@x' avec @x un nombre entier, seront liés à cette définition
'/^span:(\d+)$/': {
node_type: 'span', // sera un <span>
text: 'span {spanRepeat:i} on {spanRepeat:n} (={$1})',
repeat: {
n: '{$1}', // sera dupliqué @x fois, avec @x récupéré dans le nom de la définition
id: 'spanRepeat' // sera accessible via l'id 'spanRepeat'
},
attributes: {
'class': '{class}' // l'attribut 'class' vaudra la valeur de la variable 'class'
}
},
// Les #Element avec 'node' valant 'simple-select', seront liés à cette définition
'simple-select': {
node_type: 'select', // sera un <select>
attributes: {
'class': '{select-class}' // l'attribut 'class' prendra la valeur de la variable 'select-class'
},
children: [
{
node_type: 'option', // contiendra des <option>
browse: {
array: '{options[]}', // chaque <option> sera dupliquée pour chaque valeur du tableau 'options'
funcs: {
// définit le "faux" attribut 'value' de chaque élément du tableau 'options'
// avec la fonction 'getvalue()' qui sera passée en paramètre
// *Node: le tableau n'aura pas d'attribut (tableau simple), cela renverra
// donc directement la valeur de chaque item
'options.value': '{getvalue()}',
// définit le "faux" attribut 'length' de chaque élément du tableau 'options'
// avec la fonction 'getstrlen()' qui sera passée en paramètre
// la fonction retournera la taille des chaines de chaque valeur du tableau
'options.length': '{getlength()}'
}
},
attributes: {
'class': '{option-class}', // l'attribut 'class' prendra la valeur de la variable 'option-class'
value: '{options:i}' // chaque <option> aura l'attribut 'value' qui vaut l'indice actuel de l'#Element
},
// aura pour contenu la valeur de l'item actuel @a du tableau,
// suivi du nombre de caractère @b de la valeur
// ex: "texteDeLitem (12 caractères)"
text: '{options.value} ({options.length} caractères)'
}
],
listeners: {
// ajoutera un listener sur l'évènement 'change' et lancera la fonction passée
// qui s'appelle 'onchange'
'change': '{onchange()}'
}
}
}; };
var custom_definition = {
// '/^input\.([a-z]+)$/': {
// Exemple formulaire node: 'input',
// ------------------
var exempleFormulaire = {
node_type: 'form', // sera un <form>
attributes: { attributes: {
'method': 'POST', // aura l'attribut 'method' valant 'POST' 'type': '{$1}',
'action': '{url}' // aura l'attribut 'action' valant la valeur de la variable 'url' 'data-name': '{name}',
'value': '{value}',
'placeholder': '{placeholder}'
},
listeners: { 'click': '{click_listener()}' }
}, },
// sera précédé par 2 <span> (cf. définition de 'span:(\d+)')
prev_nodes: [
{
node: 'span:2',
$class: 'beforeSpan' // les <span> hériterons de la variable 'class'
}
],
'custom-select': {
node: 'span',
attributes: { 'class': 'select-container nobold' },
children: [ children: [
{ // contiendra en premier enfant un <input type='text'> {
node: 'input.text', node: 'select',
$name: 'fname', // l'<input> héritera la variable 'name' attributes: { 'data-name': '{name}' },
$value: '{default_firstname}' // l'<input> héritera la variable 'value', qui elle-même sera récupèrée de la variable 'default_firstname' children: [
}, {
node: 'option',
{ // contiendra en second enfant un <select> contenant les <options> en fonction du tableau 'liste-noms' attributes: { value: '{options:i}' },
node: 'simple-select', text: '{options.value}',
$options: '{liste_noms[]}', // la définition héritera du tableau 'options' valant le tableau donné 'liste_noms' browse: {
$select_class: 'gui-option', // la définition héritera de la variable 'select_class' array: '{options[]}',
$option_class: 'gui-select', // la définition héritera de la variable 'option_class' funcs: { 'options.value': '{getoptval()}' }
$onchange: '{my_onchange()}', // la définition héritera de la fonction 'onchange' valant la fonction donnée 'my_onchange'
$getvalue: '{getitemvalue()}', // la définition héritera de la fonction 'getvalue' valant la fonction données 'getitemvalue'
$getlength: '{getitemlength()}' // la définition héritera de la fonction 'getlength' valant la fonction données 'getitemvalue'
},
{ // contiendra en dernier enfant un <input type='submit' value='Valider'>
node_type: 'input', // sera un <input>
attributes: {
type: 'submit', // aura l'attribut 'type' qui vaut 'submit'
value: 'Valider' // aura l'attribut 'value' qui vaut 'Valider'
} }
} }
], ],
listeners: { 'change': '{listener()}' }
// sera suivi par 2 <span> (cf. définition de 'span:(\d+)')
next_nodes: [
{
node: 'span:2',
$class: 'afterSpan' // les <span> hériterons de la variable 'class'
} }
] ]
}
}; };
//
// Exemple code de construction var contactForm = {
// ---------------------------- node: 'h4',
// attributes: { 'data-icon': 'o', class: 'new-contact colo2' },
// On instancie notre builder children: [
var monBuilder = new FormBuilder(exempleFormulaire); { node: 'input.hidden', $name: 'uid', $value: '{uid}' },
// on ajoute la/les définition(s) { node: 'input.hidden', $name: 'call', $value: '{call}' },
monBuilder.add_definition(default_definition); { node: 'input.hidden', $name: 'sms', $value: '{sms}' },
// on construit notre objet en lui passant toutes les données { node: 'input.hidden', $name: 'countcall', $value: '{count_call}', $click_listener: '{my_listener()}' },
monBuilder.build({ { node: 'input.hidden', $name: 'countsms', $value: '{count_sms}' },
url: 'https://xdrm.io/page1', // variable 'url'
default_firstname: 'Jean', // variable 'default_firstname' { node: 'input.text', $name: 'number', $value: '{number}' },
liste_noms: ['Jean', 'Pierre', 'Robert', 'Marie', 'Anna', 'Félicien', 'Marc', 'Jésus'], // tableau 'list_noms'
getitemvalue: function(item){ return item; }, // pour chaque item, retournera la valeur brute { node: 'custom-select', $name: 'existing', $options: '{existing[]}', $listener: '{existingsel()}' },
getitemlength: function(item){ return item.length; } // pour chaque item, retournera la taille de la valeur
{ node: 'input.text', $name: 'username', $placeholder: '{username_ph}', $value: '{username}'},
{ node: 'input.submit', $value: 'Enregistrer', attributes: { class: 'primary sub-number'} }
],
next_nodes: [ { node: 'br' } ]
};
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&nbsp;&nbsp;&nbsp;&nbsp;ou&nbsp;&nbsp;&nbsp;&nbsp;\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");
// On active le debug des performances
// FormBuilder.debug_time = true;
// FormBuilder.debug_time_details = true;
var fb = new FormBuilder(contactForm);
fb.add_definition(default_definition);
fb.add_definition(custom_definition);
fb.build({
uid: 1,
call: 2,
sms: 3,
count_call: 4,
count_sms: 5,
number: '01 02 03 04 05',
existing: ['Jean', 'Archibald', 'Daniel', 'Maurice'],
username: 'moi-meme',
// username_ph: 'Pseudo',
my_listener: function(e){ console.log('clicked', e); },
existingsel: function(e){ console.log('selected', e); },
getoptval: function(opt){ return opt; }
}); });
// fb.attach(document.body);
// Exemple code d'ajout au DOM
// ---------------------------
// soit monConteneur, l'élément qui contiendra le formulaire
var monConteneur = document.body;
// On ajoute le formulaire au conteneur
monBuilder.attach(monConteneur);
//
// Exemple de modification des valeurs
// -----------------------------------
// les variables ommises lors de la création, ne sont pas modifiables
monBuilder.update({
url: 'https://xdrm.io/page2', // on modifie l'URL
getitemlength: function(item){ return 10; } // on modifie notre fonction (on renvoie taille+1)
});
// reconstruction du DOM
monBuilder.attach(monConteneur);