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

document.body.innerHTML = '';

// CETTE CLASSE PERMET LA CREATION DE HTML A PARTIR D'UN OBJET JAVASCRIPT
//
//
// Notation:
//    - Une chaine de caractère précédée du symbole '@' correspond à un commentaire pour expliquer une valeur
//
//
// Types de donées:
//    - <S> Chaine de caractère
//    - <A> Tableau
//    - <O> Tableau associatif (objet)
//    - <I> Nombre entier
//    - <F> Fonction
//    - <*> Qu'importe
//
// Structure:
//    - L'objet permettant la création du HTML correspond à un #Element
//    - L'imbrication de ses #Element permet de construire une structure complète
//
//
// Fonctionnement:
//    - En plus de l'objet correspondant à l'élément HMTL, il faut spécifier des #Descriptions permettant
//       de générer le HTML
//
//
// Liste des attributs:
//    'node'       <S>   String permettant de lier l'élément à une définition (qui doit forcément avoir, soit une autre définition, soit 'node_type')
//    'node_type'  <S>   Type d'élément HTML, aucune définition n'est nécessaire
//    'children'   <A>   les #Element enfants de l'#Element en question
//    'prev_nodes' <A>   les #Element précédant l'#Element en question
//    'next_nodes' <A>   les #Element suivant l'#Element en question
//    'text'       <S>   Contenu textuel de l'#Element (cf. innerHTML)
//    'attributes' <O>   Tableau associatif contenant les attributs de l'#Element
//    'listeners'  <O>   Contient les associations { '@eventName': '@eventFunction' } - @eventName<S> - @eventFunction<F>
//    'repeat'     <O>   Définit le nombre de fois qu'il faut dupliquer l'#Element { n: @nbRepeat, id: '@idDuRepeat'}
//		    'n'          <I>   Nombre de fois qu'il faut dupliquer l'#Element
//		    'id'         <S>   Identifiant de la répétition, permet d'interpoler l'indice et le total
//		                       *Note: il est possible d'interpoler l'indice de l'#Element avec '{@idRepeat:i}' et le total avec '{@idRepeat:n}'
//    'browse'     <A/O> Définit le tableau sur lequel dupliquer l'#Element        { array: @tableau, funcs: { @nomValeur1: @func1, @nomValeur2: @func2 } }
//		    'array'      <A>   Tableau pour lequel dupliquer l'#Element (pour chaque valeur), l'interpolation se fait avec '{@nomTab.@nomAttr}'
//		    'funcs'      <B>   Définition d'actions sur chaque élément du tableau (interpolables de la même manière que les vrais attributs)
//		                       *Note: il est possible d'interpoler l'indice de l'#Element avec '{@nomTab:i}' et le total avec '{@nomTab:n}'
//    '$@someName' <*>   Un attribut commençant par le caractère '$' sera passé au scope de ses enfants, voisins, et définitions
//
//
// Interpolation de valeurs:
//    '{@nomVariable}'   sera remplacé par la variable 'nomVariable', si elle n'existe pas, par une chaine vide
//                       *Note: le nom de la variable ne peut contenir que : 1. des lettres en minuscules, des underscore ('_')
//    '{@nomTab[]}'      sera remplacé par le tableau 'nomTab', si il n'existe pas, par un tableau vide
//                       *Note: le nom de la variable ne peut contenir que : 1. des lettres en minuscules, des underscore ('_')
//    '{@nomFunc()}'     sera remplacé par la fonction 'nomFunc', si elle n'existe pas, par une fonction vide
//                       *Note: le nom de la variable ne peut contenir que : 1. des lettres en minuscules, des underscore ('_')
//    '{$@n}'            sera remplacé par le @n-ième match de la dernière RegExp valide
//                       *Note: ne peut qu'être utilisé dans les définitions, car c'est le seul endroit ou peuvent être des RegExp
//    '{@tab.@attr}'     sera remplacé par l'attribut @attr de l'item en cours du tableau @tab
//                       *Note: si l'attribut n'existe pas, mais qu'une fonction est définie pour cette valeur, la fonction calculera la valeur
//                       *Note: n'est utilisable que dans un #Element ayant l'attribut 'browse'
//
//
// Définition
//    Les clés de l'objet correspondent à l'attribut 'node', il peut soit être une chaine, soit une RegExp @r de la forme: '/^@r$/'
//
//
//
// Exemple: objet de définition
// ----------------------------
var default_definition = {
	// Les #Element avec 'node' valant 'input' seront liés à cette définition
	'input.text': {
		node_type: 'input', // sera un <input>
		attributes: {
			name:  '{name}',  // l'attribut 'name' vaudra la valeur de la variable 'name'
			value: '{value}', // l'attribut 'value' vaudra la valeur de la variable 'value'
			type:  'text'     // l'attribut 'type' vaudra 'text'
		}
	},

	// Les #Element avec 'node' valant 'span:@x' avec @x un nombre entier, seront liés à cette définition
	'/^span:(\d+)$/': {
		node_type: 'span', // sera un <span>
		text: 'span {spanRepeat:i} on {spanRepeat:n} (={$1})',
		repeat: {
			n: '{$1}',           // sera dupliqué @x fois, avec @x récupéré dans le nom de la définition
			id: 'spanRepeat'     // sera accessible via l'id 'spanRepeat'
		},
		attributes: {
			'class': '{class}'  // l'attribut 'class' vaudra la valeur de la variable 'class'
		}
	},

	// Les #Element avec 'node' valant 'simple-select', seront liés à cette définition
	'simple-select': {
		node_type: 'select', // sera un <select>
		attributes: {
			'class': '{select-class}' // l'attribut 'class' prendra la valeur de la variable 'select-class'
		},
		children: [
			{
				node_type: 'option', // contiendra des <option>
				browse: {
					array: '{options[]}', // chaque <option> sera dupliquée pour chaque valeur du tableau 'options'
					funcs: {
						// définit le "faux" attribut 'value' de chaque élément du tableau 'options'
						// avec la fonction 'getvalue()' qui sera passée en paramètre
						// *Node: le tableau n'aura pas d'attribut (tableau simple), cela renverra
						// donc directement la valeur de chaque item
						'options.value':  '{getvalue()}',

						// définit le "faux" attribut 'length' de chaque élément du tableau 'options'
						// avec la fonction 'getstrlen()' qui sera passée en paramètre
						// la fonction retournera la taille des chaines de chaque valeur du tableau
						'options.length': '{getlength()}'
					}
				},
				attributes: {
					'class': '{option-class}', // l'attribut 'class' prendra la valeur de la variable 'option-class'
					value: '{options:i}' // chaque <option> aura l'attribut 'value' qui vaut l'indice actuel de l'#Element
				},
				// aura pour contenu la valeur de l'item actuel @a du tableau,
				// suivi du nombre de caractère @b de la valeur
				// ex: "texteDeLitem (12 caractères)"
				text: '{options.value} ({options.length} caractères)'
			}
		],

		listeners: {
			// ajoutera un listener sur l'évènement 'change' et lancera la fonction passée
			// qui s'appelle 'onchange'
			'change': '{onchange()}'
		}
	}
};


