Création d'élément fonctionnelle [FCT] reste à gérer le repeat
This commit is contained in:
xdrm-brackets
parent
0867417929
commit
3d5b5acda6
|
|
@ -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;d<RegExp.length&&10>d;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<FormBuilder.spread_attr.indexOf(c))if(a[c]instanceof Array)for(var h in a[c])FormBuilder.replaceStatements(a[c][h],
|
||||
b,e,d);else a[c]instanceof Object&&FormBuilder.replaceStatements(a[c],b,e,d);return a};FormBuilder.replaceStatementsArray=function(a,b){var e=null,e=FormBuilder.regex.arr_out_set.exec(a);if(null===e)return!1;b.hasOwnProperty(e[1])||(b[e[1]]=[]);return b[e[1]]};
|
||||
FormBuilder.replaceStatementsRegex=function(a,b){var e=FormBuilder.regex.reg_out_val,d=null,c=[],f,h,g,k;for(g=0;g<a.length;g++){m=null;c=[];f=-1;for(h=[];null!==(d=e.exec(a[g]))&&!(f>=e.lastIndex);)f=e.lastIndex,c.push(d);for(d=f=0;d<c.length;d++)k=c[d][1],(0<f||0<c[d].index)&&h.push(a[g].substr(f,c[d].index-f)),b.hasOwnProperty(k)||(b[k]=""),h.push(b[k]),f=c[d].index+c[d][0].length;f<a[g].length&&h.push(a[g].substr(f,a[g].length));a=a.slice(0,g).concat(h).concat(a.slice(g+1))}return a};
|
||||
FormBuilder.replaceStatementsPrimary=function(a,b){var e=FormBuilder.regex.pri_out_val,d=null,c=[],f,h,g,k;for(g=0;g<a.length;g++){m=null;c=[];f=0;for(h=[];null!==(d=e.exec(a[g]));)c.push(d);for(d=0;d<c.length;d++)k=c[d][1],(0<f||0<c[d].index)&&h.push(a[g].substr(f,c[d].index-f)),b.hasOwnProperty(k)||(b[k]=""),h.push(b[k]),f=c[d].index+c[d][0].length;f<a[g].length&&h.push(a[g].substr(f,a[g].length));a=a.slice(0,g).concat(h).concat(a.slice(g+1))}return a};
|
||||
FormBuilder.replaceStatementsArrayValue=function(a,b){var e=FormBuilder.regex.arr_out_val,d=null,c=[],f,h,g,k;for(g=0;g<a.length;g++){m=null;c=[];f=0;for(h=[];null!==(d=e.exec(a[g]));)c.push(d);for(d=0;d<c.length;d++)k=c[d][1],(0<f||0<c[d].index)&&h.push(a[g].substr(f,c[d].index-f)),b.hasOwnProperty(k)||(b[k]=""),h.push(b[k]),f=c[d].index+c[d][0].length;f<a[g].length&&h.push(a[g].substr(f,a[g].length));a=a.slice(0,g).concat(h).concat(a.slice(g+1))}return a};
|
||||
FormBuilder.readRef=function(a,b){var e,d="";if("string"==typeof b&&FormBuilder.regex.ref_pri.test(b)){for(;"string"==typeof b&&FormBuilder.regex.ref_pri.test(b);)b=a[b];return b}for(e in b)d=FormBuilder.regex.ref_pri.test(b[e])&&a.hasOwnProperty(b[e])?a[b[e]]instanceof Array?d+(""+FormBuilder.readRef(a,a[b[e]])):d+(""+a[b[e]]):d+(""+b[e].toString());return d};
|
||||
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;c<RegExp.length&&10>c;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<FormBuilder.spread_attr.indexOf(d))if(a[d]instanceof Array)for(var h in a[d])FormBuilder.replaceStatements(a[d][h],
|
||||
b,e,c);else a[d]instanceof Object&&FormBuilder.replaceStatements(a[d],b,e,c);return a};FormBuilder.replaceStatementsArray=function(a,b){var e=null,e=FormBuilder.regex.arr_out_set.exec(a);if(null===e)return!1;b.hasOwnProperty(e[1])||(b[e[1]]=[]);return b[e[1]]};
|
||||
FormBuilder.replaceStatementsRegex=function(a,b){var e=FormBuilder.regex.reg_out_val,c=null,d=[],f,h,g,k;for(g=0;g<a.length;g++){m=null;d=[];f=-1;for(h=[];null!==(c=e.exec(a[g]))&&!(f>=e.lastIndex);)f=e.lastIndex,d.push(c);for(c=f=0;c<d.length;c++)k=d[c][1],(0<f||0<d[c].index)&&h.push(a[g].substr(f,d[c].index-f)),b.hasOwnProperty(k)||(b[k]=""),h.push(b[k]),f=d[c].index+d[c][0].length;f<a[g].length&&h.push(a[g].substr(f,a[g].length));a=a.slice(0,g).concat(h).concat(a.slice(g+1))}return a};
|
||||
FormBuilder.replaceStatementsPrimary=function(a,b){var e=FormBuilder.regex.pri_out_val,c=null,d=[],f,h,g,k;for(g=0;g<a.length;g++){m=null;d=[];f=0;for(h=[];null!==(c=e.exec(a[g]));)d.push(c);for(c=0;c<d.length;c++)k=d[c][1],(0<f||0<d[c].index)&&h.push(a[g].substr(f,d[c].index-f)),b.hasOwnProperty(k)||(b[k]=""),h.push(b[k]),f=d[c].index+d[c][0].length;f<a[g].length&&h.push(a[g].substr(f,a[g].length));a=a.slice(0,g).concat(h).concat(a.slice(g+1))}return a};
|
||||
FormBuilder.replaceStatementsArrayValue=function(a,b){var e=FormBuilder.regex.arr_out_val,c=null,d=[],f,h,g,k;for(g=0;g<a.length;g++){m=null;d=[];f=0;for(h=[];null!==(c=e.exec(a[g]));)d.push(c);for(c=0;c<d.length;c++)k=d[c][1],(0<f||0<d[c].index)&&h.push(a[g].substr(f,d[c].index-f)),b.hasOwnProperty(k)||(b[k]=""),h.push(b[k]),f=d[c].index+d[c][0].length;f<a[g].length&&h.push(a[g].substr(f,a[g].length));a=a.slice(0,g).concat(h).concat(a.slice(g+1))}return a};
|
||||
FormBuilder.readRef=function(a,b){var e,c="";if("string"==typeof b&&FormBuilder.regex.ref_pri.test(b)){for(;"string"==typeof b&&FormBuilder.regex.ref_pri.test(b);)b=a[b];return b}for(e in b)c=FormBuilder.regex.ref_pri.test(b[e])&&a.hasOwnProperty(b[e])?a[b[e]]instanceof Array?c+(""+FormBuilder.readRef(a,a[b[e]])):c+(""+a[b[e]]):c+(""+b[e].toString());return c};
|
||||
FormBuilder.buildElements=function(a,b){var e={prev:[],node:null,next:[]},c,d,f;if(b.hasOwnProperty("prev_nodes"))for(c in b.prev_nodes)e.prev=FormBuilder.buildElements(a,b.prev_nodes[c]);if(b.hasOwnProperty("next_nodes"))for(c in b.next_nodes)e.next=FormBuilder.buildElements(a,b.next_nodes[c]);b.hasOwnProperty("node_type")?e.node=document.createElement(FormBuilder.readRef(a,b.node_type)):b.hasOwnProperty("node_link")&&(f=FormBuilder.buildElements(a,b.node_link),e.prev=e.prev.concat(f.prev),e.node=
|
||||
f.node,e.next=f.next.concat(e.next));if(b.hasOwnProperty("attributes"))for(c in b.attributes)e.node.setAttribute(c,FormBuilder.readRef(a,b.attributes[c]));b.hasOwnProperty("text")&&(e.node.innerHTML=b.text);if(b.hasOwnProperty("listeners"))for(c in b.listeners)e.node.addEventListener(c,FormBuilder.readRef(a,b.listeners[c].handler),!1);if(b.hasOwnProperty("children"))for(c in b.children){f=FormBuilder.buildElements(a,b.children[c]);for(d in f.prev)e.node.appendChild(f.prev[d]);e.node.appendChild(f.node);
|
||||
for(d in f.prev)e.node.appendChild(f.next[d])}return e};
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ var ref = function(ref_table, variable){
|
|||
var key = null;
|
||||
|
||||
while( key == null || ref_table.hasOwnProperty(key) )
|
||||
key = '$'+ ( 0x100000+Math.floor( Math.random()*0xefffff) ).toString(16)+'$';
|
||||
key = '$'+ ( 0x10000000+Math.floor( Math.random()*0xefffffff) ).toString(16)+'$';
|
||||
|
||||
/* (2) On attribue la valeur */
|
||||
ref_table[key] = variable;
|
||||
|
|
@ -22,8 +22,6 @@ var ref = function(ref_table, variable){
|
|||
return key;
|
||||
};
|
||||
|
||||
// Lecteur de référence
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -73,7 +71,6 @@ FormBuilder.prototype = {
|
|||
};
|
||||
|
||||
|
||||
|
||||
/* DEFINITION DES ATTRIBUTS STATIQUES
|
||||
*
|
||||
*/
|
||||
|
|
@ -88,7 +85,7 @@ FormBuilder.regex = {
|
|||
arr_out_val: /\{([a-z-]+)\.([a-z-]+)\}/g, // Regex associée à une valeur de tableau à remplacer (primitif)
|
||||
arr_in_key: /^\$\$([a-z-]+)$/, // Regex associée à la clé d'un tableau
|
||||
|
||||
ref_pri: /^\$[a-f0-9]{6}\$$/ // Clé de référence
|
||||
ref_pri: /^\$[a-f0-9]{8}\$$/ // Clé de référence
|
||||
};
|
||||
|
||||
FormBuilder.spread_attr = [ // Liste des attributs diffusant le scope
|
||||
|
|
@ -96,7 +93,8 @@ FormBuilder.spread_attr = [ // Liste des attributs diffusant le scope
|
|||
'next_nodes', // diffuse aux éléments
|
||||
'prev_nodes', // diffuse aux éléments
|
||||
'attributes', // diffuse aux attributs
|
||||
'node_link'
|
||||
'node_link',
|
||||
'listeners'
|
||||
];
|
||||
|
||||
FormBuilder.allowed_attr = [ // Liste des attributs fixes autorisés
|
||||
|
|
@ -208,16 +206,30 @@ FormBuilder.prototype.attach = function(parent){
|
|||
/* [0] Initialisation
|
||||
=========================================================*/
|
||||
/* (1) Gestion du paramètre @parent */
|
||||
if( !(parent instanceof Element) && this.parent_element == null )
|
||||
if( !(parent instanceof Element) && this.parent_element === null )
|
||||
return false;
|
||||
|
||||
this.parent_element = (parent instanceof Element) ? parent : this.parent_element;
|
||||
// TODO: Gestion de la création des éléments HTML
|
||||
|
||||
/* [1] Chapter Title
|
||||
var i;
|
||||
|
||||
|
||||
/* [1] On construit le DOM
|
||||
=========================================================*/
|
||||
var dom = FormBuilder.buildElements(this.ref_table, this.built_form);
|
||||
|
||||
}
|
||||
/* (1) On ajoute les éléments précédents */
|
||||
for( i in dom.prev )
|
||||
this.parent_element.appendChild( dom.prev[i] );
|
||||
|
||||
/* (2) On ajoute l'élément cible */
|
||||
this.parent_element.appendChild( dom.node );
|
||||
|
||||
/* (3) On ajoute les éléments suivants */
|
||||
for( i in dom.next )
|
||||
this.parent_element.appendChild( dom.next[i] );
|
||||
|
||||
};
|
||||
|
||||
|
||||
/************************************************/
|
||||
|
|
@ -777,3 +789,123 @@ FormBuilder.readRef = function(ref_table, parts){
|
|||
return built;
|
||||
|
||||
};
|
||||
|
||||
|
||||
/* CONSTRUIT UN ELEMENT A PARTIR D'UNE DEFINITION
|
||||
*
|
||||
* @ref_table<Object> Objet contenant les références
|
||||
* @definition<Object> Objet de définition de l'élément
|
||||
*
|
||||
* @return built<Element[]> 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 <tag> 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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue