Gestion du debugger (pour les perfs et l'arbre d'exécution' pour le 'form-builder'
This commit is contained in:
xdrm-brackets
parent
c8bc92461a
commit
6b325f7198
|
|
@ -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}"},
|
||||
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);
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -219,7 +219,7 @@ monBuilder.attach(monConteneur);
|
|||
// 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)
|
||||
getitemlength: function(item){ return item.length+1; } // on modifie notre fonction (on renvoie taille+1)
|
||||
});
|
||||
// reconstruction du DOM
|
||||
monBuilder.attach(monConteneur);
|
||||
|
|
|
|||
|
|
@ -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$"}};
|
||||
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;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.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.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.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)?
|
||||
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.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]]};
|
||||
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};
|
||||
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};
|
||||
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.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.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+".(.+)");
|
||||
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+
|
||||
":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),
|
||||
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,
|
||||
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};
|
||||
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].next[c]])}};
|
||||
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.applyCSS=function(a,b){for(var e in b)a.style[e]=b[e]};
|
||||
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.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.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.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.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.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.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{}};
|
||||
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]=
|
||||
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)))):
|
||||
"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,
|
||||
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.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.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.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};
|
||||
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};
|
||||
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
|
||||
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+
|
||||
"."+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,
|
||||
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=
|
||||
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.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]),
|
||||
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]};
|
||||
|
|
|
|||
|
|
@ -103,6 +103,53 @@ FormBuilder.spread_attr = [ // Liste des attributs diffusant le scope
|
|||
'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){
|
||||
var dbg = FormBuilder.debugStart('FormBuilder.add_definition', 1);
|
||||
|
||||
|
||||
/* [1] On ajoute la définition
|
||||
==================================================================*/
|
||||
for( var key in def_object )
|
||||
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){
|
||||
var dbg = FormBuilder.debugStart('FormBuilder.build', 1);
|
||||
|
||||
/* [0] Gestion du paramètres
|
||||
==================================================================*/
|
||||
/* (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));
|
||||
|
||||
/* [2] On formatte l'objet
|
||||
==================================================================*/
|
||||
// - 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
|
||||
/* [2] On remplace les valeurs
|
||||
==================================================================*/
|
||||
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){
|
||||
var dbg = FormBuilder.debugStart('FormBuilder.update', 1);
|
||||
|
||||
/* [0] Gestion du paramètres
|
||||
==================================================================*/
|
||||
/* (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){
|
||||
var dbg = FormBuilder.debugStart('FormBuilder.attach', 1);
|
||||
|
||||
/* [0] Initialisation
|
||||
=========================================================*/
|
||||
/* (1) Gestion du paramètre @parent */
|
||||
|
|
@ -223,6 +277,7 @@ FormBuilder.prototype.attach = function(parent){
|
|||
|
||||
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'
|
||||
*
|
||||
|
|
@ -261,6 +300,9 @@ FormBuilder.formatFormObject = function(object, defs){
|
|||
*
|
||||
*/
|
||||
FormBuilder.fetchNodeDefinition = function(node, defs){
|
||||
var dbg = FormBuilder.debugStart('FormBuilder::fetchNodeDefinition', 2);
|
||||
FormBuilder.debug('node = "'+node+'"', 2);
|
||||
|
||||
/* [0] Initialisation
|
||||
==================================================================*/
|
||||
var m = null, key, i, regex;
|
||||
|
|
@ -271,6 +313,8 @@ FormBuilder.fetchNodeDefinition = function(node, defs){
|
|||
==================================================================*/
|
||||
if( typeof defs != 'undefined' && defs.hasOwnProperty(node) ){
|
||||
|
||||
FormBuilder.debugStop(dbg);
|
||||
|
||||
return { def: defs[node] };
|
||||
|
||||
|
||||
|
|
@ -297,6 +341,8 @@ FormBuilder.fetchNodeDefinition = function(node, defs){
|
|||
for( i = 1 ; i < RegExp.length && i < 10 ; i++ )
|
||||
matches['$'+i] = RegExp['$'+i];
|
||||
|
||||
FormBuilder.debugStop(dbg);
|
||||
|
||||
/* (3) On renvoie le lien + le scope */
|
||||
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
|
||||
return {};
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -327,6 +375,9 @@ FormBuilder.fetchNodeDefinition = function(node, defs){
|
|||
*
|
||||
*/
|
||||
FormBuilder.replaceStatements = function(object, scope, definitions, ref_table, ref_assoc){
|
||||
var dbg = FormBuilder.debugStart('FormBuilder::replaceStatements', 2);
|
||||
|
||||
|
||||
/* [0] Initialisation
|
||||
==================================================================*/
|
||||
/* (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 */
|
||||
if( object[key] instanceof Array ){
|
||||
|
||||
for( var i in object[key] )
|
||||
for( var i in object[key] ){
|
||||
|
||||
// on lance récursivement
|
||||
FormBuilder.debug('**'+key+'['+i+']', 2);
|
||||
FormBuilder.replaceStatements(object[key][i], scope, definitions, ref_table, ref_assoc);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* (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
|
||||
FormBuilder.debug('**'+key, 2);
|
||||
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
|
||||
==================================================================*/
|
||||
FormBuilder.debugStop(dbg);
|
||||
|
||||
return object;
|
||||
};
|
||||
|
||||
|
|
@ -853,6 +913,8 @@ FormBuilder.readRef = function(ref_table, parts){
|
|||
*
|
||||
*/
|
||||
FormBuilder.createElements = function(definition, ref_table, ref_assoc){
|
||||
var dbg = FormBuilder.debugStart('FormBuilder::createElements', 2);
|
||||
|
||||
/* [0] Initialisation
|
||||
===========================================================*/
|
||||
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
|
||||
=========================================================*/
|
||||
definition.dom = built;
|
||||
|
|
@ -1114,6 +1180,7 @@ FormBuilder.createElements = function(definition, ref_table, ref_assoc){
|
|||
*
|
||||
*/
|
||||
FormBuilder.attachElements = function(parent, set){
|
||||
var dbg = FormBuilder.debugStart('FormBuilder::attachElements', 2);
|
||||
|
||||
var c, a;
|
||||
|
||||
|
|
@ -1170,6 +1237,8 @@ FormBuilder.attachElements = function(parent, set){
|
|||
|
||||
}
|
||||
|
||||
FormBuilder.debugStop(dbg);
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
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}"},
|
||||
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);
|
||||
monBuilder.update({url:"https://xdrm.io/page2",getitemlength:function(a){return 10}});monBuilder.attach(monConteneur);
|
||||
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"},"/^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",
|
||||
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",
|
||||
$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 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,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);
|
||||
|
|
|
|||
|
|
@ -1,225 +1,124 @@
|
|||
/* [0] On efface le <body>
|
||||
=========================================================*/
|
||||
document.body.innerHTML = '';
|
||||
|
||||
// CETTE CLASSE PERMET LA CREATION DE HTML A PARTIR D'UN OBJET JAVASCRIPT
|
||||
//
|
||||
//
|
||||
// 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
|
||||
// ----------------------------
|
||||
"use strict";
|
||||
|
||||
|
||||
var default_definition = {
|
||||
// Les #Element avec 'node' valant 'input' seront liés à cette définition
|
||||
'input.text': {
|
||||
node_type: 'input', // sera un <input>
|
||||
attributes: {
|
||||
name: '{name}', // l'attribut 'name' vaudra la valeur de la variable 'name'
|
||||
value: '{value}', // l'attribut 'value' vaudra la valeur de la variable 'value'
|
||||
type: 'text' // l'attribut 'type' vaudra 'text'
|
||||
}
|
||||
},
|
||||
|
||||
// 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()}'
|
||||
}
|
||||
}
|
||||
'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' } }
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Exemple formulaire
|
||||
// ------------------
|
||||
var exempleFormulaire = {
|
||||
node_type: 'form', // sera un <form>
|
||||
var custom_definition = {
|
||||
'/^input\.([a-z]+)$/': {
|
||||
node: 'input',
|
||||
attributes: {
|
||||
'method': 'POST', // aura l'attribut 'method' valant 'POST'
|
||||
'action': '{url}' // aura l'attribut 'action' valant la valeur de la variable 'url'
|
||||
'type': '{$1}',
|
||||
'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: [
|
||||
{ // contiendra en premier enfant un <input type='text'>
|
||||
node: 'input.text',
|
||||
$name: 'fname', // l'<input> héritera la variable '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'
|
||||
},
|
||||
|
||||
{ // contiendra en second enfant un <select> contenant les <options> en fonction du tableau 'liste-noms'
|
||||
node: 'simple-select',
|
||||
$options: '{liste_noms[]}', // la définition héritera du tableau 'options' valant le tableau donné 'liste_noms'
|
||||
$select_class: 'gui-option', // la définition héritera de la variable 'select_class'
|
||||
$option_class: 'gui-select', // la définition héritera de la variable 'option_class'
|
||||
$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'
|
||||
{
|
||||
node: 'select',
|
||||
attributes: { 'data-name': '{name}' },
|
||||
children: [
|
||||
{
|
||||
node: 'option',
|
||||
attributes: { value: '{options:i}' },
|
||||
text: '{options.value}',
|
||||
browse: {
|
||||
array: '{options[]}',
|
||||
funcs: { 'options.value': '{getoptval()}' }
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
// 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'
|
||||
listeners: { 'change': '{listener()}' }
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
// Exemple code de construction
|
||||
// ----------------------------
|
||||
//
|
||||
// On instancie notre builder
|
||||
var monBuilder = new FormBuilder(exempleFormulaire);
|
||||
// on ajoute la/les définition(s)
|
||||
monBuilder.add_definition(default_definition);
|
||||
// on construit notre objet en lui passant toutes les données
|
||||
monBuilder.build({
|
||||
url: 'https://xdrm.io/page1', // variable 'url'
|
||||
default_firstname: 'Jean', // variable 'default_firstname'
|
||||
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
|
||||
getitemlength: function(item){ return item.length; } // pour chaque item, retournera la taille de la valeur
|
||||
|
||||
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: '{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' } ]
|
||||
|
||||
};
|
||||
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");
|
||||
|
||||
|
||||
|
||||
|
||||
// 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; }
|
||||
});
|
||||
|
||||
//
|
||||
// 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);
|
||||
fb.attach(document.body);
|
||||
|
|
|
|||
Loading…
Reference in New Issue