141 lines
4.8 KiB
JavaScript
141 lines
4.8 KiB
JavaScript
/* [0] On efface le <body>
|
|
=========================================================*/
|
|
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' },
|
|
'/^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}'
|
|
},
|
|
next_nodes: [ { node: 'br' } ],
|
|
listeners: { 'click': '{xx()}' }
|
|
},
|
|
|
|
|
|
'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()}' }
|
|
}
|
|
],
|
|
next_nodes: [{ node: 'br2' }]
|
|
}
|
|
};
|
|
|
|
|
|
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.text', $name: 'total', $value: 'xx{countcall} calls + {countsms} sms to {number}xx' },
|
|
{ node: 'input.text', $name: 'count{rep:i}', $value: '{rep:i} sur {rep:n}', repeat: {n: 10, id: "rep"} },
|
|
{ node: 'input.text', $name: 'number', $value: '{number}', $xx: '{clicklistener}' },
|
|
|
|
{ node: 'custom-select', $name: 'existing', $options: '{options[]}' }
|
|
]
|
|
};
|
|
|
|
var 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: '{countcall}' },
|
|
{ node: 'input.hidden', $name: 'countsms', $value: '{countsms}' },
|
|
|
|
{ node: 'input.text', $name: 'number', $value: '{number}' },
|
|
|
|
{ node: 'custom-select', $name: 'existing', $options: '{existing[]}', $listener: '{existingsel()}' },
|
|
|
|
{ node: 'input.text', $name: 'username', $placeholder: '{usernameph}', $value: '{username}'},
|
|
{ node: 'input.submit', $value: 'Enregistrer', attributes: { class: 'primary sub-number'} }
|
|
],
|
|
next_nodes: [ { node: 'br4' } ]
|
|
|
|
};
|
|
var a = ("<h4 data-icon='o' class='new-contact color2'> \n"+
|
|
|
|
"\t<input type='hidden' data-name='uid' value='@uid'>\n"+
|
|
"\t<input type='hidden' data-name='call' value='@call'>\n"+
|
|
"\t<input type='hidden' data-name='sms' value='@sms'>\n"+
|
|
|
|
"\t<input type='hidden' data-name='countcall' value='@countcall'>\n"+
|
|
"\t<input type='hidden' data-name='countsms' value='@countsms'>\n"+
|
|
|
|
"\t<input type='text' data-name='number' placeholder='Numéro de téléphone' value='@number' > \n"+
|
|
|
|
"\t<span class='select-container nobold'><select data-name='existing'>\n"+
|
|
"\t\t<option value='.'>Utiliser pseudo</option>\n"+
|
|
"@contacts"+
|
|
"\t</select></span>\n"+
|
|
|
|
"\t ou \n"+
|
|
|
|
"\t<input type='text' data-name='username' placeholder='Pseudo' value='@username' > \n"+
|
|
"\t<input type='submit' class='primary sub-number' value='Enregistrer'>\n"+
|
|
|
|
"</h4>\n\n");
|
|
|
|
|
|
|
|
|
|
|
|
var fb = new FormBuilder(contactForm);
|
|
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',
|
|
existing: ['Jean', 'Archibald', 'Daniel', 'Maurice'],
|
|
username: 'moi-meme',
|
|
usernameph: 'Pseudo',
|
|
clicklistener: function(e){ console.log('clicked', e); },
|
|
existingsel: function(e){ console.log('selected', e); },
|
|
getoptval: function(opt){ return opt; }
|
|
});
|
|
|
|
fb.attach(document.body);
|