/* [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' }, '/^br([0-9]+)$/': { node_type: '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: '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 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: 'br2' }, { node: 'input.text', $name: 'username', $placeholder: '{usernameph}', $value: '{username}'}, { node: 'input.submit', $value: 'Enregistrer', attributes: { class: 'primary sub-number'} } ], next_nodes: [ { node: 'br2' } ] }; var a = ("

\n"+ "\t\n"+ "\t\n"+ "\t\n"+ "\t\n"+ "\t\n"+ "\t \n"+ "\t\n"+ "\t ou \n"+ "\t \n"+ "\t\n"+ "

\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);