Prise en compte du css avec l'attribut 'css' dans le 'form-builder'

js/lib/form-builder-min.js

@@ -14,7 +14,7 @@ FormBuilder.readRef=function(a,b){var f,d="";if("string"==typeof b&&FormBuilder.
 FormBuilder.createElements=function(a,b,f){var d=[],e,c,k,h,g,l=["NULL"],n,p;if(a.hasOwnProperty("repeat")&&(g=FormBuilder.readRef(b,a.repeat.n),!isNaN(g)))for(l=[],f.hasOwnProperty(a.repeat.id+":i")||(f[a.repeat.id+":i"]=ref(0)),f.hasOwnProperty(a.repeat.id+":n")||(f[a.repeat.id+":n"]=ref(g)),e=0;e<g;e++)l[e]={},l[e][a.repeat.id+":i"]=e,l[e][a.repeat.id+":n"]=g;if(a.hasOwnProperty("browse")&&(g=FormBuilder.readRef(b,a.browse.array),g instanceof Array)){l=[];n=[];p={};k=new RegExp(a.browse.id+".(.+)");
 for(e in f)k.test(e)&&n.push(RegExp.$1);if(a.browse.hasOwnProperty("funcs"))for(e in a.browse.funcs)k.test(e)&&(p[RegExp.$1]=FormBuilder.readRef(b,a.browse.funcs[e]));f.hasOwnProperty(a.browse.id+":i")||(f[a.browse.id+":i"]=ref(0));f.hasOwnProperty(a.browse.id+":n")||(f[a.browse.id+":n"]=ref(g));for(e=0;e<g.length;e++){l[e]={};for(c in n)g[e].hasOwnProperty(n[c])?l[e][a.browse.id+"."+n[c]]=g[e][n[c]]:p.hasOwnProperty(n[c])&&(l[e][a.browse.id+"."+n[c]]=p[n[c]](g[e]));l[e][a.browse.id+":i"]=e;l[e][a.browse.id+
 ":n"]=g.length}}for(c=0;c<l.length;c++){d[c]={prev:[],node:[],next:[]};if(l[c]instanceof Object)for(e in l[c])b[f[e]]=l[c][e];if(a.hasOwnProperty("prev_nodes"))for(e in a.prev_nodes)d[c].prev=FormBuilder.createElements(a.prev_nodes[e],b,f);if(a.hasOwnProperty("next_nodes"))for(e in a.next_nodes)d[c].next=FormBuilder.createElements(a.next_nodes[e],b,f);if(a.hasOwnProperty("node_link"))for(e in g=FormBuilder.createElements(a.node_link,b,f),g)d[c].prev=d[c].prev.concat(g[e].prev),d[c].node=d[c].node.concat(g[e].node),
-d[c].next=g[e].next.concat(d[c].next);else a.hasOwnProperty("node_type")&&d[c].node.push(document.createElement(FormBuilder.readRef(b,a.node_type)));if(a.hasOwnProperty("attributes"))for(e in a.attributes)for(h in d[c].node)d[c].node[h].setAttribute(e,FormBuilder.readRef(b,a.attributes[e]));if(a.hasOwnProperty("text"))for(h in d[c].node)d[c].node[h].innerHTML=FormBuilder.readRef(b,a.text);if(a.hasOwnProperty("listeners"))for(e in a.listeners)for(h in d[c].node)d[c].node[h].addEventListener(e,FormBuilder.readRef(b,
+d[c].next=g[e].next.concat(d[c].next);else a.hasOwnProperty("node_type")&&d[c].node.push(document.createElement(FormBuilder.readRef(b,a.node_type)));if(a.hasOwnProperty("attributes"))for(e in a.attributes)for(h in d[c].node)d[c].node[h].setAttribute(e,FormBuilder.readRef(b,a.attributes[e]));if(a.hasOwnProperty("css"))for(h in d[c].node)FormBuilder.applyCSS(d[c].node[h],a.css);if(a.hasOwnProperty("text"))for(h in d[c].node)d[c].node[h].innerHTML=FormBuilder.readRef(b,a.text);if(a.hasOwnProperty("listeners"))for(e in a.listeners)for(h in d[c].node)d[c].node[h].addEventListener(e,
-a.listeners[e]),!1);if(a.hasOwnProperty("children"))for(e in a.children)for(h in g=FormBuilder.createElements(a.children[e],b,f),d[c].node)FormBuilder.attachElements(d[c].node[h],g)}return a.dom=d};
+FormBuilder.readRef(b,a.listeners[e]),!1);if(a.hasOwnProperty("children"))for(e in a.children)for(h in g=FormBuilder.createElements(a.children[e],b,f),d[c].node)FormBuilder.attachElements(d[c].node[h],g)}return a.dom=d};
 FormBuilder.attachElements=function(a,b){var f,d;for(f in b){for(d in b[f].prev)b[f].prev[d]instanceof Element&&a.appendChild(b[f].prev[d]),b[f].prev[d]instanceof Object&&FormBuilder.attachElements(a,[b[f].prev[d]]);for(d in b[f].node)b[f].node[d]instanceof Element&&a.appendChild(b[f].node[d]),b[f].node[d]instanceof Object&&FormBuilder.attachElements(a,[b[f].node[d]]);for(d in b[f].next)b[f].next[d]instanceof Element&&a.appendChild(b[f].next[d]),b[f].next[d]instanceof Object&&FormBuilder.attachElements(a,
-[b[f].next[d]])}};
+[b[f].next[d]])}};FormBuilder.applyCSS=function(a,b){for(var f in b)a.style[f]=b[f]};