//
// Exemple formulaire
// ------------------
var exempleFormulaire = {
	node_type: 'form', // sera un <form>
	attributes: {
		'method': 'POST', // aura l'attribut 'method' valant 'POST'
		'action': '{url}' // aura l'attribut 'action' valant la valeur de la variable 'url'
	},

	// sera précédé par 2 <span> (cf. définition de 'span:(\d+)')
	prev_nodes: [
		{
			node: 'span:2',
			$class: 'beforeSpan' // les <span> hériterons de la variable 'class'
		}
	],

	children: [
		{ // contiendra en premier enfant un <input type='text'>
			node: 'input.text',
			$name: 'fname',               // l'<input> héritera la variable 'name'
			$value: '{default_firstname}' // l'<input> héritera la variable 'value', qui elle-même sera récupèrée de la variable 'default_firstname'
		},

		{ // contiendra en second enfant un <select> contenant les <options> en fonction du tableau 'liste-noms'
			node: 'simple-select',
			$options: '{liste_noms[]}',        // la définition héritera du tableau 'options' valant le tableau donné 'liste_noms'
			$select_class: 'gui-option',       // la définition héritera de la variable 'select_class'
			$option_class: 'gui-select',       // la définition héritera de la variable 'option_class'
			$onchange:     '{my_onchange()}',  // la définition héritera de la fonction 'onchange' valant la fonction donnée 'my_onchange'
			$getvalue:     '{getitemvalue()}', // la définition héritera de la fonction 'getvalue' valant la fonction données 'getitemvalue'
			$getlength:    '{getitemlength()}' // la définition héritera de la fonction 'getlength' valant la fonction données 'getitemvalue'
		},

		{ // contiendra en dernier enfant un <input type='submit' value='Valider'>
			node_type: 'input', // sera un <input>
			attributes: {
				type: 'submit',  // aura l'attribut 'type' qui vaut 'submit'
				value: 'Valider' // aura l'attribut 'value' qui vaut 'Valider'
			}
		}
	],

	// sera suivi par 2 <span> (cf. définition de 'span:(\d+)')
	next_nodes: [
		{
			node: 'span:2',
			$class: 'afterSpan' // les <span> hériterons de la variable 'class'
		}
	]
};

//
// Exemple code de construction
// ----------------------------
//
// On instancie notre builder
var monBuilder = new FormBuilder(exempleFormulaire);
// on ajoute la/les définition(s)
monBuilder.add_definition(default_definition);
// on construit notre objet en lui passant toutes les données
monBuilder.build({
	url:               'https://xdrm.io/page1',                                                    // variable 'url'
	default_firstname: 'Jean',                                                                     // variable 'default_firstname'
	liste_noms:        ['Jean', 'Pierre', 'Robert', 'Marie', 'Anna', 'Félicien', 'Marc', 'Jésus'], // tableau 'list_noms'
	getitemvalue:      function(item){ return item;        },                                      // pour chaque item, retournera la valeur brute
	getitemlength:     function(item){ return item.length; }                                       // pour chaque item, retournera la taille de la valeur
});

//
// Exemple code d'ajout au DOM
// ---------------------------
// soit monConteneur, l'élément qui contiendra le formulaire
var monConteneur = document.body;
// On ajoute le formulaire au conteneur
monBuilder.attach(monConteneur);


//
// Exemple de modification des valeurs
// -----------------------------------
// les variables ommises lors de la création, ne sont pas modifiables
monBuilder.update({
	url:           'https://xdrm.io/page2',                // on modifie l'URL
	getitemlength: function(item){ return 10; } // on modifie notre fonction (on renvoie taille+1)
});
// reconstruction du DOM
monBuilder.attach(monConteneur);