Gestion des 'listeners' par référence

js/lib/form-builder-min.js

@@ -1,15 +1,16 @@
 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-]+)$/,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.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;c<RegExp.length&&10>c;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.replaceStatementsArray(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<FormBuilder.spread_attr.indexOf(d))if(a[d]instanceof Array)for(var h in a[d])FormBuilder.replaceStatements(a[d][h],
+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<FormBuilder.spread_attr.indexOf(d))if(a[d]instanceof
-b,e,c);else a[d]instanceof Object&&FormBuilder.replaceStatements(a[d],b,e,c);return a};FormBuilder.replaceStatementsArray=function(a,b){var e=null,e=FormBuilder.regex.arr_out_set.exec(a);if(null===e)return!1;b.hasOwnProperty(e[1])||(b[e[1]]=[]);return b[e[1]]};
+Array)for(var h in a[d])FormBuilder.replaceStatements(a[d][h],b,e,c);else a[d]instanceof Object&&FormBuilder.replaceStatements(a[d],b,e,c);return a};FormBuilder.replaceStatementsFunction=function(a,b,e){var c=null,c=FormBuilder.regex.fun_out_val.exec(b);if(null===c)return!1;e.hasOwnProperty(c[1])||(e[c[1]]=ref(a,function(){}));return e[c[1]]};
+FormBuilder.replaceStatementsArray=function(a,b,e){var c=null,c=FormBuilder.regex.arr_out_set.exec(b);if(null===c)return!1;e.hasOwnProperty(c[1])||(e[c[1]]=ref(a,[]));return e[c[1]]};
 FormBuilder.replaceStatementsRegex=function(a,b){var e=FormBuilder.regex.reg_out_val,c=null,d=[],f,h,g,k;for(g=0;g<a.length;g++){m=null;d=[];f=-1;for(h=[];null!==(c=e.exec(a[g]))&&!(f>=e.lastIndex);)f=e.lastIndex,d.push(c);for(c=f=0;c<d.length;c++)k=d[c][1],(0<f||0<d[c].index)&&h.push(a[g].substr(f,d[c].index-f)),b.hasOwnProperty(k)||(b[k]=""),h.push(b[k]),f=d[c].index+d[c][0].length;f<a[g].length&&h.push(a[g].substr(f,a[g].length));a=a.slice(0,g).concat(h).concat(a.slice(g+1))}return a};
 FormBuilder.replaceStatementsPrimary=function(a,b){var e=FormBuilder.regex.pri_out_val,c=null,d=[],f,h,g,k;for(g=0;g<a.length;g++){m=null;d=[];f=0;for(h=[];null!==(c=e.exec(a[g]));)d.push(c);for(c=0;c<d.length;c++)k=d[c][1],(0<f||0<d[c].index)&&h.push(a[g].substr(f,d[c].index-f)),b.hasOwnProperty(k)||(b[k]=""),h.push(b[k]),f=d[c].index+d[c][0].length;f<a[g].length&&h.push(a[g].substr(f,a[g].length));a=a.slice(0,g).concat(h).concat(a.slice(g+1))}return a};
 FormBuilder.replaceStatementsArrayValue=function(a,b){var e=FormBuilder.regex.arr_out_val,c=null,d=[],f,h,g,k;for(g=0;g<a.length;g++){m=null;d=[];f=0;for(h=[];null!==(c=e.exec(a[g]));)d.push(c);for(c=0;c<d.length;c++)k=d[c][1],(0<f||0<d[c].index)&&h.push(a[g].substr(f,d[c].index-f)),b.hasOwnProperty(k)||(b[k]=""),h.push(b[k]),f=d[c].index+d[c][0].length;f<a[g].length&&h.push(a[g].substr(f,a[g].length));a=a.slice(0,g).concat(h).concat(a.slice(g+1))}return a};
