/* CONSTRUCTEUR -> INITIALISE UNE L'INSTANCE * * @parent_element Element qui contiendra le formulaire * @form_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 = { regex_input_key: /^\/\^(.+)\$\/$/, // Regex associée à une "regex" incluse dans une clé regex_ouput_value: /\{(\$[1-9])\}/, // Regex associée à la valeur du dernier match de "regex" primitive_ouput_value: /\{([a-z-]+)\}/g, // Regex associée à une variable primitif à remplacer primitive_input_key: /^\$([a-z-]+)$/, // Regex associée à la clé d'une variable primitive array_output_set: /^\{\{([a-z-]+)\}\}$/, // Regex associée à un tableau à remplacer array_output_value: /\{([a-z-]+)\.([a-z-]+)\}/g, // Regex associée à une valeur de tableau à remplacer (primitif) array_input_key: /^\$\$([a-z-]+)$/ // Regex associée à la clé d'un tableau }; 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 */ '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 */ ]; FormBuilder.ignore_rec = [ // Attributs à ne pas lancer récursivement (car inutile) 'parent', /* ne pas lancer récursivement sur parent car sinon récursion infinie */ 'scope' /* ne pas lancer sur scope, car fait partie des méta-données */ ], /************************************************************/ /* __ __ _____ _____ _ _ ___ ____ ____ */ /* | \/ | ____|_ _| | | |/ _ \| _ \/ ___| */ /* | |\/| | _| | | | |_| | | | | | | \___ \ */ /* | | | | |___ | | | _ | |_| | |_| |___) | */ /* |_| |_|_____| |_| |_| |_|\___/|____/|____/ */ /************************************************************/ /* AJOUTE UNE DEFINITION * * @def_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 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); }; /************************************************/ /* ____ _____ _ _____ ___ ____ */ /* / ___|_ _|/ \|_ _|_ _/ ___| */ /* \___ \ | | / _ \ | | | | | */ /* ___) || |/ ___ \| | | | |___ */ /* |____/ |_/_/ \_\_| |___\____| */ /************************************************/ /* FORMATTE L'OBJET DE DESCRIPTION DU FORMULAIRE * * @object Objet dans lequel remplacer les valeurs * @defs 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] Si a l'attribut 'node' =========================================================*/ if( object.hasOwnProperty('node') && typeof object.node == 'string' ){ /* On cherche une définition */ var found_def = FormBuilder.fetchNodeDefinition(object.node, defs); // Si on trouve if( found_def !== null ){ // 1. On inclus la définition dans l'attribut 'node_link' object.node_link = found_def.def; // 2. On ajoute les matches dans l'attribut 'scope' if( found_def.hasOwnProperty('scope') ) object.scope = found_def.scope; } } /* [2] 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 Nom du node pour lequel trouver la définition * @defs Objet de définition * * @return node_definition 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.regex_input_key; /* [1] Si la définition existe, on la retourne =========================================================*/ if( defs != null && defs.hasOwnProperty(node) ){ return { def: defs.node, scope: null }; /* [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 null; }; /* REMPLACE RECURSIVEMENT LES VALEURS DE @OBJECT AVEC LE @SCOPE -> RECURSIF * * @object Objet dans lequel remplacer les valeurs * @scope Ensemble des variables permettant le remplacement * * @return replaced Objet avec les remplacements effectués * */ FormBuilder.replaceStatements = function(object, scope){ /* [0] Initialisation =========================================================*/ /* (1) Paramètres */ object = (object instanceof Object) ? object : {}; scope = (scope instanceof Object) ? scope : {}; /* (2) Variables */ 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 ) next_scope[key] = object.scope[key]; /* [1] On remplace les valeurs =========================================================*/ for( key in object ){ /* [1.1] Si c'est une string, on regarde s'il faut remplacer =========================================================*/ if( FormBuilder.ignore_rec.indexOf(key) < 0 && 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.array_output_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]]; 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.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' ); console.log('pri', m_pri[m], scope[m_pri[m]]); 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 variables REGEX à remplacer ---------------------------------------------------------*/ /* (1.1) On récupère les remplacements REGEX */ m = null, r = FormBuilder.regex.regex_ouput_value, 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' ); console.log('reg', m_reg[m], scope); object[key] = object[key].replace(tmpr, scope[m_reg[m]]); } /* (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.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_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]]); } } } /* [2] On ajoute les variables '$var' et '$$arr' au scope suivant =========================================================*/ for( key in object ){ /* (1) Ajout des variables de type '$nomVar' ---------------------------------------------------------*/ if( FormBuilder.regex.primitive_input_key.test(key) ) next_scope[ key.substring(1) ] = object[key]; /* (2) Ajout des tableaux de type '$$nomArr' ---------------------------------------------------------*/ else if( FormBuilder.regex.array_input_key.test(key) ) next_scope[ key.substring(2) ] = object[key]; } /* [3] On lance récursivement =========================================================*/ for( key in object ){ /* 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 ){ object[key] = FormBuilder.replaceStatements(object[key], next_scope); } } } return object; };