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

139 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}'
},
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()}' }
}
]
}
};
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: 'br' } ]
};
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&nbsp;&nbsp;&nbsp;&nbsp;ou&nbsp;&nbsp;&nbsp;&nbsp;\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);