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

Gestion de la création de +ieurs éléments simultanés

This commit is contained in:
xdrm-brackets 2016-09-20 10:41:56 +02:00
parent ab97198abc
commit 2f8d0fc9ea
6 changed files with 244 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
var reference_table={"2fd8":!0},ElementObject={node:"node name defined earlier",attributes:{attr_name_1:"attr_value_1",attr_name_2:"attr_value_2"},children:[ElementObject],next_nodes:[ElementObject],prev_nodes:[ElementObject],text:"some text to be the innerHTML",repeat:"number to repeat ElementObject || {{array}} to repeat ElementObject",node_type:"html tag name",listeners:[EventListener]},default_definition={input:{node_type:"input"},"/^h([1-6])$/":{node_type:"h{$1}"},br:{node_type:"br"},option:{node_type:"option"}, var ElementObject={node:"node name defined earlier",attributes:{attr_name_1:"attr_value_1",attr_name_2:"attr_value_2"},children:[ElementObject],next_nodes:[ElementObject],prev_nodes:[ElementObject],text:"some text to be the innerHTML",repeat:"number to repeat ElementObject || {{array}} to repeat ElementObject",node_type:"html tag name",listeners:[EventListener]},default_definition={input:{node_type:"input"},"/^h([1-6])$/":{node_type:"h{$1}"},br:{node_type:"br"},option:{node_type:"option"},select:{node_type:"select"},
select:{node_type:"select"},span:{node_type:"span"}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},next_nodes:[{node:"br"}]},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select",attributes:{"data-name":"{name}"},children:[{node:"option",attribute:{value:"{options.value}"},text:"{options.value}",repeat:"{{options}}"}]}],next_nodes:[{node:"br"}]}},form={node:"h4", span:{node_type:"span"}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},listeners:{click:"{onclick()}"},next_nodes:[{node:"br"}]},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select",attributes:{"data-name":"{name}"},children:[{node:"option",attribute:{value:"{options.value}"},text:"{options.value}",browse:{array:"{options[]}"}}]}],next_nodes:[{node:"br"}]},
attributes:{"data-icon":"o","class":"new-contact color2"},children:[{node:"input:hidden",$name:"uid",$value:"{uid}"},{node:"input:hidden",$name:"call",$value:"{call}"},{node:"input:hidden",$name:"sms",$value:"{sms}"},{node:"input:hidden",$name:"countcall",$value:"{countcall}"},{node:"input:hidden",$name:"countsms",$value:"{countsms}"},{node:"input:text",$name:"number",$value:"{number}",$placeholder:"{Num\u00e9ro de t\u00e9l\u00e9phone}"},{node:"custom-select",$name:"existing",$$options:"{{options}}"}]}; "mult-text":{node:"span",attributes:{id:"text_{rep.i}"},text:"{rep.i} sur {rep.n}",repeat:{n:10,id:"rep"}}},form={node:"h4",attributes:{"data-icon":"o","class":"new-contact color2"},children:[{node:"input:hidden",$name:"uid",$value:"{uid}"},{node:"input:hidden",$name:"call",$value:"{call}"},{node:"input:hidden",$name:"sms",$value:"{sms}"},{node:"input:hidden",$name:"countcall",$value:"{countcall}"},{node:"input:hidden",$name:"countsms",$value:"{countsms}"},{node:"input:text",$name:"number",$value:"{number}",
$placeholder:"{Num\u00e9ro de t\u00e9l\u00e9phone}"},{node:"custom-select",$name:"existing",$$options:"{{options}}"}]};

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

