From 6b325f71988c5bfdbcd60387c3ee1e3adc2431b1 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Wed, 21 Sep 2016 13:09:12 +0200 Subject: [PATCH] =?UTF-8?q?Gestion=20du=20debugger=20(pour=20les=20perfs?= =?UTF-8?q?=20et=20l'arbre=20d'ex=C3=A9cution'=20pour=20le=20'form-builder?= =?UTF-8?q?'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc/form-builder/behaviour-min.js | 2 +- doc/form-builder/behaviour.js | 2 +- js/lib/form-builder-min.js | 46 ++--- js/lib/form-builder.js | 121 +++++++++--- js/lib/form-builder/main-min.js | 10 +- js/lib/form-builder/main.js | 301 ++++++++++-------------------- 6 files changed, 226 insertions(+), 256 deletions(-) diff --git a/doc/form-builder/behaviour-min.js b/doc/form-builder/behaviour-min.js index d09d188..03203cc 100644 --- a/doc/form-builder/behaviour-min.js +++ b/doc/form-builder/behaviour-min.js @@ -2,4 +2,4 @@ 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); +monBuilder.update({url:"https://xdrm.io/page2",getitemlength:function(a){return a.length+1}});monBuilder.attach(monConteneur); diff --git a/doc/form-builder/behaviour.js b/doc/form-builder/behaviour.js index 1118dda..984ebcf 100644 --- a/doc/form-builder/behaviour.js +++ b/doc/form-builder/behaviour.js @@ -219,7 +219,7 @@ monBuilder.attach(monConteneur); // 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) + getitemlength: function(item){ return item.length+1; } // 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 f40b6be..e817c88 100644 --- a/js/lib/form-builder-min.js +++ b/js/lib/form-builder-min.js @@ -1,23 +1,25 @@ 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;this.built_form.hasOwnProperty("dom")&&FormBuilder.detachElements(this.parent_element,this.built_form.dom);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 e,c;r=FormBuilder.regex.reg_in_key;if("undefined"!=typeof b&&b.hasOwnProperty(a))return{def:b[a]};for(e in b)if(r.test(e)&&(c=new RegExp(e.slice(1,-1)),c.test(a))){matches={};for(c=1;cc;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;cf;f++)matches["$"+f]=RegExp["$"+f];FormBuilder.debugStop(e);return{def:b[d],scope:matches}}FormBuilder.debugStop(e);return{}}; +FormBuilder.replaceStatements=function(a,b,e,d,f){var g=FormBuilder.debugStart("FormBuilder::replaceStatements",2);a=a instanceof Object?a:{};b=b instanceof Object?JSON.parse(JSON.stringify(b)):{};var c,h;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&&(h=FormBuilder.fetchNodeDefinition(a.node,e),h.hasOwnProperty("def")&&(a.node_link=JSON.parse(JSON.stringify(h.def)),h.hasOwnProperty("scope"))))for(c in h.scope)b[c]= +h.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]],h=FormBuilder.replaceStatementsFunction(a[c][0],b,d),!1!==h?a[c]=h:(h=FormBuilder.replaceStatementsArray(a[c][0],b,d),!1!==h?a[c]=h:(a[c]=FormBuilder.replaceStatementsRegex(a[c],b),a[c]=FormBuilder.replaceStatementsPrimary(a[c],b),a[c]=FormBuilder.replaceStatementsArrayValue(a[c],b,d,f)))): +"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=e.lastIndex);)g=e.lastIndex,f.push(d);for(d=g=0;d",2);FormBuilder.debugStop(d);return a.dom=f}; +FormBuilder.attachElements=function(a,b){var e=FormBuilder.debugStart("FormBuilder::attachElements",2),d,f;for(d in b){for(f in b[d].prev)b[d].prev[f]instanceof Element&&a.appendChild(b[d].prev[f]),b[d].prev[f]instanceof Object&&FormBuilder.attachElements(a,[b[d].prev[f]]);for(f in b[d].node)b[d].node[f]instanceof Element&&a.appendChild(b[d].node[f]),b[d].node[f]instanceof Object&&FormBuilder.attachElements(a,[b[d].node[f]]);for(f in b[d].next)b[d].next[f]instanceof Element&&a.appendChild(b[d].next[f]), +b[d].next[f]instanceof Object&&FormBuilder.attachElements(a,[b[d].next[f]])}FormBuilder.debugStop(e)}; +FormBuilder.detachElements=function(a,b){var e,d;for(e in b){for(d in b[e].prev)b[e].prev[d]instanceof Element&&a.removeChild(b[e].prev[d]),b[e].prev[d]instanceof Object&&FormBuilder.detachElements(a,[b[e].prev[d]]);for(d in b[e].node)b[e].node[d]instanceof Element&&a.removeChild(b[e].node[d]),b[e].node[d]instanceof Object&&FormBuilder.detachElements(a,[b[e].node[d]]);for(d in b[e].next)b[e].next[d]instanceof Element&&a.removeChild(b[e].next[d]),b[e].next[d]instanceof Object&&FormBuilder.detachElements(a, +[b[e].next[d]])}};FormBuilder.applyCSS=function(a,b){for(var e in b)a.style[e]=b[e]}; diff --git a/js/lib/form-builder.js b/js/lib/form-builder.js index 7909e8f..55ed15c 100644 --- a/js/lib/form-builder.js +++ b/js/lib/form-builder.js @@ -103,6 +103,53 @@ FormBuilder.spread_attr = [ // Liste des attributs diffusant le scope 'funcs' ]; +// DEBUG des performances +FormBuilder.debug_time = false; +FormBuilder.debug_time_details = false; + +/* DEMARRAGE DU DEBUG +*/ +FormBuilder.debugStart = function(group, type){ + if( type == 1 && FormBuilder.debug_time ){} + else if( type == 2 && FormBuilder.debug_time_details ){} + else return {type: 0}; + + var time_r = '['+ parseInt( Math.random()*0xeffffffff ).toString(16) +']'; + + console.time(time_r); + console.group(group); + + return { + type: type, + time_r: time_r, + group: group + }; +}; + +/* MESSAGE DE DEBUG +*/ +FormBuilder.debug = function(message, type){ + if( type == 1 && FormBuilder.debug_time ){} + else if( type == 2 && FormBuilder.debug_time_details ){} + else return {type: 0}; + + console.debug(message); +}; + +/* AFFICHAGE DU DEBUG +*/ +FormBuilder.debugStop = function(obj){ + if( obj.type == 1 && FormBuilder.debug_time ){} + else if( obj.type == 2 && FormBuilder.debug_time_details ){} + else return null; + + + console.timeEnd(obj.time_r); + console.groupEnd(obj.group); +}; + +// FormBuilder.debugStart = function(){ console.time(); }; +// FormBuilder.debugStop = function(s){ console.timeEnd(); }; /************************************************************/ /* __ __ _____ _____ _ _ ___ ____ ____ */ @@ -118,12 +165,16 @@ FormBuilder.spread_attr = [ // Liste des attributs diffusant le scope * */ FormBuilder.prototype.add_definition = function(def_object){ + var dbg = FormBuilder.debugStart('FormBuilder.add_definition', 1); + /* [1] On ajoute la définition ==================================================================*/ for( var key in def_object ) this.defs_object[key] = def_object[key]; + + FormBuilder.debugStop(dbg); }; @@ -133,6 +184,8 @@ FormBuilder.prototype.add_definition = function(def_object){ * */ FormBuilder.prototype.build = function(scope){ + var dbg = FormBuilder.debugStart('FormBuilder.build', 1); + /* [0] Gestion du paramètres ==================================================================*/ /* (1) On initialise le scope vide s'il n'est pas donné */ @@ -151,16 +204,11 @@ FormBuilder.prototype.build = function(scope){ =========================================================*/ this.built_form = JSON.parse(JSON.stringify(this.form_object)); - /* [2] 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.built_form, this.defs_object); - - - /* [3] On remplace les valeurs + /* [2] On remplace les valeurs ==================================================================*/ this.built_form = FormBuilder.replaceStatements(this.built_form, scope, this.defs_object, this.ref_table, this.ref_assoc); + + FormBuilder.debugStop(dbg); }; @@ -170,6 +218,8 @@ FormBuilder.prototype.build = function(scope){ * */ FormBuilder.prototype.update = function(scope){ + var dbg = FormBuilder.debugStart('FormBuilder.update', 1); + /* [0] Gestion du paramètres ==================================================================*/ /* (1) On initialise le scope vide s'il n'est pas donné */ @@ -187,6 +237,8 @@ FormBuilder.prototype.update = function(scope){ } } + + FormBuilder.debugStop(dbg); }; @@ -197,6 +249,8 @@ FormBuilder.prototype.update = function(scope){ * */ FormBuilder.prototype.attach = function(parent){ + var dbg = FormBuilder.debugStart('FormBuilder.attach', 1); + /* [0] Initialisation =========================================================*/ /* (1) Gestion du paramètre @parent */ @@ -223,6 +277,7 @@ FormBuilder.prototype.attach = function(parent){ FormBuilder.attachElements(this.parent_element, dom); + FormBuilder.debugStop(dbg); }; @@ -234,22 +289,6 @@ FormBuilder.prototype.attach = function(parent){ /* |____/ |_/_/ \_\_| |___\____| */ /************************************************/ -/* 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){ - // TODO: à supprimer - return object; -}; - /* CHERCHE UNE DEFINITION CORRESPONDANT A L'ATTRIBUT 'node' * @@ -261,6 +300,9 @@ FormBuilder.formatFormObject = function(object, defs){ * */ FormBuilder.fetchNodeDefinition = function(node, defs){ + var dbg = FormBuilder.debugStart('FormBuilder::fetchNodeDefinition', 2); + FormBuilder.debug('node = "'+node+'"', 2); + /* [0] Initialisation ==================================================================*/ var m = null, key, i, regex; @@ -271,6 +313,8 @@ FormBuilder.fetchNodeDefinition = function(node, defs){ ==================================================================*/ if( typeof defs != 'undefined' && defs.hasOwnProperty(node) ){ + FormBuilder.debugStop(dbg); + return { def: defs[node] }; @@ -297,6 +341,8 @@ FormBuilder.fetchNodeDefinition = function(node, defs){ for( i = 1 ; i < RegExp.length && i < 10 ; i++ ) matches['$'+i] = RegExp['$'+i]; + FormBuilder.debugStop(dbg); + /* (3) On renvoie le lien + le scope */ return { def: defs[key], scope: matches }; @@ -309,9 +355,11 @@ FormBuilder.fetchNodeDefinition = function(node, defs){ } + FormBuilder.debugStop(dbg); // Si on a rien trouvé, on retourne NULL return {}; + }; @@ -327,6 +375,9 @@ FormBuilder.fetchNodeDefinition = function(node, defs){ * */ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table, ref_assoc){ + var dbg = FormBuilder.debugStart('FormBuilder::replaceStatements', 2); + + /* [0] Initialisation ==================================================================*/ /* (1) Paramètres */ @@ -476,15 +527,22 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table, /* (1) Si c'est un tableau, on lance récursivement pour chaque item */ if( object[key] instanceof Array ){ - for( var i in object[key] ) + for( var i in object[key] ){ + // on lance récursivement + FormBuilder.debug('**'+key+'['+i+']', 2); FormBuilder.replaceStatements(object[key][i], scope, definitions, ref_table, ref_assoc); + } + /* (2) Si c'est un objet, on lance récursivement */ - }else if( object[key] instanceof Object ) + }else if( object[key] instanceof Object ){ + // on lance récursivement + FormBuilder.debug('**'+key, 2); FormBuilder.replaceStatements(object[key], scope, definitions, ref_table, ref_assoc); + } } @@ -493,6 +551,8 @@ FormBuilder.replaceStatements = function(object, scope, definitions, ref_table, /* [5] On retourne l'object courant ==================================================================*/ + FormBuilder.debugStop(dbg); + return object; }; @@ -853,6 +913,8 @@ FormBuilder.readRef = function(ref_table, parts){ * */ FormBuilder.createElements = function(definition, ref_table, ref_assoc){ + var dbg = FormBuilder.debugStart('FormBuilder::createElements', 2); + /* [0] Initialisation ===========================================================*/ var built = []; @@ -1100,6 +1162,10 @@ FormBuilder.createElements = function(definition, ref_table, ref_assoc){ } + var identifier = definition.hasOwnProperty('node') ? definition.node : definition.node_type + FormBuilder.debug('<'+identifier+'>', 2); + FormBuilder.debugStop(dbg); + /* [8] On ajoute l'élément à la définition et retourne =========================================================*/ definition.dom = built; @@ -1114,6 +1180,7 @@ FormBuilder.createElements = function(definition, ref_table, ref_assoc){ * */ FormBuilder.attachElements = function(parent, set){ + var dbg = FormBuilder.debugStart('FormBuilder::attachElements', 2); var c, a; @@ -1170,6 +1237,8 @@ FormBuilder.attachElements = function(parent, set){ } + FormBuilder.debugStop(dbg); + }; diff --git a/js/lib/form-builder/main-min.js b/js/lib/form-builder/main-min.js index d09d188..b371b0a 100644 --- a/js/lib/form-builder/main-min.js +++ b/js/lib/form-builder/main-min.js @@ -1,5 +1,5 @@ -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); +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",my_listener:function(b){console.log("clicked",b)},existingsel:function(b){console.log("selected",b)},getoptval:function(b){return b}});fb.attach(document.body); diff --git a/js/lib/form-builder/main.js b/js/lib/form-builder/main.js index 1118dda..0e856fe 100644 --- a/js/lib/form-builder/main.js +++ b/js/lib/form-builder/main.js @@ -1,225 +1,124 @@ +/* [0] On efface le +=========================================================*/ document.body.innerHTML = ''; -// 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 -// ---------------------------- +"use strict"; + + var default_definition = { - // Les #Element avec 'node' valant 'input' seront liés à cette définition - 'input.text': { - node_type: 'input', // sera un + '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', attributes: { - 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' - } + 'type': '{$1}', + 'data-name': '{name}', + 'value': '{value}', + 'placeholder': '{placeholder}' + }, + listeners: { 'click': '{click_listener()}' } }, - // 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' - } - }, - // 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' - }, + { 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}' }, - { // 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' - } - } + { 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' } ] - // 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"+ -// -// 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 + "\t\n"+ + "\t\n"+ + "\t\n"+ + + "\t\n"+ + "\t\n"+ + + "\t \n"+ + + "\t\n"+ + + "\t    ou    \n"+ + + "\t \n"+ + "\t\n"+ + +"

\n\n"); + + + + +// On active le debug des performances +// FormBuilder.debug_time = true; +// FormBuilder.debug_time_details = true; + +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 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); +fb.attach(document.body);