diff --git a/js/lib/form-builder-min.js b/js/lib/form-builder-min.js index 8dfcf7d..8b23e01 100644 --- a/js/lib/form-builder-min.js +++ b/js/lib/form-builder-min.js @@ -1,16 +1,17 @@ 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)}; -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]);this.parent_element.appendChild(a.node);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].parent=a,FormBuilder.formatFormObject(a.children[e],b);return a};FormBuilder.fetchNodeDefinition=function(a,b){var e,c;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)&&(c=new RegExp(e.slice(1,-1)),c.test(a))){matches={};for(c=1;cc;c++)matches["$"+c]=RegExp["$"+c];return{def:b[e],scope:matches}}return{}}; -FormBuilder.replaceStatements=function(a,b,e,c){a=a instanceof Object?a:{};b=b instanceof Object?JSON.parse(JSON.stringify(b)):{};var d,f;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&&(f=FormBuilder.fetchNodeDefinition(a.node,e),f.hasOwnProperty("def")&&(a.node_link=JSON.parse(JSON.stringify(f.def)),f.hasOwnProperty("scope"))))for(d in f.scope)b[d]=f.scope[d];for(d in a)"string"==typeof a[d]&&(a[d]=[a[d]], -f=FormBuilder.replaceStatementsFunction(c,a[d][0],b),!1!==f?a[d]=f:(f=FormBuilder.replaceStatementsArray(c,a[d][0],b),!1!==f?a[d]=f:(a[d]=FormBuilder.replaceStatementsRegex(a[d],b),a[d]=FormBuilder.replaceStatementsPrimary(a[d],b),a[d]=FormBuilder.replaceStatementsArrayValue(a[d],b))));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=e.lastIndex);)f=e.lastIndex,d.push(c);for(c=f=0;cd;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;d Ensemble des variables permettant le remplacement * @definitions Définitions des éléments * @ref_table Table des références +* @ref_assoc Table des associations de références * * @return replaced Objet avec les remplacements effectués * */ -FormBuilder.replaceStatements = function(object, scope, definitions, ref_table){ +FormBuilder.replaceStatements = function(object, scope, definitions, ref_table, ref_assoc){ /* [0] Initialisation ==================================================================*/ /* (1) Paramètres */ @@ -414,7 +420,7 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table){ /* (2.2) On cherche tous les TABLEAUX à remplacer ---------------------------------------------------------*/ /* (1) On récupère le remplacement */ - m_arr = FormBuilder.replaceStatementsArray(ref_table, object[key][0], scope); + m_arr = FormBuilder.replaceStatementsArray(object[key][0], scope, ref_table); /* (2) Si on un remplacement, on remplace, et on passe à la clé suivante */ if( m_arr !== false ){ @@ -438,14 +444,16 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table){ /* (2.5) On cherche toutes les valeurs de tableaux à remplacer ---------------------------------------------------------*/ /* (1) On récupère les remplacements */ - object[key] = FormBuilder.replaceStatementsArrayValue(object[key], scope); + object[key] = FormBuilder.replaceStatementsArrayValue(object[key], scope, ref_table, ref_assoc); - } + /* [1.2] Si c'est un type primitif, on le référencie + =========================================================*/ + }else if( typeof object[key] === 'number' ) + object[key] = [ ref(ref_table, object[key]) ]; } - /* [3] On ajoute les variables '$var' et '$$arr' au scope suivant ==================================================================*/ for( key in object ){ @@ -477,13 +485,13 @@ 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 ) for( var i in object[key] ) - FormBuilder.replaceStatements(object[key][i], scope, definitions, ref_table); + 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 ) - FormBuilder.replaceStatements(object[key], scope, definitions, ref_table); + FormBuilder.replaceStatements(object[key], scope, definitions, ref_table, ref_assoc); // console.log(object.node, key); @@ -527,16 +535,17 @@ FormBuilder.replaceStatementsFunction = function(ref_table, statement, scope){ }; + /* REMPLACE UN TABLEAU SOUS LA FORME "{{arrayName}}" par sa référence * -* @ref_table Objet contenant les références * @statement String contenant la chaine * @scope Objet contenant le scope +* @ref_table Objet contenant les références * * @return newVal Retourne la nouvelle (ref) valeur ou FALSE si rien n'a été fais * */ -FormBuilder.replaceStatementsArray = function(ref_table, statement, scope){ +FormBuilder.replaceStatementsArray = function(statement, scope, ref_table){ /* (1) On initialise les variables */ var match = null; var regex = FormBuilder.regex.arr_out_set; @@ -712,11 +721,13 @@ FormBuilder.replaceStatementsPrimary = function(statements, scope){ * * @statements Tableau contenant les parties de la chaine * @scope Objet contenant le scope +* @ref_table Objet contenant les références +* @ref_assoc Table des associations de références * * @return splitVal Tableau contenant les parties de la chaine (références + chaine) * */ -FormBuilder.replaceStatementsArrayValue = function(statements, scope){ +FormBuilder.replaceStatementsArrayValue = function(statements, scope, ref_table, ref_assoc){ /* [1] Initialisation =========================================================*/ var regex = FormBuilder.regex.arr_out_val; @@ -744,18 +755,18 @@ FormBuilder.replaceStatementsArrayValue = function(statements, scope){ =========================================================*/ for( i = 0 ; i < matches.length ; i++ ){ - key = matches[i][1]; + key = matches[i][1] + '.' + matches[i][2]; /* (1) On met la chaine d'avant le match (si existe) */ if( lasti > 0 || matches[i].index > 0 ) parts.push( statements[p].substr(lasti, matches[i].index-lasti) ); - /* (2) Si la var n'est pas dans le scope, on l'initialise vide */ - if( !scope.hasOwnProperty(key) ) - scope[key] = ''; // on met une chaine vide + /* (2) On initialise la référence pour la remplir (si n'existe pas)*/ + if( !ref_assoc.hasOwnProperty(key) ) + ref_assoc[key] = ref(ref_table); /* (3) On insère la valeur du scope */ - parts.push( scope[key] ); + parts.push( ref_assoc[key] ); /* (4) On met à jour l'index de fin pour la suite */ lasti = matches[i].index + matches[i][0].length; @@ -851,29 +862,53 @@ FormBuilder.buildElements = function(ref_table, definition){ /* [0] Initialisation ===========================================================*/ var built = { - prev: [], // Les éléments précédents - node: null, // L'éléments actuel et ses antécédents/+ prédécesseurs - next: [] // Les éléments suivants + prev: [], // Les éléments précédents + node: [], // Les éléments actuels + next: [] // Les éléments suivants }; var i, j, tmp; + var repeater = [null]; - /* [1] On construit les éléments @prev_nodes, s'ils existent + /* [1] Gestion de l'attribut 'repeat' + =========================================================*/ + if( definition.hasOwnProperty('repeat') ){ + + tmp = FormBuilder.readRef(ref_table, definition.repeat); + + /* (1) Si on a un nombre */ + if( !isNaN(tmp) ){ + repeater = []; + + for( i = 0 ; i < tmp ; i++ ) + repeater[i] = i; + } + + /* (2) Si c'est un tableau */ + else if( tmp instanceof Array) + repeater = tmp; + + } + 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]); - /* [2] On construit les éléments @next_nodes s'ils existent + /* [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]); - /* [3] On construit l'objet actuel + /* [4] On construit l'objet actuel ===========================================================*/ /* (1) On crée l'élément @@ -918,23 +953,22 @@ FormBuilder.buildElements = function(ref_table, definition){ ---------------------------------------------------------*/ if( definition.hasOwnProperty('listeners') ){ - for( i in definition.listeners ){ + // Pour chaque listener + for( i in definition.listeners ){ - built.node.addEventListener( - i, - FormBuilder.readRef(ref_table, definition.listeners[i]), - false - ); - console.log('listener', i, FormBuilder.readRef(ref_table, definition.listeners[i])); + // Pour chaque noeud + // for( j in repeater ) + built.node.addEventListener( i, FormBuilder.readRef(ref_table, definition.listeners[i]), false ); - } + } } - /* [4] On ajoute tous les enfants + + /* [5] On ajoute tous les enfants =========================================================*/ - if( definition.hasOwnProperty('children') ) + if( definition.hasOwnProperty('children') ){ /* (1) Pour chaque enfant */ for( i in definition.children ){ @@ -953,7 +987,7 @@ FormBuilder.buildElements = function(ref_table, definition){ } - + } return built; diff --git a/js/lib/form-builder/main-min.js b/js/lib/form-builder/main-min.js index c963061..675740b 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.hidden", -$name:"total",$value:"xx{countcall} calls + {countsms} sms to {number}xx"},{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); +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); diff --git a/js/lib/form-builder/main.js b/js/lib/form-builder/main.js index 6858f77..c9fe708 100644 --- a/js/lib/form-builder/main.js +++ b/js/lib/form-builder/main.js @@ -61,8 +61,8 @@ var form = { { 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: 'xx{countcall} calls + {countsms} sms to {number}xx' }, - + { 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}}' }