diff --git a/doc/form-builder/behaviour-min.js b/doc/form-builder/behaviour-min.js new file mode 100644 index 0000000..c372080 --- /dev/null +++ b/doc/form-builder/behaviour-min.js @@ -0,0 +1,3 @@ +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"},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}"},{node:"custom-select",$name:"existing",$$options:"{{options}}"}]}; diff --git a/doc/form-builder/behaviour.js b/doc/form-builder/behaviour.js index 5e4715c..551ff32 100644 --- a/doc/form-builder/behaviour.js +++ b/doc/form-builder/behaviour.js @@ -42,12 +42,14 @@ // // {__attributes__} - default variable name for the attributes // {__children__} - default variable name for the children +// {__html__} - default variable name for the html given in higher level ///////////////////////// // REGURAL EXPRESSIONS // ///////////////////////// -// /^yy$/ - where '^yy$' is a regular expression, matches will be added to the input parameters named like so : '$1', '$2' +// /^yy$/ - where '^yy$' is a regular expression, matches will be added to the input parameters named like so : '{$1}', '{$2}', etc // note that it have to match the whole string and begin with '/^' and end with '$/' +// this pattern can only be present in an attribute KEY, and can't be partial, it must be the whole key //////////////////////// @@ -58,11 +60,9 @@ // next_nodes - the set of the element's next elements // prev_nodes - the set of the element's previous elements // node_type - real node-type (to create element in javascript) -// node_attr - real attributes array (to create element in javascript) -// node_children - real children arary (to create element in javascript) // text - overrides all to specify the text content corresponding of the element // children - the set of the element's children (doesn't check if it is a container or not) -// attributes - attributes are replaced in a lower level +// attributes - attributes of the element () // listeners - contains the associations: 'eventName' => 'listenerFuncName' // $xxx - where 'xxx' is a variable name that will be replaced in a lower level // $$zzz - where 'zzz' is an array variable name that will be split in a lower level @@ -70,13 +70,31 @@ // 1- if an array is given, the element will be repeated for each item of the array // 2- if a number @n is given, the element will be repeated @n times + + +//////////////////////// +// LANGAGE DEFINITION // +//////////////////////// +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' +}; + var default_definition = { - 'input': { node_type: 'input', node_attr: '{__attributes__}' }, - '/^h([1-6])$/': { node_type: 'h{$1}', node_attr: '{__attributes__}', node_children: '{__children__}' }, - 'br': { node_type: 'br', }, - 'option': { node_type: 'option', node_attr: '{__attributes__}', node_children: '{__children__}' }, - 'select': { node_type: 'select', node_attr: '{__attributes__}', node_children: '{__children__}' }, - 'span': { node_type: 'span', node_attr: '{__attributes__}', node_children: '{__children__}' } + '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' } }; var custom_definition = { diff --git a/js/lib/form-builder-min.js b/js/lib/form-builder-min.js index 3cd4bcb..a40f7cc 100644 --- a/js/lib/form-builder-min.js +++ b/js/lib/form-builder-min.js @@ -1,7 +1,9 @@ -var FormBuilder=function(a,d){this.parent_element=a;this.form_object=d};FormBuilder.prototype={form_object:this.form_object,defs_object:{},parent_element:this.parent_element,built_form:null};FormBuilder.regex={regex_input_key:/^\/\^(.+)\$\/$/,regex_ouput_value:/\{(\$[1-9])\}/,primitive_ouput_value:/\{([a-z-]+)\}/g,primitive_input_key:/^\$([a-z-]+)$/,array_output_set:/^\{\{([a-z-]+)\}\}$/,array_output_value:/\{([a-z-]+)\.([a-z-]+)\}/g,array_input_key:/^\$\$([a-z-]+)$/};FormBuilder.allowed_attr="node node_type node_attr node_children next_nodes prev_nodes attributes children text repeat".split(" "); -FormBuilder.ignore_rec=["parent","scope"];FormBuilder.prototype.add_definition=function(a){for(var d in a)this.defs_object[d]=a[d]};FormBuilder.prototype.build=function(a){a=null==a?{}:a;this.built_form=FormBuilder.formatFormObject(this.form_object,this.defs_object);this.built_form=FormBuilder.replaceStatements(this.form_object,a)}; -FormBuilder.formatFormObject=function(a,d){if(a.hasOwnProperty("node")&&"string"==typeof a.node){var b=FormBuilder.fetchNodeDefinition(a.node,d);null!==b&&(a.node_link=b.def,b.hasOwnProperty("scope")&&(a.scope=b.scope))}if(a.hasOwnProperty("children"))for(var f in a.children)a.children[f].parent=a,FormBuilder.formatFormObject(a.children[f],d);return a}; -FormBuilder.fetchNodeDefinition=function(a,d){var b,f;r=FormBuilder.regex.regex_input_key;if(null!=d&&d.hasOwnProperty(a))return{def:d.node,scope:null};for(b in d)if(r.test(b)&&(f=new RegExp(b.slice(1,-1)),f.test(a))){matches={};for(f=1;ff;f++)matches["$"+f]=RegExp["$"+f];return{def:d[b],scope:matches}}return null}; -FormBuilder.replaceStatements=function(a,d){a=a instanceof Object?a:{};d=d instanceof Object?d:{};var b,f,e,g=d;if(a.hasOwnProperty("scope")&&a.scope instanceof Object)for(b in a.scope)g[b]=a.scope[b];for(b in a)if(0>FormBuilder.ignore_rec.indexOf(b)&&"string"==typeof a[b]){f=FormBuilder.regex.array_output_set;var c=[];(e=f.exec(a[b]))&&c.push(e[1]);for(e in c)d.hasOwnProperty(c[e])||(d[c[e]]=[]),a[b]=d[c[e]],console.log("arr",c[e],d[c[e]]);if(!(0=f.lastIndex);)lasti=f.lastIndex,c.push(e[1]);for(e in c)d.hasOwnProperty(c[e])||(d[c[e]]=""),f=new RegExp("{\\$"+c[e][1]+"}","g"),console.log("reg",c[e],d),a[b]=a[b].replace(f,d[c[e]]);if(!(0FormBuilder.ignore_rec.indexOf(b)&&(a[b]instanceof Object||a[b]instanceof Array)&&(a[b]=FormBuilder.replaceStatements(a[b],g));return a}; +var FormBuilder=function(a,c){this.parent_element=a;this.form_object=c};FormBuilder.prototype={form_object:this.form_object,defs_object:{},parent_element:this.parent_element,built_form:null};FormBuilder.regex={regex_input_key:/^\/\^(.+)\$\/$/,regex_ouput_value:/\{(\$[1-9])\}/,primitive_ouput_value:/\{([a-z-]+)\}/g,primitive_input_key:/^\$([a-z-]+)$/,array_output_set:/^\{\{([a-z-]+)\}\}$/,array_output_value:/\{([a-z-]+)\.([a-z-]+)\}/g,array_input_key:/^\$\$([a-z-]+)$/}; +FormBuilder.spread_attr=["children","next_nodes","prev_nodes","attributes"];FormBuilder.allowed_attr="node node_type next_nodes prev_nodes attributes children text repeat".split(" ");FormBuilder.ignore_rec=["parent","scope"];FormBuilder.prototype.add_definition=function(a){for(var c in a)this.defs_object[c]=a[c]}; +FormBuilder.prototype.build=function(a){a=null==a?{}:a;this.built_form=FormBuilder.formatFormObject(this.form_object,this.defs_object);this.built_form=FormBuilder.replaceStatements(this.form_object,a)}; +FormBuilder.formatFormObject=function(a,c){if(a.hasOwnProperty("node")&&"string"==typeof a.node){var b=FormBuilder.fetchNodeDefinition(a.node,c);null!==b&&(a.node_link=b.def,b.hasOwnProperty("scope")&&(a.scope=b.scope))}if(a.hasOwnProperty("children"))for(var f in a.children)a.children[f].parent=a,FormBuilder.formatFormObject(a.children[f],c);return a}; +FormBuilder.fetchNodeDefinition=function(a,c){var b,f;r=FormBuilder.regex.regex_input_key;if(null!=c&&c.hasOwnProperty(a))return{def:c.node,scope:null};for(b in c)if(r.test(b)&&(f=new RegExp(b.slice(1,-1)),f.test(a))){matches={};for(f=1;ff;f++)matches["$"+f]=RegExp["$"+f];return{def:c[b],scope:matches}}return null}; +FormBuilder.replaceStatements=function(a,c){a=a instanceof Object?a:{};c=c instanceof Object?c:{};var b,f,e,g=c;if(a.hasOwnProperty("scope")&&a.scope instanceof Object)for(b in a.scope)g[b]=a.scope[b];for(b in a)if(0>FormBuilder.ignore_rec.indexOf(b)&&"string"==typeof a[b]){f=FormBuilder.regex.array_output_set;var d=[];(e=f.exec(a[b]))&&d.push(e[1]);for(e in d)c.hasOwnProperty(d[e])||(c[d[e]]=[]),a[b]=c[d[e]],console.log("arr",d[e],c[d[e]]);if(!(0=f.lastIndex);)lasti=f.lastIndex,d.push(e[1]);for(e in d)c.hasOwnProperty(d[e])||(c[d[e]]=""),f=new RegExp("{\\$"+d[e][1]+"}","g"),a[b]=a[b].replace(f,c[d[e]]),console.log("reg",d[e],c);if(!(0FormBuilder.ignore_rec.indexOf(b))if(-1 -1 ) + next_scope = JSON.parse( JSON.stringify(scope).slice(0,-1) + ',' + JSON.stringify(next_scope).slice(1) ); + /* (2) Si c'est un objet, on lance récursivement */ + if( object[key] instanceof Object ) object[key] = FormBuilder.replaceStatements(object[key], next_scope); - } + /* (3) Si c'est un tableau, on lance récursivement pour chaque item */ + else if( object[key] instanceof Array ) + for( var i in object[key] ) + object[key][i] = FormBuilder.replaceStatements(object[key][i], next_scope); } } diff --git a/js/lib/form-builder/main-min.js b/js/lib/form-builder/main-min.js index 10355c9..b1fe931 100644 --- a/js/lib/form-builder/main-min.js +++ b/js/lib/form-builder/main-min.js @@ -1,5 +1,4 @@ document.body.innerHTML="";"use strict"; -var default_definition={input:{node_type:"input",node_attr:"{__attributes__}"},"/^h([1-6])$/":{node_type:"h{$1}",node_attr:"{__attributes__}",node_children:"{__children__}"},br:{node_type:"br"},option:{node_type:"option",node_attr:"{__attributes__}",node_children:"{__children__}"},select:{node_type:"select",node_attr:"{__attributes__}",node_children:"{__children__}"},span:{node_type:"span",node_attr:"{__attributes__}",node_children:"{__children__}"}},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:hidden",$name:"total",$value:"{countcall} calls + {countsms} sms to {number}"},{node:"input:text",$name:"number",$value:"{number}"},{node:"custom-select",$name:"existing",$$options:"{{options}}"}]},fb=new FormBuilder(document.body,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"]}); +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"}]},"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:hidden",$name:"total",$value:"{countcall} calls + {countsms} sms to {number}"}, +{node:"input:text",$name:"number",$value:"{number}"},{node:"custom-select",$name:"existing",$$options:"{{options}}"}]},fb=new FormBuilder(document.body,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"]}); diff --git a/js/lib/form-builder/main.js b/js/lib/form-builder/main.js index af8bf3e..40e4eae 100644 --- a/js/lib/form-builder/main.js +++ b/js/lib/form-builder/main.js @@ -6,12 +6,12 @@ document.body.innerHTML = ''; var default_definition = { - 'input': { node_type: 'input', node_attr: '{__attributes__}' }, - '/^h([1-6])$/': { node_type: 'h{$1}', node_attr: '{__attributes__}', node_children: '{__children__}' }, - 'br': { node_type: 'br' }, - 'option': { node_type: 'option', node_attr: '{__attributes__}', node_children: '{__children__}' }, - 'select': { node_type: 'select', node_attr: '{__attributes__}', node_children: '{__children__}' }, - 'span': { node_type: 'span', node_attr: '{__attributes__}', node_children: '{__children__}' } + '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' } }; var custom_definition = {