From 3d5b5acda6177f7f84d8dbe801246799f236edbb Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Mon, 19 Sep 2016 12:07:04 +0200 Subject: [PATCH] =?UTF-8?q?Cr=C3=A9ation=20d'=C3=A9l=C3=A9ment=20fonctionn?= =?UTF-8?q?elle=20[FCT]=20reste=20=C3=A0=20g=C3=A9rer=20le=20repeat?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/lib/form-builder-min.js | 25 +++--- js/lib/form-builder.js | 152 +++++++++++++++++++++++++++++--- js/lib/form-builder/main-min.js | 7 +- js/lib/form-builder/main.js | 25 ++++-- 4 files changed, 176 insertions(+), 33 deletions(-) diff --git a/js/lib/form-builder-min.js b/js/lib/form-builder-min.js index 900111e..5ef40c2 100644 --- a/js/lib/form-builder-min.js +++ b/js/lib/form-builder-min.js @@ -1,12 +1,15 @@ -var ref=function(a,b){for(var e=null;null==e||a.hasOwnProperty(e);)e="$"+(1048576+Math.floor(15728639*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]{6}\$$/};FormBuilder.spread_attr=["children","next_nodes","prev_nodes","attributes","node_link"];FormBuilder.allowed_attr="node node_type next_nodes prev_nodes attributes children text repeat".split(" "); +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.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};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,d;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)&&(d=new RegExp(e.slice(1,-1)),d.test(a))){matches={};for(d=1;dd;d++)matches["$"+d]=RegExp["$"+d];return{def:b[e],scope:matches}}return{}}; -FormBuilder.replaceStatements=function(a,b,e,d){a=a instanceof Object?a:{};b=b instanceof Object?JSON.parse(JSON.stringify(b)):{};var c,f;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&&(f=FormBuilder.fetchNodeDefinition(a.node,e),f.hasOwnProperty("def")&&(a.node_link=JSON.parse(JSON.stringify(f.def)),f.hasOwnProperty("scope"))))for(c in f.scope)b[c]=f.scope[c];for(c in a)"string"==typeof a[c]&&(a[c]=[a[c]], -f=FormBuilder.replaceStatementsArray(a[c][0],b),!1!==f?a[c]=f:(a[c]=FormBuilder.replaceStatementsRegex(a[c],b),a[c]=FormBuilder.replaceStatementsPrimary(a[c],b),a[c]=FormBuilder.replaceStatementsArrayValue(a[c],b)));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);)f=e.lastIndex,c.push(d);for(d=f=0;dc;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 +* @definition Objet de définition de l'élément +* +* @return built Retourne les éléments construits +* +*/ +FormBuilder.buildElements = function(ref_table, definition){ + /* [0] Initialisation + ===========================================================*/ + var built = { + prev: [], // Les éléments précédents + node: null, // L'éléments actuel et ses antécédents/+ prédécesseurs + next: [] // Les éléments suivants + }; + + var i, j, tmp; + + + /* [1] On construit les éléments @prev_nodes, s'ils existent + ===========================================================*/ + if( definition.hasOwnProperty('prev_nodes') ) + for( i in definition.prev_nodes ) + built.prev = FormBuilder.buildElements(ref_table, definition.prev_nodes[i]); + + + /* [2] On construit les éléments @next_nodes s'ils existent + ===========================================================*/ + if( definition.hasOwnProperty('next_nodes') ) + for( i in definition.next_nodes ) + built.next = FormBuilder.buildElements(ref_table, definition.next_nodes[i]); + + + /* [3] On construit l'objet actuel + ===========================================================*/ + + /* (1) On crée l'élément + ---------------------------------------------------------*/ + /* (1) Si on a le type de hmtl */ + if( definition.hasOwnProperty('node_type') ) + built.node = document.createElement( FormBuilder.readRef(ref_table, definition.node_type) ); + + /* (2) Si c'est un sub-node, on récupère la définition récursivement */ + else if( definition.hasOwnProperty('node_link') ){ + tmp = FormBuilder.buildElements(ref_table, definition.node_link); + + /* On ajoute les éléments à l'instance actuelle */ + built.prev = built.prev.concat( tmp.prev ); + built.node = tmp.node; + built.next = tmp.next.concat( built.next ); + } + + + /* (2) On ajoute les attributs + ---------------------------------------------------------*/ + if( definition.hasOwnProperty('attributes') ){ + + // Pour chaque attribut, on définit + for( i in definition.attributes ) + built.node.setAttribute( i, FormBuilder.readRef(ref_table, definition.attributes[i]) ); + + } + + + /* (3) On ajoute le contenu HTML + ---------------------------------------------------------*/ + if( definition.hasOwnProperty('text') ){ + + // Note: Override les enfants + built.node.innerHTML = definition.text; + + } + + + /* (4) On ajoute les listeners + ---------------------------------------------------------*/ + if( definition.hasOwnProperty('listeners') ){ + + for( i in definition.listeners ){ + + built.node.addEventListener( + i, + FormBuilder.readRef(ref_table, definition.listeners[i].handler), + false + ); + + } + + } + + + /* [4] On ajoute tous les enfants + =========================================================*/ + if( definition.hasOwnProperty('children') ) + + /* (1) Pour chaque enfant */ + for( i in definition.children ){ + tmp = FormBuilder.buildElements(ref_table, definition.children[i]); + + /* (2) On ajoute les éléments précédent l'enfant */ + for( j in tmp.prev ) + built.node.appendChild( tmp.prev[j] ); + + /* (3) On ajoute l'enfant */ + built.node.appendChild( tmp.node ); + + /* (4) On ajoute les éléments suivants l'enfant */ + for( j in tmp.prev ) + built.node.appendChild( tmp.next[j] ); + + } + + + + + return built; +}; diff --git a/js/lib/form-builder/main-min.js b/js/lib/form-builder/main-min.js index 37bcee5..91b097f 100644 --- a/js/lib/form-builder/main-min.js +++ b/js/lib/form-builder/main-min.js @@ -1,4 +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"}]},"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}"},{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"]});console.log(fb.built_form);var str=function(a){return FormBuilder.readRef(fb.ref_table,a)}; +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}"}, +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); +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 fded33f..41e2f78 100644 --- a/js/lib/form-builder/main.js +++ b/js/lib/form-builder/main.js @@ -23,7 +23,10 @@ var custom_definition = { 'value': '{value}', 'placeholder': '{placeholder}' }, - next_nodes: [{ node: 'br' }] + next_nodes: [{ node: 'br' }], + listeners: { + 'click': '{clicklistener}' + } }, @@ -53,16 +56,16 @@ var 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: '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}' }, + { node: 'input.text', $name: 'number', $value: '{number}', $clicklistener: '{clicklistener}' }, - { node: 'custom-select', $name: 'existing', $$options: '{{options}}' } + { node: 'custom-select', $name: 'existing', $$options: '{{options}}' } ] }; @@ -82,8 +85,12 @@ fb.build({ countcall: 4, countsms: 5, number: '01 02 03 04 05', - options: ['a', 'b', 'c', 'd'] + options: ['a', 'b', 'c', 'd'], + clicklistener: function(e){ + console.log(e); + } }); console.log(fb.built_form); var str = function(attr){ return FormBuilder.readRef(fb.ref_table, attr); }; +fb.attach(document.body);