@ -34,9 +34,11 @@
// note that the parameter in a higher level have to be preceeded by '$' // note that the parameter in a higher level have to be preceeded by '$'
// /!\ warning: the variable name must only contain [ lowercase_letters, hyphens ] // /!\ warning: the variable name must only contain [ lowercase_letters, hyphens ]
// //
// {{zz}} - where 'zz' is an array variable name which will be (for each item) replaced by the $$zz given array (see next statement) // {zz[]} - where 'zz' is an array variable name which will be (for each item) replaced by the $$zz given array (see next statement)
// note that the parameter in a higher level have to be preceeded by '$$' // note that the parameter in a higher level have to be preceeded by '$$'
// //
// {zz()} - where 'zz' is a function variable name which will be replaced by the $zz function
//
// {zz.xx} - where 'zz' is an array name + 'xx' is an index name of this array's items, it will be replaced by zz[0][xx], then zz[1][xx], etc // {zz.xx} - where 'zz' is an array name + 'xx' is an index name of this array's items, it will be replaced by zz[0][xx], then zz[1][xx], etc
// note that this is the only case when the dot (.) is allowed in variable naming // note that this is the only case when the dot (.) is allowed in variable naming
// //
@ -77,9 +79,11 @@
// variables are transformed to references, so they can be updated easily without rebuilding the whole model // variables are transformed to references, so they can be updated easily without rebuilding the whole model
// when the model is built the first time, all the passed variables are transformed to references // when the model is built the first time, all the passed variables are transformed to references
// and they are spread by references // and they are spread by references
var reference_table = {
'2fd8': true // REPEAT: '$01abcdef$' ->ref-> {
}; // repeat: 'repeatAttr',
// references: ['myTab.attr1', 'myTab.attr2', 'repeat.i', 'repeat.n']
// }
//////////////////////// ////////////////////////
// LANGAGE DEFINITION // // LANGAGE DEFINITION //
@ -124,6 +128,9 @@ var custom_definition = {
'value': '{value}', 'value': '{value}',
'placeholder': '{placeholder}' 'placeholder': '{placeholder}'
}, },
listeners: {
'click': '{onclick()}'
},
next_nodes: [{ node: 'br' }] next_nodes: [{ node: 'br' }]
}, },
@ -140,12 +147,19 @@ var custom_definition = {
node: 'option', node: 'option',
attribute: { value: '{options.value}' }, attribute: { value: '{options.value}' },
text: '{options.value}', text: '{options.value}',
repeat: '{{options}}' browse: { array: '{options[]}' }
} }
] ]
} }
], ],
next_nodes: [{ node: 'br' }] next_nodes: [{ node: 'br' }]
},
'mult-text': {
node: 'span',
attributes: { id: 'text_{rep.i}' },
text: "{rep.i} sur {rep.n}",
repeat: { n:10, id: 'rep' }
} }
}; };

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

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

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

