2016-09-21 11:09:12 +00:00
|
|
|
/* [0] On efface le <body>
|
|
|
|
|
=========================================================*/
|
2016-09-25 10:25:34 +00:00
|
|
|
// document.body.innerHTML = '';
|
2016-09-16 14:52:41 +00:00
|
|
|
|
2016-09-21 11:09:12 +00:00
|
|
|
"use strict";
|
|
|
|
|
|
|
|
|
|
|
2016-09-17 08:02:22 +00:00
|
|
|
var default_definition = {
|
2016-09-23 14:37:35 +00:00
|
|
|
'input': { node_type: 'input', _value: '{value}' },
|
2016-09-21 11:09:12 +00:00
|
|
|
'/^h([1-6])$/': { node_type: 'h{$1}' },
|
|
|
|
|
'br': { node_type: 'br' },
|
|
|
|
|
'option': { node_type: 'option' },
|
2016-09-23 14:37:35 +00:00
|
|
|
'select': { node_type: 'select' },
|
2016-09-21 11:09:12 +00:00
|
|
|
'span': { node_type: 'span' },
|
|
|
|
|
'/^br([0-9]+)$/': { node: 'br', repeat: { n: '{$1}', id: 'brs' } }
|
|
|
|
|
};
|
2016-09-17 08:02:22 +00:00
|
|
|
|
2016-09-21 11:09:12 +00:00
|
|
|
var custom_definition = {
|
|
|
|
|
'/^input\.([a-z]+)$/': {
|
|
|
|
|
node: 'input',
|
2016-09-21 09:53:04 +00:00
|
|
|
attributes: {
|
2016-09-21 11:09:12 +00:00
|
|
|
'type': '{$1}',
|
|
|
|
|
'data-name': '{name}',
|
|
|
|
|
'value': '{value}',
|
|
|
|
|
'placeholder': '{placeholder}'
|
|
|
|
|
},
|
|
|
|
|
listeners: { 'click': '{click_listener()}' }
|
2016-09-21 09:53:04 +00:00
|
|
|
},
|
2016-09-17 08:02:22 +00:00
|
|
|
|
2016-09-21 11:09:12 +00:00
|
|
|
|
|
|
|
|
'custom-select': {
|
|
|
|
|
node: 'span',
|
|
|
|
|
attributes: { 'class': 'select-container nobold' },
|
2016-09-17 08:02:22 +00:00
|
|
|
children: [
|
|
|
|
|
{
|
2016-09-21 11:09:12 +00:00
|
|
|
node: 'select',
|
|
|
|
|
attributes: { 'data-name': '{name}' },
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
node: 'option',
|
2016-09-25 10:25:34 +00:00
|
|
|
attributes: { value: '{options.index}' },
|
2016-09-21 11:09:12 +00:00
|
|
|
text: '{options.value}',
|
|
|
|
|
browse: {
|
|
|
|
|
array: '{options[]}',
|
2016-09-25 10:25:34 +00:00
|
|
|
funcs: {
|
|
|
|
|
'options.value': '{getoptval()}',
|
|
|
|
|
'options.index': '{getoptid()}'
|
|
|
|
|
}
|
2016-09-21 11:09:12 +00:00
|
|
|
}
|
2016-09-17 08:02:22 +00:00
|
|
|
}
|
2016-09-21 11:09:12 +00:00
|
|
|
],
|
2016-09-23 14:37:35 +00:00
|
|
|
_selected: '{selected}',
|
|
|
|
|
listeners: { 'change': '{listener()}' }
|
2016-09-17 08:02:22 +00:00
|
|
|
}
|
2016-09-25 10:25:34 +00:00
|
|
|
],
|
|
|
|
|
next_nodes: [
|
|
|
|
|
{ node_type: 'text', text: ' ou ' }
|
2016-09-21 11:09:12 +00:00
|
|
|
]
|
2016-09-17 08:02:22 +00:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
2016-09-25 10:25:34 +00:00
|
|
|
var forms = {
|
2016-09-17 08:02:22 +00:00
|
|
|
|
2016-09-25 10:25:34 +00:00
|
|
|
'contact': {
|
|
|
|
|
node: 'h4',
|
|
|
|
|
attributes: { 'data-icon': 'o', class: 'new-contact color2' },
|
|
|
|
|
children: [
|
|
|
|
|
{ node: 'input.hidden', $name: 'uid', $value: '{contacts.uid}' },
|
|
|
|
|
{ node: 'input.hidden', $name: 'call', $value: '{contacts.call}' },
|
|
|
|
|
{ node: 'input.hidden', $name: 'sms', $value: '{contacts.sms}' },
|
|
|
|
|
{ node: 'input.hidden', $name: 'countcall', $value: '{contacts.count_call}' },
|
|
|
|
|
{ node: 'input.hidden', $name: 'countsms', $value: '{contacts.count_sms}' },
|
|
|
|
|
|
|
|
|
|
{ node: 'input.text', $name: 'number', $value: '{contacts.number}' },
|
|
|
|
|
|
|
|
|
|
{ node: 'custom-select', $name: 'existing', $options: '{contacts.existing}', $selected: '{contacts.friend}' },
|
|
|
|
|
|
|
|
|
|
{ node: 'input.text', $name: 'username', $placeholder: '{username_ph}', $value: '{contacts.username}'},
|
|
|
|
|
{ node: 'input.submit', $value: 'Enregistrer', attributes: { class: 'primary sub-number'} }
|
|
|
|
|
],
|
|
|
|
|
browse: {
|
|
|
|
|
array: '{contacts[]}',
|
|
|
|
|
funcs: {
|
|
|
|
|
'contacts.existing': '{cexisting()}'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2016-09-17 08:02:22 +00:00
|
|
|
|
2016-09-21 09:53:04 +00:00
|
|
|
};
|
2016-09-21 11:09:12 +00:00
|
|
|
|
|
|
|
|
|
2016-09-25 10:25:34 +00:00
|
|
|
var myForm = {
|
|
|
|
|
node: 'contact'
|
|
|
|
|
};
|
2016-09-21 11:09:12 +00:00
|
|
|
|
|
|
|
|
// On active le debug des performances
|
|
|
|
|
// FormBuilder.debug_time = true;
|
|
|
|
|
// FormBuilder.debug_time_details = true;
|
|
|
|
|
|
2016-09-25 10:25:34 +00:00
|
|
|
/* [1] Création des données
|
|
|
|
|
=========================================================*/
|
|
|
|
|
var contactData = [];
|
|
|
|
|
|
|
|
|
|
for( var c = 0 ; c < 10 ; c++ ){
|
|
|
|
|
|
|
|
|
|
contactData[c] = {
|
|
|
|
|
uid: c,
|
|
|
|
|
call: Math.floor(Math.random()*10),
|
|
|
|
|
sms: 10+Math.floor(Math.random()*10),
|
|
|
|
|
number: '05 06 07 08 0'+ Math.floor(Math.random()*10),
|
|
|
|
|
username: ( 0x100000 + Math.floor(Math.random()*0xefffff) ).toString(16),
|
|
|
|
|
existing: {
|
|
|
|
|
'.': 'Choisir un contact existant',
|
|
|
|
|
1: String.fromCharCode(65+(c+0)%26),
|
|
|
|
|
2: String.fromCharCode(65+(c+1)%26),
|
|
|
|
|
3: String.fromCharCode(65+(c+2)%26)
|
|
|
|
|
},
|
|
|
|
|
friend: 1+Math.floor( Math.random()*4 ),
|
|
|
|
|
|
|
|
|
|
count_call: 100+Math.floor(Math.random()*10),
|
|
|
|
|
count_sms: 1000+Math.floor(Math.random()*10)
|
|
|
|
|
};
|
2016-09-22 13:01:01 +00:00
|
|
|
|
2016-09-25 10:25:34 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* [2] Création du formulaire
|
|
|
|
|
=========================================================*/
|
|
|
|
|
var fb = new FormBuilder(myForm);
|
2016-09-21 11:09:12 +00:00
|
|
|
fb.add_definition(default_definition);
|
|
|
|
|
fb.add_definition(custom_definition);
|
2016-09-25 10:25:34 +00:00
|
|
|
fb.add_definition(forms);
|
2016-09-21 11:09:12 +00:00
|
|
|
fb.build({
|
2016-09-25 10:25:34 +00:00
|
|
|
contacts: contactData,
|
2016-09-22 13:01:01 +00:00
|
|
|
username_ph: 'Pseudo',
|
2016-09-25 10:25:34 +00:00
|
|
|
cexisting: function(k, v){ return v.existing; },
|
|
|
|
|
getoptid: function(id, opt){ return id; },
|
|
|
|
|
getoptval: function(id, opt){ return opt; }
|
2016-09-21 09:53:04 +00:00
|
|
|
});
|
2016-09-21 11:09:12 +00:00
|
|
|
|
2016-09-25 10:25:34 +00:00
|
|
|
// fb.attach(document.body);
|
