NxTIC/js/lib/form-builder.js

455 lines
14 KiB
JavaScript
Raw Normal View History

/* CONSTRUCTEUR -> INITIALISE UNE L'INSTANCE
*
* @parent_element<Element> Element qui contiendra le formulaire
* @form_object<Object> Objet définissant le formulaire
*
*/
var FormBuilder = function(parent_element, form_object){
/* (1) On définit le parent */
this.parent_element = parent_element;
/* (2) On définit le formulaire (sous forme de description formelle) */
this.form_object = form_object;
};
/************************************************************************/
/* _ _____ _____ ____ ___ ____ _ _ _____ _____ ____ */
/* / \|_ _|_ _| _ \|_ _| __ )| | | |_ _| ____/ ___| */
/* / _ \ | | | | | |_) || || _ \| | | | | | | _| \___ \ */
/* / ___ \| | | | | _ < | || |_) | |_| | | | | |___ ___) | */
/* /_/ \_\_| |_| |_| \_\___|____/ \___/ |_| |_____|____/ */
/************************************************************************/
/* DEFINITION DES ATTRIBUTS
*
*/
FormBuilder.prototype = {
form_object: this.form_object, // objet permettant la construction du formulaire
defs_object: {}, // objet des définitions des éléments
parent_element: this.parent_element, // element qui contiendra le formulaire
built_form: null // Element correspondant au formulaire construit
};
/* DEFINITION DES ATTRIBUTS STATIQUES
*
*/
FormBuilder.regex = {
reg_in_key: /^\/\^(.+)\$\/$/, // Regex associée à une "regex" incluse dans une clé
reg_out_val: /\{(\$[1-9])\}/, // Regex associée à la valeur du dernier match de "regex"
pri_out_val: /\{([a-z-]+)\}/g, // Regex associée à une variable primitif à remplacer
pri_in_key: /^\$([a-z-]+)$/, // Regex associée à la clé d'une variable primitive
arr_out_set: /^\{\{([a-z-]+)\}\}$/, // Regex associée à un tableau à remplacer
arr_out_val: /\{([a-z-]+)\.([a-z-]+)\}/g, // Regex associée à une valeur de tableau à remplacer (primitif)
arr_in_key: /^\$\$([a-z-]+)$/ // Regex associée à la clé d'un tableau
};
2016-09-17 14:04:03 +00:00
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', // diffuse aux attributs
'node_link'
2016-09-17 14:04:03 +00:00
];
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 */
'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 */
'children', /* tableau des enfants à passer au niveau inférieur */
'text', /* texte à insérer (innerHTML), REMPLACE 'children' */
'repeat' /* nombre/tableau déterminant qu'il faut répéter @n fois ou en fonction de la taille du tableau */
];
/************************************************************/
/* __ __ _____ _____ _ _ ___ ____ ____ */
/* | \/ | ____|_ _| | | |/ _ \| _ \/ ___| */
/* | |\/| | _| | | | |_| | | | | | | \___ \ */
/* | | | | |___ | | | _ | |_| | |_| |___) | */
/* |_| |_|_____| |_| |_| |_|\___/|____/|____/ */
/************************************************************/
/* AJOUTE UNE DEFINITION
*
* @def_object<Object> Objet de définition
*
*/
FormBuilder.prototype.add_definition = function(def_object){
/* [1] On ajoute la définition
==================================================================*/
for( var key in def_object )
this.defs_object[key] = def_object[key];
};
/* ON CONSTRUIT L'OBJET (avant la construction)
*
* @scope<Object> for( key in object ){
[OPT] Objet contenant les variables à passer
*
*/
FormBuilder.prototype.build = function(scope){
/* [0] Gestion du paramètres
==================================================================*/
scope = (scope == null) ? {} : scope;
/* [1] On formatte l'objet
==================================================================*/
// - Ajout des références children[n].parent vers élément parent
// - Ajout des références element.node_link vers définition (en fonction de element.node)
this.built_form = FormBuilder.formatFormObject(this.form_object, this.defs_object);
/* [2] On remplace les valeurs
==================================================================*/
this.built_form = FormBuilder.replaceStatements(this.form_object, scope, this.defs_object);
};
/************************************************/
/* ____ _____ _ _____ ___ ____ */
/* / ___|_ _|/ \|_ _|_ _/ ___| */
/* \___ \ | | / _ \ | | | | | */
/* ___) || |/ ___ \| | | | |___ */
/* |____/ |_/_/ \_\_| |___\____| */
/************************************************/
/* FORMATTE L'OBJET DE DESCRIPTION DU FORMULAIRE
*
* @object<Object> Objet dans lequel remplacer les valeurs
* @defs<Object> Objet de définition des nodes
*
*
* @desc
* 1. Ajoute l'attribut PARENT aux enfants pour qu'ils puisse accéder à l'élément parent
* 2. Ajout l'attribut NODE_LINK aux éléments afin de lier leur définition en fonction de la valeur de 'node'
*
*/
FormBuilder.formatFormObject = function(object, defs){
/* [1] Pour chaque enfant, s'il y a
==================================================================*/
if( object.hasOwnProperty('children') ){
for( var child in object.children ){
/* On ajoute le parent + on lance récursivement */
object.children[child].parent = object;
FormBuilder.formatFormObject(object.children[child], defs);
}
}
return object;
};
/* CHERCHE UNE DEFINITION CORRESPONDANT A L'ATTRIBUT 'node'
*
* @node<String> Nom du node pour lequel trouver la définition
* @defs<Object> Objet de définition
*
* @return node_definition<Object> Retourne la définition pour le 'node' en question
* ou NULL si on ne trouve rien
*
*/
FormBuilder.fetchNodeDefinition = function(node, defs){
/* [0] Initialisation
==================================================================*/
var m = null, key, i, regex;
r = FormBuilder.regex.reg_in_key;
/* [1] Si la définition existe, on la retourne
==================================================================*/
if( typeof defs != 'undefined' && defs.hasOwnProperty(node) ){
return { def: defs[node] };
/* [2] Sinon, on cherche une REGEX
==================================================================*/
}else{
// Pour chaque définition
for( key in defs ){
/* (2.1) On regarde s'il n'y a pas de REGEX dans la clé
---------------------------------------------------------*/
if( r.test(key) ){
// On construit la regex
regex = new RegExp( key.slice(1, -1) );
/* (1) Si la regex match */
if( (m=regex.test(node)) ){
/* (2) On récupère les 'match' */
matches = {};
for( i = 1 ; i < RegExp.length && i < 10 ; i++ )
matches['$'+i] = RegExp['$'+i];
/* (3) On renvoie le lien + le scope */
return { def: defs[key], scope: matches };
}
}
}
}
// Si on a rien trouvé, on retourne NULL
return {};
};
/* REMPLACE RECURSIVEMENT LES VALEURS DE @OBJECT AVEC LE @SCOPE -> RECURSIF
*
* @object<Object> Objet dans lequel remplacer les valeurs
* @scope<Object> Ensemble des variables permettant le remplacement
* @definitions<Object> Définitions des éléments
*
* @return replaced<Object> Objet avec les remplacements effectués
*
*/
FormBuilder.replaceStatements = function(object, scope, definitions){
/* [0] Initialisation
==================================================================*/
/* (1) Paramètres */
object = (object instanceof Object) ? object : {};
scope = (scope instanceof Object) ? JSON.parse(JSON.stringify(scope)) : {};
/* (2) Variables */
var key, r, tmpr, m, found;
/* (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 )
scope[key] = object.scope[key];
/* [1] On lie les définitions de l'attribut 'node' -> 'node_link'
==================================================================*/
if( object.hasOwnProperty('node') && typeof object.node == 'string' ){
/* On cherche une définition */
found = FormBuilder.fetchNodeDefinition(object.node, definitions);
// Si on trouve
if( found.hasOwnProperty('def') ){
// 1. On clone la définition dans l'attribut 'node_link'
object.node_link = JSON.parse( JSON.stringify(found.def) );
// 2. On ajoute les matches dans l'attribut 'scope'
if( found.hasOwnProperty('scope') )
for( key in found.scope )
scope[key] = found.scope[key];
}
}
/* [2] On remplace les valeurs
==================================================================*/
for( key in object ){
/* [1.1] Si c'est une string, on regarde s'il faut remplacer
==================================================================*/
if( typeof object[key] == 'string' ){
/* (2.1) On cherche tous les TABLEAUX à remplacer
---------------------------------------------------------*/
/* (1.1) On récupère les remplacements de TABLEAUX */
m = null, r = FormBuilder.regex.arr_out_set;
var m_arr = [];
/* (1.2) Si ça match */
if( m = r.exec(object[key]) )
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]];
2016-09-17 14:04:03 +00:00
// console.log('arr', m_arr[m], 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.regex.pri_out_val;
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]]);
2016-09-17 06:29:59 +00:00
// console.log('pri', m_pri[m], scope[m_pri[m]]);
2016-09-17 14:04:03 +00:00
}
2016-09-17 06:29:59 +00:00
/* (1.4) Si on a trouvé qqch, on passe à la clé suivante */
if( m_pri.length > 0 )
continue;
/* (2.3) On cherche toutes les variables REGEX à remplacer
---------------------------------------------------------*/
/* (1.1) On récupère les remplacements REGEX */
m = null, r = FormBuilder.regex.reg_out_val,
lasti = -1;
var m_reg = [];
/* (1.2) Tant que ça match */
var max = 10;
while( (m=r.exec(object[key])) !== null && max > 0 ){
// si on boucle, on sort
if( lasti >= r.lastIndex ) break;
lasti = r.lastIndex;
m_reg.push( m[1] );
}
/* (1.3) Pour chaque match */
for( m in m_reg ){
// {1} Si la var n'est pas dans le scope //
if( !scope.hasOwnProperty(m_reg[m]) )
scope[m_reg[m]] = ''; // on met une chaine vide
// {2} on remplace toutes les occurences par la valeur //
tmpr = new RegExp( "\{\\$"+m_reg[m][1]+"\}", 'g' );
object[key] = object[key].replace(tmpr, scope[m_reg[m]]);
// console.log('reg', m_reg[m], scope);
2016-09-17 14:04:03 +00:00
}
/* (1.4) Si on a trouvé qqch, on passe à la clé suivante */
if( m_reg.length > 0 )
continue;
/* (2.4) On cherche toutes les valeurs de TABLEAUX à remplacer
---------------------------------------------------------*/
/* (1.1) On récupère les remplacements de valeurs de TABLEAUX */
m = null, r = FormBuilder.regex.arr_out_val;
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_aval[m]) )
scope[m_aval[m]] = ''; // on met une chaine vide
// {2} on remplace toutes les occurences par la valeur //
tmpr = new RegExp( "/\{"+m_aval[m]+"\}/", 'g' );
object[key].replace(tmpr, scope[m_aval[m]]);
}
2016-09-17 06:29:59 +00:00
}
}
/* [3] On ajoute les variables '$var' et '$$arr' au scope suivant
==================================================================*/
for( key in object ){
/* (1) Ajout des variables de type '$nomVar'
---------------------------------------------------------*/
if( FormBuilder.regex.pri_in_key.test(key) )
scope[ key.substring(1) ] = object[key];
/* (2) Ajout des tableaux de type '$$nomArr'
---------------------------------------------------------*/
else if( FormBuilder.regex.arr_in_key.test(key) )
scope[ key.substring(2) ] = object[key];
}
/* [4] On lance récursivement
==================================================================*/
/* on clone le scope */
scope = JSON.parse(JSON.stringify(scope));
for( key in object ){
/* S'il ne s'agit d'un attribut interdit */
if( FormBuilder.spread_attr.indexOf(key) > -1 ){
/* (1) Si c'est un tableau, on lance récursivement pour chaque item */
if( object[key] instanceof Array )
for( var i in object[key] )
FormBuilder.replaceStatements(object[key][i], scope, definitions);
// console.log(object.node, key+'['+i+']');
/* (2) Si c'est un objet, on lance récursivement */
else if( object[key] instanceof Object )
FormBuilder.replaceStatements(object[key], scope, definitions);
// console.log(object.node, key);
}
}
/* [5] On retourne l'object courant
==================================================================*/
return object;
};