Gestion du remplacement avec passage de scope fonctionnel pour l'instant, reste à lier les définitions de this.defs_object
This commit is contained in:
xdrm-brackets
parent
3326f44b15
commit
b285d75fba
|
|
@ -1,3 +1,6 @@
|
||||||
var FormBuilder=function(a,d){this.parent_element=a;this.form_object=d;FormBuilder.formatFormObject(this.form_object)};
|
var FormBuilder=function(a,c){this.parent_element=a;this.form_object=c;FormBuilder.formatFormObject(this.form_object)};
|
||||||
FormBuilder.prototype={form_object:this.form_object,defs_object:{},parent_element:this.parent_element,allowed_attr:"node node_type node_attr node_children next_nodes prev_nodes attributes children text repeat".split(" "),built_form:null,regex:{primitive_ouput_value:/\{([a-z-]+)\}/g,primitive_input_key:/^\$([a-z-]+)$/,array_output_set:/\{\{([a-z-]+)\}\}/g,array_output_value:/\{([a-z-]+)\.([a-z-]+)\}/g,array_input_key:/^\$\$([a-z-]+)$/}};
|
FormBuilder.prototype={form_object:this.form_object,defs_object:{},parent_element:this.parent_element,allowed_attr:"node node_type node_attr node_children next_nodes prev_nodes attributes children text repeat".split(" "),built_form:null,regex:{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.formatFormObject=function(a){if(a.hasOwnProperty("children"))for(var d in a.children)a.children[d].parent=a,FormBuilder.formatFormObject(a.children[d]);return a};FormBuilder.replaceStatements=function(a,d){for(var e in a)if("string"==typeof a[e]){for(var b=FormBuilder.prototype.regex.primitive_ouput_value,c=[];null!==c[c.push(b.exec(a[e]))-1];);for(b=0;b<c.length-1;b++)c[b]=c[b][1];console.log(c)}return a};
|
FormBuilder.formatFormObject=function(a){if(a.hasOwnProperty("children"))for(var c in a.children)a.children[c].parent=a,FormBuilder.formatFormObject(a.children[c]);return a};FormBuilder.prototype.add_definition=function(a){for(var c in a)this.defs_object[c]=a[c]};
|
||||||
|
FormBuilder.replaceStatements=function(a,c){var b,e,d;for(b in a)if("parent"!=b&&"string"==typeof a[b]){e=FormBuilder.prototype.regex.array_output_set;var f=[];d=e.exec(a[b]);null!==d&&f.push(d[1]);for(d in f)c.hasOwnProperty(f[d])||(c[f[d]]=[]),a[b]=c[f[d]];if(!(0<f.length)){e=FormBuilder.prototype.regex.primitive_ouput_value;for(var g=[];null!==(d=e.exec(a[b]));)g.push(d[1]);for(d in g)c.hasOwnProperty(g[d])||(c[g[d]]=""),e=new RegExp("{"+g[d]+"}","g"),a[b]=a[b].replace(e,c[g[d]]);if(!(0<g.length)){e=
|
||||||
|
FormBuilder.prototype.regex.array_output_value;for(g=[];null!==(d=e.exec(a[b]));)g.push(d[1]);for(d in g)c.hasOwnProperty(f[d])||(c[f[d]]=""),e=new RegExp("/{"+f[d]+"}/","g"),a[b].replace(e,c[f[d]])}}}for(b in a)FormBuilder.prototype.regex.primitive_input_key.test(b)?c[b.substring(1)]=a[b]:FormBuilder.prototype.regex.array_input_key.test(b)&&(c[b.substring(2)]=a[b]);console.log("scope",c);for(b in a)"parent"!=b&&(a[b]instanceof Object||a[b]instanceof Array)&&(a[b]=FormBuilder.replaceStatements(a[b],
|
||||||
|
c));return a};
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@ FormBuilder.prototype = {
|
||||||
regex: {
|
regex: {
|
||||||
primitive_ouput_value: /\{([a-z-]+)\}/g,
|
primitive_ouput_value: /\{([a-z-]+)\}/g,
|
||||||
primitive_input_key: /^\$([a-z-]+)$/,
|
primitive_input_key: /^\$([a-z-]+)$/,
|
||||||
array_output_set: /\{\{([a-z-]+)\}\}/g,
|
array_output_set: /^\{\{([a-z-]+)\}\}$/,
|
||||||
array_output_value: /\{([a-z-]+)\.([a-z-]+)\}/g,
|
array_output_value: /\{([a-z-]+)\.([a-z-]+)\}/g,
|
||||||
array_input_key: /^\$\$([a-z-]+)$/
|
array_input_key: /^\$\$([a-z-]+)$/
|
||||||
}
|
}
|
||||||
|
|
@ -67,6 +67,19 @@ FormBuilder.formatFormObject = function(object){
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/* AJOUTE UNE DEFINITION
|
||||||
|
*
|
||||||
|
* @def_object<Object> Objet de définition
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
FormBuilder.prototype.add_definition = function(def_object){
|
||||||
|
|
||||||
|
for( var key in def_object )
|
||||||
|
this.defs_object[key] = def_object[key];
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
/* REMPLACE RECURSIVEMENT LES VALEURS DE @OBJECT AVEC LE @SCOPE -> RECURSIF
|
/* REMPLACE RECURSIVEMENT LES VALEURS DE @OBJECT AVEC LE @SCOPE -> RECURSIF
|
||||||
*
|
*
|
||||||
* @object<Object> Objet dans lequel remplacer les valeurs
|
* @object<Object> Objet dans lequel remplacer les valeurs
|
||||||
|
|
@ -77,35 +90,138 @@ FormBuilder.formatFormObject = function(object){
|
||||||
*/
|
*/
|
||||||
FormBuilder.replaceStatements = function(object, scope){
|
FormBuilder.replaceStatements = function(object, scope){
|
||||||
|
|
||||||
/* [1] Pour chaque attribut (value is string)
|
/* [0] Initialisation
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
for( var key in object ){
|
var key, r, tmpr, m;
|
||||||
|
var next_scope = scope;
|
||||||
|
|
||||||
/* (1) Si la valeur est une string */
|
|
||||||
if( typeof object[key] == 'string' ){
|
|
||||||
|
|
||||||
/* [1] On cherche toutes les variables PRIMITIVES à remplacer
|
/* [1] On remplace les valeurs
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
/* (1) On récupère la regex */
|
for( key in object ){
|
||||||
var r = FormBuilder.prototype.regex.primitive_ouput_value,
|
|
||||||
m,
|
|
||||||
matches = [];
|
|
||||||
|
|
||||||
/* (2) Tant que ça match */
|
/* [1.1] Si c'est une string, on regarde s'il faut remplacer
|
||||||
// while( m = r.exec(object[key]) !== null ){
|
=========================================================*/
|
||||||
// matches.push( m[1] );
|
if( key != 'parent' && typeof object[key] == 'string' ){
|
||||||
// }
|
|
||||||
|
|
||||||
while( matches[ matches.push(r.exec(object[key])) -1 ] !== null );
|
|
||||||
|
|
||||||
for( var i = 0 ; i < matches.length-1 ; i++ )
|
/* (2.1) On cherche tous les TABLEAUX à remplacer
|
||||||
matches[i] = matches[i][1];
|
---------------------------------------------------------*/
|
||||||
|
/* (1.1) On récupère les remplacements de TABLEAUX */
|
||||||
|
m = null, r = FormBuilder.prototype.regex.array_output_set;
|
||||||
|
var m_arr = [];
|
||||||
|
|
||||||
|
/* (1.2) Si ça match */
|
||||||
|
m = r.exec(object[key]);
|
||||||
|
if( m !== null )
|
||||||
|
m_arr.push( m[1] );
|
||||||
|
|
||||||
|
/* (1.3) Pour chaque match */
|
||||||
|
for( m in m_arr ){
|
||||||
|
|
||||||
|
// {1} Si la var n'est pas dans le scope //
|
||||||
|
if( !scope.hasOwnProperty(m_arr[m]) )
|
||||||
|
scope[m_arr[m]] = []; // on met un tableau vide
|
||||||
|
|
||||||
|
// {2} on attribue le tableau //
|
||||||
|
object[key] = scope[m_arr[m]];
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* (1.4) Si on a trouvé qqch, on passe à la clé suivante */
|
||||||
|
if( m_arr.length > 0 )
|
||||||
|
continue;
|
||||||
|
|
||||||
|
|
||||||
|
/* (2.2) On cherche toutes les variables PRIMITIVES à remplacer
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
/* (1.1) On récupère les remplacements PRIMITIFS */
|
||||||
|
m = null, r = FormBuilder.prototype.regex.primitive_ouput_value;
|
||||||
|
var m_pri = [];
|
||||||
|
|
||||||
|
/* (1.2) Tant que ça match */
|
||||||
|
while( ( m=r.exec(object[key]) ) !== null )
|
||||||
|
m_pri.push( m[1] );
|
||||||
|
|
||||||
|
/* (1.3) Pour chaque match */
|
||||||
|
for( m in m_pri ){
|
||||||
|
|
||||||
|
// {1} Si la var n'est pas dans le scope //
|
||||||
|
if( !scope.hasOwnProperty(m_pri[m]) )
|
||||||
|
scope[m_pri[m]] = ''; // on met une chaine vide
|
||||||
|
|
||||||
|
// {2} on remplace toutes les occurences par la valeur //
|
||||||
|
tmpr = new RegExp( "\{"+m_pri[m]+"\}", 'g' );
|
||||||
|
object[key] = object[key].replace(tmpr, scope[m_pri[m]]);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* (1.4) Si on a trouvé qqch, on passe à la clé suivante */
|
||||||
|
if( m_pri.length > 0 )
|
||||||
|
continue;
|
||||||
|
|
||||||
|
|
||||||
|
/* (2.3) On cherche toutes les valeurs de TABLEAUX à remplacer
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
/* (1.1) On récupère les remplacements de valeurs de TABLEAUX */
|
||||||
|
m = null, r = FormBuilder.prototype.regex.array_output_value;
|
||||||
|
var m_aval = [];
|
||||||
|
|
||||||
|
/* (1.2) Tant que ça match */
|
||||||
|
while( ( m=r.exec(object[key]) ) !== null )
|
||||||
|
m_aval.push( m[1] );
|
||||||
|
|
||||||
|
/* (1.3) Pour chaque match */
|
||||||
|
for( m in m_aval ){ //TODO: implémenter l'ajout des items d'un tableau au scope lors d'un "repeat"
|
||||||
|
|
||||||
|
// {1} Si la var n'est pas dans le scope //
|
||||||
|
if( !scope.hasOwnProperty(m_arr[m]) )
|
||||||
|
scope[m_arr[m]] = ''; // on met une chaine vide
|
||||||
|
|
||||||
|
// {2} on remplace toutes les occurences par la valeur //
|
||||||
|
tmpr = new RegExp( "/\{"+m_arr[m]+"\}/", 'g' );
|
||||||
|
object[key].replace(tmpr, scope[m_arr[m]]);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
console.log(matches);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* [2] On ajoute les variables '$var' et '$$arr' au scope suivant
|
||||||
|
=========================================================*/
|
||||||
|
for( key in object ){
|
||||||
|
|
||||||
|
/* (1) Ajout des variables de type '$nomVar'
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
if( FormBuilder.prototype.regex.primitive_input_key.test(key) )
|
||||||
|
next_scope[ key.substring(1) ] = object[key];
|
||||||
|
|
||||||
|
/* (2) Ajout des tableaux de type '$$nomArr'
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
else if( FormBuilder.prototype.regex.array_input_key.test(key) )
|
||||||
|
next_scope[ key.substring(2) ] = object[key];
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('scope', scope);
|
||||||
|
|
||||||
|
|
||||||
|
/* [3] On lance récursivement
|
||||||
|
=========================================================*/
|
||||||
|
for( key in object ){
|
||||||
|
|
||||||
|
/* S'il ne s'agit pas de l'attribut PARENT */
|
||||||
|
if( key != 'parent' ){
|
||||||
|
|
||||||
|
/* Si c'est un objet ou tableau, on lance récursivement */
|
||||||
|
if( object[key] instanceof Object || object[key] instanceof Array )
|
||||||
|
object[key] = FormBuilder.replaceStatements(object[key], next_scope);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return object;
|
return object;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,51 @@ document.body.innerHTML = '';
|
||||||
|
|
||||||
"use strict";
|
"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__}' }
|
||||||
|
};
|
||||||
|
|
||||||
|
var 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' }]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
var form = {
|
var form = {
|
||||||
node: 'h4',
|
node: 'h4',
|
||||||
attributes: { 'data-icon': 'o', 'class': 'new-contact color2' },
|
attributes: { 'data-icon': 'o', 'class': 'new-contact color2' },
|
||||||
|
|
@ -19,3 +64,13 @@ var form = {
|
||||||
{ node: 'custom-select', $name: 'existing', $$options: '{{options}}' }
|
{ node: 'custom-select', $name: 'existing', $$options: '{{options}}' }
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var fb = new FormBuilder(document.body, form);
|
||||||
|
fb.add_definition(default_definition);
|
||||||
|
fb.add_definition(custom_definition);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue