diff --git a/js/lib/form-builder-min.js b/js/lib/form-builder-min.js index fb69bdf..319d69b 100644 --- a/js/lib/form-builder-min.js +++ b/js/lib/form-builder-min.js @@ -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 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 Objet dans lequel remplacer les valeurs @@ -77,35 +90,138 @@ 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 récupère la regex */ - var r = FormBuilder.prototype.regex.primitive_ouput_value, - m, - matches = []; + /* [1] On remplace les valeurs + =========================================================*/ + 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 = []; + + /* (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; }; diff --git a/js/lib/form-builder/main.js b/js/lib/form-builder/main.js index 807a973..b783ac7 100644 --- a/js/lib/form-builder/main.js +++ b/js/lib/form-builder/main.js @@ -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);