From e09d2f3651802e4a256bb3771b869eb9c4391735 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 20 Sep 2016 20:16:00 +0200 Subject: [PATCH] Prise en compte du css avec l'attribut 'css' dans le 'form-builder' --- js/lib/form-builder-min.js | 6 +- js/lib/form-builder.js | 99 +++++++++++++++++++++------------ js/lib/form-builder/main-min.js | 10 ++-- js/lib/form-builder/main.js | 12 ++-- view.php | 2 +- 5 files changed, 77 insertions(+), 52 deletions(-) diff --git a/js/lib/form-builder-min.js b/js/lib/form-builder-min.js index 2855846..63687eb 100644 --- a/js/lib/form-builder-min.js +++ b/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 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 + ---------------------------------------------------------*/ + if( definition.hasOwnProperty('attributes') ){ - /* (2) On ajoute les attributs - ---------------------------------------------------------*/ - if( definition.hasOwnProperty('attributes') ){ + // Pour chaque attribut, on définit + for( i in definition.attributes ) + // Pour chaque node + for( n in built[b].node ) + built[b].node[n].setAttribute( i, FormBuilder.readRef(ref_table, definition.attributes[i]) ); + + } + + + /* (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') ){ + + // Note: Override les enfants + for( n in built[b].node ) + built[b].node[n].innerHTML = FormBuilder.readRef(ref_table, definition.text); + + } + + + /* (6) On ajoute les listeners + ---------------------------------------------------------*/ + if( definition.hasOwnProperty('listeners') ){ + + // Pour chaque listener + for( i in definition.listeners ) - // Pour chaque attribut, on définit - for( i in definition.attributes ) // Pour chaque node for( n in built[b].node ) - built[b].node[n].setAttribute( i, FormBuilder.readRef(ref_table, definition.attributes[i]) ); + built[b].node[n].addEventListener( i, FormBuilder.readRef(ref_table, definition.listeners[i]), false ); - } - - - /* (3) On ajoute le contenu HTML - ---------------------------------------------------------*/ - if( definition.hasOwnProperty('text') ){ - - // Note: Override les enfants - for( n in built[b].node ) - built[b].node[n].innerHTML = FormBuilder.readRef(ref_table, definition.text); - - } - - - /* (4) On ajoute les listeners - ---------------------------------------------------------*/ - if( definition.hasOwnProperty('listeners') ){ - - // Pour chaque listener - for( i in definition.listeners ) - - // Pour chaque node - for( n in built[b].node ) - built[b].node[n].addEventListener( i, FormBuilder.readRef(ref_table, definition.listeners[i]), false ); - - } + } - /* [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 auquel on veut appliquer le css +* @css 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]; + +}; diff --git a/js/lib/form-builder/main-min.js b/js/lib/form-builder/main-min.js index a274d4e..6113339 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:"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:"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", +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", +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:"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:"input.text",$name:"username",$placeholder:"{usernameph}",$value:"{username}"},{node:"input.submit",$value:"Enregistrer", +attributes:{"class":"primary sub-number"}}],next_nodes:[{node:"br"}]},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 90d3695..1191681 100644 --- a/js/lib/form-builder/main.js +++ b/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 = ("

\n"+ @@ -132,9 +130,9 @@ fb.build({ existing: ['Jean', 'Archibald', 'Daniel', 'Maurice'], username: 'moi-meme', usernameph: 'Pseudo', - clicklistener: function(e){ console.log('clicked', e); }, - existingsel: function(e){ console.log('selected', e); }, - getoptval: function(opt){ return opt; } + clicklistener: function(e){ console.log('clicked', e); }, + existingsel: function(e){ console.log('selected', e); }, + getoptval: function(opt){ return opt; } }); fb.attach(document.body); diff --git a/view.php b/view.php index a3a547b..7d17f1a 100755 --- a/view.php +++ b/view.php @@ -123,7 +123,7 @@ - +