-FormBuilder.readRef=function(a,b){var e,c="";if("string"==typeof b&&FormBuilder.regex.ref_pri.test(b)){for(;"string"==typeof b&&FormBuilder.regex.ref_pri.test(b);)b=a[b];return b}for(e in b)c=FormBuilder.regex.ref_pri.test(b[e])&&a.hasOwnProperty(b[e])?a[b[e]]instanceof Array?c+(""+FormBuilder.readRef(a,a[b[e]])):c+(""+a[b[e]]):c+(""+b[e].toString());return c};
+FormBuilder.readRef=function(a,b){var e,c="";if("string"==typeof b&&FormBuilder.regex.ref_pri.test(b)){for(;"string"==typeof b&&FormBuilder.regex.ref_pri.test(b);)b=a[b],b instanceof Array&&1==b.length&&(b=b[0]);return b}for(e in b)c=FormBuilder.regex.ref_pri.test(b[e])&&a.hasOwnProperty(b[e])?a[b[e]]instanceof Array?c+FormBuilder.readRef(a,a[b[e]]):c+a[b[e]]:c+b[e].toString();return c};
 FormBuilder.buildElements=function(a,b){var e={prev:[],node:null,next:[]},c,d,f;if(b.hasOwnProperty("prev_nodes"))for(c in b.prev_nodes)e.prev=FormBuilder.buildElements(a,b.prev_nodes[c]);if(b.hasOwnProperty("next_nodes"))for(c in b.next_nodes)e.next=FormBuilder.buildElements(a,b.next_nodes[c]);b.hasOwnProperty("node_type")?e.node=document.createElement(FormBuilder.readRef(a,b.node_type)):b.hasOwnProperty("node_link")&&(f=FormBuilder.buildElements(a,b.node_link),e.prev=e.prev.concat(f.prev),e.node=
-f.node,e.next=f.next.concat(e.next));if(b.hasOwnProperty("attributes"))for(c in b.attributes)e.node.setAttribute(c,FormBuilder.readRef(a,b.attributes[c]));b.hasOwnProperty("text")&&(e.node.innerHTML=b.text);if(b.hasOwnProperty("listeners"))for(c in b.listeners)e.node.addEventListener(c,FormBuilder.readRef(a,b.listeners[c].handler),!1);if(b.hasOwnProperty("children"))for(c in b.children){f=FormBuilder.buildElements(a,b.children[c]);for(d in f.prev)e.node.appendChild(f.prev[d]);e.node.appendChild(f.node);
+f.node,e.next=f.next.concat(e.next));if(b.hasOwnProperty("attributes"))for(c in b.attributes)e.node.setAttribute(c,FormBuilder.readRef(a,b.attributes[c]));b.hasOwnProperty("text")&&(e.node.innerHTML=b.text);if(b.hasOwnProperty("listeners"))for(c in b.listeners)e.node.addEventListener(c,FormBuilder.readRef(a,b.listeners[c]),!1),console.log("listener",c,FormBuilder.readRef(a,b.listeners[c]));if(b.hasOwnProperty("children"))for(c in b.children){f=FormBuilder.buildElements(a,b.children[c]);for(d in f.prev)e.node.appendChild(f.prev[d]);
-for(d in f.prev)e.node.appendChild(f.next[d])}return e};
+e.node.appendChild(f.node);for(d in f.prev)e.node.appendChild(f.next[d])}return e};

js/lib/form-builder.js

@@ -85,6 +85,8 @@ FormBuilder.regex = {
 	arr_out_val: /\{([a-z-]+)\.([a-z-]+)\}/g,  // Regex associée à une valeur de tableau à remplacer (primitif)
 	arr_in_key:  /^\$\$([a-z-]+)$/,            // Regex associée à la clé d'un tableau
 
+	fun_out_val:  /^\{([a-z-]+)\}\(\)$/,      // Regex associée à une function incluse dans une clé
+
 	ref_pri:     /^\$[a-f0-9]{8}\$$/           // Clé de référence
 };
 
@@ -353,7 +355,7 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table){
 
 	/* (2) Variables */
 	var key, r, tmp, m, found, lasti, s, parts;
-	var m_arr, m_reg, m_pri, m_aval;
+	var m_fun, m_arr, m_reg, m_pri, m_aval;
 
 	/* (3) On récupère le scope s'il est dans l'attribut 'scope' */
 	if( object.hasOwnProperty('scope') && object.scope instanceof Object )
@@ -397,10 +399,22 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table){
 			object[key] = [object[key]];
 
 
-			/* (2.1) On cherche tous les TABLEAUX à remplacer
+
+			/* (2.1) On cherche toutes les  à remplacer
 			---------------------------------------------------------*/
 			/* (1) On récupère le remplacement */
-			m_arr = FormBuilder.replaceStatementsArray(object[key][0], scope);
+			m_fun = FormBuilder.replaceStatementsFunction(ref_table, object[key][0], scope);
+
+			/* (2) Si on un remplacement, on remplace, et on passe à la clé suivante */
+			if( m_fun !== false ){
+				object[key] = m_fun;
+				continue;
+			}
+
+			/* (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);
 
 			/* (2) Si on un remplacement, on remplace, et on passe à la clé suivante */
 			if( m_arr !== false ){
@@ -409,20 +423,19 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table){
 			}
 
 
-
+			/* (2.3) On cherche toutes les match de REGEX à remplacer
-			/* (2.2) On cherche toutes les match de REGEX à remplacer
 			---------------------------------------------------------*/
 			/* (1) On récupère les remplacements */
 			object[key] = FormBuilder.replaceStatementsRegex(object[key], scope);
 
 
-			/* (2.3) On cherche toutes les variables primitives à remplacer
+			/* (2.4) On cherche toutes les variables primitives à remplacer
 			---------------------------------------------------------*/
 			/* (1) On récupère les remplacements */
 			object[key] = FormBuilder.replaceStatementsPrimary(object[key], scope);
 
 
-			/* (2.4) On cherche toutes les valeurs de tableaux à remplacer
+			/* (2.5) On cherche toutes les valeurs de tableaux à remplacer
 			---------------------------------------------------------*/
 			/* (1) On récupère les remplacements */
 			object[key] = FormBuilder.replaceStatementsArrayValue(object[key], scope);
@@ -484,15 +497,46 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table){
 };
 
 
