Prise en compte du css avec l'attribut 'css' dans le 'form-builder'
This commit is contained in:
xdrm-brackets
parent
f4f749ffcc
commit
e09d2f3651
|
|
@ -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,
|
||||
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};
|
||||
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,
|
||||
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]};
|
||||
|
|
|
|||
|
|
@ -1013,53 +1013,65 @@ 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
|
||||
---------------------------------------------------------*/
|
||||
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> 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];
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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="<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 ou \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",
|
||||
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="<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 ou \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);
|
||||
|
|
|
|||
|
|
@ -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"+
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
2
view.php
2
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue