NxTIC/public_html/js/lib/form-builder/main.js

142 lines
4.1 KiB
JavaScript
Raw Permalink Normal View History

/* [0] On efface le <body>
=========================================================*/
2016-09-25 10:25:34 +00:00
// 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' },
'span': { node_type: 'span' },
'/^br([0-9]+)$/': { node: 'br', repeat: { n: '{$1}', id: 'brs' } }
};
var 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',
2016-09-25 10:25:34 +00:00
attributes: { value: '{options.index}' },
text: '{options.value}',
browse: {
array: '{options[]}',
2016-09-25 10:25:34 +00:00
funcs: {
'options.value': '{getoptval()}',
'options.index': '{getoptid()}'
}
}
}
],
_selected: '{selected}',
listeners: { 'change': '{listener()}' }
}
2016-09-25 10:25:34 +00:00
],
next_nodes: [
{ node_type: 'text', text: '&nbsp;&nbsp;&nbsp;&nbsp;ou&nbsp;&nbsp;&nbsp;&nbsp;' }
]
}
};
2016-09-25 10:25:34 +00:00
var forms = {
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-25 10:25:34 +00:00
var myForm = {
node: 'contact'
};
// 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-25 10:25:34 +00:00
}
/* [2] Création du formulaire
=========================================================*/
var fb = new FormBuilder(myForm);
fb.add_definition(default_definition);
fb.add_definition(custom_definition);
2016-09-25 10:25:34 +00:00
fb.add_definition(forms);
fb.build({
2016-09-25 10:25:34 +00:00
contacts: contactData,
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-25 10:25:34 +00:00
// fb.attach(document.body);