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

This commit is contained in:
xdrm-brackets 2016-09-20 20:16:00 +02:00
parent f4f749ffcc
commit e09d2f3651
5 changed files with 77 additions and 52 deletions

View File

@ -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+".(.+)"); 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+ 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), ":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, 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]};

View File

@ -1013,13 +1013,14 @@ FormBuilder.createElements = function(definition, ref_table, ref_assoc){
} }
/* (2) Si on a le type de <tag> hmtl */ /* (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) ) ); 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') ){ 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') ){ 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') ){ 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') ){ if( definition.hasOwnProperty('children') ){
/* (1) Pour chaque enfant */ /* (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; definition.dom = built;
return 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];
};

View File

@ -1,7 +1,7 @@
document.body.innerHTML="";"use strict"; 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); 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);

View File

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

View File

@ -123,7 +123,7 @@
<!-- Dépendences Javascript après chargement des éléments --> <!-- 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/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> </body>
</html> </html>