Gestion du scope avancement

This commit is contained in:
xdrm-brackets 2016-09-17 16:04:03 +02:00
parent 5f0a670d5f
commit 21f9e10fe6
6 changed files with 72 additions and 34 deletions

3
doc/form-builder/behaviour-min.js vendored Normal file
View File

@ -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}}"}]};

View File

@ -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 = {

View File

@ -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};

View File

@ -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);
}
}

View File

@ -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"]});

View File

@ -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__}' },
'input': { node_type: 'input' },
'/^h([1-6])$/': { node_type: 'h{$1}' },
'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__}' }
'option': { node_type: 'option' },
'select': { node_type: 'select' },
'span': { node_type: 'span' }
};
var custom_definition = {