Gestion du scope avancement
This commit is contained in:
xdrm-brackets
parent
5f0a670d5f
commit
21f9e10fe6
|
|
@ -0,0 +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=
|
||||
{"/^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",
|
||||
$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}}"}]};
|
||||
|
|
@ -42,12 +42,14 @@
|
|||
//
|
||||
// {__attributes__} - default variable name for the attributes
|
||||
// {__children__} - default variable name for the children
|
||||
// {__html__} - default variable name for the html given in higher level
|
||||
|
||||
/////////////////////////
|
||||
// REGURAL EXPRESSIONS //
|
||||
/////////////////////////
|
||||
// /^yy$/ - where '^yy$' is a regular expression, matches will be added to the input parameters named like so : '$1', '$2'
|
||||
// /^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
|
||||
|
||||
|
||||
////////////////////////
|
||||
|
|
@ -58,11 +60,9 @@
|
|||
// next_nodes - the set of the element's next elements
|
||||
// prev_nodes - the set of the element's previous elements
|
||||
// node_type - real node-type (to create element in javascript)
|
||||
// node_attr - real attributes array (to create element in javascript)
|
||||
// node_children - real children arary (to create element in javascript)
|
||||
// text - overrides all to specify the text content corresponding of the element
|
||||
// children - the set of the element's children (doesn't check if it is a container or not)
|
||||
// attributes - attributes are replaced in a lower level
|
||||
// attributes - attributes of the element ()
|
||||
// listeners - contains the associations: 'eventName' => 'listenerFuncName'
|
||||
// $xxx - where 'xxx' is a variable name that will be replaced in a lower level
|
||||
// $$zzz - where 'zzz' is an array variable name that will be split in a lower level
|
||||
|
|
@ -70,13 +70,31 @@
|
|||
// 1- if an array is given, the element will be repeated for each item of the array
|
||||
// 2- if a number @n is given, the element will be repeated @n times
|
||||
|
||||
|
||||
|
||||
////////////////////////
|
||||
// LANGAGE 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'
|
||||
};
|
||||
|
||||
var default_definition = {
|
||||
'input': { node_type: 'input', node_attr: '{__attributes__}' },
|
||||
'/^h([1-6])$/': { node_type: 'h{$1}', node_attr: '{__attributes__}', node_children: '{__children__}' },
|
||||
'br': { node_type: 'br', },
|
||||
'option': { node_type: 'option', node_attr: '{__attributes__}', node_children: '{__children__}' },
|
||||
'select': { node_type: 'select', node_attr: '{__attributes__}', node_children: '{__children__}' },
|
||||
'span': { node_type: 'span', node_attr: '{__attributes__}', node_children: '{__children__}' }
|
||||
'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' }
|
||||
};
|
||||
|
||||
var custom_definition = {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
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.allowed_attr="node node_type node_attr node_children next_nodes prev_nodes attributes children text repeat".split(" ");
|
||||
FormBuilder.ignore_rec=["parent","scope"];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,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,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,d){a=a instanceof Object?a:{};d=d instanceof Object?d:{};var b,f,e,g=d;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 c=[];(e=f.exec(a[b]))&&c.push(e[1]);for(e in c)d.hasOwnProperty(c[e])||(d[c[e]]=[]),a[b]=d[c[e]],console.log("arr",c[e],d[c[e]]);if(!(0<c.length)){f=FormBuilder.regex.primitive_ouput_value;
|
||||
for(c=[];null!==(e=f.exec(a[b]));)c.push(e[1]);for(e in c)d.hasOwnProperty(c[e])||(d[c[e]]=""),f=new RegExp("{"+c[e]+"}","g"),console.log("pri",c[e],d[c[e]]),a[b]=a[b].replace(f,d[c[e]]);if(!(0<c.length)){f=FormBuilder.regex.regex_ouput_value;lasti=-1;for(c=[];null!==(e=f.exec(a[b]))&&!(lasti>=f.lastIndex);)lasti=f.lastIndex,c.push(e[1]);for(e in c)d.hasOwnProperty(c[e])||(d[c[e]]=""),f=new RegExp("{\\$"+c[e][1]+"}","g"),console.log("reg",c[e],d),a[b]=a[b].replace(f,d[c[e]]);if(!(0<c.length)){f=FormBuilder.regex.array_output_value;
|
||||
for(c=[];null!==(e=f.exec(a[b]));)c.push(e[1]);for(e in c)d.hasOwnProperty(c[e])||(d[c[e]]=""),f=new RegExp("/{"+c[e]+"}/","g"),a[b].replace(f,d[c[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)0>FormBuilder.ignore_rec.indexOf(b)&&(a[b]instanceof Object||a[b]instanceof Array)&&(a[b]=FormBuilder.replaceStatements(a[b],g));return a};
|
||||
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-]+)$/};
|
||||
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.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.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.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;
|
||||
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;
|
||||
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);else if(a[b]instanceof Array)for(var h in a[b])a[b][h]=FormBuilder.replaceStatements(a[b][h],g);return a};
|
||||
|
|
|
|||
|
|
@ -48,11 +48,16 @@ FormBuilder.regex = {
|
|||
array_input_key: /^\$\$([a-z-]+)$/ // Regex associée à la clé d'un tableau
|
||||
};
|
||||
|
||||
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
|
||||
];
|
||||
|
||||
FormBuilder.allowed_attr = [ // Liste des attributs fixes autorisés
|
||||
'node', /* nom du modèle à utiliser (dans @defs_object) */
|
||||
'node_type', /* nom réel de l'élément */
|
||||
'node_attr', /* tableau des attrbuts réels de l'élément */
|
||||
'node_children', /* tableau des enfants (innerHTML) du noeud courant */
|
||||
'next_nodes', /* tableau des enfants à ajouter à la suite de l'élément */
|
||||
'prev_nodes', /* tableau des enfants à ajouter à avant l'élément */
|
||||
'attributes', /* tableau des attributs à passer au niveau inférieur */
|
||||
|
|
@ -262,6 +267,8 @@ FormBuilder.replaceStatements = function(object, scope){
|
|||
var key, r, tmpr, m;
|
||||
var next_scope = scope;
|
||||
|
||||
|
||||
|
||||
/* (3) On récupère le scope s'il est dans l'attribut 'scope' */
|
||||
if( object.hasOwnProperty('scope') && object.scope instanceof Object )
|
||||
for( key in object.scope )
|
||||
|
|
@ -296,6 +303,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]]);
|
||||
|
||||
}
|
||||
|
|
@ -323,9 +331,10 @@ FormBuilder.replaceStatements = function(object, scope){
|
|||
|
||||
// {2} on remplace toutes les occurences par la valeur //
|
||||
tmpr = new RegExp( "\{"+m_pri[m]+"\}", 'g' );
|
||||
console.log('pri', m_pri[m], scope[m_pri[m]]);
|
||||
object[key] = object[key].replace(tmpr, scope[m_pri[m]]);
|
||||
|
||||
console.log('pri', m_pri[m], scope[m_pri[m]]);
|
||||
|
||||
}
|
||||
|
||||
/* (1.4) Si on a trouvé qqch, on passe à la clé suivante */
|
||||
|
|
@ -358,9 +367,10 @@ FormBuilder.replaceStatements = function(object, scope){
|
|||
|
||||
// {2} on remplace toutes les occurences par la valeur //
|
||||
tmpr = new RegExp( "\{\\$"+m_reg[m][1]+"\}", 'g' );
|
||||
console.log('reg', m_reg[m], scope);
|
||||
object[key] = object[key].replace(tmpr, scope[m_reg[m]]);
|
||||
|
||||
console.log('reg', m_reg[m], scope);
|
||||
|
||||
}
|
||||
|
||||
/* (1.4) Si on a trouvé qqch, on passe à la clé suivante */
|
||||
|
|
@ -421,12 +431,18 @@ FormBuilder.replaceStatements = function(object, scope){
|
|||
/* S'il ne s'agit d'un attribut qu'on peut parcourir */
|
||||
if( FormBuilder.ignore_rec.indexOf(key) < 0 ){
|
||||
|
||||
/* Si c'est un objet ou tableau, on lance récursivement */
|
||||
if( object[key] instanceof Object || object[key] instanceof Array ){
|
||||
/* (1) Si la clé est un 'diffuseur', envoie aussi le scope actuel (le tout cloné) */
|
||||
if( FormBuilder.spread_attr.indexOf(key) > -1 )
|
||||
next_scope = JSON.parse( JSON.stringify(scope).slice(0,-1) + ',' + JSON.stringify(next_scope).slice(1) );
|
||||
|
||||
/* (2) Si c'est un objet, on lance récursivement */
|
||||
if( object[key] instanceof Object )
|
||||
object[key] = FormBuilder.replaceStatements(object[key], next_scope);
|
||||
|
||||
}
|
||||
/* (3) Si c'est un tableau, on lance récursivement pour chaque item */
|
||||
else if( object[key] instanceof Array )
|
||||
for( var i in object[key] )
|
||||
object[key][i] = FormBuilder.replaceStatements(object[key][i], next_scope);
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
document.body.innerHTML="";"use strict";
|
||||
var default_definition={input:{node_type:"input",node_attr:"{__attributes__}"},"/^h([1-6])$/":{node_type:"h{$1}",node_attr:"{__attributes__}",node_children:"{__children__}"},br:{node_type:"br"},option:{node_type:"option",node_attr:"{__attributes__}",node_children:"{__children__}"},select:{node_type:"select",node_attr:"{__attributes__}",node_children:"{__children__}"},span:{node_type:"span",node_attr:"{__attributes__}",node_children:"{__children__}"}},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","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:hidden",$name:"total",$value:"{countcall} calls + {countsms} sms to {number}"},{node:"input:text",$name:"number",$value:"{number}"},{node:"custom-select",$name:"existing",$$options:"{{options}}"}]},fb=new FormBuilder(document.body,form);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",options:["a","b","c","d"]});
|
||||
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"}},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","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:hidden",$name:"total",$value:"{countcall} calls + {countsms} sms to {number}"},
|
||||
{node:"input:text",$name:"number",$value:"{number}"},{node:"custom-select",$name:"existing",$$options:"{{options}}"}]},fb=new FormBuilder(document.body,form);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",options:["a","b","c","d"]});
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ document.body.innerHTML = '';
|
|||
|
||||
|
||||
var default_definition = {
|
||||
'input': { node_type: 'input', node_attr: '{__attributes__}' },
|
||||
'/^h([1-6])$/': { node_type: 'h{$1}', node_attr: '{__attributes__}', node_children: '{__children__}' },
|
||||
'br': { node_type: 'br' },
|
||||
'option': { node_type: 'option', node_attr: '{__attributes__}', node_children: '{__children__}' },
|
||||
'select': { node_type: 'select', node_attr: '{__attributes__}', node_children: '{__children__}' },
|
||||
'span': { node_type: 'span', node_attr: '{__attributes__}', node_children: '{__children__}' }
|
||||
'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' }
|
||||
};
|
||||
|
||||
var custom_definition = {
|
||||
|
|
|
|||
Loading…
Reference in New Issue