Création de la classe 'ElementObject' pour modéliser le système plus formellement

doc/form-builder/behaviour-min.js

@@ -1,3 +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=
+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"},
-{"/^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",
+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",
-$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}}"}]};
+"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}}"}]};

doc/form-builder/behaviour.js

@@ -50,7 +50,7 @@
 // /^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
-
+//
 
 ////////////////////////
 // DEFAULT ATTRIBUTES //
@@ -85,7 +85,11 @@ var ElementObject = {
 	prev_nodes: [ElementObject],
 
 	text: 'some text to be the innerHTML',
-	repeat: 'number to repeat ElementObject || {{array}} to repeat ElementObject'
+	repeat: 'number to repeat ElementObject || {{array}} to repeat ElementObject',
+
+	node_type: 'html tag name',
+	listeners: [EventListener]
+
 };
 
 var default_definition = {
@@ -141,7 +145,7 @@ var form = {
 		{ node: 'input:hidden',  $name: 'countcall', $value: '{countcall}'    },
 		{ node: 'input:hidden',  $name: 'countsms',  $value: '{countsms}'     },
 
-		{ node: 'input:text',    $name: 'number',    $value: '{number}'       },
+		{ node: 'input:text',    $name: 'number',    $value: '{number}', $placeholder: '{Numéro de téléphone}' },
 
 		{ node: 'custom-select', $name: 'existing',  $$options: '{{options}}' }
 	]

js/lib/element-object-min.js

@@ -0,0 +1 @@
+var references=function(a){return{$:a}},ElementObject=function(a){this.node="undefined"==typeof a?null:a};ElementObject.prototype={node:this.node,node_type:null,prev_nodes:[],next_nodes:[],children:[],attributes:{},text:null,repeat:1,parent:null,node_def:null,element:null};

js/lib/element-object.js

@@ -0,0 +1,68 @@
+/* RENVOIE UN WRAPPER POUR UTILISER LES REFERENCES */
+var references = function(data){ return { $: data }; };
+
+
+
+
+
+
+
+
+
+
+/* CONSTRUCTEUR -> INITIALISE UNE L'INSTANCE
+*
+* @node<String>							[OPT] Identifiant d'un élément (selon une définition)
+*
+*/
+var ElementObject = function(node){
+
+	/* Gestion du paramètre @node */
+	this.node = typeof node == 'undefined' ? null : node;
+
+};
+
+
+/************************************************************************/
+/* 		    _  _____ _____ ____  ___ ____  _   _ _____ _____ ____  		*/
+/* 		   / \|_   _|_   _|  _ \|_ _| __ )| | | |_   _| ____/ ___| 		*/
+/* 		  / _ \ | |   | | | |_) || ||  _ \| | | | | | |  _| \___ \ 		*/
+/* 		 / ___ \| |   | | |  _ < | || |_) | |_| | | | | |___ ___) |		*/
+/* 		/_/   \_\_|   |_| |_| \_\___|____/ \___/  |_| |_____|____/ 		*/
+/************************************************************************/
+
+/* DEFINITION DES ATTRIBUTS
+*
+*/
+ElementObject.prototype = {
+	node:       this.node, /* Type de noeud (à lier à sa définition)         */
+	node_type:  null,      /* Type de noeud (html tag)                       */
+	prev_nodes: [],        /* List des éléments précédents                   */
+	next_nodes: [],        /* Liste des éléments suivants                    */
+	children:   [],        /* Liste des éléments enfants                     */
+	attributes: {},        /* Liste des attributs                            */
+	text:       null,      /* contenu HTML (innerHTML)                       */
+	listeners:  [],        /* Liste des listeners (event)                    */
+	repeat:     1,         /* Nombre de fois qu'il faut répéter l'élément    */
+
+	parent:     null,      /* Element parent                                 */
+	node_def:   null,      /* Définition de l'élément (en fonction de @node) */
+
+	element:    null,      /* Contiendra l'élément quand il sera créé        */
+};
+
+/************************************************************/
+/* 		 __  __ _____ _____ _   _  ___  ____  ____  		*/
+/* 		|  \/  | ____|_   _| | | |/ _ \|  _ \/ ___| 		*/
+/* 		| |\/| |  _|   | | | |_| | | | | | | \___ \ 		*/
+/* 		| |  | | |___  | | |  _  | |_| | |_| |___) |		*/
+/* 		|_|  |_|_____| |_| |_| |_|\___/|____/|____/ 		*/
+/************************************************************/
+
+/************************************************/
+/*		  ____ _____  _  _____ ___ ____ 		*/
+/*		 / ___|_   _|/ \|_   _|_ _/ ___|		*/
+/*		 \___ \ | | / _ \ | |  | | |    		*/
+/*		  ___) || |/ ___ \| |  | | |___ 		*/
+/*		 |____/ |_/_/   \_\_| |___\____|		*/
+/************************************************/

js/lib/form-builder-min.js

@@ -1,9 +1,8 @@
-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-]+)$/};
+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.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.spread_attr=["children","next_nodes","prev_nodes","attributes"];FormBuilder.allowed_attr="node node_type next_nodes prev_nodes attributes children text repeat".split(" ");FormBuilder.no_recursion=["parent","scope","received"];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,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.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,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;f<RegExp.length&&10>f;f++)matches["$"+f]=RegExp["$"+f];return{def:c[b],scope:matches}}return null};
+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;f<RegExp.length&&10>f;f++)matches["$"+f]=RegExp["$"+f];return{def:d[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<d.length)){f=FormBuilder.regex.primitive_ouput_value;
+FormBuilder.replaceStatements=function(a,d){a=a instanceof Object?a:{};d=d instanceof Object?d:{};var b,f,c,g={};for(b in a)if("string"==typeof a[b]){f=FormBuilder.regex.array_output_set;var e=[];(c=f.exec(a[b]))&&e.push(c[1]);for(c in e)d.hasOwnProperty(e[c])||(d[e[c]]=[]),a[b]=d[e[c]];if(!(0<e.length)){f=FormBuilder.regex.primitive_ouput_value;for(e=[];null!==(c=f.exec(a[b]));)e.push(c[1]);for(c in e)d.hasOwnProperty(e[c])||(d[e[c]]=""),f=new RegExp("{"+e[c]+"}","g"),a[b]=a[b].replace(f,d[e[c]]);
-for(d=[];null!==(e=f.exec(a[b]));)d.push(e[1]);for(e in d)c.hasOwnProperty(d[e])||(c[d[e]]=""),f=new RegExp("{"+d[e]+"}","g"),a[b]=a[b].replace(f,c[d[e]]),console.log("pri",d[e],c[d[e]]);if(!(0<d.length)){f=FormBuilder.regex.regex_ouput_value;lasti=-1;for(d=[];null!==(e=f.exec(a[b]))&&!(lasti>=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(!(0<d.length)){f=FormBuilder.regex.array_output_value;
+if(!(0<e.length)){f=FormBuilder.regex.regex_ouput_value;lasti=-1;for(e=[];null!==(c=f.exec(a[b]))&&!(lasti>=f.lastIndex);)lasti=f.lastIndex,e.push(c[1]);for(c in e)d.hasOwnProperty(e[c])||(d[e[c]]=""),f=new RegExp("{\\$"+e[c][1]+"}","g"),a[b]=a[b].replace(f,d[e[c]]);if(!(0<e.length)){f=FormBuilder.regex.array_output_value;for(e=[];null!==(c=f.exec(a[b]));)e.push(c[1]);for(c in e)d.hasOwnProperty(e[c])||(d[e[c]]=""),f=new RegExp("/{"+e[c]+"}/","g"),a[b].replace(f,d[e[c]])}}}}for(b in a)FormBuilder.regex.primitive_input_key.test(b)?
-for(d=[];null!==(e=f.exec(a[b]));)d.push(e[1]);for(e in d)c.hasOwnProperty(d[e])||(c[d[e]]=""),f=new RegExp("/{"+d[e]+"}/","g"),a[b].replace(f,c[d[e]])}}}}for(b in a)FormBuilder.regex.primitive_input_key.test(b)?g[b.substring(1)]=a[b]:FormBuilder.regex.array_input_key.test(b)&&(g[b.substring(2)]=a[b]);for(b in a)if(0>FormBuilder.ignore_rec.indexOf(b))if(-1<FormBuilder.spread_attr.indexOf(b)&&(g=JSON.parse(JSON.stringify(c).slice(0,-1)+","+JSON.stringify(g).slice(1))),a[b]instanceof Object)a[b]=FormBuilder.replaceStatements(a[b],
+g[b.substring(1)]=a[b]:FormBuilder.regex.array_input_key.test(b)&&(g[b.substring(2)]=a[b]);for(b in a)if(-1<FormBuilder.spread_attr.indexOf(b))if(c=[JSON.stringify(d).slice(0,-1),JSON.stringify(g).slice(1)],2<c[0].length&&2<c[1].length&&(c[1]=","+c[1]),g=JSON.parse(c[0]+""+c[1]),a[b]instanceof Array)for(var h in a[b])console.log(a,b+"["+h+"]",d),FormBuilder.replaceStatements(a[b][h],g);else a[b]instanceof Object&&(console.log(a,b,d),FormBuilder.replaceStatements(a[b],g));return a};
-g);else if(a[b]instanceof Array)for(var h in a[b])a[b][h]=FormBuilder.replaceStatements(a[b][h],g);return a};