@ -66,8 +66,8 @@ FormBuilder.prototype = {
parent_element: null, // element qui contiendra le formulaire parent_element: null, // element qui contiendra le formulaire
built_form: null, // Object correspondant au formulaire construit built_form: null, // Object correspondant au formulaire construit
root_element: null, // Element correspondant à l'objet construit root_element: null, // Element correspondant à l'objet construit
ref_table: {}, // Tableau contenant la liste des références ref_table: {'$00000000$': null}, // Tableau contenant la liste des références
ref_assoc: {} // Association entre table de référence et scope d'entrée ref_assoc: {'NULL': '$00000000$'} // Association entre table de référence et scope d'entrée
}; };
@ -81,11 +81,11 @@ FormBuilder.regex = {
pri_out_val: /\{([a-z-]+)\}/g, // Regex associée à une variable primitif à remplacer pri_out_val: /\{([a-z-]+)\}/g, // Regex associée à une variable primitif à remplacer
pri_in_key: /^\$([a-z-]+)$/, // Regex associée à la clé d'une variable primitive pri_in_key: /^\$([a-z-]+)$/, // Regex associée à la clé d'une variable primitive
arr_out_set: /^\{\{([a-z-]+)\}\}$/, // Regex associée à un tableau à remplacer arr_out_set: /^\{([a-z-]+)\[\]\}$/, // Regex associée à un tableau à remplacer
arr_out_val: /\{([a-z-]+)\.([a-z-]+)\}/g, // Regex associée à une valeur de tableau à remplacer (primitif) arr_out_val: /\{([a-z-]+)\.([a-z-]+)\}/g, // Regex associée à une valeur de tableau à remplacer (primitif)
arr_in_key: /^\$\$([a-z-]+)$/, // Regex associée à la clé d'un tableau arr_in_key: /^\$([a-z-]+)$/, // Regex associée à la clé d'un tableau
fun_out_val: /^\{([a-z-]+)\}\(\)$/, // Regex associée à une function incluse dans une clé fun_out_val: /^\{([a-z-]+)\(\)\}$/, // Regex associée à une function incluse dans une clé
ref_pri: /^\$[a-f0-9]{8}\$$/ // Clé de référence ref_pri: /^\$[a-f0-9]{8}\$$/ // Clé de référence
}; };
@ -96,22 +96,13 @@ FormBuilder.spread_attr = [ // Liste des attributs diffusant le scope
'prev_nodes', // diffuse aux éléments 'prev_nodes', // diffuse aux éléments
'attributes', // diffuse aux attributs 'attributes', // diffuse aux attributs
'node_link', 'node_link',
'listeners' 'listeners',
];
FormBuilder.allowed_attr = [ // Liste des attributs fixes autorisés 'repeat',
'node', /* nom du modèle à utiliser (dans @defs_object) */ 'browse'
'node_type', /* nom réel de l'élément */
'next_nodes', /* tableau des enfants à ajouter à la suite de l'élément */
'prev_nodes', /* tableau des enfants à ajouter à avant l'élément */
'attributes', /* tableau des attributs à passer au niveau inférieur */
'children', /* tableau des enfants à passer au niveau inférieur */
'text', /* texte à insérer (innerHTML), REMPLACE 'children' */
'repeat' /* nombre/tableau déterminant qu'il faut répéter @n fois ou en fonction de la taille du tableau */
]; ];
/************************************************************/ /************************************************************/
/* __ __ _____ _____ _ _ ___ ____ ____ */ /* __ __ _____ _____ _ _ ___ ____ ____ */
/* | \/ | ____|_ _| | | |/ _ \| _ \/ ___| */ /* | \/ | ____|_ _| | | |/ _ \| _ \/ ___| */
@ -213,24 +204,26 @@ FormBuilder.prototype.attach = function(parent){
this.parent_element = (parent instanceof Element) ? parent : this.parent_element; this.parent_element = (parent instanceof Element) ? parent : this.parent_element;
var i; var d, i;
/* [1] On construit le DOM /* [1] On construit le DOM
=========================================================*/ =========================================================*/
var dom = FormBuilder.buildElements(this.ref_table, this.built_form); var dom = FormBuilder.buildElements(this.built_form, this.ref_table, this.ref_assoc);
/* (1) On ajoute les éléments précédents */ for( d in dom ){
for( i in dom.prev )
this.parent_element.appendChild( dom.prev[i] );
/* (2) On ajoute l'élément cible */ /* (1) On ajoute les éléments précédents */
for( i in dom.node ) for( i in dom[d].prev )
this.parent_element.appendChild( dom.node[i] ); this.parent_element.appendChild( dom[d].prev[i] );
/* (3) On ajoute les éléments suivants */ /* (2) On ajoute l'élément cible */
for( i in dom.next ) this.parent_element.appendChild( dom[d].node );
this.parent_element.appendChild( dom.next[i] );
/* (3) On ajoute les éléments suivants */
for( i in dom[d].next )
this.parent_element.appendChild( dom[d].next[i] );
}
}; };
@ -255,24 +248,7 @@ FormBuilder.prototype.attach = function(parent){
* *
*/ */
FormBuilder.formatFormObject = function(object, defs){ FormBuilder.formatFormObject = function(object, defs){
// TODO: à supprimer
/* Pour chaque enfant, s'il y a */
if( object.hasOwnProperty('children') ){
for( var child in object.children ){
if( object.children[child].hasOwnProperty('repeat') ){
/* On ajoute le parent + on lance récursivement */
object.children[child].parent = object;
FormBuilder.formatFormObject(object.children[child], defs);
}
}
}
return object; return object;
}; };
@ -393,7 +369,22 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table,
} }
/* [2] On remplace les valeurs /* [2] Gestion de l'attribut 'browse'
=========================================================*/
if( object.hasOwnProperty('browse') ){
// Si le champ est correct, on définit l'ID avec le nom du tableau
if( object.browse.hasOwnProperty('array') && FormBuilder.regex.arr_out_set.test(object.browse.array) )
object.browse.id = RegExp.$1;
// Sinon, on supprime le 'browse'
else
delete object.browse;
}
/* [3] On remplace les valeurs
==================================================================*/ ==================================================================*/
for( key in object ){ for( key in object ){
@ -406,7 +397,7 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table,
/* (2.1) On cherche toutes les à 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(ref_table, object[key][0], scope);
@ -435,13 +426,13 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table,
object[key] = FormBuilder.replaceStatementsRegex(object[key], scope); object[key] = FormBuilder.replaceStatementsRegex(object[key], scope);
/* (2.4) On cherche toutes les variables primitives à remplacer /* (2.4) On cherche toutes les variables PRIMITIVES à remplacer
---------------------------------------------------------*/ ---------------------------------------------------------*/
/* (1) On récupère les remplacements */ /* (1) On récupère les remplacements */
object[key] = FormBuilder.replaceStatementsPrimary(object[key], scope); object[key] = FormBuilder.replaceStatementsPrimary(object[key], scope);
/* (2.5) On cherche toutes les valeurs de tableaux à remplacer /* (2.5) On cherche toutes les VALEURS DE REPEAT à remplacer
---------------------------------------------------------*/ ---------------------------------------------------------*/
/* (1) On récupère les remplacements */ /* (1) On récupère les remplacements */
object[key] = FormBuilder.replaceStatementsArrayValue(object[key], scope, ref_table, ref_assoc); object[key] = FormBuilder.replaceStatementsArrayValue(object[key], scope, ref_table, ref_assoc);
@ -452,9 +443,11 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table,
}else if( typeof object[key] === 'number' ) }else if( typeof object[key] === 'number' )
object[key] = [ ref(ref_table, object[key]) ]; object[key] = [ ref(ref_table, object[key]) ];
} }
/* [3] On ajoute les variables '$var' et '$$arr' au scope suivant
/* [4] On ajoute les variables '$var' et '$$arr' au scope suivant
==================================================================*/ ==================================================================*/
for( key in object ){ for( key in object ){
@ -471,7 +464,7 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table,
} }
/* [4] On lance récursivement /* [5] On lance récursivement
==================================================================*/ ==================================================================*/
/* on clone le scope */ /* on clone le scope */
scope = JSON.parse(JSON.stringify(scope)); scope = JSON.parse(JSON.stringify(scope));
@ -483,16 +476,17 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table,
/* (1) Si c'est un tableau, on lance récursivement pour chaque item */ /* (1) Si c'est un tableau, on lance récursivement pour chaque item */
if( object[key] instanceof Array ) if( object[key] instanceof Array ){
for( var i in object[key] ) for( var i in object[key] )
// on lance récursivement
FormBuilder.replaceStatements(object[key][i], scope, definitions, ref_table, ref_assoc); FormBuilder.replaceStatements(object[key][i], scope, definitions, ref_table, ref_assoc);
// console.log(object.node, key+'['+i+']');
/* (2) Si c'est un objet, on lance récursivement */ /* (2) Si c'est un objet, on lance récursivement */
else if( object[key] instanceof Object ) }else if( object[key] instanceof Object )
// on lance récursivement
FormBuilder.replaceStatements(object[key], scope, definitions, ref_table, ref_assoc); FormBuilder.replaceStatements(object[key], scope, definitions, ref_table, ref_assoc);
// console.log(object.node, key);
} }
@ -765,6 +759,7 @@ FormBuilder.replaceStatementsArrayValue = function(statements, scope, ref_table,
if( !ref_assoc.hasOwnProperty(key) ) if( !ref_assoc.hasOwnProperty(key) )
ref_assoc[key] = ref(ref_table); ref_assoc[key] = ref(ref_table);
/* (3) On insère la valeur du scope */ /* (3) On insère la valeur du scope */
parts.push( ref_assoc[key] ); parts.push( ref_assoc[key] );
@ -852,24 +847,21 @@ FormBuilder.readRef = function(ref_table, parts){
/* CONSTRUIT UN ELEMENT A PARTIR D'UNE DEFINITION /* CONSTRUIT UN ELEMENT A PARTIR D'UNE DEFINITION
* *
* @ref_table<Object> Objet contenant les références
* @definition<Object> Objet de définition de l'élément * @definition<Object> Objet de définition de l'élément
* @ref_table<Object> Objet contenant les références
* @ref_assoc<Object> Table des associations de références
* *
* @return built<Element[]> Retourne les éléments construits * @return built<Element[]> Retourne les éléments construits
* *
*/ */
FormBuilder.buildElements = function(ref_table, definition){ FormBuilder.buildElements = function(definition, ref_table, ref_assoc){
/* [0] Initialisation /* [0] Initialisation
===========================================================*/ ===========================================================*/
var built = { var built = [];
prev: [], // Les éléments précédents
node: [], // Les éléments actuels
next: [] // Les éléments suivants
};
var i, j, tmp;
var repeater = [null];
var i, j, k, tmp, b,
repeater = null,
repeated = ['NULL'];
/* [1] Gestion de l'attribut 'repeat' /* [1] Gestion de l'attribut 'repeat'
=========================================================*/ =========================================================*/
@ -883,112 +875,169 @@ FormBuilder.buildElements = function(ref_table, definition){
for( i = 0 ; i < tmp ; i++ ) for( i = 0 ; i < tmp ; i++ )
repeater[i] = i; repeater[i] = i;
}
/* (2) Si c'est un tableau */ /* (2) Si c'est un tableau */
else if( tmp instanceof Array) }else if( tmp instanceof Array)
repeater = tmp; repeater = tmp; // repeater = tmp;
/* (1) Si on a un répéteur correct
---------------------------------------------------------*/
if( repeater instanceof Array ){
console.log('repeat', repeater);
console.log(definition);
delete definition.repeat;
repeated = [];
var refx = ref_assoc['options.value'];
/* (1) Pour chaque répétition */
for( i = 0 ; i < repeater.length ; i++ ){
// {1} On met à jour la valeur //
ref_table[refx] = repeater[i];
// {2} On crée l'élément //
repeated[i] = FormBuilder.buildElements(definition, ref_table, ref_assoc);
for( j in repeated[i].prev ) parent.dom.appendChild( repeated[i].prev[j] );
parent.dom.appendChild( repeated[i].node );
for( j in repeated[i].next ) parent.dom.appendChild( repeated[i].next[j] );
}
console.log( repeated );
}
}
/* [2] Gestion de l'attribut 'browse'
=========================================================*/
if( definition.hasOwnProperty('browse') ){
} }
console.log(repeater);
/* [2] On construit les éléments @prev_nodes, s'ils existent /* [xxxx] Pour chaque instance (répétition)
===========================================================*/ =========================================================*/
if( definition.hasOwnProperty('prev_nodes') ) for( b = 0 ; b < repeated.length ; b++ ){
for( i in definition.prev_nodes )
built.prev = FormBuilder.buildElements(ref_table, definition.prev_nodes[i]);
/* [3] On construit les éléments @next_nodes s'ils existent
===========================================================*/ built[b] = { prev: [], node: null, next: [] };
if( definition.hasOwnProperty('next_nodes') )
for( i in definition.next_nodes )
built.next = FormBuilder.buildElements(ref_table, definition.next_nodes[i]);
/* [4] On construit l'objet actuel
===========================================================*/
/* (1) On crée l'élément /* [3] On construit les éléments @prev_nodes, s'ils existent
---------------------------------------------------------*/ ===========================================================*/
/* (1) Si on a le type de <tag> hmtl */ if( definition.hasOwnProperty('prev_nodes') )
if( definition.hasOwnProperty('node_type') ) for( i in definition.prev_nodes )
built.node = document.createElement( FormBuilder.readRef(ref_table, definition.node_type) ); built[b].prev = FormBuilder.buildElements(definition.prev_nodes[i], ref_table, ref_assoc);
/* (2) Si c'est un sub-node, on récupère la définition récursivement */
else if( definition.hasOwnProperty('node_link') ){
tmp = FormBuilder.buildElements(ref_table, definition.node_link);
/* On ajoute les éléments à l'instance actuelle */
built.prev = built.prev.concat( tmp.prev );
built.node = tmp.node;
built.next = tmp.next.concat( built.next );
}
/* (2) On ajoute les attributs /* [4] On construit les éléments @next_nodes s'ils existent
---------------------------------------------------------*/ ===========================================================*/
if( definition.hasOwnProperty('attributes') ){ if( definition.hasOwnProperty('next_nodes') )
for( i in definition.next_nodes )
// Pour chaque attribut, on définit built[b].next = FormBuilder.buildElements(definition.next_nodes[i], ref_table, ref_assoc);
for( i in definition.attributes )
built.node.setAttribute( i, FormBuilder.readRef(ref_table, definition.attributes[i]) );
}
/* (3) On ajoute le contenu HTML /* [5] On construit l'objet actuel
---------------------------------------------------------*/ ===========================================================*/
if( definition.hasOwnProperty('text') ){
// Note: Override les enfants /* (1) On crée l'élément
built.node.innerHTML = definition.text; ---------------------------------------------------------*/
/* (1) Si on a le type de <tag> hmtl */
} if( definition.hasOwnProperty('node_type') )
built[b].node = document.createElement( FormBuilder.readRef(ref_table, definition.node_type) );
/* (4) On ajoute les listeners /* (2) Si c'est un sub-node, on récupère la définition récursivement */
---------------------------------------------------------*/ else if( definition.hasOwnProperty('node_link') ){
if( definition.hasOwnProperty('listeners') ){
// Pour chaque listener tmp = FormBuilder.buildElements(definition.node_link, ref_table, ref_assoc);
for( i in definition.listeners ){
// Pour chaque noeud for( i in tmp ){
// for( j in repeater )
built.node.addEventListener( i, FormBuilder.readRef(ref_table, definition.listeners[i]), false ); /* On ajoute les éléments à l'instance actuelle */
built[b].prev = built[b].prev.concat( tmp[i].prev );
built[b].node = tmp[i].node;
built[b].next = tmp[i].next.concat( built[b].next );
} }
} }
/* (2) On ajoute les attributs
---------------------------------------------------------*/
if( definition.hasOwnProperty('attributes') ){
// Pour chaque attribut, on définit
for( i in definition.attributes )
built[b].node.setAttribute( i, FormBuilder.readRef(ref_table, definition.attributes[i]) );
}
/* (3) On ajoute le contenu HTML
---------------------------------------------------------*/
if( definition.hasOwnProperty('text') ){
// Note: Override les enfants
built[b].node.innerHTML = definition.text;
}
/* (4) On ajoute les listeners
---------------------------------------------------------*/
if( definition.hasOwnProperty('listeners') ){
// Pour chaque listener
for( i in definition.listeners )
built[b].node.addEventListener( i, FormBuilder.readRef(ref_table, definition.listeners[i]), false );
}
/* [5] On ajoute tous les enfants /* [6] On ajoute tous les enfants
=========================================================*/ =========================================================*/
if( definition.hasOwnProperty('children') ){ if( definition.hasOwnProperty('children') ){
/* (1) Pour chaque enfant */ /* (1) Pour chaque enfant */
for( i in definition.children ){ for( i in definition.children ){
tmp = FormBuilder.buildElements(ref_table, definition.children[i]); tmp = FormBuilder.buildElements(definition.children[i], ref_table, ref_assoc);
/* (2) On ajoute les éléments précédent l'enfant */ for( k in tmp ){
for( j in tmp.prev )
built.node.appendChild( tmp.prev[j] );
/* (3) On ajoute l'enfant */ /* (2) On ajoute les éléments précédent l'enfant */
built.node.appendChild( tmp.node ); for( j in tmp[k].prev )
built[b].node.appendChild( tmp[k].prev[j] );
/* (4) On ajoute les éléments suivants l'enfant */ /* (3) On ajoute l'enfant */
for( j in tmp.prev ) built[b].node.appendChild( tmp[k].node );
built.node.appendChild( tmp.next[j] );
/* (4) On ajoute les éléments suivants l'enfant */
for( j in tmp[k].prev )
built[b].node.appendChild( tmp[k].next[j] );
}
}
} }
} }
/* [7] On ajoute l'élément à la définition et retourne
=========================================================*/
definition.dom = built;
return built; return built;
}; };

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

