From bb75d6241285f5ece220890135e223d57fe900f6 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Mon, 19 Sep 2016 12:35:17 +0200 Subject: [PATCH] =?UTF-8?q?Gestion=20des=20'listeners'=20par=20r=C3=A9f?= =?UTF-8?q?=C3=A9rence?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/lib/form-builder-min.js | 13 +++--- js/lib/form-builder.js | 81 ++++++++++++++++++++++++++------- js/lib/form-builder/main-min.js | 4 +- js/lib/form-builder/main.js | 4 +- 4 files changed, 76 insertions(+), 26 deletions(-) diff --git a/js/lib/form-builder-min.js b/js/lib/form-builder-min.js index 5ef40c2..8dfcf7d 100644 --- a/js/lib/form-builder-min.js +++ b/js/lib/form-builder-min.js @@ -1,15 +1,16 @@ 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:{},ref_assoc:{}}; -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-]+)$/,ref_pri:/^\$[a-f0-9]{8}\$$/};FormBuilder.spread_attr="children next_nodes prev_nodes attributes node_link listeners".split(" ");FormBuilder.allowed_attr="node node_type next_nodes prev_nodes attributes children text repeat".split(" "); +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".split(" ");FormBuilder.allowed_attr="node node_type next_nodes prev_nodes attributes children text repeat".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)}; 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;var b;a=FormBuilder.buildElements(this.ref_table,this.built_form);for(b in a.prev)this.parent_element.appendChild(a.prev[b]);this.parent_element.appendChild(a.node);for(b in a.next)this.parent_element.appendChild(a.next[b])}; FormBuilder.formatFormObject=function(a,b){if(a.hasOwnProperty("children"))for(var e in a.children)a.children[e].parent=a,FormBuilder.formatFormObject(a.children[e],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){a=a instanceof Object?a:{};b=b instanceof Object?JSON.parse(JSON.stringify(b)):{};var d,f;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&&(f=FormBuilder.fetchNodeDefinition(a.node,e),f.hasOwnProperty("def")&&(a.node_link=JSON.parse(JSON.stringify(f.def)),f.hasOwnProperty("scope"))))for(d in f.scope)b[d]=f.scope[d];for(d in a)"string"==typeof a[d]&&(a[d]=[a[d]], -f=FormBuilder.replaceStatementsArray(a[d][0],b),!1!==f?a[d]=f:(a[d]=FormBuilder.replaceStatementsRegex(a[d],b),a[d]=FormBuilder.replaceStatementsPrimary(a[d],b),a[d]=FormBuilder.replaceStatementsArrayValue(a[d],b)));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);)f=e.lastIndex,d.push(c);for(c=f=0;c Objet contenant les références * @statement String contenant la chaine * @scope Objet contenant le scope * * @return newVal Retourne la nouvelle (ref) valeur ou FALSE si rien n'a été fais * */ -FormBuilder.replaceStatementsArray = function(statement, scope){ +FormBuilder.replaceStatementsFunction = function(ref_table, statement, scope){ + /* (1) On initialise les variables */ + var match = null; + var regex = FormBuilder.regex.fun_out_val; + + /* (2) On exécute la regex */ + match = regex.exec(statement); + + /* (3) Si ça match pas, on retourne FALSE */ + if( match === null ) + return false; + + /* (4) Sinon, si la fonction n'est pas dans le scope, on l'initialise */ + if( !scope.hasOwnProperty(match[1]) ) + scope[match[1]] = ref( ref_table, function(){} ); // on met une fonction vide + + /* (5) On remplace le 'statement' par la fonction */ + return scope[match[1]]; + +}; + +/* REMPLACE UN TABLEAU SOUS LA FORME "{{arrayName}}" par sa référence +* +* @ref_table Objet contenant les références +* @statement String contenant la chaine +* @scope Objet contenant le scope +* +* @return newVal Retourne la nouvelle (ref) valeur ou FALSE si rien n'a été fais +* +*/ +FormBuilder.replaceStatementsArray = function(ref_table, statement, scope){ /* (1) On initialise les variables */ var match = null; var regex = FormBuilder.regex.arr_out_set; @@ -506,7 +550,7 @@ FormBuilder.replaceStatementsArray = function(statement, scope){ /* (4) Sinon, si le tableau n'est pas dans le scope, on l'initialise */ if( !scope.hasOwnProperty(match[1]) ) - scope[match[1]] = []; // on met un tableau vide + scope[match[1]] = ref( ref_table, []); // on met un tableau vide /* (5) On remplace le 'statement' par le tableau */ return scope[match[1]]; @@ -750,14 +794,18 @@ FormBuilder.readRef = function(ref_table, parts){ var i, built = ""; - /* [1] Si c'est un tableau, on le retourne + /* [1] Si c'est un tableau ou une fonction, on le retourne =========================================================*/ if( typeof parts == 'string' && FormBuilder.regex.ref_pri.test(parts) ){ // tant qu'on a une référence - while( typeof parts == 'string' && FormBuilder.regex.ref_pri.test(parts) ) + while( typeof parts == 'string' && FormBuilder.regex.ref_pri.test(parts) ){ parts = ref_table[parts]; + if( parts instanceof Array && parts.length == 1) + parts = parts[0]; + } + return parts; } @@ -771,15 +819,15 @@ FormBuilder.readRef = function(ref_table, parts){ // si le résultat est un tableau, on lance récursivement if( ref_table[parts[i]] instanceof Array ) - built += ''+ FormBuilder.readRef(ref_table, ref_table[parts[i]]); + built += FormBuilder.readRef(ref_table, ref_table[parts[i]]); // sinon else - built += '' + ref_table[parts[i]]; + built += ref_table[parts[i]]; /* (2) Sinon, on ajoute simplement */ }else - built += '' + parts[i].toString(); + built += parts[i].toString(); } @@ -874,9 +922,10 @@ FormBuilder.buildElements = function(ref_table, definition){ built.node.addEventListener( i, - FormBuilder.readRef(ref_table, definition.listeners[i].handler), + FormBuilder.readRef(ref_table, definition.listeners[i]), false ); + console.log('listener', i, FormBuilder.readRef(ref_table, definition.listeners[i])); } diff --git a/js/lib/form-builder/main-min.js b/js/lib/form-builder/main-min.js index 91b097f..c963061 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"}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},next_nodes:[{node:"br"}],listeners:{click:"{clicklistener}"}},"custom-select":{node:"span",attributes:{"class":"select-container nobold"},children:[{node:"select",attributes:{"data-name":"{name}"}, +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"}},custom_definition={"/^input.([a-z]+)$/":{node:"input",attributes:{type:"{$1}","data-name":"{name}",value:"{value}",placeholder:"{placeholder}"},next_nodes:[{node:"br"}],listeners:{focus:"{xx}()"}},"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"}]}},form={node:"h4",attributes:{"data-icon":"o","class":"new-contact color2"},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:"{countcall}"},{node:"input.hidden",$name:"countsms",$value:"{countsms}"},{node:"input.hidden", -$name:"total",$value:"xx{countcall} calls + {countsms} sms to {number}xx"},{node:"input.text",$name:"number",$value:"{number}",$clicklistener:"{clicklistener}"},{node:"custom-select",$name:"existing",$$options:"{{options}}"}]},fb=new FormBuilder(form);fb.add_definition(default_definition);fb.add_definition(custom_definition);fb.build({uid:1,call:2,sms:3,countcall:4,countsms:5,number:"01 02 03 04 05",options:["a","b","c","d"],clicklistener:function(a){console.log(a)}});console.log(fb.built_form); +$name:"total",$value:"xx{countcall} calls + {countsms} sms to {number}xx"},{node:"input.text",$name:"number",$value:"{number}",$xx:"{clicklistener}"},{node:"custom-select",$name:"existing",$$options:"{{options}}"}]},fb=new FormBuilder(form);fb.add_definition(default_definition);fb.add_definition(custom_definition);fb.build({uid:1,call:2,sms:3,countcall:4,countsms:5,number:"01 02 03 04 05",options:["a","b","c","d"],clicklistener:function(a){console.log(a)}});console.log(fb.built_form); var str=function(a){return FormBuilder.readRef(fb.ref_table,a)};fb.attach(document.body); diff --git a/js/lib/form-builder/main.js b/js/lib/form-builder/main.js index 41e2f78..6858f77 100644 --- a/js/lib/form-builder/main.js +++ b/js/lib/form-builder/main.js @@ -25,7 +25,7 @@ var custom_definition = { }, next_nodes: [{ node: 'br' }], listeners: { - 'click': '{clicklistener}' + 'focus': '{xx}()' } }, @@ -63,7 +63,7 @@ var form = { { node: 'input.hidden', $name: 'countsms', $value: '{countsms}' }, { node: 'input.hidden', $name: 'total', $value: 'xx{countcall} calls + {countsms} sms to {number}xx' }, - { node: 'input.text', $name: 'number', $value: '{number}', $clicklistener: '{clicklistener}' }, + { node: 'input.text', $name: 'number', $value: '{number}', $xx: '{clicklistener}' }, { node: 'custom-select', $name: 'existing', $$options: '{{options}}' } ]