/* [0] On efface le =========================================================*/ // document.body.innerHTML = ''; "use strict"; var default_definition = { 'input': { node_type: 'input', _value: '{value}' }, '/^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': '{click_listener()}' } }, 'custom-select': { node: 'span', attributes: { 'class': 'select-container nobold' }, children: [ { node: 'select', attributes: { 'data-name': '{name}' }, children: [ { node: 'option', attributes: { value: '{options.index}' }, text: '{options.value}', browse: { array: '{options[]}', funcs: { 'options.value': '{getoptval()}', 'options.index': '{getoptid()}' } } } ], _selected: '{selected}', listeners: { 'change': '{listener()}' } } ], next_nodes: [ { node_type: 'text', text: ' ou ' } ] } }; var forms = { 'contact': { node: 'h4', attributes: { 'data-icon': 'o', class: 'new-contact color2' }, children: [ { node: 'input.hidden', $name: 'uid', $value: '{contacts.uid}' }, { node: 'input.hidden', $name: 'call', $value: '{contacts.call}' }, { node: 'input.hidden', $name: 'sms', $value: '{contacts.sms}' }, { node: 'input.hidden', $name: 'countcall', $value: '{contacts.count_call}' }, { node: 'input.hidden', $name: 'countsms', $value: '{contacts.count_sms}' }, { node: 'input.text', $name: 'number', $value: '{contacts.number}' }, { node: 'custom-select', $name: 'existing', $options: '{contacts.existing}', $selected: '{contacts.friend}' }, { node: 'input.text', $name: 'username', $placeholder: '{username_ph}', $value: '{contacts.username}'}, { node: 'input.submit', $value: 'Enregistrer', attributes: { class: 'primary sub-number'} } ], browse: { array: '{contacts[]}', funcs: { 'contacts.existing': '{cexisting()}' } } } }; var myForm = { node: 'contact' }; // On active le debug des performances // FormBuilder.debug_time = true; // FormBuilder.debug_time_details = true; /* [1] Création des données =========================================================*/ var contactData = []; for( var c = 0 ; c < 10 ; c++ ){ contactData[c] = { uid: c, call: Math.floor(Math.random()*10), sms: 10+Math.floor(Math.random()*10), number: '05 06 07 08 0'+ Math.floor(Math.random()*10), username: ( 0x100000 + Math.floor(Math.random()*0xefffff) ).toString(16), existing: { '.': 'Choisir un contact existant', 1: String.fromCharCode(65+(c+0)%26), 2: String.fromCharCode(65+(c+1)%26), 3: String.fromCharCode(65+(c+2)%26) }, friend: 1+Math.floor( Math.random()*4 ), count_call: 100+Math.floor(Math.random()*10), count_sms: 1000+Math.floor(Math.random()*10) }; } /* [2] Création du formulaire =========================================================*/ var fb = new FormBuilder(myForm); fb.add_definition(default_definition); fb.add_definition(custom_definition); fb.add_definition(forms); fb.build({ contacts: contactData, username_ph: 'Pseudo', cexisting: function(k, v){ return v.existing; }, getoptid: function(id, opt){ return id; }, getoptval: function(id, opt){ return opt; } }); // fb.attach(document.body);