From c8bc92461a8b287dd53c7d7b6755e7b74786a464 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Wed, 21 Sep 2016 11:53:04 +0200 Subject: [PATCH] =?UTF-8?q?Gestion=20pour=20l'attribut=20'browse'=20des=20?= =?UTF-8?q?fonctions=20custom=20avant=20les=20attributs,=20car=20par=20exe?= =?UTF-8?q?mple=20'length'=20est=20un=20attribut,=20mais=20la=20fonction?= =?UTF-8?q?=20custom=20n'est=20jamais=20appel=C3=A9e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc/form-builder/behaviour-min.js | 6 +- doc/form-builder/behaviour.js | 20 +- js/lib/form-builder-min.js | 39 ++-- js/lib/form-builder.js | 92 ++++++++- js/lib/form-builder/main-min.js | 10 +- js/lib/form-builder/main.js | 302 ++++++++++++++++++++---------- view.php | 2 +- 7 files changed, 335 insertions(+), 136 deletions(-) diff --git a/doc/form-builder/behaviour-min.js b/doc/form-builder/behaviour-min.js index 28037fd..d09d188 100644 --- a/doc/form-builder/behaviour-min.js +++ b/doc/form-builder/behaviour-min.js @@ -1,3 +1,5 @@ -var default_def={"input.text":{node_type:"input",attributes:{name:"{name}",value:"{value}",type:"text"}},"/^span:(d+)$/":{node_type:"span",text:"span {spanRepeat:i} on {spanRepeat:n} (={$1})",repeat:{n:"{$1}",id:"spanRepeat"},attributes:{"class":"{class}"}},"simple-select":{node_type:"select",attributes:{"class":"{select-class}"},children:[{node_type:"option",browse:{array:"{options[]}",funcs:{"options.value":"{getvalue()}","options.length":"{getlength()}"}},attributes:{"class":"{option-class}",value:"{options:i}"}, +document.body.innerHTML=""; +var default_definition={"input.text":{node_type:"input",attributes:{name:"{name}",value:"{value}",type:"text"}},"/^span:(d+)$/":{node_type:"span",text:"span {spanRepeat:i} on {spanRepeat:n} (={$1})",repeat:{n:"{$1}",id:"spanRepeat"},attributes:{"class":"{class}"}},"simple-select":{node_type:"select",attributes:{"class":"{select-class}"},children:[{node_type:"option",browse:{array:"{options[]}",funcs:{"options.value":"{getvalue()}","options.length":"{getlength()}"}},attributes:{"class":"{option-class}",value:"{options:i}"}, text:"{options.value} ({options.length} caract\u00e8res)"}],listeners:{change:"{onchange()}"}}},exempleFormulaire={node_type:"form",attributes:{method:"POST",action:"{url}"},prev_nodes:[{node:"span:2",$class:"beforeSpan"}],children:[{node:"input.text",$name:"fname",$value:"{default_firstname}"},{node:"simple-select",$options:"{liste_noms[]}",$select_class:"gui-option",$option_class:"gui-select",$onchange:"{my_onchange()}",$getvalue:"{getitemvalue()}",$getlength:"{getitemlength()}"},{node_type:"input", -attributes:{type:"submit",value:"Valider"}}],next_nodes:[{node:"span:2",$class:"afterSpan"}]},monBuilder=new FormBuilder(exempleFormulaire);monBuilder.add_definition(default_definition);monBuilder.build({url:"https://xdrm.io/",default_firstname:"Jean",liste_noms:"Jean Pierre Robert Marie Anna F\u00e9licien Marc J\u00e9sus".split(" "),getitemvalue:function(a){return a},getitemlength:function(a){return a.length}});var monConteneur=document.getElementById("container");monBuilder.attach(monConteneur); +attributes:{type:"submit",value:"Valider"}}],next_nodes:[{node:"span:2",$class:"afterSpan"}]},monBuilder=new FormBuilder(exempleFormulaire);monBuilder.add_definition(default_definition);monBuilder.build({url:"https://xdrm.io/page1",default_firstname:"Jean",liste_noms:"Jean Pierre Robert Marie Anna F\u00e9licien Marc J\u00e9sus".split(" "),getitemvalue:function(a){return a},getitemlength:function(a){return a.length}});var monConteneur=document.body;monBuilder.attach(monConteneur); +monBuilder.update({url:"https://xdrm.io/page2",getitemlength:function(a){return 10}});monBuilder.attach(monConteneur); diff --git a/doc/form-builder/behaviour.js b/doc/form-builder/behaviour.js index e7dacdb..1118dda 100644 --- a/doc/form-builder/behaviour.js +++ b/doc/form-builder/behaviour.js @@ -1,3 +1,5 @@ +document.body.innerHTML = ''; + // CETTE CLASSE PERMET LA CREATION DE HTML A PARTIR D'UN OBJET JAVASCRIPT // // @@ -64,7 +66,7 @@ // // Exemple: objet de définition // ---------------------------- -var default_def = { +var default_definition = { // Les #Element avec 'node' valant 'input' seront liés à cette définition 'input.text': { node_type: 'input', // sera un @@ -195,7 +197,7 @@ var monBuilder = new FormBuilder(exempleFormulaire); monBuilder.add_definition(default_definition); // on construit notre objet en lui passant toutes les données monBuilder.build({ - url: 'https://xdrm.io/', // variable 'url' + url: 'https://xdrm.io/page1', // variable 'url' default_firstname: 'Jean', // variable 'default_firstname' liste_noms: ['Jean', 'Pierre', 'Robert', 'Marie', 'Anna', 'Félicien', 'Marc', 'Jésus'], // tableau 'list_noms' getitemvalue: function(item){ return item; }, // pour chaque item, retournera la valeur brute @@ -206,6 +208,18 @@ monBuilder.build({ // Exemple code d'ajout au DOM // --------------------------- // soit monConteneur, l'élément qui contiendra le formulaire -var monConteneur = document.getElementById('container'); +var monConteneur = document.body; // On ajoute le formulaire au conteneur monBuilder.attach(monConteneur); + + +// +// Exemple de modification des valeurs +// ----------------------------------- +// les variables ommises lors de la création, ne sont pas modifiables +monBuilder.update({ + url: 'https://xdrm.io/page2', // on modifie l'URL + getitemlength: function(item){ return 10; } // on modifie notre fonction (on renvoie taille+1) +}); +// reconstruction du DOM +monBuilder.attach(monConteneur); diff --git a/js/lib/form-builder-min.js b/js/lib/form-builder-min.js index 5e4afca..f40b6be 100644 --- a/js/lib/form-builder-min.js +++ b/js/lib/form-builder-min.js @@ -1,20 +1,23 @@ -var ref=function(a,b){for(var f=null;null==f||a.hasOwnProperty(f);)f="$"+(268435456+Math.floor(4026531839*Math.random())).toString(16)+"$";a[f]=b;return f},FormBuilder=function(a){this.form_object=a};FormBuilder.prototype={form_object:this.form_object,defs_object:{},parent_element:null,built_form:null,root_element:null,ref_table:{$00000000$:null},ref_assoc:{NULL:"$00000000$"}}; +var ref=function(a,b){for(var e=null;null==e||a.hasOwnProperty(e);)e="$"+(268435456+Math.floor(4026531839*Math.random())).toString(16)+"$";a[e]=b;return e},FormBuilder=function(a){this.form_object=a};FormBuilder.prototype={form_object:this.form_object,defs_object:{},parent_element:null,built_form:null,root_element:null,ref_table:{$00000000$:null},ref_assoc:{NULL:"$00000000$"}}; FormBuilder.regex={reg_in_key:/^\/\^(.+)\$\/$/,reg_out_val:/\{(\$[1-9])\}/,pri_out_val:/\{([a-z_]+)\}/g,pri_in_key:/^\$([a-z_]+)$/,arr_out_set:/^\{([a-z_]+)\[\]\}$/,arr_out_val:/\{([a-z_]+)([\.:])([a-z_]+)\}/g,arr_in_key:/^\$([a-z_]+)$/,fun_out_val:/^\{([a-z_]+)\(\)\}$/,ref_pri:/^\$[a-f0-9]{8}\$$/};FormBuilder.spread_attr="children next_nodes prev_nodes attributes node_link listeners repeat browse funcs".split(" "); FormBuilder.prototype.add_definition=function(a){for(var b in a)this.defs_object[b]=a[b]};FormBuilder.prototype.build=function(a){a=null==a?{}:a;for(var b in a)a[b]=ref(this.ref_table,a[b]),this.ref_assoc[b]=a[b];this.built_form=JSON.parse(JSON.stringify(this.form_object));this.built_form=FormBuilder.formatFormObject(this.built_form,this.defs_object);this.built_form=FormBuilder.replaceStatements(this.built_form,a,this.defs_object,this.ref_table,this.ref_assoc)}; -FormBuilder.prototype.update=function(a){a=null==a?{}:a;for(var b in a)this.ref_assoc.hasOwnProperty(b)&&(this.ref_table[this.ref_assoc[b]]=a[b])};FormBuilder.prototype.attach=function(a){if(!(a instanceof Element)&&null===this.parent_element)return!1;this.parent_element=a instanceof Element?a:this.parent_element;a=FormBuilder.createElements(this.built_form,this.ref_table,this.ref_assoc);FormBuilder.attachElements(this.parent_element,a)};FormBuilder.formatFormObject=function(a,b){return a}; -FormBuilder.fetchNodeDefinition=function(a,b){var f,d;r=FormBuilder.regex.reg_in_key;if("undefined"!=typeof b&&b.hasOwnProperty(a))return{def:b[a]};for(f in b)if(r.test(f)&&(d=new RegExp(f.slice(1,-1)),d.test(a))){matches={};for(d=1;dd;d++)matches["$"+d]=RegExp["$"+d];return{def:b[f],scope:matches}}return{}}; -FormBuilder.replaceStatements=function(a,b,f,d,e){a=a instanceof Object?a:{};b=b instanceof Object?JSON.parse(JSON.stringify(b)):{};var c,k;if(a.hasOwnProperty("scope")&&a.scope instanceof Object)for(c in a.scope)b[c]=a.scope[c];if(a.hasOwnProperty("node")&&"string"==typeof a.node&&(k=FormBuilder.fetchNodeDefinition(a.node,f),k.hasOwnProperty("def")&&(a.node_link=JSON.parse(JSON.stringify(k.def)),k.hasOwnProperty("scope"))))for(c in k.scope)b[c]=k.scope[c];a.hasOwnProperty("browse")&&(a.browse.hasOwnProperty("array")&& -FormBuilder.regex.arr_out_set.test(a.browse.array)?a.browse.id=RegExp.$1:delete a.browse);for(c in a)"string"==typeof a[c]?(a[c]=[a[c]],k=FormBuilder.replaceStatementsFunction(d,a[c][0],b),!1!==k?a[c]=k:(k=FormBuilder.replaceStatementsArray(a[c][0],b,d),!1!==k?a[c]=k:(a[c]=FormBuilder.replaceStatementsRegex(a[c],b),a[c]=FormBuilder.replaceStatementsPrimary(a[c],b),a[c]=FormBuilder.replaceStatementsArrayValue(a[c],b,d,e)))):"number"===typeof a[c]&&(a[c]=[ref(d,a[c])]);for(c in a)FormBuilder.regex.pri_in_key.test(c)? -b[c.substring(1)]=ref(d,a[c]):FormBuilder.regex.arr_in_key.test(c)&&(b[c.substring(2)]=ref(d,a[c]));b=JSON.parse(JSON.stringify(b));for(c in a)if(-1=f.lastIndex);)c=f.lastIndex,e.push(d);for(d=c=0;dc;c++)matches["$"+c]=RegExp["$"+c];return{def:b[e],scope:matches}}return{}}; +FormBuilder.replaceStatements=function(a,b,e,c,f){a=a instanceof Object?a:{};b=b instanceof Object?JSON.parse(JSON.stringify(b)):{};var d,k;if(a.hasOwnProperty("scope")&&a.scope instanceof Object)for(d in a.scope)b[d]=a.scope[d];if(a.hasOwnProperty("node")&&"string"==typeof a.node&&(k=FormBuilder.fetchNodeDefinition(a.node,e),k.hasOwnProperty("def")&&(a.node_link=JSON.parse(JSON.stringify(k.def)),k.hasOwnProperty("scope"))))for(d in k.scope)b[d]=k.scope[d];a.hasOwnProperty("browse")&&(a.browse.hasOwnProperty("array")&& +FormBuilder.regex.arr_out_set.test(a.browse.array)?a.browse.id=RegExp.$1:delete a.browse);for(d in a)"string"==typeof a[d]?(a[d]=[a[d]],k=FormBuilder.replaceStatementsFunction(a[d][0],b,c),!1!==k?a[d]=k:(k=FormBuilder.replaceStatementsArray(a[d][0],b,c),!1!==k?a[d]=k:(a[d]=FormBuilder.replaceStatementsRegex(a[d],b),a[d]=FormBuilder.replaceStatementsPrimary(a[d],b),a[d]=FormBuilder.replaceStatementsArrayValue(a[d],b,c,f)))):"number"===typeof a[d]&&(a[d]=[ref(c,a[d])]);for(d in a)FormBuilder.regex.pri_in_key.test(d)? +b[d.substring(1)]=ref(c,a[d]):FormBuilder.regex.arr_in_key.test(d)&&(b[d.substring(2)]=ref(c,a[d]));b=JSON.parse(JSON.stringify(b));for(d in a)if(-1=e.lastIndex);)d=e.lastIndex,f.push(c);for(c=d=0;c Objet contenant les références * @statement String contenant la chaine * @scope Objet contenant le scope +* @ref_table Objet contenant les références * * @return newVal Retourne la nouvelle (ref) valeur ou FALSE si rien n'a été fais * */ -FormBuilder.replaceStatementsFunction = function(ref_table, statement, scope){ +FormBuilder.replaceStatementsFunction = function(statement, scope, ref_table){ /* (1) On initialise les variables */ var match = null; var regex = FormBuilder.regex.fun_out_val; @@ -943,13 +952,14 @@ FormBuilder.createElements = function(definition, ref_table, ref_assoc){ // Pour chaque champ, on récupère/calcule la valeur for( j in scope ){ - // {1} Si la valeur est un attribut // - if( tmp[i].hasOwnProperty(scope[j]) ) + // {1} Si c'est une fonction custom // + if( funcs.hasOwnProperty(scope[j]) ) + repeated[i][definition.browse.id+'.'+scope[j]] = funcs[ scope[j] ]( tmp[i] ); + + // {2} Si la valeur est un attribut // + else if( tmp[i].hasOwnProperty(scope[j]) ) repeated[i][definition.browse.id+'.'+scope[j]] = tmp[i][scope[j]]; - // {2} Si c'est une fonction custom // - else if( funcs.hasOwnProperty(scope[j]) ) - repeated[i][definition.browse.id+'.'+scope[j]] = funcs[ scope[j] ]( tmp[i] ); } @@ -1163,6 +1173,72 @@ FormBuilder.attachElements = function(parent, set){ }; +/* DETACHE UN JEU D'ELEMENTS A UN PARENT +* +* @parent Element parent +* @set Set d'enfants à attacher +* +*/ +FormBuilder.detachElements = function(parent, set){ + + var c, a; + + /* [1] Pour chaque contexte (élément + prev + next) + =========================================================*/ + for( c in set ){ + + + /* (1) On attache les éléments précédents + ---------------------------------------------------------*/ + for( a in set[c].prev ){ + + /* (1) Si c'est un Element */ + if( set[c].prev[a] instanceof Element ) + parent.removeChild( set[c].prev[a] ); + + /* (2) On lance récursivement */ + if( set[c].prev[a] instanceof Object ) + FormBuilder.detachElements(parent, [ set[c].prev[a] ]); + + + } + + + /* (2) On ajoute l'élément actuel + ---------------------------------------------------------*/ + for( a in set[c].node ){ + + /* (1) Si c'est un Element */ + if( set[c].node[a] instanceof Element ) + parent.removeChild( set[c].node[a] ); + + /* (2) On lance récursivement */ + if( set[c].node[a] instanceof Object ) + FormBuilder.detachElements(parent, [ set[c].node[a] ]); + + } + + + /* (3) On attache les éléments suivants + ---------------------------------------------------------*/ + for( a in set[c].next ){ + + /* (1) Si c'est un Element */ + if( set[c].next[a] instanceof Element ) + parent.removeChild( set[c].next[a] ); + + /* (2) On lance récursivement */ + if( set[c].next[a] instanceof Object ) + FormBuilder.detachElements(parent, [ set[c].next[a] ]); + + } + + + } + +}; + + /* APPLIQUE UN STYLE CSS-LIKE A UN ELEMENT * * @element Element auquel on veut appliquer le css diff --git a/js/lib/form-builder/main-min.js b/js/lib/form-builder/main-min.js index f80c726..d09d188 100644 --- a/js/lib/form-builder/main-min.js +++ b/js/lib/form-builder/main-min.js @@ -1,5 +1,5 @@ -document.body.innerHTML="";"use strict"; -var default_definition={input:{node_type:"input"},"/^h([1-6])$/":{node_type:"h{$1}"},br:{node_type:"br"},option:{node_type:"option"},select:{node_type:"select"},span:{node_type:"span"},"/^br([0-9]+)$/":{node:"br",repeat:{n:"{$1}",id:"brs"}}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},listeners:{click:"{click_listener()}"}},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select", -attributes:{"data-name":"{name}"},children:[{node:"option",attributes:{value:"{options:i}"},text:"{options.value}",browse:{array:"{options[]}",funcs:{"options.value":"{getoptval()}"}}}],listeners:{change:"{listener()}"}}]}},contactForm={node:"h4",attributes:{"data-icon":"o","class":"new-contact colo2"},children:[{node:"input.hidden",$name:"uid",$value:"{uid}"},{node:"input.hidden",$name:"call",$value:"{call}"},{node:"input.hidden",$name:"sms",$value:"{sms}"},{node:"input.hidden",$name:"countcall", -$value:"{count_call}",$click_listener:"{my_listener()}"},{node:"input.hidden",$name:"countsms",$value:"{count_sms}"},{node:"input.text",$name:"number",$value:"{number}"},{node:"custom-select",$name:"existing",$options:"{existing[]}",$listener:"{existingsel()}"},{node:"input.text",$name:"username",$placeholder:"{username_ph}",$value:"{username}"},{node:"input.submit",$value:"Enregistrer",attributes:{"class":"primary sub-number"}}],next_nodes:[{node:"br"}]},a="

\n\t\n\t\n\t\n\t\n\t\n\t \n\t\n\t    ou    \n\t \n\t\n

\n\n", -fb=new FormBuilder(contactForm);fb.add_definition(default_definition);fb.add_definition(custom_definition);fb.build({uid:1,call:2,sms:3,count_call:4,count_sms:5,number:"01 02 03 04 05",existing:["Jean","Archibald","Daniel","Maurice"],username:"moi-meme",username_ph:"Pseudo",my_listener:function(b){console.log("clicked",b)},existingsel:function(b){console.log("selected",b)},getoptval:function(b){return b}});fb.attach(document.body); +document.body.innerHTML=""; +var default_definition={"input.text":{node_type:"input",attributes:{name:"{name}",value:"{value}",type:"text"}},"/^span:(d+)$/":{node_type:"span",text:"span {spanRepeat:i} on {spanRepeat:n} (={$1})",repeat:{n:"{$1}",id:"spanRepeat"},attributes:{"class":"{class}"}},"simple-select":{node_type:"select",attributes:{"class":"{select-class}"},children:[{node_type:"option",browse:{array:"{options[]}",funcs:{"options.value":"{getvalue()}","options.length":"{getlength()}"}},attributes:{"class":"{option-class}",value:"{options:i}"}, +text:"{options.value} ({options.length} caract\u00e8res)"}],listeners:{change:"{onchange()}"}}},exempleFormulaire={node_type:"form",attributes:{method:"POST",action:"{url}"},prev_nodes:[{node:"span:2",$class:"beforeSpan"}],children:[{node:"input.text",$name:"fname",$value:"{default_firstname}"},{node:"simple-select",$options:"{liste_noms[]}",$select_class:"gui-option",$option_class:"gui-select",$onchange:"{my_onchange()}",$getvalue:"{getitemvalue()}",$getlength:"{getitemlength()}"},{node_type:"input", +attributes:{type:"submit",value:"Valider"}}],next_nodes:[{node:"span:2",$class:"afterSpan"}]},monBuilder=new FormBuilder(exempleFormulaire);monBuilder.add_definition(default_definition);monBuilder.build({url:"https://xdrm.io/page1",default_firstname:"Jean",liste_noms:"Jean Pierre Robert Marie Anna F\u00e9licien Marc J\u00e9sus".split(" "),getitemvalue:function(a){return a},getitemlength:function(a){return a.length}});var monConteneur=document.body;monBuilder.attach(monConteneur); +monBuilder.update({url:"https://xdrm.io/page2",getitemlength:function(a){return 10}});monBuilder.attach(monConteneur); diff --git a/js/lib/form-builder/main.js b/js/lib/form-builder/main.js index 0586753..1118dda 100644 --- a/js/lib/form-builder/main.js +++ b/js/lib/form-builder/main.js @@ -1,121 +1,225 @@ -/* [0] On efface le -=========================================================*/ document.body.innerHTML = ''; -"use strict"; - - +// CETTE CLASSE PERMET LA CREATION DE HTML A PARTIR D'UN OBJET JAVASCRIPT +// +// +// Notation: +// - Une chaine de caractère précédée du symbole '@' correspond à un commentaire pour expliquer une valeur +// +// +// Types de donées: +// - Chaine de caractère +// - Tableau +// - Tableau associatif (objet) +// - Nombre entier +// - Fonction +// - <*> Qu'importe +// +// Structure: +// - L'objet permettant la création du HTML correspond à un #Element +// - L'imbrication de ses #Element permet de construire une structure complète +// +// +// Fonctionnement: +// - En plus de l'objet correspondant à l'élément HMTL, il faut spécifier des #Descriptions permettant +// de générer le HTML +// +// +// Liste des attributs: +// 'node' String permettant de lier l'élément à une définition (qui doit forcément avoir, soit une autre définition, soit 'node_type') +// 'node_type' Type d'élément HTML, aucune définition n'est nécessaire +// 'children' les #Element enfants de l'#Element en question +// 'prev_nodes' les #Element précédant l'#Element en question +// 'next_nodes' les #Element suivant l'#Element en question +// 'text' Contenu textuel de l'#Element (cf. innerHTML) +// 'attributes' Tableau associatif contenant les attributs de l'#Element +// 'listeners' Contient les associations { '@eventName': '@eventFunction' } - @eventName - @eventFunction +// 'repeat' Définit le nombre de fois qu'il faut dupliquer l'#Element { n: @nbRepeat, id: '@idDuRepeat'} +// 'n' Nombre de fois qu'il faut dupliquer l'#Element +// 'id' Identifiant de la répétition, permet d'interpoler l'indice et le total +// *Note: il est possible d'interpoler l'indice de l'#Element avec '{@idRepeat:i}' et le total avec '{@idRepeat:n}' +// 'browse' Définit le tableau sur lequel dupliquer l'#Element { array: @tableau, funcs: { @nomValeur1: @func1, @nomValeur2: @func2 } } +// 'array' Tableau pour lequel dupliquer l'#Element (pour chaque valeur), l'interpolation se fait avec '{@nomTab.@nomAttr}' +// 'funcs' Définition d'actions sur chaque élément du tableau (interpolables de la même manière que les vrais attributs) +// *Note: il est possible d'interpoler l'indice de l'#Element avec '{@nomTab:i}' et le total avec '{@nomTab:n}' +// '$@someName' <*> Un attribut commençant par le caractère '$' sera passé au scope de ses enfants, voisins, et définitions +// +// +// Interpolation de valeurs: +// '{@nomVariable}' sera remplacé par la variable 'nomVariable', si elle n'existe pas, par une chaine vide +// *Note: le nom de la variable ne peut contenir que : 1. des lettres en minuscules, des underscore ('_') +// '{@nomTab[]}' sera remplacé par le tableau 'nomTab', si il n'existe pas, par un tableau vide +// *Note: le nom de la variable ne peut contenir que : 1. des lettres en minuscules, des underscore ('_') +// '{@nomFunc()}' sera remplacé par la fonction 'nomFunc', si elle n'existe pas, par une fonction vide +// *Note: le nom de la variable ne peut contenir que : 1. des lettres en minuscules, des underscore ('_') +// '{$@n}' sera remplacé par le @n-ième match de la dernière RegExp valide +// *Note: ne peut qu'être utilisé dans les définitions, car c'est le seul endroit ou peuvent être des RegExp +// '{@tab.@attr}' sera remplacé par l'attribut @attr de l'item en cours du tableau @tab +// *Note: si l'attribut n'existe pas, mais qu'une fonction est définie pour cette valeur, la fonction calculera la valeur +// *Note: n'est utilisable que dans un #Element ayant l'attribut 'browse' +// +// +// Définition +// Les clés de l'objet correspondent à l'attribut 'node', il peut soit être une chaine, soit une RegExp @r de la forme: '/^@r$/' +// +// +// +// Exemple: objet de définition +// ---------------------------- var default_definition = { - 'input': { node_type: 'input' }, - '/^h([1-6])$/': { node_type: 'h{$1}' }, - 'br': { node_type: 'br' }, - 'option': { node_type: 'option' }, - 'select': { node_type: 'select' }, - 'span': { node_type: 'span' }, - '/^br([0-9]+)$/': { node: 'br', repeat: { n: '{$1}', id: 'brs' } } -}; - -var custom_definition = { - '/^input\.([a-z]+)$/': { - node: 'input', + // Les #Element avec 'node' valant 'input' seront liés à cette définition + 'input.text': { + node_type: 'input', // sera un attributes: { - 'type': '{$1}', - 'data-name': '{name}', - 'value': '{value}', - 'placeholder': '{placeholder}' - }, - listeners: { 'click': '{click_listener()}' } + name: '{name}', // l'attribut 'name' vaudra la valeur de la variable 'name' + value: '{value}', // l'attribut 'value' vaudra la valeur de la variable 'value' + type: 'text' // l'attribut 'type' vaudra 'text' + } }, + // Les #Element avec 'node' valant 'span:@x' avec @x un nombre entier, seront liés à cette définition + '/^span:(\d+)$/': { + node_type: 'span', // sera un + text: 'span {spanRepeat:i} on {spanRepeat:n} (={$1})', + repeat: { + n: '{$1}', // sera dupliqué @x fois, avec @x récupéré dans le nom de la définition + id: 'spanRepeat' // sera accessible via l'id 'spanRepeat' + }, + attributes: { + 'class': '{class}' // l'attribut 'class' vaudra la valeur de la variable 'class' + } + }, - 'custom-select': { - node: 'span', - attributes: { 'class': 'select-container nobold' }, + // Les #Element avec 'node' valant 'simple-select', seront liés à cette définition + 'simple-select': { + node_type: 'select', // sera un + node: 'input.text', + $name: 'fname', // l' héritera la variable 'name' + $value: '{default_firstname}' // l' héritera la variable 'value', qui elle-même sera récupèrée de la variable 'default_firstname' + }, + + { // contiendra en second enfant un + node_type: 'input', // sera un + attributes: { + type: 'submit', // aura l'attribut 'type' qui vaut 'submit' + value: 'Valider' // aura l'attribut 'value' qui vaut 'Valider' + } + } + ], + + // sera suivi par 2 (cf. définition de 'span:(\d+)') + next_nodes: [ + { + node: 'span:2', + $class: 'afterSpan' // les hériterons de la variable 'class' + } + ] }; -var a = ("

\n"+ - "\t\n"+ - "\t\n"+ - "\t\n"+ - - "\t\n"+ - "\t\n"+ - - "\t \n"+ - - "\t\n"+ - - "\t    ou    \n"+ - - "\t \n"+ - "\t\n"+ - -"

\n\n"); - - - - - -var fb = new FormBuilder(contactForm); -fb.add_definition(default_definition); -fb.add_definition(custom_definition); -fb.build({ - uid: 1, - call: 2, - sms: 3, - count_call: 4, - count_sms: 5, - number: '01 02 03 04 05', - existing: ['Jean', 'Archibald', 'Daniel', 'Maurice'], - username: 'moi-meme', - username_ph: 'Pseudo', - my_listener: function(e){ console.log('clicked', e); }, - existingsel: function(e){ console.log('selected', e); }, - getoptval: function(opt){ return opt; } +// +// Exemple code de construction +// ---------------------------- +// +// On instancie notre builder +var monBuilder = new FormBuilder(exempleFormulaire); +// on ajoute la/les définition(s) +monBuilder.add_definition(default_definition); +// on construit notre objet en lui passant toutes les données +monBuilder.build({ + url: 'https://xdrm.io/page1', // variable 'url' + default_firstname: 'Jean', // variable 'default_firstname' + liste_noms: ['Jean', 'Pierre', 'Robert', 'Marie', 'Anna', 'Félicien', 'Marc', 'Jésus'], // tableau 'list_noms' + getitemvalue: function(item){ return item; }, // pour chaque item, retournera la valeur brute + getitemlength: function(item){ return item.length; } // pour chaque item, retournera la taille de la valeur }); -fb.attach(document.body); +// +// Exemple code d'ajout au DOM +// --------------------------- +// soit monConteneur, l'élément qui contiendra le formulaire +var monConteneur = document.body; +// On ajoute le formulaire au conteneur +monBuilder.attach(monConteneur); + + +// +// Exemple de modification des valeurs +// ----------------------------------- +// les variables ommises lors de la création, ne sont pas modifiables +monBuilder.update({ + url: 'https://xdrm.io/page2', // on modifie l'URL + getitemlength: function(item){ return 10; } // on modifie notre fonction (on renvoie taille+1) +}); +// reconstruction du DOM +monBuilder.attach(monConteneur); diff --git a/view.php b/view.php index 7d17f1a..a3a547b 100755 --- a/view.php +++ b/view.php @@ -123,7 +123,7 @@ - +