diff --git a/js/lib/form-builder-min.js b/js/lib/form-builder-min.js index e22b2bb..2855846 100644 --- a/js/lib/form-builder-min.js +++ b/js/lib/form-builder-min.js @@ -1,18 +1,20 @@ 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;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.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.createElements(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,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 Retourne les éléments construits * */ -FormBuilder.buildElements = function(definition, ref_table, ref_assoc){ +FormBuilder.createElements = function(definition, ref_table, ref_assoc){ /* [0] Initialisation ===========================================================*/ var built = []; - var i, j, k, tmp, b, + var i, j, k, n, tmp, b, repeated = ['NULL'], scope, funcs; @@ -969,7 +969,7 @@ FormBuilder.buildElements = function(definition, ref_table, ref_assoc){ /* (1) On initialise l'élément courant */ - built[b] = { prev: [], node: null, next: [] }; + built[b] = { prev: [], node: [], next: [] }; /* (2) Gestion des variables de 'repeat' et 'browse' */ if( repeated[b] instanceof Object ){ @@ -980,47 +980,44 @@ FormBuilder.buildElements = function(definition, ref_table, ref_assoc){ } - /* [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); + built[b].prev = FormBuilder.createElements(definition.prev_nodes[i], ref_table, ref_assoc); /* [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); + built[b].next = FormBuilder.createElements(definition.next_nodes[i], ref_table, ref_assoc); /* [5] On construit l'objet actuel ===========================================================*/ + /* (1) Si c'est un sub-node, on récupère la définition récursivement */ + if( definition.hasOwnProperty('node_link') ){ - /* (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) ); + tmp = FormBuilder.createElements(definition.node_link, ref_table, ref_assoc); + for( i in tmp ){ - /* (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(definition.node_link, ref_table, ref_assoc); - - 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 ); - - } + /* On ajoute les éléments à l'instance actuelle */ + built[b].prev = built[b].prev.concat( tmp[i].prev ); + built[b].node = built[b].node.concat( tmp[i].node ); + built[b].next = tmp[i].next.concat( built[b].next ); } + } + + /* (2) Si on a le type de hmtl */ + else if( definition.hasOwnProperty('node_type') ) + built[b].node.push( document.createElement( FormBuilder.readRef(ref_table, definition.node_type) ) ); + + + /* (2) On ajoute les attributs ---------------------------------------------------------*/ @@ -1028,7 +1025,9 @@ FormBuilder.buildElements = function(definition, ref_table, ref_assoc){ // Pour chaque attribut, on définit for( i in definition.attributes ) - built[b].node.setAttribute( i, FormBuilder.readRef(ref_table, definition.attributes[i]) ); + // Pour chaque node + for( n in built[b].node ) + built[b].node[n].setAttribute( i, FormBuilder.readRef(ref_table, definition.attributes[i]) ); } @@ -1038,7 +1037,8 @@ FormBuilder.buildElements = function(definition, ref_table, ref_assoc){ if( definition.hasOwnProperty('text') ){ // Note: Override les enfants - built[b].node.innerHTML = FormBuilder.readRef(ref_table, definition.text); + for( n in built[b].node ) + built[b].node[n].innerHTML = FormBuilder.readRef(ref_table, definition.text); } @@ -1049,7 +1049,10 @@ FormBuilder.buildElements = function(definition, ref_table, ref_assoc){ // Pour chaque listener for( i in definition.listeners ) - built[b].node.addEventListener( i, FormBuilder.readRef(ref_table, definition.listeners[i]), false ); + + // Pour chaque node + for( n in built[b].node ) + built[b].node[n].addEventListener( i, FormBuilder.readRef(ref_table, definition.listeners[i]), false ); } @@ -1061,9 +1064,12 @@ FormBuilder.buildElements = function(definition, ref_table, ref_assoc){ /* (1) Pour chaque enfant */ for( i in definition.children ){ - tmp = FormBuilder.buildElements(definition.children[i], ref_table, ref_assoc); - FormBuilder.attachElements(built[b].node, tmp); + tmp = FormBuilder.createElements(definition.children[i], ref_table, ref_assoc); + + // Pour chaque node + for( n in built[b].node ) + FormBuilder.attachElements(built[b].node[n], tmp); } @@ -1098,32 +1104,43 @@ FormBuilder.attachElements = function(parent, set){ ---------------------------------------------------------*/ for( a in set[c].prev ){ - /* (1) Si on a un élément */ + /* (1) Si c'est un Element */ 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 ) + /* (2) On lance récursivement */ + 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 ); + for( a in set[c].node ){ + + /* (1) Si c'est un Element */ + if( set[c].node[a] instanceof Element ) + parent.appendChild( set[c].node[a] ); + + /* (2) On lance récursivement */ + if( set[c].node[a] instanceof Object ) + FormBuilder.attachElements(parent, [ set[c].node[a] ]); + + } /* (3) On attache les éléments suivants ---------------------------------------------------------*/ for( a in set[c].next ){ - /* (1) Si on a un élément */ + /* (1) Si c'est un Element */ 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 ) + /* (2) On lance récursivement */ + 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 379b0c7..a274d4e 100644 --- a/js/lib/form-builder/main-min.js +++ b/js/lib/form-builder/main-min.js @@ -1,7 +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"},"/^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}"}, +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:"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:"br2"}]}},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", +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:"input.text",$name:"username",$placeholder:"{usernameph}",$value:"{username}"}, +{node:"input.submit",$value:"Enregistrer",attributes:{"class":"primary sub-number"}}],next_nodes:[{node:"br4"}]},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 b234196..90d3695 100644 --- a/js/lib/form-builder/main.js +++ b/js/lib/form-builder/main.js @@ -6,13 +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' }, - '/^br([0-9]+)$/': { node_type: 'br', repeat: { n: '{$1}', id: 'brs' } } + '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: 'br', repeat: { n: '{$1}', id: 'brs' } } }; var custom_definition = { @@ -50,7 +50,7 @@ var custom_definition = { listeners: { 'change': '{listener()}' } } ], - next_nodes: [{ node: 'br' }] + next_nodes: [{ node: 'br2' }] } }; @@ -86,12 +86,10 @@ var contactForm = { { 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' } ] + next_nodes: [ { node: 'br4' } ] }; var a = ("

\n"+