NxTIC/public_html/js/lib/form-deflater.js

289 lines
8.7 KiB
JavaScript
Executable File
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* CONSTRUCTEUR D'UN DEFLATER DE formulaire
*
* @container<Element> Formulaire ou autre élément contenant les champs
* @tags<Array> Tableau contenant les éléments à prendre en compte
* @attr<Array> Tableau contenant les attributs à prendre pour le nom (par ordre de priorité)
*
*/
function FormDeflater(container, tags, attr){
/* [0] Vérification des INPUT
=========================================================*/
var correctParams = container instanceof Element;
correctParams = correctParams && tags instanceof Array;
correctParams = correctParams && attr instanceof Array;
/* [1] On formatte les données
=========================================================*/
// On met les tags en minuscule
for( var i = 0 ; i < tags.length ; i++ )
tags[i] = tags[i].toLowerCase();
// On met les attributs en minuscule
for( var i = 0 ; i < attr.length ; i++ )
attr[i] = attr[i].toLowerCase();
/* [2] On enregistre les attributs
=========================================================*/
this.container = container;
this.tags = tags;
this.attr = attr;
}
FormDeflater.prototype = {
container: this.container, // Contiendra le 'formulaire' (<form> ou autre)
tags: this.tags, // Contiendra les balises HTML à ne pas prendre en compte
attr: this.attr // Contiendra la liste des attributs à prendre pour nom (par ordre de priorité)
};
/* RETOURNE UN OBJET CONTENANT LES DONNÉES DU FORMULAIRE
*
* @return form<Object> Objet correspondant aux données du formulaire
*
*/
FormDeflater.prototype.deflate = function(){
/* [1] On récupère tous les enfants
=========================================================*/
var children = this.getChildren( this.container );
/* [2] On filtre les éléments qui ont pas le bon tag
=========================================================*/
children = this.filterElements( children );
/* [3] On essaie de trouver les attributs primants (non vides et en premier dans la liste @this.attr)
=========================================================*/
/* (0) On initialise l'objet de retour */
var object = {};
/* (1) Pour chacun des éléments */
for( var c = 0 ; c < children.length ; c++ ){
/* (2) Pour chacun des attributs par ordre de priorité */
for( var a = 0 ; a < this.attr.length ; a++ ){
// On récupère l'attribut
var attr = children[c].getAttribute(this.attr[a]);
/* (3) Si l'attribut est défini (pas null ni vide) */
if( attr !== null && attr.length > 0 ){
/* (4) Si on a pas déja un champ de même nom */
if( object.hasOwnProperty(attr) ){
var existing = object[attr];
// {1} Si l'existant est un tableau, on ajoute notre valeur //
if( existing instanceof Array )
object[attr].push( { target: children[c], attr: this.attr[a], value: children[c].value, checked: children[c].checked } );
// {2} Sinon, si c'est une valeur seule, on crée un tableau //
else
object[attr] = [ object[attr], { target: children[c], attr: this.attr[a], value: children[c].value, checked: children[c].checked } ];
/* (5) Si c'est le premier champ avec ce nom, on le crée */
}else
object[attr] = { target: children[c], attr: this.attr[a], value: children[c].value, checked: children[c].checked };
// On en a fini pour cet élément
break;
}
}
}
/* [4] On met en forme les données
=========================================================*/
object = this.cleanOutput(object);
return object;
};
/* RETOURNE SI UN ELEMENT EST UN BOUTON DE TYPE RADIO/CHECKBOX OU NON
*
* @element<Element> Element en question
*
* @return result<Boolean> Renvoie si TRUE or FALSE il en est un
*
*/
FormDeflater.prototype.checkable = function(element){
if( !(element instanceof Element) )
return false;
if( element.tagName != 'INPUT' )
return false;
if( ['radio', 'checkbox'].indexOf( element.getAttribute('type').toLowerCase() ) == -1 )
return false;
return true;
};
/* NETTOIE LES DONNÉES EN SORTIE POUR QU'ELLES SOIENT UTILISABLES ET OPTIMISÉES
*
* @input<Object> Données "brutes"
*
* @return output<Object> Données sans les valeurs inutiles et explicitées
*
*/
FormDeflater.prototype.cleanOutput = function(input){
var output = {};
/* [1] On parcourt toutes les valeurs récupérées
=========================================================*/
for( var key in input ){
/* [2] Si c'est un tableau
=========================================================*/
if( input[key] instanceof Array ){
// VRAI si tous les éléments sont radio/checkbox
var areCheckable = true;
// Contiendra les indices des valeurs ou 'checked=TRUE'
var checkedIndexes = [];
/* (1) On vérifie si tous les champs sont checkables */
for( var i in input[key])
// si pas checkable, on arrête de vérifier
if( !this.checkable(input[key][i].target) ){
areCheckable = false;
break;
// Sinon si checkable et checked=TRUE, on incrémente @nbChecked
}else if( input[key][i].checked === true )
checkedIndexes.push(i);
/* (2) Si c'est que des radio ou des checkbox avec une seule valeur à TRUE */
if( areCheckable )
if( checkedIndexes.length == 1 )
output[key] = input[key][checkedIndexes[0]].value;
/* (3) Si c'est que des radio ou des checkbox avec plusieurs valeurs à TRUE */
else{
output[key] = [];
for( var i in checkedIndexes )
output[key].push( input[key][checkedIndexes[i]].value );
}
/* (4) Si c'est pas que des radio ou des checkbox, on met les valeurs */
else{
output[key] = [];
for( var i in input[key] )
output[key].push( input[key][i].value );
}
/* [3] S'il n'y a qu'une donnée (pas un tableau)
=========================================================*/
}else{
/* (1) Si de type 'radio' ou 'checkbox', on met la valeur de 'checked' */
if( this.checkable(input[key].target) )
output[key] = input[key].checked ? input[key].value : null;
/* (2) Sinon, on met la valeur de 'value' */
else
output[key] = input[key].value;
}
}
return output;
};
/* RETOURNE LA LISTE DE TOUS LES ÉLÉMENTS QUEL QUE SOIT LE NIVEAU HIÉRARCHIQUE
*
* @parent<Element> Parent duquel on veut les enfants
*
* @return children<Array> Tableau contenant tous les enfants
*
*/
FormDeflater.prototype.getChildren = function(parent){
// Si le parent n'est pas un élément, on retourne aucun enfant
if( !(parent instanceof Element) ) return [];
/* [1] Initialisation des variables
=========================================================*/
// Contient la liste des enfants directs
var children = [].slice.call(parent.children);
// Contiendra la liste des enfants directs et indirects
var allChildren = children;
/* [2] On parcourt tous les enfants
=========================================================*/
for( var i = 0 ; i < children.length ; i++ ){
// On relance la fonction récursivement sur tous les enfants
allChildren = allChildren.concat( [].slice.call(this.getChildren(children[i])) );
}
/* [3] On retourne le résultat
=========================================================*/
return allChildren;
};
/* FILTRE LES éléments en fonction de @this.tags et @this.attr
*
* @elements<Array> Le tableau contenant les éléments à trier
*
* @return filtered<Array> Retourne le tableau des éléments filtrés
*
*/
FormDeflater.prototype.filterElements = function(elements){
// Contiendra les éléments correspondants aux critères
var filtered = [];
/* [1] On parcourt tous les éléments
=========================================================*/
for( var i = 0 ; i < elements.length ; i++ )
// Si l'élément a le bon tag, on le garde
if( this.tags.indexOf( elements[i].tagName.toLowerCase() ) > -1 )
filtered.push(elements[i]);
/* [2] On retourne les éléments filtržés
=========================================================*/
return filtered;
};
/************/
/* USE CASE */
/************/
/* (1) Instanciation */
/*HIDDEN*/// var instance = new FormDeflater(
/*HIDDEN*/// document.getElementById('myform'),
/*HIDDEN*/// ['input', 'select'], // éléments à prendre en compte (tagName)
/*HIDDEN*/// ['id', 'name', 'data-elementname'] // Attributs par ordre de priorité
/*HIDDEN*/// );
/*HIDDEN*///
/* (2) On récupère l'objet */
/*HIDDEN*///
/*HIDDEN*/// var object = instance.deflate();
/*HIDDEN*///