js/lib/form-builder.js

@@ -52,7 +52,7 @@ FormBuilder.spread_attr = [ // Liste des attributs diffusant le scope
 	'children',   // diffuse aux éléments
 	'next_nodes', // diffuse aux éléments
 	'prev_nodes', // diffuse aux éléments
-	'attributes'  // aux valeurs d'attributs
+	'attributes'  // diffuse aux attributs
 ];
 
 FormBuilder.allowed_attr = [                    // Liste des attributs fixes autorisés
@@ -66,10 +66,11 @@ FormBuilder.allowed_attr = [                    // Liste des attributs fixes aut
 	'repeat'         /* nombre/tableau déterminant qu'il faut répéter @n fois ou en fonction de la taille du tableau */
 ];
 
-FormBuilder.ignore_rec =   [                   // Attributs à ne pas lancer récursivement (car inutile)
+FormBuilder.no_recursion =   [                   // Attributs à ne pas lancer récursivement (car inutile)
 	'parent',        /* ne pas lancer récursivement sur parent car sinon récursion infinie                            */
-	'scope'          /* ne pas lancer sur scope, car fait partie des méta-données                                     */
+	'scope',         /* ne pas lancer sur scope, car fait partie des méta-données                                     */
-],
+	'received'
+];
 
 
 
@@ -265,14 +266,14 @@ FormBuilder.replaceStatements = function(object, scope){
 
 	/* (2) Variables */
 	var key, r, tmpr, m;
-	var next_scope = scope;
+	var next_scope = {};
 
 
 
 	/* (3) On récupère le scope s'il est dans l'attribut 'scope' */
-	if( object.hasOwnProperty('scope') && object.scope instanceof Object )
+	// if( object.hasOwnProperty('scope') && object.scope instanceof Object )
-		for( key in object.scope )
+	// 	for( key in object.scope )
-			next_scope[key] = object.scope[key];
+	// 		next_scope[key] = object.scope[key];
 
 
 	/* [1] On remplace les valeurs
@@ -281,7 +282,7 @@ FormBuilder.replaceStatements = function(object, scope){
 
 		/* [1.1] Si c'est une string, on regarde s'il faut remplacer
 		=========================================================*/
-		if( FormBuilder.ignore_rec.indexOf(key) < 0 && typeof object[key] == 'string' ){
+		if( typeof object[key] == 'string' ){
 
 
 			/* (2.1) On cherche tous les TABLEAUX à remplacer
@@ -304,7 +305,7 @@ FormBuilder.replaceStatements = function(object, scope){
 				// {2} on attribue le tableau //
 				object[key] = scope[m_arr[m]];
 
-				console.log('arr', m_arr[m], scope[m_arr[m]]);
+				// console.log('arr', m_arr[m], scope[m_arr[m]]);
 
 			}
 
@@ -333,7 +334,7 @@ FormBuilder.replaceStatements = function(object, scope){
 				tmpr = new RegExp( "\{"+m_pri[m]+"\}", 'g' );
 				object[key] = object[key].replace(tmpr, scope[m_pri[m]]);
 
-				console.log('pri', m_pri[m], scope[m_pri[m]]);
+				// console.log('pri', m_pri[m], scope[m_pri[m]]);
 
 			}
 
@@ -369,7 +370,7 @@ FormBuilder.replaceStatements = function(object, scope){
 				tmpr = new RegExp( "\{\\$"+m_reg[m][1]+"\}", 'g' );
 				object[key] = object[key].replace(tmpr, scope[m_reg[m]]);
 
-				console.log('reg', m_reg[m], scope);
+				// console.log('reg', m_reg[m], scope);
 
 			}
 
@@ -428,21 +429,34 @@ FormBuilder.replaceStatements = function(object, scope){
 	=========================================================*/
 	for( key in object ){
 
-		/* S'il ne s'agit d'un attribut qu'on peut parcourir */
+		/* S'il ne s'agit d'un attribut interdit */
-		if( FormBuilder.ignore_rec.indexOf(key) < 0 ){
+		if( FormBuilder.spread_attr.indexOf(key) > -1 ){
 
-			/* (1) Si la clé est un 'diffuseur', envoie aussi le scope actuel (le tout cloné) */
+			/* (1) on envoie aussi le scope actuel (le tout cloné) */
-			if( FormBuilder.spread_attr.indexOf(key) > -1 )
+			var tmp = [
-				next_scope = JSON.parse( JSON.stringify(scope).slice(0,-1) + ',' + JSON.stringify(next_scope).slice(1) );
+				JSON.stringify(scope).slice(0,-1),
+				JSON.stringify(next_scope).slice(1)
+			];
 
-			/* (2) Si c'est un objet, on lance récursivement */
+			// si au moins une valeur @scope ET @next_scope
-			if( object[key] instanceof Object )
+			if( tmp[0].length > 2 && tmp[1].length > 2 )
-				object[key] = FormBuilder.replaceStatements(object[key], next_scope);
+				tmp[1] = ',' + tmp[1];
+
+			next_scope = JSON.parse( tmp[0] +''+ tmp[1] );
 
 			/* (3) Si c'est un tableau, on lance récursivement pour chaque item */
-			else if( object[key] instanceof Array )
+			if( object[key] instanceof Array )
-				for( var i in object[key] )
+				for( var i in object[key] ){
-					object[key][i] = FormBuilder.replaceStatements(object[key][i], next_scope);
+					console.log(object, key+'['+i+']', scope);
+					FormBuilder.replaceStatements(object[key][i], next_scope);
+				}
+
+			/* (2) Si c'est un objet, on lance récursivement */
+			else if( object[key] instanceof Object ){
+				console.log(object, key, scope);
+				FormBuilder.replaceStatements(object[key], next_scope);
+			}
+
 
 		}
 	}

view.php

@@ -26,7 +26,6 @@
 		<!-- Dépendences Javascript -->
 		<script type='text/javascript' src='/js/lib/crc32-min.js'                   ></script>  <!-- Système de hash unique et rapide         -->
 		<script type='text/javascript' src='/js/lib/local-storage-interface-min.js' ></script>  <!-- Interface de gestion du 'localStorage'   -->
-		<script type='text/javascript' src='/js/lib/form-builder.js'            ></script>  <!-- Gestion de construction de <form>        -->
 		<script type='text/javascript' src='/js/lib/html-builder-min.js'            ></script>  <!-- Gestion de construction de HTML          -->
 		<script type='text/javascript' src='/js/lib/input-checker-min.js'           ></script>  <!-- Gestion dynamique des saisies            -->
 		<script type='text/javascript' src='/js/lib/form-deflater-min.js'           ></script>  <!-- Gestion des formulaires js-friendly      -->
@@ -36,6 +35,9 @@
 		<script type='text/javascript' src='/js/lib/notif-min.js'                   ></script>  <!-- Gestion des notifications                -->
 		<script type='text/javascript' src='/js/lib/shortcut-manager.js'            ></script>  <!-- Gestion des raccourcis clavier           -->
 
+		<script type='text/javascript' src='/js/lib/form-builder.js'            ></script>  <!-- Gestion de construction de <form>        -->
+		<script type='text/javascript' src='/js/lib/elemet-object.js'           ></script>  <!-- Gestion de construction de <form>        -->
+
 		<!-- Dépendences Spéficiques pré-chargeables -->
 		<script type='text/javascript' src='/js/includes/input-html-phone-data-min.js'    ></script>  <!-- Gestion du constructeur HTML pour la page d'acquisition 'phone'    -->
 		<script type='text/javascript' src='/js/includes/input-html-facebook-data-min.js' ></script>  <!-- Gestion du constructeur HTML pour la page d'acquisition 'facebook' -->