-/* REMPLACE UN TABLEAU SOUS LA FORME "{{arrayName}}" par sa référence
+/* REMPLACE UNE FUNCTION SOUS LA FORME "{funcName}()" par sa référence
 *
+* @ref_table<Object>									Objet contenant les références
 * @statement<String> 									String contenant la chaine
 * @scope<Object> 										Objet contenant le scope
 *
 * @return newVal<String> 								Retourne la nouvelle (ref) valeur ou FALSE si rien n'a été fais
 *
 */
-FormBuilder.replaceStatementsArray = function(statement, scope){
+FormBuilder.replaceStatementsFunction = function(ref_table, statement, scope){
+	/* (1) On initialise les variables */
+	var match   = null;
+	var regex   = FormBuilder.regex.fun_out_val;
+
+	/* (2) On exécute la regex */
+	match = regex.exec(statement);
+
+	/* (3) Si ça match pas, on retourne FALSE */
+	if( match === null )
+		return false;
+
+	/* (4) Sinon, si la fonction n'est pas dans le scope, on l'initialise */
+	if( !scope.hasOwnProperty(match[1]) )
+		scope[match[1]] = ref( ref_table, function(){} ); // on met une fonction vide
+
+	/* (5) On remplace le 'statement' par la fonction */
+	return scope[match[1]];
+
+};
+
+/* REMPLACE UN TABLEAU SOUS LA FORME "{{arrayName}}" par sa référence
+*
+* @ref_table<Object>									Objet contenant les références
+* @statement<String> 									String contenant la chaine
+* @scope<Object> 										Objet contenant le scope
+*
+* @return newVal<String> 								Retourne la nouvelle (ref) valeur ou FALSE si rien n'a été fais
+*
+*/
+FormBuilder.replaceStatementsArray = function(ref_table, statement, scope){
 	/* (1) On initialise les variables */
 	var match   = null;
 	var regex   = FormBuilder.regex.arr_out_set;
@@ -506,7 +550,7 @@ FormBuilder.replaceStatementsArray = function(statement, scope){
 
 	/* (4) Sinon, si le tableau n'est pas dans le scope, on l'initialise */
 	if( !scope.hasOwnProperty(match[1]) )
-	scope[match[1]] = []; // on met un tableau vide
+		scope[match[1]] = ref( ref_table, []); // on met un tableau vide
 
 	/* (5) On remplace le 'statement' par le tableau */
 	return scope[match[1]];
@@ -750,14 +794,18 @@ FormBuilder.readRef = function(ref_table, parts){
 	var i, built = "";
 
 
-	/* [1] Si c'est un tableau, on le retourne
+	/* [1] Si c'est un tableau ou une fonction, on le retourne
 	=========================================================*/
 	if( typeof parts == 'string' && FormBuilder.regex.ref_pri.test(parts) ){
 
 		// tant qu'on a une référence
-		while( typeof parts == 'string' && FormBuilder.regex.ref_pri.test(parts) )
+		while( typeof parts == 'string' && FormBuilder.regex.ref_pri.test(parts) ){
 			 parts = ref_table[parts];
 
+			 if( parts instanceof Array && parts.length == 1)
+				 parts = parts[0];
+		 }
+
 		return parts;
 	}
 
@@ -771,15 +819,15 @@ FormBuilder.readRef = function(ref_table, parts){
 
 			// si le résultat est un tableau, on lance récursivement
 			if( ref_table[parts[i]] instanceof Array )
-				built += ''+ FormBuilder.readRef(ref_table, ref_table[parts[i]]);
+				built += FormBuilder.readRef(ref_table, ref_table[parts[i]]);
 
 			// sinon
 			else
-				built += '' + ref_table[parts[i]];
+				built += ref_table[parts[i]];
 
 		/* (2) Sinon, on ajoute simplement */
 		}else
-			built += '' + parts[i].toString();
+			built += parts[i].toString();
 
 	}
 
@@ -874,9 +922,10 @@ FormBuilder.buildElements = function(ref_table, definition){
 
 				built.node.addEventListener(
 					i,
-					FormBuilder.readRef(ref_table, definition.listeners[i].handler),
+					FormBuilder.readRef(ref_table, definition.listeners[i]),
 					false
 				);
+				console.log('listener', i, FormBuilder.readRef(ref_table, definition.listeners[i]));
 
 			}
 

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:{click:"{clicklistener}"}},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select",attributes:{"data-name":"{name}"},
+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}",$clicklistener:"{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);
+$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);

js/lib/form-builder/main.js

@@ -25,7 +25,7 @@ var custom_definition = {
 		},
 		next_nodes: [{ node: 'br' }],
 		listeners: {
-			'click': '{clicklistener}'
+			'focus': '{xx}()'
 		}
 	},
 
@@ -63,7 +63,7 @@ var form = {
 		{ 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}', $clicklistener: '{clicklistener}'        },
+		{ node: 'input.text',    $name: 'number',    $value: '{number}', $xx: '{clicklistener}'                   },
 
 		{ node: 'custom-select', $name: 'existing',  $$options: '{{options}}'                                     }
 	]