js/lib/form-builder.js

@@ -1013,13 +1013,14 @@ FormBuilder.createElements = function(definition, ref_table, ref_assoc){
 		}
 
 		/* (2) Si on a le type de <tag> hmtl */
-		else if( definition.hasOwnProperty('node_type') )
+		else if( definition.hasOwnProperty('node_type') ){
+
 			built[b].node.push( document.createElement( FormBuilder.readRef(ref_table, definition.node_type) ) );
 
+		}
 
 
-
+		/* (3) On ajoute les attributs
-			/* (2) On ajoute les attributs
 		---------------------------------------------------------*/
 		if( definition.hasOwnProperty('attributes') ){
 
@@ -1032,7 +1033,18 @@ FormBuilder.createElements = function(definition, ref_table, ref_assoc){
 		}
 
 
-			/* (3) On ajoute le contenu HTML
+		/* (4) On ajoute le CSS
+		---------------------------------------------------------*/
+		if( definition.hasOwnProperty('css') ){
+
+			// On applique pour chaque noeud
+			for( n in built[b].node )
+				FormBuilder.applyCSS(built[b].node[n], definition.css);
+
+		}
+
+
+		/* (5) On ajoute le contenu HTML
 		---------------------------------------------------------*/
 		if( definition.hasOwnProperty('text') ){
 
@@ -1043,7 +1055,7 @@ FormBuilder.createElements = function(definition, ref_table, ref_assoc){
 		}
 
 
-			/* (4) On ajoute les listeners
+		/* (6) On ajoute les listeners
 		---------------------------------------------------------*/
 		if( definition.hasOwnProperty('listeners') ){
 
@@ -1058,8 +1070,8 @@ FormBuilder.createElements = function(definition, ref_table, ref_assoc){
 
 
 
-		/* [6] On ajoute tous les enfants
+		/* (7) On ajoute les enfants
-		=========================================================*/
+		---------------------------------------------------------*/
 		if( definition.hasOwnProperty('children') ){
 
 			/* (1) Pour chaque enfant */
@@ -1078,7 +1090,7 @@ FormBuilder.createElements = function(definition, ref_table, ref_assoc){
 	}
 
 
-	/* [7] On ajoute l'élément à la définition et retourne
+	/* [8] On ajoute l'élément à la définition et retourne
 	=========================================================*/
 	definition.dom = built;
 	return built;
@@ -1149,3 +1161,18 @@ FormBuilder.attachElements = function(parent, set){
 	}
 
 };
+
+
+/* APPLIQUE UN STYLE CSS-LIKE A UN ELEMENT
+*
+* @element<Element> 									Element auquel on veut appliquer le css
+* @css<Object> 											Objet contenant les règles css
+*
+*/
+FormBuilder.applyCSS = function(element, css){
+
+	/* On applique chaque règle */
+	for( var r in css )
+		element.style[r] = css[r];
+
+};

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:"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"},
+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}"},listeners:{click:"{xx()}"}},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select",
-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}"},
+attributes:{"data-name":"{name}"},children:[{node:"option",attributes:{value:"{options:i}"},text:"{options.value}",browse:{array:"{options[]}",funcs:{"options.value":"{getoptval()}"}}}],listeners:{change:"{listener()}"}}]}},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:"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"},
+{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",
-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}"},
+$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",
-{node:"input.submit",$value:"Enregistrer",attributes:{"class":"primary sub-number"}}],next_nodes:[{node:"br4"}]},a="<h4 data-icon='o' class='new-contact color2'> \n\t<input type='hidden' data-name='uid' value='@uid'>\n\t<input type='hidden' data-name='call' value='@call'>\n\t<input type='hidden' data-name='sms' value='@sms'>\n\t<input type='hidden' data-name='countcall' value='@countcall'>\n\t<input type='hidden' data-name='countsms' value='@countsms'>\n\t<input type='text' data-name='number'    placeholder='Num\u00e9ro de t\u00e9l\u00e9phone' value='@number'    > \n\t<span class='select-container nobold'><select data-name='existing'>\n\t\t<option value='.'>Utiliser pseudo</option>\n@contacts\t</select></span>\n\t&nbsp;&nbsp;&nbsp;&nbsp;ou&nbsp;&nbsp;&nbsp;&nbsp;\n\t<input type='text' data-name='username'  placeholder='Pseudo'              value='@username'  > \n\t<input type='submit' class='primary sub-number'                            value='Enregistrer'>\n</h4>\n\n",
+attributes:{"class":"primary sub-number"}}],next_nodes:[{node:"br"}]},a="<h4 data-icon='o' class='new-contact color2'> \n\t<input type='hidden' data-name='uid' value='@uid'>\n\t<input type='hidden' data-name='call' value='@call'>\n\t<input type='hidden' data-name='sms' value='@sms'>\n\t<input type='hidden' data-name='countcall' value='@countcall'>\n\t<input type='hidden' data-name='countsms' value='@countsms'>\n\t<input type='text' data-name='number'    placeholder='Num\u00e9ro de t\u00e9l\u00e9phone' value='@number'    > \n\t<span class='select-container nobold'><select data-name='existing'>\n\t\t<option value='.'>Utiliser pseudo</option>\n@contacts\t</select></span>\n\t&nbsp;&nbsp;&nbsp;&nbsp;ou&nbsp;&nbsp;&nbsp;&nbsp;\n\t<input type='text' data-name='username'  placeholder='Pseudo'              value='@username'  > \n\t<input type='submit' class='primary sub-number'                            value='Enregistrer'>\n</h4>\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);

