diff --git a/doc/form-builder/behaviour-min.js b/doc/form-builder/behaviour-min.js index a45f47c..0db00f5 100644 --- a/doc/form-builder/behaviour-min.js +++ b/doc/form-builder/behaviour-min.js @@ -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}}"}]}; diff --git a/doc/form-builder/behaviour.js b/doc/form-builder/behaviour.js index bfc3249..3b7f571 100644 --- a/doc/form-builder/behaviour.js +++ b/doc/form-builder/behaviour.js @@ -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' } } }; diff --git a/js/lib/form-builder-min.js b/js/lib/form-builder-min.js index 8b23e01..a371fc5 100644 --- a/js/lib/form-builder-min.js +++ b/js/lib/form-builder-min.js @@ -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;dd;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=e.lastIndex);)c=e.lastIndex,f.push(d);for(d=c=0;dc;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=g.lastIndex);)d=g.lastIndex,e.push(c);for(c=d=0;c Objet contenant les références * @definition Objet de définition de l'élément +* @ref_table Objet contenant les références +* @ref_assoc Table des associations de références * * @return built 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,112 +875,169 @@ 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 - ===========================================================*/ - if( definition.hasOwnProperty('prev_nodes') ) - for( i in definition.prev_nodes ) - built.prev = FormBuilder.buildElements(ref_table, definition.prev_nodes[i]); + /* [xxxx] Pour chaque instance (répétition) + =========================================================*/ + for( b = 0 ; b < repeated.length ; b++ ){ - /* [3] 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] = { prev: [], node: null, next: [] }; - /* [4] On construit l'objet actuel - ===========================================================*/ - /* (1) On crée l'élément - ---------------------------------------------------------*/ - /* (1) Si on a le type de hmtl */ - if( definition.hasOwnProperty('node_type') ) - built.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); - - /* 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 ); - } + /* [3] On construit les éléments @prev_nodes, s'ils existent + ===========================================================*/ + if( definition.hasOwnProperty('prev_nodes') ) + for( i in definition.prev_nodes ) + built[b].prev = FormBuilder.buildElements(definition.prev_nodes[i], ref_table, ref_assoc); - /* (2) On ajoute les attributs - ---------------------------------------------------------*/ - if( definition.hasOwnProperty('attributes') ){ - - // Pour chaque attribut, on définit - for( i in definition.attributes ) - built.node.setAttribute( i, FormBuilder.readRef(ref_table, definition.attributes[i]) ); - - } + /* [4] On construit les éléments @next_nodes s'ils existent + ===========================================================*/ + if( definition.hasOwnProperty('next_nodes') ) + for( i in definition.next_nodes ) + built[b].next = FormBuilder.buildElements(definition.next_nodes[i], ref_table, ref_assoc); - /* (3) On ajoute le contenu HTML - ---------------------------------------------------------*/ - if( definition.hasOwnProperty('text') ){ + /* [5] On construit l'objet actuel + ===========================================================*/ - // Note: Override les enfants - built.node.innerHTML = definition.text; - - } + /* (1) On crée l'élément + ---------------------------------------------------------*/ + /* (1) Si on a le type de hmtl */ + if( definition.hasOwnProperty('node_type') ) + built[b].node = document.createElement( FormBuilder.readRef(ref_table, definition.node_type) ); - /* (4) On ajoute les listeners - ---------------------------------------------------------*/ - if( definition.hasOwnProperty('listeners') ){ + /* (2) Si c'est un sub-node, on récupère la définition récursivement */ + else if( definition.hasOwnProperty('node_link') ){ - // Pour chaque listener - for( i in definition.listeners ){ + tmp = FormBuilder.buildElements(definition.node_link, ref_table, ref_assoc); - // Pour chaque noeud - // for( j in repeater ) - built.node.addEventListener( i, FormBuilder.readRef(ref_table, definition.listeners[i]), false ); + for( i in tmp ){ + + /* 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 - =========================================================*/ - if( definition.hasOwnProperty('children') ){ + /* [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]); + /* (1) Pour chaque enfant */ + for( i in definition.children ){ + tmp = FormBuilder.buildElements(definition.children[i], ref_table, ref_assoc); - /* (2) On ajoute les éléments précédent l'enfant */ - for( j in tmp.prev ) - built.node.appendChild( tmp.prev[j] ); + for( k in tmp ){ - /* (3) On ajoute l'enfant */ - built.node.appendChild( tmp.node ); + /* (2) On ajoute les éléments précédent l'enfant */ + for( j in tmp[k].prev ) + built[b].node.appendChild( tmp[k].prev[j] ); - /* (4) On ajoute les éléments suivants l'enfant */ - for( j in tmp.prev ) - built.node.appendChild( tmp.next[j] ); + /* (3) On ajoute l'enfant */ + built[b].node.appendChild( tmp[k].node ); + + /* (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; }; diff --git a/js/lib/form-builder/main-min.js b/js/lib/form-builder/main-min.js index 675740b..53cb030 100644 --- a/js/lib/form-builder/main-min.js +++ b/js/lib/form-builder/main-min.js @@ -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); diff --git a/js/lib/form-builder/main.js b/js/lib/form-builder/main.js index c9fe708..171bdc0 100644 --- a/js/lib/form-builder/main.js +++ b/js/lib/form-builder/main.js @@ -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);