@ -1,5 +1,5 @@
document.body.innerHTML="";"use strict"; document.body.innerHTML="";"use strict";
var default_definition={input:{node_type:"input"},"/^h([1-6])$/":{node_type:"h{$1}"},br:{node_type:"br"},option:{node_type:"option"},select:{node_type:"select"},span:{node_type:"span"}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},next_nodes:[{node:"br"}],listeners:{focus:"{xx}()"}},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select",attributes:{"data-name":"{name}"}, var default_definition={input:{node_type:"input"},"/^h([1-6])$/":{node_type:"h{$1}"},br:{node_type:"br"},option:{node_type:"option"},select:{node_type:"select"},span:{node_type:"span"}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},next_nodes:[{node:"br"}],listeners:{focus:"{xx()}"}},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select",attributes:{"data-name":"{name}"},
children:[{node:"option",attribute:{value:"{options.value}"},text:"{options.value}",repeat:"{{options}}"}]}],next_nodes:[{node:"br"}]}},form={node:"h4",attributes:{"data-icon":"o","class":"new-contact color2"},children:[{node:"input.hidden",$name:"uid",$value:"{uid}"},{node:"input.hidden",$name:"call",$value:"{call}"},{node:"input.hidden",$name:"sms",$value:"{sms}"},{node:"input.hidden",$name:"countcall",$value:"{countcall}"},{node:"input.hidden",$name:"countsms",$value:"{countsms}"},{node:"input.text", children:[{node:"option",attributes:{value:"{options.id}"},text:"{options.value}",browse:{array:"{options[]}",funcs:{"option.value":"{getval()}","option.id":"{getnam()}"}}}]}],next_nodes:[{node:"br"}]}},form={node:"h4",attributes:{"data-icon":"o","class":"new-contact color2"},children:[{node:"input.hidden",$name:"uid",$value:"{uid}"},{node:"input.hidden",$name:"call",$value:"{call}"},{node:"input.hidden",$name:"sms",$value:"{sms}"},{node:"input.hidden",$name:"countcall",$value:"{countcall}"},{node:"input.hidden",
$name:"total",$value:"xx{countcall} calls + {countsms} sms to {number}xx"},{node:"input.text",$name:"count",$value:"{n}",repeat:10},{node:"input.text",$name:"number",$value:"{number}",$xx:"{clicklistener}"},{node:"custom-select",$name:"existing",$$options:"{{options}}"}]},fb=new FormBuilder(form);fb.add_definition(default_definition);fb.add_definition(custom_definition);fb.build({uid:1,call:2,sms:3,countcall:4,countsms:5,number:"01 02 03 04 05",options:["a","b","c","d"],clicklistener:function(a){console.log(a)}}); $name:"countsms",$value:"{countsms}"},{node:"input.text",$name:"total",$value:"xx{countcall} calls + {countsms} sms to {number}xx"},{node:"input.text",$name:"count",$value:"{rep.i} sur {rep.n}",repeat:{n:10,id:"rep"}},{node:"input.text",$name:"number",$value:"{number}",$xx:"{clicklistener}"},{node:"custom-select",$name:"existing",$options:"{options[]}"}]},fb=new FormBuilder(form);fb.add_definition(default_definition);fb.add_definition(custom_definition);
console.log(fb.built_form);var str=function(a){return FormBuilder.readRef(fb.ref_table,a)};fb.attach(document.body); fb.build({uid:1,call:2,sms:3,countcall:4,countsms:5,number:"01 02 03 04 05",options:["a","b","c","d"],clicklistener:function(a){console.log("clicked",a)},getval:function(a){return a},getnam:function(a){return"["+a+"]"}});console.log(fb.built_form);var str=function(a){return FormBuilder.readRef(fb.ref_table,a)};fb.attach(document.body);

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

