diff --git a/doc/form-builder/behaviour-min.js b/doc/form-builder/behaviour-min.js index 0db00f5..40389fd 100644 --- a/doc/form-builder/behaviour-min.js +++ b/doc/form-builder/behaviour-min.js @@ -1,4 +1,4 @@ -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}}"}]}; +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, all element will be repeated {repeater:i} times on {repeater:n}",repeat:{n:10,id:"repeater"},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 3b7f571..a217db2 100644 --- a/doc/form-builder/behaviour.js +++ b/doc/form-builder/behaviour.js @@ -81,8 +81,8 @@ // and they are spread by references // REPEAT: '$01abcdef$' ->ref-> { -// repeat: 'repeatAttr', -// references: ['myTab.attr1', 'myTab.attr2', 'repeat.i', 'repeat.n'] +// array: 'repeatAttr', +// funcs: ['myTab.attr1', 'myTab.attr2', 'repeat.i', 'repeat.n'] // } //////////////////////// @@ -97,8 +97,8 @@ var ElementObject = { next_nodes: [ElementObject], prev_nodes: [ElementObject], - text: 'some text to be the innerHTML', - repeat: 'number to repeat ElementObject || {{array}} to repeat ElementObject', + text: 'some text to be the innerHTML, all element will be repeated {repeater:i} times on {repeater:n}', + repeat: { n: 10, id: 'repeater' }, node_type: 'html tag name', listeners: [EventListener] diff --git a/js/lib/form-builder-min.js b/js/lib/form-builder-min.js index 893b720..e22b2bb 100644 --- a/js/lib/form-builder-min.js +++ b/js/lib/form-builder-min.js @@ -1,19 +1,18 @@ var ref=function(a,b){for(var f=null;null==f||a.hasOwnProperty(f);)f="$"+(268435456+Math.floor(4026531839*Math.random())).toString(16)+"$";a[f]=b;return f},FormBuilder=function(a){this.form_object=a};FormBuilder.prototype={form_object:this.form_object,defs_object:{},parent_element:null,built_form:null,root_element:null,ref_table:{$00000000$:null},ref_assoc:{NULL:"$00000000$"}}; FormBuilder.regex={reg_in_key:/^\/\^(.+)\$\/$/,reg_out_val:/\{(\$[1-9])\}/,pri_out_val:/\{([a-z-]+)\}/g,pri_in_key:/^\$([a-z-]+)$/,arr_out_set:/^\{([a-z-]+)\[\]\}$/,arr_out_val:/\{([a-z-]+)([\.:])([a-z-]+)\}/g,arr_in_key:/^\$([a-z-]+)$/,fun_out_val:/^\{([a-z-]+)\(\)\}$/,ref_pri:/^\$[a-f0-9]{8}\$$/};FormBuilder.spread_attr="children next_nodes prev_nodes attributes node_link listeners repeat browse funcs".split(" "); FormBuilder.prototype.add_definition=function(a){for(var b in a)this.defs_object[b]=a[b]};FormBuilder.prototype.build=function(a){a=null==a?{}:a;for(var b in a)a[b]=ref(this.ref_table,a[b]),this.ref_assoc[b]=a[b];this.built_form=JSON.parse(JSON.stringify(this.form_object));this.built_form=FormBuilder.formatFormObject(this.built_form,this.defs_object);this.built_form=FormBuilder.replaceStatements(this.built_form,a,this.defs_object,this.ref_table,this.ref_assoc)}; -FormBuilder.prototype.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,f;a=FormBuilder.buildElements(this.built_form,this.ref_table,this.ref_assoc);for(b in a){for(f in a[b].prev)this.parent_element.appendChild(a[b].prev[f]);this.parent_element.appendChild(a[b].node);for(f in a[b].next)this.parent_element.appendChild(a[b].next[f])}};FormBuilder.formatFormObject=function(a,b){return a}; +FormBuilder.prototype.update=function(a){a=null==a?{}:a;for(var b in a)this.ref_assoc.hasOwnProperty(b)&&(this.ref_table[this.ref_assoc[b]]=a[b])};FormBuilder.prototype.attach=function(a){if(!(a instanceof Element)&&null===this.parent_element)return!1;this.parent_element=a instanceof Element?a:this.parent_element;a=FormBuilder.buildElements(this.built_form,this.ref_table,this.ref_assoc);FormBuilder.attachElements(this.parent_element,a)};FormBuilder.formatFormObject=function(a,b){return a}; FormBuilder.fetchNodeDefinition=function(a,b){var f,d;r=FormBuilder.regex.reg_in_key;if("undefined"!=typeof b&&b.hasOwnProperty(a))return{def:b[a]};for(f in b)if(r.test(f)&&(d=new RegExp(f.slice(1,-1)),d.test(a))){matches={};for(d=1;dd;d++)matches["$"+d]=RegExp["$"+d];return{def:b[f],scope:matches}}return{}}; -FormBuilder.replaceStatements=function(a,b,f,d,e){a=a instanceof Object?a:{};b=b instanceof Object?JSON.parse(JSON.stringify(b)):{};var c,k;if(a.hasOwnProperty("scope")&&a.scope instanceof Object)for(c in a.scope)b[c]=a.scope[c];if(a.hasOwnProperty("node")&&"string"==typeof a.node&&(k=FormBuilder.fetchNodeDefinition(a.node,f),k.hasOwnProperty("def")&&(a.node_link=JSON.parse(JSON.stringify(k.def)),k.hasOwnProperty("scope"))))for(c in k.scope)b[c]=k.scope[c];a.hasOwnProperty("browse")&&(a.browse.hasOwnProperty("array")&& -FormBuilder.regex.arr_out_set.test(a.browse.array)?a.browse.id=RegExp.$1:delete a.browse);for(c in a)"string"==typeof a[c]?(a[c]=[a[c]],k=FormBuilder.replaceStatementsFunction(d,a[c][0],b),!1!==k?a[c]=k:(k=FormBuilder.replaceStatementsArray(a[c][0],b,d),!1!==k?a[c]=k:(a[c]=FormBuilder.replaceStatementsRegex(a[c],b),a[c]=FormBuilder.replaceStatementsPrimary(a[c],b),a[c]=FormBuilder.replaceStatementsArrayValue(a[c],b,d,e)))):"number"===typeof a[c]&&(a[c]=[ref(d,a[c])]);for(c in a)FormBuilder.regex.pri_in_key.test(c)? +FormBuilder.replaceStatements=function(a,b,f,d,e){a=a instanceof Object?a:{};b=b instanceof Object?JSON.parse(JSON.stringify(b)):{};var c,h;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&&(h=FormBuilder.fetchNodeDefinition(a.node,f),h.hasOwnProperty("def")&&(a.node_link=JSON.parse(JSON.stringify(h.def)),h.hasOwnProperty("scope"))))for(c in h.scope)b[c]=h.scope[c];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(c in a)"string"==typeof a[c]?(a[c]=[a[c]],h=FormBuilder.replaceStatementsFunction(d,a[c][0],b),!1!==h?a[c]=h:(h=FormBuilder.replaceStatementsArray(a[c][0],b,d),!1!==h?a[c]=h:(a[c]=FormBuilder.replaceStatementsRegex(a[c],b),a[c]=FormBuilder.replaceStatementsPrimary(a[c],b),a[c]=FormBuilder.replaceStatementsArrayValue(a[c],b,d,e)))):"number"===typeof a[c]&&(a[c]=[ref(d,a[c])]);for(c in a)FormBuilder.regex.pri_in_key.test(c)? 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=f.lastIndex);)c=f.lastIndex,e.push(d);for(d=c=0;d=f.lastIndex);)c=f.lastIndex,e.push(d);for(d=c=0;d Element parent +* @set Set d'enfants à attacher +* +*/ +FormBuilder.attachElements = function(parent, set){ + + var c, a; + + /* [1] Pour chaque contexte (élément + prev + next) + =========================================================*/ + for( c in set ){ + + + /* (1) On attache les éléments précédents + ---------------------------------------------------------*/ + for( a in set[c].prev ){ + + /* (1) Si on a un élément */ + if( set[c].prev[a] instanceof Element ) + parent.appendChild( set[c].prev[a] ); + + /* (2) Si c'est un autre élément -> récursion */ + else if( set[c].prev[a] instanceof Object ) + FormBuilder.attachElements(parent, [ set[c].prev[a] ]); + + } + + + /* (2) On ajoute l'élément actuel + ---------------------------------------------------------*/ + parent.appendChild( set[c].node ); + + + /* (3) On attache les éléments suivants + ---------------------------------------------------------*/ + for( a in set[c].next ){ + + /* (1) Si on a un élément */ + if( set[c].next[a] instanceof Element ) + parent.appendChild( set[c].next[a] ); + + /* (2) Si c'est un autre élément -> récursion */ + else if( set[c].next[a] instanceof Object ) + FormBuilder.attachElements(parent, [ set[c].next[a] ]); + + } + + + } + +}; diff --git a/js/lib/form-builder/main-min.js b/js/lib/form-builder/main-min.js index 8b054e6..379b0c7 100644 --- a/js/lib/form-builder/main-min.js +++ b/js/lib/form-builder/main-min.js @@ -1,5 +1,7 @@ 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",attributes:{value:"{options.id}"},text:"{options.value} - {options:i}/{options:n}",browse:{array:"{options[]}",funcs:{"options.value":"{getval()}","options.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{rep:i}",$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); +var default_definition={input:{node_type:"input"},"/^h([1-6])$/":{node_type:"h{$1}"},br:{node_type:"br"},option:{node_type:"option"},select:{node_type:"select"},span:{node_type:"span"},"/^br([0-9]+)$/":{node_type:"br",repeat:{n:"{$1}",id:"brs"}}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},next_nodes:[{node:"br"}],listeners:{click:"{xx()}"}},"custom-select":{node:"span",attributes:{"class":"select-container nobold"}, +children:[{node:"select",attributes:{"data-name":"{name}"},children:[{node:"option",attributes:{value:"{options:i}"},text:"{options.value}",browse:{array:"{options[]}",funcs:{"options.value":"{getoptval()}"}}}],listeners:{change:"{listener()}"}}],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{rep:i}",$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[]}"}]},contactForm={node:"h4",attributes:{"data-icon":"o","class":"new-contact colo2"}, +children:[{node:"input.hidden",$name:"uid",$value:"{uid}"},{node:"input.hidden",$name:"call",$value:"{call}"},{node:"input.hidden",$name:"sms",$value:"{sms}"},{node:"input.hidden",$name:"countcall",$value:"{countcall}"},{node:"input.hidden",$name:"countsms",$value:"{countsms}"},{node:"input.text",$name:"number",$value:"{number}"},{node:"custom-select",$name:"existing",$options:"{existing[]}",$listener:"{existingsel()}"},{node:"br2"},{node:"input.text",$name:"username",$placeholder:"{usernameph}", +$value:"{username}"},{node:"input.submit",$value:"Enregistrer",attributes:{"class":"primary sub-number"}}],next_nodes:[{node:"br2"}]},a="

