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)};
|
||||
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.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};
|
||||
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-]+)\}\}$/,array_output_value:/\{([a-z-]+)\.([a-z-]+)\}/g,array_input_key:/^\$\$([a-z-]+)$/}};
|
||||
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: {
|
||||
primitive_ouput_value: /\{([a-z-]+)\}/g,
|
||||
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_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
|
||||
*
|
||||
* @object<Object> Objet dans lequel remplacer les valeurs
|
||||
|
|
@ -77,34 +90,137 @@ FormBuilder.formatFormObject = function(object){
|
|||
*/
|
||||
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 */
|
||||
var r = FormBuilder.prototype.regex.primitive_ouput_value,
|
||||
m,
|
||||
matches = [];
|
||||
for( key in object ){
|
||||
|
||||
/* (2) Tant que ça match */
|
||||
// while( m = r.exec(object[key]) !== null ){
|
||||
// matches.push( m[1] );
|
||||
// }
|
||||
/* [1.1] Si c'est une string, on regarde s'il faut remplacer
|
||||
=========================================================*/
|
||||
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++ )
|
||||
matches[i] = matches[i][1];
|
||||
/* (2.1) On cherche tous les TABLEAUX à remplacer
|
||||
---------------------------------------------------------*/
|
||||
/* (1.1) On récupère les remplacements de TABLEAUX */
|
||||
m = null, r = FormBuilder.prototype.regex.array_output_set;
|
||||
var m_arr = [];
|
||||
|
||||
console.log(matches);
|
||||
/* (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]]);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* [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;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,51 @@ 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__}' }
|
||||
};
|
||||
|
||||
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 = {
|
||||
node: 'h4',
|
||||
attributes: { 'data-icon': 'o', 'class': 'new-contact color2' },
|
||||
|
|
@ -19,3 +64,13 @@ var form = {
|
|||
{ 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