Gestion de la création de +ieurs éléments simultanés
This commit is contained in:
xdrm-brackets
parent
ab97198abc
commit
2f8d0fc9ea
|
|
@ -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"},
|
||||
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",
|
||||
attributes:{"data-icon":"o","class":"new-contact color2"},children:[{node:"input:hidden",$name:"uid",$value:"{uid}"},{node:"input:hidden",$name:"call",$value:"{call}"},{node:"input:hidden",$name:"sms",$value:"{sms}"},{node:"input:hidden",$name:"countcall",$value:"{countcall}"},{node:"input:hidden",$name:"countsms",$value:"{countsms}"},{node:"input:text",$name:"number",$value:"{number}",$placeholder:"{Num\u00e9ro de t\u00e9l\u00e9phone}"},{node:"custom-select",$name:"existing",$$options:"{{options}}"}]};
|
||||
var ElementObject={node:"node name defined earlier",attributes:{attr_name_1:"attr_value_1",attr_name_2:"attr_value_2"},children:[ElementObject],next_nodes:[ElementObject],prev_nodes:[ElementObject],text:"some text to be the innerHTML",repeat:"number to repeat ElementObject || {{array}} to repeat ElementObject",node_type:"html tag name",listeners:[EventListener]},default_definition={input:{node_type:"input"},"/^h([1-6])$/":{node_type:"h{$1}"},br:{node_type:"br"},option:{node_type:"option"},select:{node_type:"select"},
|
||||
span:{node_type:"span"}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},listeners:{click:"{onclick()}"},next_nodes:[{node:"br"}]},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select",attributes:{"data-name":"{name}"},children:[{node:"option",attribute:{value:"{options.value}"},text:"{options.value}",browse:{array:"{options[]}"}}]}],next_nodes:[{node:"br"}]},
|
||||
"mult-text":{node:"span",attributes:{id:"text_{rep.i}"},text:"{rep.i} sur {rep.n}",repeat:{n:10,id:"rep"}}},form={node:"h4",attributes:{"data-icon":"o","class":"new-contact color2"},children:[{node:"input:hidden",$name:"uid",$value:"{uid}"},{node:"input:hidden",$name:"call",$value:"{call}"},{node:"input:hidden",$name:"sms",$value:"{sms}"},{node:"input:hidden",$name:"countcall",$value:"{countcall}"},{node:"input:hidden",$name:"countsms",$value:"{countsms}"},{node:"input:text",$name:"number",$value:"{number}",
|
||||
$placeholder:"{Num\u00e9ro de t\u00e9l\u00e9phone}"},{node:"custom-select",$name:"existing",$$options:"{{options}}"}]};
|
||||
|
|
|
|||
|
|
@ -34,9 +34,11 @@
|
|||
// note that the parameter in a higher level have to be preceeded by '$'
|
||||
// /!\ 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 '$$'
|
||||
//
|
||||
// {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
|
||||
// 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
|
||||
// when the model is built the first time, all the passed variables are transformed to 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 //
|
||||
|
|
@ -124,6 +128,9 @@ var custom_definition = {
|
|||
'value': '{value}',
|
||||
'placeholder': '{placeholder}'
|
||||
},
|
||||
listeners: {
|
||||
'click': '{onclick()}'
|
||||
},
|
||||
next_nodes: [{ node: 'br' }]
|
||||
},
|
||||
|
||||
|
|
@ -140,12 +147,19 @@ var custom_definition = {
|
|||
node: 'option',
|
||||
attribute: { value: '{options.value}' },
|
||||
text: '{options.value}',
|
||||
repeat: '{{options}}'
|
||||
browse: { array: '{options[]}' }
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
next_nodes: [{ node: 'br' }]
|
||||
},
|
||||
|
||||
'mult-text': {
|
||||
node: 'span',
|
||||
attributes: { id: 'text_{rep.i}' },
|
||||
text: "{rep.i} sur {rep.n}",
|
||||
repeat: { n:10, id: 'rep' }
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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:{}};
|
||||
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.prototype.add_definition=function(a){for(var b in a)this.defs_object[b]=a[b]};FormBuilder.prototype.build=function(a){a=null==a?{}:a;for(var b in a)a[b]=ref(this.ref_table,a[b]),this.ref_assoc[b]=a[b];this.built_form=JSON.parse(JSON.stringify(this.form_object));this.built_form=FormBuilder.formatFormObject(this.built_form,this.defs_object);this.built_form=FormBuilder.replaceStatements(this.built_form,a,this.defs_object,this.ref_table,this.ref_assoc)};
|
||||
FormBuilder.prototype.update=function(a){a=null==a?{}:a;for(var b in a)this.ref_assoc.hasOwnProperty(b)&&(this.ref_table[this.ref_assoc[b]]=a[b])};FormBuilder.prototype.attach=function(a){if(!(a instanceof Element)&&null===this.parent_element)return!1;this.parent_element=a instanceof Element?a:this.parent_element;var b;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.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.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.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]],
|
||||
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));
|
||||
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]]};
|
||||
FormBuilder.replaceStatementsArray=function(a,b,e){var d=null,d=FormBuilder.regex.arr_out_set.exec(a);if(null===d)return!1;b.hasOwnProperty(d[1])||(b[d[1]]=ref(e,[]));return b[d[1]]};
|
||||
FormBuilder.replaceStatementsRegex=function(a,b){var e=FormBuilder.regex.reg_out_val,d=null,f=[],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.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.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.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.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,
|
||||
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=
|
||||
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};
|
||||
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 repeat browse".split(" ");FormBuilder.prototype.add_definition=function(a){for(var b in a)this.defs_object[b]=a[b]};
|
||||
FormBuilder.prototype.build=function(a){a=null==a?{}:a;for(var b in a)a[b]=ref(this.ref_table,a[b]),this.ref_assoc[b]=a[b];this.built_form=JSON.parse(JSON.stringify(this.form_object));this.built_form=FormBuilder.formatFormObject(this.built_form,this.defs_object);this.built_form=FormBuilder.replaceStatements(this.built_form,a,this.defs_object,this.ref_table,this.ref_assoc)};
|
||||
FormBuilder.prototype.update=function(a){a=null==a?{}:a;for(var b in a)this.ref_assoc.hasOwnProperty(b)&&(this.ref_table[this.ref_assoc[b]]=a[b])};
|
||||
FormBuilder.prototype.attach=function(a){if(!(a instanceof Element)&&null===this.parent_element)return!1;this.parent_element=a instanceof Element?a:this.parent_element;var b,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 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,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")&&
|
||||
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)?
|
||||
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.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 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 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,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 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,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");
|
||||
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),
|
||||
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};
|
||||
|
|
|
|||
|
|
@ -66,8 +66,8 @@ FormBuilder.prototype = {
|
|||
parent_element: null, // element qui contiendra le formulaire
|
||||
built_form: null, // Object correspondant au formulaire construit
|
||||
root_element: null, // Element correspondant à l'objet construit
|
||||
ref_table: {}, // Tableau contenant la liste des références
|
||||
ref_assoc: {} // Association entre table de référence et scope d'entrée
|
||||
ref_table: {'$00000000$': null}, // Tableau contenant la liste des références
|
||||
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_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_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
|
||||
};
|
||||
|
|
@ -96,22 +96,13 @@ FormBuilder.spread_attr = [ // Liste des attributs diffusant le scope
|
|||
'prev_nodes', // diffuse aux éléments
|
||||
'attributes', // diffuse aux attributs
|
||||
'node_link',
|
||||
'listeners'
|
||||
];
|
||||
'listeners',
|
||||
|
||||
FormBuilder.allowed_attr = [ // Liste des attributs fixes autorisés
|
||||
'node', /* nom du modèle à utiliser (dans @defs_object) */
|
||||
'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 */
|
||||
'repeat',
|
||||
'browse'
|
||||
];
|
||||
|
||||
|
||||
|
||||
/************************************************************/
|
||||
/* __ __ _____ _____ _ _ ___ ____ ____ */
|
||||
/* | \/ | ____|_ _| | | |/ _ \| _ \/ ___| */
|
||||
|
|
@ -213,24 +204,26 @@ FormBuilder.prototype.attach = function(parent){
|
|||
|
||||
this.parent_element = (parent instanceof Element) ? parent : this.parent_element;
|
||||
|
||||
var i;
|
||||
var d, i;
|
||||
|
||||
|
||||
/* [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);
|
||||
|
||||
for( d in dom ){
|
||||
|
||||
/* (1) On ajoute les éléments précédents */
|
||||
for( i in dom.prev )
|
||||
this.parent_element.appendChild( dom.prev[i] );
|
||||
for( i in dom[d].prev )
|
||||
this.parent_element.appendChild( dom[d].prev[i] );
|
||||
|
||||
/* (2) On ajoute l'élément cible */
|
||||
for( i in dom.node )
|
||||
this.parent_element.appendChild( dom.node[i] );
|
||||
this.parent_element.appendChild( dom[d].node );
|
||||
|
||||
/* (3) On ajoute les éléments suivants */
|
||||
for( i in dom.next )
|
||||
this.parent_element.appendChild( dom.next[i] );
|
||||
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){
|
||||
|
||||
/* 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);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// TODO: à supprimer
|
||||
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 ){
|
||||
|
||||
|
|
@ -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 */
|
||||
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);
|
||||
|
||||
|
||||
/* (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 */
|
||||
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 */
|
||||
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' )
|
||||
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 ){
|
||||
|
||||
|
|
@ -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 */
|
||||
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 */
|
||||
if( object[key] instanceof Array )
|
||||
if( object[key] instanceof Array ){
|
||||
|
||||
for( var i in object[key] )
|
||||
// on lance récursivement
|
||||
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 */
|
||||
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);
|
||||
// console.log(object.node, key);
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -765,6 +759,7 @@ FormBuilder.replaceStatementsArrayValue = function(statements, scope, ref_table,
|
|||
if( !ref_assoc.hasOwnProperty(key) )
|
||||
ref_assoc[key] = ref(ref_table);
|
||||
|
||||
|
||||
/* (3) On insère la valeur du scope */
|
||||
parts.push( ref_assoc[key] );
|
||||
|
||||
|
|
@ -852,24 +847,21 @@ FormBuilder.readRef = function(ref_table, parts){
|
|||
|
||||
/* 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
|
||||
* @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
|
||||
*
|
||||
*/
|
||||
FormBuilder.buildElements = function(ref_table, definition){
|
||||
FormBuilder.buildElements = function(definition, ref_table, ref_assoc){
|
||||
/* [0] Initialisation
|
||||
===========================================================*/
|
||||
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 built = [];
|
||||
|
||||
var i, j, k, tmp, b,
|
||||
repeater = null,
|
||||
repeated = ['NULL'];
|
||||
|
||||
/* [1] Gestion de l'attribut 'repeat'
|
||||
=========================================================*/
|
||||
|
|
@ -883,48 +875,101 @@ FormBuilder.buildElements = function(ref_table, definition){
|
|||
|
||||
for( i = 0 ; i < tmp ; i++ )
|
||||
repeater[i] = i;
|
||||
}
|
||||
|
||||
/* (2) Si c'est un tableau */
|
||||
else if( tmp instanceof Array)
|
||||
repeater = tmp;
|
||||
}else if( tmp instanceof Array)
|
||||
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)
|
||||
=========================================================*/
|
||||
for( b = 0 ; b < repeated.length ; b++ ){
|
||||
|
||||
|
||||
|
||||
built[b] = { prev: [], node: null, next: [] };
|
||||
|
||||
|
||||
|
||||
/* [3] On construit les éléments @prev_nodes, s'ils existent
|
||||
===========================================================*/
|
||||
if( definition.hasOwnProperty('prev_nodes') )
|
||||
for( i in definition.prev_nodes )
|
||||
built.prev = FormBuilder.buildElements(ref_table, definition.prev_nodes[i]);
|
||||
built[b].prev = FormBuilder.buildElements(definition.prev_nodes[i], ref_table, ref_assoc);
|
||||
|
||||
|
||||
/* [3] On construit les éléments @next_nodes s'ils existent
|
||||
/* [4] On construit les éléments @next_nodes s'ils existent
|
||||
===========================================================*/
|
||||
if( definition.hasOwnProperty('next_nodes') )
|
||||
for( i in definition.next_nodes )
|
||||
built.next = FormBuilder.buildElements(ref_table, definition.next_nodes[i]);
|
||||
built[b].next = FormBuilder.buildElements(definition.next_nodes[i], ref_table, ref_assoc);
|
||||
|
||||
|
||||
/* [4] On construit l'objet actuel
|
||||
/* [5] On construit l'objet actuel
|
||||
===========================================================*/
|
||||
|
||||
/* (1) On crée l'élément
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Si on a le type de <tag> hmtl */
|
||||
if( definition.hasOwnProperty('node_type') )
|
||||
built.node = document.createElement( FormBuilder.readRef(ref_table, definition.node_type) );
|
||||
built[b].node = document.createElement( FormBuilder.readRef(ref_table, definition.node_type) );
|
||||
|
||||
|
||||
/* (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);
|
||||
|
||||
tmp = FormBuilder.buildElements(definition.node_link, ref_table, ref_assoc);
|
||||
|
||||
for( i in tmp ){
|
||||
|
||||
/* 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 );
|
||||
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 );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -934,7 +979,7 @@ FormBuilder.buildElements = function(ref_table, definition){
|
|||
|
||||
// Pour chaque attribut, on définit
|
||||
for( i in definition.attributes )
|
||||
built.node.setAttribute( i, FormBuilder.readRef(ref_table, definition.attributes[i]) );
|
||||
built[b].node.setAttribute( i, FormBuilder.readRef(ref_table, definition.attributes[i]) );
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -944,7 +989,7 @@ FormBuilder.buildElements = function(ref_table, definition){
|
|||
if( definition.hasOwnProperty('text') ){
|
||||
|
||||
// Note: Override les enfants
|
||||
built.node.innerHTML = definition.text;
|
||||
built[b].node.innerHTML = definition.text;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -954,41 +999,45 @@ FormBuilder.buildElements = function(ref_table, definition){
|
|||
if( definition.hasOwnProperty('listeners') ){
|
||||
|
||||
// Pour chaque listener
|
||||
for( i in definition.listeners ){
|
||||
|
||||
// Pour chaque noeud
|
||||
// for( j in repeater )
|
||||
built.node.addEventListener( i, FormBuilder.readRef(ref_table, definition.listeners[i]), false );
|
||||
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') ){
|
||||
|
||||
/* (1) Pour chaque enfant */
|
||||
for( i in definition.children ){
|
||||
tmp = FormBuilder.buildElements(ref_table, definition.children[i]);
|
||||
tmp = FormBuilder.buildElements(definition.children[i], ref_table, ref_assoc);
|
||||
|
||||
for( k in tmp ){
|
||||
|
||||
/* (2) On ajoute les éléments précédent l'enfant */
|
||||
for( j in tmp.prev )
|
||||
built.node.appendChild( tmp.prev[j] );
|
||||
for( j in tmp[k].prev )
|
||||
built[b].node.appendChild( tmp[k].prev[j] );
|
||||
|
||||
/* (3) On ajoute l'enfant */
|
||||
built.node.appendChild( tmp.node );
|
||||
built[b].node.appendChild( tmp[k].node );
|
||||
|
||||
/* (4) On ajoute les éléments suivants l'enfant */
|
||||
for( j in tmp.prev )
|
||||
built.node.appendChild( tmp.next[j] );
|
||||
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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
document.body.innerHTML="";"use strict";
|
||||
var default_definition={input:{node_type:"input"},"/^h([1-6])$/":{node_type:"h{$1}"},br:{node_type:"br"},option:{node_type:"option"},select:{node_type:"select"},span:{node_type:"span"}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},next_nodes:[{node:"br"}],listeners:{focus:"{xx}()"}},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select",attributes:{"data-name":"{name}"},
|
||||
children:[{node:"option",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",
|
||||
$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)}});
|
||||
console.log(fb.built_form);var str=function(a){return FormBuilder.readRef(fb.ref_table,a)};fb.attach(document.body);
|
||||
var default_definition={input:{node_type:"input"},"/^h([1-6])$/":{node_type:"h{$1}"},br:{node_type:"br"},option:{node_type:"option"},select:{node_type:"select"},span:{node_type:"span"}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},next_nodes:[{node:"br"}],listeners:{focus:"{xx()}"}},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select",attributes:{"data-name":"{name}"},
|
||||
children:[{node:"option",attributes:{value:"{options.id}"},text:"{options.value}",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:"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);
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ var custom_definition = {
|
|||
},
|
||||
next_nodes: [{ node: 'br' }],
|
||||
listeners: {
|
||||
'focus': '{xx}()'
|
||||
'focus': '{xx()}'
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -40,9 +40,15 @@ var custom_definition = {
|
|||
children: [
|
||||
{
|
||||
node: 'option',
|
||||
attribute: { value: '{options.value}' },
|
||||
attributes: { value: '{options.id}' },
|
||||
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: 'countsms', $value: '{countsms}' },
|
||||
{ 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: 'custom-select', $name: 'existing', $$options: '{{options}}' }
|
||||
{ node: 'custom-select', $name: 'existing', $options: '{options[]}' }
|
||||
]
|
||||
};
|
||||
|
||||
|
|
@ -86,9 +92,9 @@ fb.build({
|
|||
countsms: 5,
|
||||
number: '01 02 03 04 05',
|
||||
options: ['a', 'b', 'c', 'd'],
|
||||
clicklistener: function(e){
|
||||
console.log(e);
|
||||
}
|
||||
clicklistener: function(e){ console.log('clicked', e); },
|
||||
getval: function(item){ return item; },
|
||||
getnam: function(item){ return '['+item+']'; }
|
||||
});
|
||||
console.log(fb.built_form);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue