FormDeflater opérationnel
This commit is contained in:
xdrm-brackets
parent
424f4af155
commit
d6ad5b15d4
|
|
@ -1 +1,3 @@
|
||||||
|
function FormDeflater(b,c,a){for(var d=0;d<c.length;d++)c[d]=c[d].toLowerCase();for(d=0;d<a.length;d++)a[d]=a[d].toLowerCase();this.container=b;this.tags=c;this.attr=a}
|
||||||
|
FormDeflater.prototype={container:this.container,tags:this.tags,attr:this.attr,deflate:function(){for(var b=this.getChildren(this.container),b=this.filterElements(b),c={},a=0;a<b.length;a++)for(var d=0;d<this.attr.length;d++){var e=b[a].getAttribute(this.attr[d]);if(null!==e&&0<e.length){c.hasOwnProperty(e)?c[e]instanceof Array?c[e].push(b[a].value):c[e]=[c[e],b[a].value]:c[e]=b[a].value;break}}return c},getChildren:function(b){if(!(b instanceof Element))return[];for(var c=b=[].slice.call(b.children),
|
||||||
|
a=0;a<b.length;a++)c=c.concat([].slice.call(this.getChildren(b[a])));return c},filterElements:function(b){for(var c=[],a=0;a<b.length;a++)-1<this.tags.indexOf(b[a].tagName.toLowerCase())&&c.push(b[a]);return c}};
|
||||||
|
|
|
||||||
|
|
@ -1 +1,184 @@
|
||||||
// TODO: Form deflater qui renvoie un objet à partir d'un formulaire
|
// TODO: Form deflater qui renvoie un objet à partir d'un formulaire
|
||||||
|
|
||||||
|
|
||||||
|
/* 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
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
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 n'est 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(children[c].value);
|
||||||
|
|
||||||
|
// {2} Sinon, si c'est une valeur seule, on crée un tableau //
|
||||||
|
else
|
||||||
|
object[attr] = [ object[attr], children[c].value ];
|
||||||
|
|
||||||
|
/* (5) Si c'est le premier champ avec ce nom, on le crée */
|
||||||
|
}else{
|
||||||
|
object[attr] = children[c].value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// On en a fini pour cet élément
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return object;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 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
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
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
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
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++ ){
|
||||||
|
/* (1) Si l'élément a le bon tag, on le garde */
|
||||||
|
if( this.tags.indexOf( elements[i].tagName.toLowerCase() ) > -1 )
|
||||||
|
filtered.push(elements[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* [3] On retourne les éléments filtrés
|
||||||
|
=========================================================*/
|
||||||
|
return filtered;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/************/
|
||||||
|
/* USE CASE */
|
||||||
|
/************/
|
||||||
|
/* (1) Instanciation */
|
||||||
|
/*HIDDEN*/// var instance = new FormDeflater(
|
||||||
|
/*HIDDEN*/// document.getElementById('myform'),
|
||||||
|
/*HIDDEN*/// ['br', 'li'], // é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*///
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,26 @@ $pers = $request->answer();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section>
|
<section data-sublink='export'>
|
||||||
<h6>RECHERCHE DE PERSONNE PAR ID</h6>
|
|
||||||
<?php var_dump($pers) ?>
|
<form id='myform'>
|
||||||
</section>
|
<input type='text' name='text1' value='value_text1'>
|
||||||
|
|
||||||
|
<input type='password' name='pass1' value='value_pass1'>
|
||||||
|
<input type='number' name='number1' value='value_number1'>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span>
|
||||||
|
<input type='test' values='valuetestHier'>
|
||||||
|
<p>Some text</p>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type='text' name='text2' value='value_text2'>
|
||||||
|
|
||||||
|
<input type='text' name='text2' value='value_text2bis'>
|
||||||
|
|
||||||
|
<input type='submit' name='submit-form' value='valider'>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
var instance=new FormDeflater(document.getElementById("myform"),["input"],["name","data-name"]);console.log(instance.deflate());
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
var instance = new FormDeflater(
|
||||||
|
document.getElementById('myform'),
|
||||||
|
['input'], // éléments à éviter (tagName)
|
||||||
|
['name', 'data-name'] // Attributs par ordre de priorité
|
||||||
|
);
|
||||||
|
|
||||||
|
/* (2) On récupère l'objet */
|
||||||
|
console.log( instance.deflate() );
|
||||||
Loading…
Reference in New Issue