103 lines
2.8 KiB
JavaScript
103 lines
2.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' }
|
|
};
|
|
|
|
var custom_definition = {
|
|
'/^input\.([a-z]+)$/': {
|
|
node: 'input',
|
|
attributes: {
|
|
'type': '{$1}',
|
|
'data-name': '{name}',
|
|
'value': '{value}',
|
|
'placeholder': '{placeholder}'
|
|
},
|
|
next_nodes: [{ node: 'br' }],
|
|
listeners: {
|
|
'focus': '{xx()}'
|
|
}
|
|
},
|
|
|
|
|
|
'custom-select': {
|
|
node: 'span',
|
|
attributes: { 'class': 'select-container nobold' },
|
|
children: [
|
|
{
|
|
node: 'select',
|
|
attributes: { 'data-name': '{name}' },
|
|
children: [
|
|
{
|
|
node: 'option',
|
|
attributes: { value: '{options.id}' },
|
|
text: '{options.value}',
|
|
browse: {
|
|
array: '{options[]}',
|
|
funcs: {
|
|
'option.value': '{getval()}',
|
|
'option.id': '{getnam()}'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
],
|
|
next_nodes: [{ node: 'br' }]
|
|
}
|
|
};
|
|
|
|
|
|
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', $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 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(e){ console.log('clicked', e); },
|
|
getval: function(item){ return item; },
|
|
getnam: function(item){ return '['+item+']'; }
|
|
});
|
|
console.log(fb.built_form);
|
|
|
|
var str = function(attr){ return FormBuilder.readRef(fb.ref_table, attr); };
|
|
fb.attach(document.body);
|