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

Gestion pour l'attribut 'browse' des fonctions custom avant les attributs, car par exemple 'length' est un attribut, mais la fonction custom n'est jamais appelée

This commit is contained in:
xdrm-brackets 2016-09-21 11:53:04 +02:00
parent 8479d5a2b6
commit c8bc92461a
7 changed files with 335 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,5 @@
var default_def={"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}"}, 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", 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/",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.getElementById("container");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);

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

@ -1,3 +1,5 @@
document.body.innerHTML = '';
// CETTE CLASSE PERMET LA CREATION DE HTML A PARTIR D'UN OBJET JAVASCRIPT // CETTE CLASSE PERMET LA CREATION DE HTML A PARTIR D'UN OBJET JAVASCRIPT
// //
// //
@ -64,7 +66,7 @@
// //
// Exemple: objet de définition // Exemple: objet de définition
// ---------------------------- // ----------------------------
var default_def = { var default_definition = {
// Les #Element avec 'node' valant 'input' seront liés à cette définition // Les #Element avec 'node' valant 'input' seront liés à cette définition
'input.text': { 'input.text': {
node_type: 'input', // sera un <input> node_type: 'input', // sera un <input>
@ -195,7 +197,7 @@ var monBuilder = new FormBuilder(exempleFormulaire);
monBuilder.add_definition(default_definition); monBuilder.add_definition(default_definition);
// on construit notre objet en lui passant toutes les données // on construit notre objet en lui passant toutes les données
monBuilder.build({ monBuilder.build({
url: 'https://xdrm.io/', // variable 'url' url: 'https://xdrm.io/page1', // variable 'url'
default_firstname: 'Jean', // variable 'default_firstname' default_firstname: 'Jean', // variable 'default_firstname'
liste_noms: ['Jean', 'Pierre', 'Robert', 'Marie', 'Anna', 'Félicien', 'Marc', 'Jésus'], // tableau 'list_noms' 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 getitemvalue: function(item){ return item; }, // pour chaque item, retournera la valeur brute
@ -206,6 +208,18 @@ monBuilder.build({
// Exemple code d'ajout au DOM // Exemple code d'ajout au DOM
// --------------------------- // ---------------------------
// soit monConteneur, l'élément qui contiendra le formulaire // soit monConteneur, l'élément qui contiendra le formulaire
var monConteneur = document.getElementById('container'); var monConteneur = document.body;
// On ajoute le formulaire au conteneur // On ajoute le formulaire au conteneur
monBuilder.attach(monConteneur); 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);

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

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

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

@ -207,6 +207,15 @@ FormBuilder.prototype.attach = function(parent){
var d, i, j; var d, i, j;
/* [1] Si on avait déja construit, on retire le dom
=========================================================*/
if( this.built_form.hasOwnProperty('dom') ){
FormBuilder.detachElements(this.parent_element, this.built_form.dom);
}
/* [1] On construit le DOM /* [1] On construit le DOM
=========================================================*/ =========================================================*/
@ -389,7 +398,7 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table,
/* (2.1) On cherche toutes les FONCTIONS à remplacer /* (2.1) On cherche toutes les FONCTIONS à remplacer
---------------------------------------------------------*/ ---------------------------------------------------------*/
/* (1) On récupère le remplacement */ /* (1) On récupère le remplacement */
m_fun = FormBuilder.replaceStatementsFunction(ref_table, object[key][0], scope); m_fun = FormBuilder.replaceStatementsFunction(object[key][0], scope, ref_table);
/* (2) Si on un remplacement, on remplace, et on passe à la clé suivante */ /* (2) Si on un remplacement, on remplace, et on passe à la clé suivante */
if( m_fun !== false ){ if( m_fun !== false ){
@ -490,14 +499,14 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table,
/* REMPLACE UNE FUNCTION SOUS LA FORME "{funcName}()" par sa référence /* REMPLACE UNE FUNCTION SOUS LA FORME "{funcName}()" par sa référence
* *
* @ref_table<Object> Objet contenant les références
* @statement<String> String contenant la chaine * @statement<String> String contenant la chaine
* @scope<Object> Objet contenant le scope * @scope<Object> Objet contenant le scope
* @ref_table<Object> Objet contenant les références
* *
* @return newVal<String> Retourne la nouvelle (ref) valeur ou FALSE si rien n'a été fais * @return newVal<String> Retourne la nouvelle (ref) valeur ou FALSE si rien n'a été fais
* *
*/ */
FormBuilder.replaceStatementsFunction = function(ref_table, statement, scope){ FormBuilder.replaceStatementsFunction = function(statement, scope, ref_table){
/* (1) On initialise les variables */ /* (1) On initialise les variables */
var match = null; var match = null;
var regex = FormBuilder.regex.fun_out_val; var regex = FormBuilder.regex.fun_out_val;
@ -943,13 +952,14 @@ FormBuilder.createElements = function(definition, ref_table, ref_assoc){
// Pour chaque champ, on récupère/calcule la valeur // Pour chaque champ, on récupère/calcule la valeur
for( j in scope ){ for( j in scope ){
// {1} Si la valeur est un attribut // // {1} Si c'est une fonction custom //
if( tmp[i].hasOwnProperty(scope[j]) ) if( funcs.hasOwnProperty(scope[j]) )
repeated[i][definition.browse.id+'.'+scope[j]] = funcs[ scope[j] ]( tmp[i] );
// {2} Si la valeur est un attribut //
else if( tmp[i].hasOwnProperty(scope[j]) )
repeated[i][definition.browse.id+'.'+scope[j]] = tmp[i][scope[j]]; repeated[i][definition.browse.id+'.'+scope[j]] = tmp[i][scope[j]];
// {2} Si c'est une fonction custom //
else if( funcs.hasOwnProperty(scope[j]) )
repeated[i][definition.browse.id+'.'+scope[j]] = funcs[ scope[j] ]( tmp[i] );
} }
@ -1163,6 +1173,72 @@ FormBuilder.attachElements = function(parent, set){
}; };
/* DETACHE UN JEU D'ELEMENTS A UN PARENT
*
* @parent<Element> Element parent
* @set<Array> Set d'enfants à attacher
*
*/
FormBuilder.detachElements = function(parent, set){
var c, a;
/* [1] Pour chaque contexte (élément + prev + next)
=========================================================*/
for( c in set ){
/* (1) On attache les éléments précédents
---------------------------------------------------------*/
for( a in set[c].prev ){
/* (1) Si c'est un Element */
if( set[c].prev[a] instanceof Element )
parent.removeChild( set[c].prev[a] );
/* (2) On lance récursivement */
if( set[c].prev[a] instanceof Object )
FormBuilder.detachElements(parent, [ set[c].prev[a] ]);
}
/* (2) On ajoute l'élément actuel
---------------------------------------------------------*/
for( a in set[c].node ){
/* (1) Si c'est un Element */
if( set[c].node[a] instanceof Element )
parent.removeChild( set[c].node[a] );
/* (2) On lance récursivement */
if( set[c].node[a] instanceof Object )
FormBuilder.detachElements(parent, [ set[c].node[a] ]);
}
/* (3) On attache les éléments suivants
---------------------------------------------------------*/
for( a in set[c].next ){
/* (1) Si c'est un Element */
if( set[c].next[a] instanceof Element )
parent.removeChild( set[c].next[a] );
/* (2) On lance récursivement */
if( set[c].next[a] instanceof Object )
FormBuilder.detachElements(parent, [ set[c].next[a] ]);
}
}
};
/* APPLIQUE UN STYLE CSS-LIKE A UN ELEMENT /* APPLIQUE UN STYLE CSS-LIKE A UN ELEMENT
* *
* @element<Element> Element auquel on veut appliquer le css * @element<Element> Element auquel on veut appliquer le css

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

@ -1,5 +1,5 @@
document.body.innerHTML="";"use strict"; document.body.innerHTML="";
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", 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}"},
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", 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",
$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", 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);
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(b){console.log("clicked",b)},existingsel:function(b){console.log("selected",b)},getoptval:function(b){return b}});fb.attach(document.body); monBuilder.update({url:"https://xdrm.io/page2",getitemlength:function(a){return 10}});monBuilder.attach(monConteneur);

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

@ -1,121 +1,225 @@
/* [0] On efface le <body>
=========================================================*/
document.body.innerHTML = ''; document.body.innerHTML = '';
"use strict"; // 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
// ----------------------------
var default_definition = { var default_definition = {
'input': { node_type: 'input' }, // Les #Element avec 'node' valant 'input' seront liés à cette définition
'/^h([1-6])$/': { node_type: 'h{$1}' }, 'input.text': {
'br': { node_type: 'br' }, node_type: 'input', // sera un <input>
'option': { node_type: 'option' },
'select': { node_type: 'select' },
'span': { node_type: 'span' },
'/^br([0-9]+)$/': { node: 'br', repeat: { n: '{$1}', id: 'brs' } }
};
var custom_definition = {
'/^input\.([a-z]+)$/': {
node: 'input',
attributes: { attributes: {
'type': '{$1}', name: '{name}', // l'attribut 'name' vaudra la valeur de la variable 'name'
'data-name': '{name}', value: '{value}', // l'attribut 'value' vaudra la valeur de la variable 'value'
'value': '{value}', type: 'text' // l'attribut 'type' vaudra 'text'
'placeholder': '{placeholder}' }
},
listeners: { 'click': '{click_listener()}' }
}, },
// 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'
}
},
'custom-select': { // Les #Element avec 'node' valant 'simple-select', seront liés à cette définition
node: 'span', 'simple-select': {
attributes: { 'class': 'select-container nobold' }, node_type: 'select', // sera un <select>
attributes: {
'class': '{select-class}' // l'attribut 'class' prendra la valeur de la variable 'select-class'
},
children: [ children: [
{ {
node: 'select', node_type: 'option', // contiendra des <option>
attributes: { 'data-name': '{name}' }, browse: {
children: [ array: '{options[]}', // chaque <option> sera dupliquée pour chaque valeur du tableau 'options'
{ funcs: {
node: 'option', // définit le "faux" attribut 'value' de chaque élément du tableau 'options'
attributes: { value: '{options:i}' }, // avec la fonction 'getvalue()' qui sera passée en paramètre
text: '{options.value}', // *Node: le tableau n'aura pas d'attribut (tableau simple), cela renverra
browse: { // donc directement la valeur de chaque item
array: '{options[]}', 'options.value': '{getvalue()}',
funcs: { 'options.value': '{getoptval()}' }
} // 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()}'
} }
], },
listeners: { 'change': '{listener()}' } 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 contactForm = { //
node: 'h4', // Exemple formulaire
attributes: { 'data-icon': 'o', class: 'new-contact colo2' }, // ------------------
children: [ var exempleFormulaire = {
{ node: 'input.hidden', $name: 'uid', $value: '{uid}' }, node_type: 'form', // sera un <form>
{ node: 'input.hidden', $name: 'call', $value: '{call}' }, attributes: {
{ node: 'input.hidden', $name: 'sms', $value: '{sms}' }, 'method': 'POST', // aura l'attribut 'method' valant 'POST'
{ node: 'input.hidden', $name: 'countcall', $value: '{count_call}', $click_listener: '{my_listener()}' }, 'action': '{url}' // aura l'attribut 'action' valant la valeur de la variable 'url'
{ node: 'input.hidden', $name: 'countsms', $value: '{count_sms}' }, },
{ node: 'input.text', $name: 'number', $value: '{number}' }, // sera précédé par 2 <span> (cf. définition de 'span:(\d+)')
prev_nodes: [
{ node: 'custom-select', $name: 'existing', $options: '{existing[]}', $listener: '{existingsel()}' }, {
node: 'span:2',
{ node: 'input.text', $name: 'username', $placeholder: '{username_ph}', $value: '{username}'}, $class: 'beforeSpan' // les <span> hériterons de la variable 'class'
{ node: 'input.submit', $value: 'Enregistrer', attributes: { class: 'primary sub-number'} } }
], ],
next_nodes: [ { node: 'br' } ]
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'
}
}
],
// 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'
}
]
}; };
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"+ // Exemple code de construction
"\t<input type='hidden' data-name='sms' value='@sms'>\n"+ // ----------------------------
//
"\t<input type='hidden' data-name='countcall' value='@countcall'>\n"+ // On instancie notre builder
"\t<input type='hidden' data-name='countsms' value='@countsms'>\n"+ var monBuilder = new FormBuilder(exempleFormulaire);
// on ajoute la/les définition(s)
"\t<input type='text' data-name='number' placeholder='Numéro de téléphone' value='@number' > \n"+ monBuilder.add_definition(default_definition);
// on construit notre objet en lui passant toutes les données
"\t<span class='select-container nobold'><select data-name='existing'>\n"+ monBuilder.build({
"\t\t<option value='.'>Utiliser pseudo</option>\n"+ url: 'https://xdrm.io/page1', // variable 'url'
"@contacts"+ default_firstname: 'Jean', // variable 'default_firstname'
"\t</select></span>\n"+ 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
"\t&nbsp;&nbsp;&nbsp;&nbsp;ou&nbsp;&nbsp;&nbsp;&nbsp;\n"+ getitemlength: function(item){ return item.length; } // pour chaque item, retournera la taille de la valeur
"\t<input type='text' data-name='username' placeholder='Pseudo' value='@username' > \n"+
"\t<input type='submit' class='primary sub-number' value='Enregistrer'>\n"+
"</h4>\n\n");
var fb = new FormBuilder(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);

2
view.php
View File

@ -123,7 +123,7 @@
<!-- Dépendences Javascript après chargement des éléments --> <!-- Dépendences Javascript après chargement des éléments -->
<script type='text/javascript' src='/js/lib/form-builder/main.js'></script> <script type='text/javascript' src='/js/lib/form-builder/main.js'></script>
<script type='text/javascript' src='/js/action-script-min.js'></script> <!-- <script type='text/javascript' src='/js/action-script-min.js'></script> -->
</body> </body>
</html> </html>