/* [0] On efface le =========================================================*/ 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} - {options:i}/{options:n}', browse: { array: '{options[]}', funcs: { 'options.value': '{getval()}', 'options.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{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 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);