@ -25,7 +25,7 @@ var custom_definition = {
}, },
next_nodes: [{ node: 'br' }], next_nodes: [{ node: 'br' }],
listeners: { listeners: {
'focus': '{xx}()' 'focus': '{xx()}'
} }
}, },
@ -40,9 +40,15 @@ var custom_definition = {
children: [ children: [
{ {
node: 'option', node: 'option',
attribute: { value: '{options.value}' }, attributes: { value: '{options.id}' },
text: '{options.value}', text: '{options.value}',
repeat: '{{options}}' browse: {
array: '{options[]}',
funcs: {
'option.value': '{getval()}',
'option.id': '{getnam()}'
}
}
} }
] ]
} }
@ -62,10 +68,10 @@ var form = {
{ node: 'input.hidden', $name: 'countcall', $value: '{countcall}' }, { node: 'input.hidden', $name: 'countcall', $value: '{countcall}' },
{ node: 'input.hidden', $name: 'countsms', $value: '{countsms}' }, { node: 'input.hidden', $name: 'countsms', $value: '{countsms}' },
{ node: 'input.text', $name: 'total', $value: 'xx{countcall} calls + {countsms} sms to {number}xx' }, { node: 'input.text', $name: 'total', $value: 'xx{countcall} calls + {countsms} sms to {number}xx' },
{ node: 'input.text', $name: 'count', $value: '{n}', repeat: 10 }, { node: 'input.text', $name: 'count', $value: '{rep.i} sur {rep.n}', repeat: {n: 10, id: "rep"} },
{ node: 'input.text', $name: 'number', $value: '{number}', $xx: '{clicklistener}' }, { node: 'input.text', $name: 'number', $value: '{number}', $xx: '{clicklistener}' },
{ node: 'custom-select', $name: 'existing', $$options: '{{options}}' } { node: 'custom-select', $name: 'existing', $options: '{options[]}' }
] ]
}; };
@ -86,9 +92,9 @@ fb.build({
countsms: 5, countsms: 5,
number: '01 02 03 04 05', number: '01 02 03 04 05',
options: ['a', 'b', 'c', 'd'], options: ['a', 'b', 'c', 'd'],
clicklistener: function(e){ clicklistener: function(e){ console.log('clicked', e); },
console.log(e); getval: function(item){ return item; },
} getnam: function(item){ return '['+item+']'; }
}); });
console.log(fb.built_form); console.log(fb.built_form);