From bdf1aa9ab1e2a02d5befb67041586ba8377c1b78 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Fri, 23 Sep 2016 16:37:35 +0200 Subject: [PATCH] Gestion de l'affectation de la valeur d'un // - if( select ){ - // On met à jour la valeur - built[b].node[created].addEventListener('change', function(e){ - - // Uniquement si tableau de taille 1 avec une reference - if( !(definition.selected instanceof Array) ) return; - if( definition.selected.length > 1 ) return; - if( !FormBuilder.regex.ref_pri.test(definition.selected[0]) ) return; - - // on recupere cette reference - var selected_ref = definition.selected[0]; - - // On recupere la derniere reference - var last = selected_ref, - curr = selected_ref; - - // On var jusqu'a la valeur - while( FormBuilder.regex.ref_pri.test(curr) ){ - last = curr; - curr = ref_table[ curr ]; - - if( curr instanceof Array ) - curr = curr[0]; - } - - // On attribut la valeur modifiee - ref_table[ last ] = this.value; - }, false); - - } - - - // {4} Si de type texte // - if( input ){ - - // On met à jour la valeur - built[b].node[created].addEventListener('input', function(e){ - - // Uniquement si tableau de taille 1 avec une reference - if( !(definition.value instanceof Array) ) return; - if( definition.value.length > 1 ) return; - if( !FormBuilder.regex.ref_pri.test(definition.value[0]) ) return; - - // on recupere cette reference - var value_ref = definition.value[0]; - - // On recupere la derniere reference - var last = value_ref, - curr = value_ref; - - // On var jusqu'a la valeur - while( FormBuilder.regex.ref_pri.test(curr) ){ - last = curr; - curr = ref_table[ curr ]; - - if( curr instanceof Array ) - curr = curr[0]; - } - - // On attribut la valeur modifiee - ref_table[ last ] = this.value; - - }, false); - - } + built[b].node.push( document.createElement( FormBuilder.readRef(ref_table, definition.node_type) ) ) - 1; } @@ -1291,8 +1225,101 @@ FormBuilder.createElements = function(definition, ref_table, ref_assoc){ } + + } + + + /* (8) Gestion de la récupération dynamique */ + for( n in built[b].node ){ + + // {2} Determination du type // + var input = FormBuilder.fetchNodeType(definition) == 'input' && definition.hasOwnProperty('_value'); + var select = FormBuilder.fetchNodeType(definition) == 'select' && definition.hasOwnProperty('_selected'); + + // {3} Si de type texte // + if( input ){ + + // On met à jour la valeur + built[b].node[n].addEventListener('input', function(e){ + + // Uniquement si tableau de taille 1 avec une reference + if( !(definition._value instanceof Array) ) return; + if( definition._value.length > 1 ) return; + if( !FormBuilder.regex.ref_pri.test(definition._value[0]) ) return; + + // on recupere cette reference + var value_ref = definition._value[0]; + + // On recupere la derniere reference + var last = value_ref, + curr = value_ref; + + // On var jusqu'a la valeur + while( FormBuilder.regex.ref_pri.test(curr) ){ + last = curr; + curr = ref_table[ curr ]; + + if( curr instanceof Array ) + curr = curr[0]; + } + + // On attribut la valeur modifiee + ref_table[ last ] = this.value; + + }, false); + + } + + // TODO: Gestion de la transmission de 'value' / 'selected' lors de la construction + + } } @@ -1457,6 +1484,26 @@ FormBuilder.applyCSS = function(element, css){ }; +/* RETOURNE LE NODE_TYPE EN PARCOURANT LES DEFINITION RECURSIVEMENT +* +* @definition Definition contenant node_link ou node_type +* +* @return node_type Node_type final en suivant les définition +* +*/ +FormBuilder.fetchNodeType = function(definition){ + + /* (1) Si c'est la définition finale */ + if( definition.hasOwnProperty('node_type') ) + return definition.node_type; + + /* (2) Si on trouve un lien vers définition, on lance récursivement */ + else if( definition.hasOwnProperty('node_link') ) + return FormBuilder.fetchNodeType(definition.node_link); + +}; + + FormBuilder.DOMUpdates = function(events){ var e; diff --git a/js/lib/form-builder/main-min.js b/js/lib/form-builder/main-min.js index b1d8b72..3cace7e 100644 --- a/js/lib/form-builder/main-min.js +++ b/js/lib/form-builder/main-min.js @@ -1,6 +1,6 @@ document.body.innerHTML="";"use strict"; -var default_definition={input:{node_type:"input",value:"{value}"},"/^h([1-6])$/":{node_type:"h{$1}"},br:{node_type:"br"},option:{node_type:"option"},select:{node_type:"select",selected:"{selected}"},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()}"},$selected:"{selected}"}]}},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}"}, +var default_definition={input:{node_type:"input",_value:"{value}"},"/^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()}"}}}],_selected:"{selected}",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()}",$selected:"{s}"},{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({s:1,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); diff --git a/js/lib/form-builder/main.js b/js/lib/form-builder/main.js index f594f7b..1bda7c4 100644 --- a/js/lib/form-builder/main.js +++ b/js/lib/form-builder/main.js @@ -6,11 +6,11 @@ document.body.innerHTML = ''; var default_definition = { - 'input': { node_type: 'input', value: '{value}' }, + 'input': { node_type: 'input', _value: '{value}' }, '/^h([1-6])$/': { node_type: 'h{$1}' }, 'br': { node_type: 'br' }, 'option': { node_type: 'option' }, - 'select': { node_type: 'select', selected: '{selected}' }, + 'select': { node_type: 'select' }, 'span': { node_type: 'span' }, '/^br([0-9]+)$/': { node: 'br', repeat: { n: '{$1}', id: 'brs' } } }; @@ -46,8 +46,8 @@ var custom_definition = { } } ], - listeners: { 'change': '{listener()}' }, - $selected: '{selected}' + _selected: '{selected}', + listeners: { 'change': '{listener()}' } } ] }