js/lib/form-builder/main.js

@@ -24,7 +24,6 @@ var custom_definition = {
 			'value':       '{value}',
 			'placeholder': '{placeholder}'
 		},
-		next_nodes: [ { node: 'br' } ],
 		listeners: { 'click': '{xx()}' }
 	},
 
@@ -49,8 +48,7 @@ var custom_definition = {
 				],
 				listeners: { 'change': '{listener()}' }
 			}
-		],
+		]
-		next_nodes: [{ node: 'br2' }]
 	}
 };
 
@@ -89,7 +87,7 @@ var contactForm = {
 		{ node: 'input.text', $name: 'username', $placeholder: '{usernameph}', $value: '{username}'},
 		{ node: 'input.submit', $value: 'Enregistrer', attributes: { class: 'primary sub-number'} }
 	],
-	next_nodes: [ { node: 'br4' } ]
+	next_nodes: [ { node: 'br' } ]
 
 };
 var a = ("<h4 data-icon='o' class='new-contact color2'> \n"+

view.php

@@ -123,7 +123,7 @@
 
 		<!-- Dépendences Javascript après chargement des éléments -->
 		<script type='text/javascript' src='/js/lib/form-builder/main.js'></script>
-		<!-- <script type='text/javascript' src='/js/action-script-min.js'></script> -->
+		<script type='text/javascript' src='/js/action-script-min.js'></script>
 
 	</body>
 </html>