\n\t\n\t\n\t\n\t\n\t\n\t \n\t\n\t    ou    \n\t \n\t\n

\n\n", +fb=new FormBuilder(contactForm);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",existing:["Jean","Archibald","Daniel","Maurice"],username:"moi-meme",usernameph:"Pseudo",clicklistener:function(b){console.log("clicked",b)},existingsel:function(b){console.log("selected",b)},getoptval:function(b){return b}});fb.attach(document.body); diff --git a/js/lib/form-builder/main.js b/js/lib/form-builder/main.js index 83f8445..b234196 100644 --- a/js/lib/form-builder/main.js +++ b/js/lib/form-builder/main.js @@ -6,12 +6,13 @@ document.body.innerHTML = ''; var default_definition = { - 'input': { node_type: 'input' }, - '/^h([1-6])$/': { node_type: 'h{$1}' }, - 'br': { node_type: 'br' }, - 'option': { node_type: 'option' }, - 'select': { node_type: 'select' }, - 'span': { node_type: 'span' } + 'input': { node_type: 'input' }, + '/^h([1-6])$/': { node_type: 'h{$1}' }, + 'br': { node_type: 'br' }, + 'option': { node_type: 'option' }, + 'select': { node_type: 'select' }, + 'span': { node_type: 'span' }, + '/^br([0-9]+)$/': { node_type: 'br', repeat: { n: '{$1}', id: 'brs' } } }; var custom_definition = { @@ -23,10 +24,8 @@ var custom_definition = { 'value': '{value}', 'placeholder': '{placeholder}' }, - next_nodes: [{ node: 'br' }], - listeners: { - 'focus': '{xx()}' - } + next_nodes: [ { node: 'br' } ], + listeners: { 'click': '{xx()}' } }, @@ -40,17 +39,15 @@ var custom_definition = { children: [ { node: 'option', - attributes: { value: '{options.id}' }, - text: '{options.value} - {options:i}/{options:n}', + attributes: { value: '{options:i}' }, + text: '{options.value}', browse: { array: '{options[]}', - funcs: { - 'options.value': '{getval()}', - 'options.id': '{getnam()}' - } + funcs: { 'options.value': '{getoptval()}' } } } - ] + ], + listeners: { 'change': '{listener()}' } } ], next_nodes: [{ node: 'br' }] @@ -75,13 +72,56 @@ var form = { ] }; +var contactForm = { + node: 'h4', + attributes: { 'data-icon': 'o', class: 'new-contact colo2' }, + children: [ + { node: 'input.hidden', $name: 'uid', $value: '{uid}' }, + { node: 'input.hidden', $name: 'call', $value: '{call}' }, + { node: 'input.hidden', $name: 'sms', $value: '{sms}' }, + { node: 'input.hidden', $name: 'countcall', $value: '{countcall}' }, + { node: 'input.hidden', $name: 'countsms', $value: '{countsms}' }, + + { node: 'input.text', $name: 'number', $value: '{number}' }, + + { node: 'custom-select', $name: 'existing', $options: '{existing[]}', $listener: '{existingsel()}' }, + + { node: 'br2' }, + + { node: 'input.text', $name: 'username', $placeholder: '{usernameph}', $value: '{username}'}, + { node: 'input.submit', $value: 'Enregistrer', attributes: { class: 'primary sub-number'} } + ], + next_nodes: [ { node: 'br2' } ] + +}; +var a = ("

\n"+ + + "\t\n"+ + "\t\n"+ + "\t\n"+ + + "\t\n"+ + "\t\n"+ + + "\t \n"+ + + "\t\n"+ + + "\t    ou    \n"+ + + "\t \n"+ + "\t\n"+ + +"

\n\n"); - -var fb = new FormBuilder(form); +var fb = new FormBuilder(contactForm); fb.add_definition(default_definition); fb.add_definition(custom_definition); fb.build({ @@ -91,12 +131,12 @@ fb.build({ countcall: 4, countsms: 5, number: '01 02 03 04 05', - options: ['a', 'b', 'c', 'd'], + existing: ['Jean', 'Archibald', 'Daniel', 'Maurice'], + username: 'moi-meme', + usernameph: 'Pseudo', clicklistener: function(e){ console.log('clicked', e); }, - getval: function(item){ return item; }, - getnam: function(item){ return '['+item+']'; } + existingsel: function(e){ console.log('selected', e); }, + getoptval: function(opt){ return opt; } }); -console.log(fb.built_form); -var str = function(attr){ return FormBuilder.readRef(fb.ref_table, attr); }; fb.attach(document.body);