Avancement sur les interactions dynamiques + gestion des pages.

css/timeline-form.scss

@@ -302,11 +302,6 @@
 		padding-bottom: 20px;
 	}
 
-	/* (9) <article> sert uniquement à regrouper */
-	& article{
-		all: unset !important;
-	}
-
 	/* (10) Gestion des espacements verticaux */
 	& .spacetop{ margin-top: 20px       !important; }
 	& .spacebtm{ margin-bottom: 20px    !important; }
@@ -431,6 +426,11 @@
 
 	        border: 1px solid darken(#d8e0e9, 10);
 
+			// Pas de rebord droite sauf si dernier
+			&:not(:last-child){
+				border-right: 0;
+			}
+
 	        color: darken(#d8e0e9, 30);
 
 	        cursor: pointer;
@@ -443,7 +443,7 @@
 
 	        // Animation de hover
 	        &:hover,
-	        &.active:not(:first-child):not(:last-child){
+	        &.active{//:not(:first-child):not(:last-child)
 	            border-color: $timeline-2;
 	            background: $timeline-2;
 	            color: #fff;
@@ -453,4 +453,42 @@
 
 	}
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+	/* (14) Gestion de l'affichage des MINI fiches et des FICHES relations */
+	& article > article{
+		display: none;
+
+		&.active{
+			display: block;
+		}
+	}
+
 }

js/includes/input-html-data.js

@@ -54,8 +54,8 @@ miniFicheBuilder.setLayout(
         "\t</h5>\n"+
 
         "\t<h5 class='nobold color0'>\n"+
-            "\t\t<span class='select-container'><select data-name='job' value='@job'>\n"+
+            "\t\t<span class='select-container'><select data-name='job'>\n"+
-                "\t\t\t<option value='.' disabled selected>Dernière profession exercée:</option>\n"+
+                "\t\t\t<option value='.' disabled>Dernière profession exercée:</option>\n"+
                 "\t\t\t<option value='0'>Inconnue</option>\n"+
                 "\t\t\t<option value='1-' disabled>Agriculateur exploitants</option>\n"+
                     "\t\t\t\t<option value='10'>- Agriculteurs exploitants (Agriculteurs, maraîchers, viticulteurs…)</option>\n"+

js/includes/input-phone-mini-min.js

@@ -1,8 +1,9 @@
-function inputPhoneMini(a){this.container=a}inputPhoneMini.prototype={container:this.container};
+function inputPhoneMini(a,b){this.container=a;this.nav_container=b}inputPhoneMini.prototype={container:this.container,nav_container:this.nav_container,selected:0};
-inputPhoneMini.prototype.fieldsToStorage=function(){console.log("MINI FICHE: FIELDS TO STORAGE");for(var a=$$("article.mini-relation-panel .mini-fiche-relation"),c=0;c<a.length;c++){var b=(new FormDeflater(a[c],["input","select"],["data-name"])).deflate(),d=lsi.get("mini-fiches","form"+b.uid.value);console.log("deflated");console.log(b);!1===d&&(d.username="inconnu",d.firstname="inconnu",d.lastname="inconnu");b={uid:b.uid.value,firstname:d.firstname,lastname:d.lastname,username:d.username,sexe:[b.sexe[0].status,
+inputPhoneMini.prototype.fieldsToStorage=function(){console.log("MINI FICHE: FIELDS TO STORAGE");for(var a=$$("article.mini-relation-panel .mini-fiche-relation"),b=0;b<a.length;b++){var c=(new FormDeflater(a[b],["input","select"],["data-name"])).deflate(),d=lsi.get("mini-fiches","form"+c.uid.value);!1===d&&(d.username="inconnu",d.firstname="inconnu",d.lastname="inconnu");c={uid:c.uid.value,firstname:d.firstname,lastname:d.lastname,username:d.username,sexe:[c.sexe[0].status,c.sexe[1].status],age:c.age.value,
-b.sexe[1].status],age:b.age.value,job:b.job.value,loc:[b.loc[0].status,b.loc[1].status,b.loc[2].status,b.loc[3].status]};lsi.set("mini-fiches","form"+b.uid,b)}this.storageToFields()};
+job:c.job.value,loc:[c.loc[0].status,c.loc[1].status,c.loc[2].status,c.loc[3].status]};lsi.set("mini-fiches","form"+c.uid,c)}this.storageToFields()};
-inputPhoneMini.prototype.add=function(a){console.log("MINI FICHE: ADD");if(null==a.uid)return!1;a.firstname=null!=a.firstname?a.firstname:"";a.lastname=null!=a.lastname?a.lastname:"";a.username=null!=a.username?a.username:"";a.age=null!=a.age?a.age:"";a.sexe=null!=a.sexe?a.sexe:[!0,!1];a.job=null!=a.job?a.job:".";a.loc=null!=a.loc?a.loc:[!0,!1,!1,!1];console.log(a);this.container.innerHTML+=miniFicheBuilder.build({firstname:a.firstname,lastname:a.lastname,username:a.username,uid:a.uid,age:a.age,sexea:a.sexe[0]?
+inputPhoneMini.prototype.add=function(a){console.log("MINI FICHE: ADD");if(null==a.uid)return!1;a.firstname=null!=a.firstname?a.firstname:"";a.lastname=null!=a.lastname?a.lastname:"";a.username=null!=a.username?a.username:"";a.age=null!=a.age?a.age:"";a.sexe=null!=a.sexe?a.sexe:[!0,!1];a.job=null!=a.job?a.job:".";a.loc=null!=a.loc?a.loc:[!0,!1,!1,!1];this.container.innerHTML+=miniFicheBuilder.build({firstname:a.firstname,lastname:a.lastname,username:a.username,uid:a.uid,age:a.age,sexea:a.sexe[0]?
-"true":"false",sexeb:a.sexe[1]?"true":"false",job:a.job,loca:a.loc[0]?"true":"false",locb:a.loc[1]?"true":"false",locc:a.loc[2]?"true":"false",locd:a.loc[3]?"true":"false"})};
+"true":"false",sexeb:a.sexe[1]?"true":"false",loca:a.loc[0]?"true":"false",locb:a.loc[1]?"true":"false",locc:a.loc[2]?"true":"false",locd:a.loc[3]?"true":"false"});var b=$('[data-name="uid"][value="'+a.uid+'"] ~ h5>span>select');console.log(b);b.value=a.job};
-inputPhoneMini.prototype.storageToFields=function(){console.log("MINI FICHE: STORAGE TO FIELDS");var a=lsi.keys("mini-fiches");this.container.innerHTML="";for(var c=0;c<a.length;c++){var b=lsi.get("mini-fiches",a[c]);this.add({uid:b.uid,firstname:b.firstname,lastname:b.lastname,username:b.username,age:b.age,sexe:b.sexe,job:b.job,loc:b.loc})}};
+inputPhoneMini.prototype.storageToFields=function(){console.log("MINI FICHE: STORAGE TO FIELDS");var a=lsi.keys("mini-fiches");this.container.innerHTML="";for(var b=[],c=0;c<a.length;c++){var d=lsi.get("mini-fiches",a[c]);this.add({uid:d.uid,firstname:d.firstname,lastname:d.lastname,username:d.username,age:d.age,sexe:d.sexe,job:d.job,loc:d.loc});b.push(d.uid)}this.updateNavBar(b)};
-inputPhoneMini.prototype.sync=function(){for(var a=lsi.keys("contacts"),c=0;c<a.length;c++){var b=lsi.get("contacts",a[c]),d=lsi.get("mini-fiches",a[c]);null==d?lsi.set("mini-fiches",a[c],{uid:b.uid,firstname:b.firstname,lastname:b.lastname,username:b.username,sexe:[!0,!1],age:"",job:".",loc:[!0,!1,!1,!1]}):(d.firstname=b.firstname,d.lastname=b.lastname,d.username=b.username,lsi.set("mini-fiches",a[c],d))}};
+inputPhoneMini.prototype.sync=function(){for(var a=lsi.keys("contacts"),b=0;b<a.length;b++){var c=lsi.get("contacts",a[b]),d=lsi.get("mini-fiches",a[b]);null==d?lsi.set("mini-fiches",a[b],{uid:c.uid,firstname:c.firstname,lastname:c.lastname,username:c.username,sexe:[!0,!1],age:"",job:".",loc:[!0,!1,!1,!1]}):(d.firstname=c.firstname,d.lastname=c.lastname,d.username=c.username,lsi.set("mini-fiches",a[b],d))}};
-inputPhoneMini.prototype.attach=function(){console.log("MINI FICHE: ATTACH");lsi.createDataset("mini-fiches");this.storageToFields()};
+inputPhoneMini.prototype.show=function(){for(var a=$$("article.mini-relation-panel .mini-fiche-relation.active"),b=0;b<a.length;b++)a[b].remClass("active");this.container.children[this.selected].addClass("active")};inputPhoneMini.prototype.nav=function(a){if(isNaN(a.innerHTML))return!1;for(var b=$$("#nav-mini > span.active"),c=0;c<b.length;c++)b[c].remClass("active");a.addClass("active");this.selected=parseInt(a.innerHTML)-1;this.show()};
+inputPhoneMini.prototype.updateNavBar=function(a){this.nav_container.innerHTML="";for(var b=0;b<a.length;b++){var c=parseInt(a[b])+1;this.nav_container.innerHTML+="<span>"+c+"</span>"}this.nav(this.nav_container.children[this.selected])};inputPhoneMini.prototype.attach=function(){console.log("MINI FICHE: ATTACH");lsi.createDataset("mini-fiches");this.storageToFields();var a=this;this.nav_container.addEventListener("click",function(b){a.nav(b.target)},!1)};

js/includes/input-phone-mini.js

@@ -1,13 +1,16 @@
 /* [0] Constructeur -> définit le conteneur et le bouton d'ajout
 =========================================================*/
-function inputPhoneMini(container){
+function inputPhoneMini(container, navContainer){
     this.container  = container;
+    this.nav_container = navContainer;
 }
 
 /* [1] Attributs
 =========================================================*/
 inputPhoneMini.prototype = {
-    container: this.container      // Conteneur des mini fiches relation
+    container: this.container,         // Conteneur des mini fiches relation
+    nav_container: this.nav_container, // Conteneur de la navigation entre les fiches
+    selected: 0                        // UID de la MINI fiche sélectionnée
 };
 
 
@@ -34,8 +37,7 @@ inputPhoneMini.prototype.fieldsToStorage = function(){
 
         // {4} On récupère les données du LSI si elles existent //
         var existingData = lsi.get('mini-fiches', 'form'+deflated.uid.value);
-        console.log('deflated');
+
-        console.log(deflated);
         // Si n'existe pas, on initialise
         if( existingData === false ){
             existingData.username  = 'inconnu';
@@ -104,7 +106,7 @@ inputPhoneMini.prototype.add = function(objectData){
     objectData.loc       = (objectData.loc       != null) ? objectData.loc       : [true, false, false, false];
 
 
-    console.log(objectData);
+    // console.log(objectData);
 
     // {1} Création physique //
     this.container.innerHTML += miniFicheBuilder.build({
@@ -115,13 +117,19 @@ inputPhoneMini.prototype.add = function(objectData){
         age:       objectData.age,
         sexea:     objectData.sexe[0] ? 'true' : 'false',
         sexeb:     objectData.sexe[1] ? 'true' : 'false',
-        job:       objectData.job,
+        // job:       objectData.job,
         loca:      objectData.loc[0] ? 'true' : 'false',
         locb:      objectData.loc[1] ? 'true' : 'false',
         locc:      objectData.loc[2] ? 'true' : 'false',
         locd:      objectData.loc[3] ? 'true' : 'false'
     });
 
+
+    /* (2) On sélectionne la valeur dans le select (manuellement) */
+    var createdSelect = $('[data-name="uid"][value="'+objectData.uid+'"] ~ h5>span>select');
+    console.log(createdSelect);
+    createdSelect.value = objectData.job;
+
 };
 
 
@@ -144,6 +152,9 @@ inputPhoneMini.prototype.storageToFields = function(){
     // On réinitialise le HTML
     this.container.innerHTML = '';
 
+    // On récupère les UIDS
+    var UIDs = [];
+
     for( var i = 0 ; i < existingMiniFiches.length ; i++ ){
         // {2} On récupère les informations du contact //
         var ficheData = lsi.get('mini-fiches', existingMiniFiches[i]);
@@ -159,8 +170,13 @@ inputPhoneMini.prototype.storageToFields = function(){
             job:       ficheData.job,
             loc:       ficheData.loc
         });
+
+        UIDs.push(ficheData.uid);
     }
 
+    // {4} On met à jour la navigation //
+    this.updateNavBar(UIDs);
+
 };
 
 
@@ -228,11 +244,69 @@ inputPhoneMini.prototype.sync = function(){
 
 
 
+/* [6] Gestion de la visibilité des MINI fiches (pages)
+=========================================================*/
+inputPhoneMini.prototype.show = function(){
+    /* (1) On récupère toutes les MINI fiches visibles */
+    var visible = $$('article.mini-relation-panel .mini-fiche-relation.active');
+    for( var i = 0 ; i < visible.length ; i++ )
+        visible[i].remClass('active');
+
+    /* (2) On affiche la fiche associée */
+    this.container.children[this.selected].addClass('active');
+};
+
+
+
+/* [7] Gestion de la navigation entre les fiches
+=========================================================*/
+inputPhoneMini.prototype.nav = function(element){
+    /* (1) On vérifie que l'élément contient un nombre */
+    if( isNaN(element.innerHTML) )
+        return false;
+
+    /* (2) On désactive tous les éléments actifs */
+    var activeElements = $$('#nav-mini > span.active');
+    for( var i = 0 ; i < activeElements.length ; i++ )
+        activeElements[i].remClass('active');
+
+    /* (3) On active l'élément courant */
+    element.addClass('active');
+    this.selected = parseInt(element.innerHTML) - 1;
+
+    /* (4) On affiche la MINI fiche associée */
+    this.show();
+};
 
 
 
 
-/* [6] Point d'amorçage de la gestion des contacts
+
+
+
+/* [8] Mise à jour de la navigation
+=========================================================*/
+inputPhoneMini.prototype.updateNavBar = function(uid_list){
+    /* (1) On vide la nav bar */
+    this.nav_container.innerHTML = '';
+
+    /* (2) On la re-remplit avec toutes les données */
+    for( var i = 0 ; i < uid_list.length ; i++ ){
+        // On rajoute 1 pour la lisibilité
+        var realIndex = parseInt(uid_list[i]) + 1;
+
+        this.nav_container.innerHTML += '<span>'+realIndex+'</span>';
+
+    }
+
+    /* (3) On séléctionne par défaut */
+    this.nav( this.nav_container.children[this.selected] );
+};
+
+
+
+
+/* [9] Point d'amorçage de la gestion des contacts
 =========================================================*/
 inputPhoneMini.prototype.attach = function(){
     console.log('MINI FICHE: ATTACH');
@@ -242,4 +316,9 @@ inputPhoneMini.prototype.attach = function(){
 
     /* (2) On charge les mini fiches depuis la mémoire ('localStorage') */
     this.storageToFields();
+
+    /* (3) On attache la barre de navigation à une fonction */
+    var ptr = this;
+    this.nav_container.addEventListener('click', function(e){ ptr.nav(e.target); }, false);
+
 };

js/lib/html-builder.js

@@ -19,6 +19,7 @@ HTMLBuilder.prototype = {
         for( var name in parameters ){
             // Contiendra l'expression régulière pour remplacer le paramètre
             var regex = new RegExp('@'+name, 'g');
+            // console.log( 'replacing "@'+name+'" by "'+parameters[name]+'"' );
 
             render = render.replace(regex, parameters[name]);
         }

view/input.php

@@ -75,31 +75,10 @@
 
 		<!-- GESTION DES MINI-FICHES RELATIONS -->
 		<h3 data-n='3' class='color4'>Remplir les fiches relations rapides pour tous les contacts</h3>
-		<div class='arrow-container line'>
+		<!-- NAVIGATION ENTRE LES FICHES -->
-			<span>&laquo;</span>
-			<span>1</span>
-			<span>2</span>
-			<span>3</span>
-			<span>4</span>
-			<span>5</span>
-			<span>6</span>
-			<span>7</span>
-			<span>8</span>
-			<span>9</span>
-			<span>10</span>
-			<span>11</span>
-			<span>12</span>
-			<span>13</span>
-			<span>14</span>
-			<span>15</span>
-			<span>16</span>
-			<span>17</span>
-			<span>18</span>
-			<span>19</span>
-			<span>20</span>
-			<span>&raquo;</span>
-		</div>
 		<span data-space></span>
+		<div class='arrow-container line' id='nav-mini'></div>
+
 		<article class='mini-relation-panel'>
 
 		</article>
@@ -110,30 +89,8 @@
 		<!-- GESTION DES FICHES RELATIONS -->
 		<h3 data-n='4' class='color4'>Remplir les fiches relations complètes des contacts les plus contactés</h3>
 
-		<div class='arrow-container line'>
+		<!-- NAVIGATION ENTRE LES FICHES -->
-			<span>&laquo;</span>
+		<div class='arrow-container line'></div>
-			<span>1</span>
-			<span>2</span>
-			<span>3</span>
-			<span>4</span>
-			<span>5</span>
-			<span>6</span>
-			<span>7</span>
-			<span>8</span>
-			<span>9</span>
-			<span>10</span>
-			<span>11</span>
-			<span>12</span>
-			<span>13</span>
-			<span>14</span>
-			<span>15</span>
-			<span>16</span>
-			<span>17</span>
-			<span>18</span>
-			<span>19</span>
-			<span>20</span>
-			<span>&raquo;</span>
-		</div>
 
 		<article class='relation-panel'>
 			<article class='fiche-relation'>

view/js/input-min.js

@@ -1,3 +1,3 @@
-function updateListener(b,a,c){b.removeEventListener(a,c);b.addEventListener(a,c)}var importCallLog=$('input#call_log-import[type="file"]'),ficheContainer=$("article.relation-panel"),subjectManager,contactManager,miniManager,ficheManager;function dynamicUpdate(){console.log("dynamic update");miniManager.fieldsToStorage();contactManager.fieldsToStorage();miniManager.sync();miniManager.storageToFields();contactManager.storageToFields()}
+function updateListener(b,a,c){b.removeEventListener(a,c);b.addEventListener(a,c)}var importCallLog=$('input#call_log-import[type="file"]'),ficheContainer=$("article.relation-panel"),subjectManager,contactManager,miniManager,ficheManager;function dynamicUpdate(){console.log("DYNAMIC UPDATE: UPDATING");miniManager.fieldsToStorage();contactManager.fieldsToStorage();miniManager.sync();miniManager.storageToFields();contactManager.storageToFields()}
 include("/js/includes/input-phone-subject.js",function(){include("/js/includes/input-phone-contact.js",function(){include("/js/includes/input-phone-mini.js",function(){include("/js/includes/input-phone-fiche.js",function(){subjectManager=new inputPhoneSubject($('article.subject-panel [data-name="number"]'),$('article.subject-panel [data-name="username"]'),$('article.subject-panel [data-name="firstname"]'),$('article.subject-panel [data-name="lastname"]'),$('article.subject-panel [data-name="submit"]'));
-subjectManager.attach();contactManager=new inputPhoneContact($("article.contact-panel"),$("h4.add-contact"));contactManager.attach(dynamicUpdate);miniManager=new inputPhoneMini($("article.mini-relation-panel"));miniManager.attach()})})})});importCallLog.addEventListener("change",function(b){api.send({path:"upload/call_log",file:importCallLog.files[0]},function(a){console.log(a);0==a.ModuleError&&importCallLog.addClass("active")})},!1);
+subjectManager.attach();contactManager=new inputPhoneContact($("article.contact-panel"),$("h4.add-contact"));contactManager.attach(dynamicUpdate);miniManager=new inputPhoneMini($("article.mini-relation-panel"),$("#nav-mini"));miniManager.attach()})})})});importCallLog.addEventListener("change",function(b){api.send({path:"upload/call_log",file:importCallLog.files[0]},function(a){console.log(a);0==a.ModuleError&&importCallLog.addClass("active")})},!1);

view/js/input.js

@@ -46,7 +46,9 @@ var miniManager;
 var ficheManager;
 
 function dynamicUpdate(){
-    console.log('dynamic update');
+    console.log('DYNAMIC UPDATE: UPDATING');
+
+
     /* (1) On enregistre les MINI fiches relation */
     miniManager.fieldsToStorage();
 
@@ -80,73 +82,6 @@ function dynamicUpdate(){
 
 
 
-/* [3] Gestion des formulaires du sujet
-=========================================================*/
-/* (0) Les input du formulaire du sujet */
-// var subjectInput = {
-//     number:    $('article.subject-panel [data-name="number"]'),
-//     username:  $('article.subject-panel [data-name="username"]'),
-//     firstname: $('article.subject-panel [data-name="firstname"]'),
-//     lastname:  $('article.subject-panel [data-name="lastname"]'),
-//
-//     store:     $('article.subject-panel [data-name="submit"]')
-// };
-//
-// /* (1) Gestion de l'enregistrement du sujet en local ('localStorage') */
-// lsi.createDataset('subject');
-// function storeSubject(){
-//     console.log('storing subject');
-//
-//     // {1} Vérification des champs //
-//     // Le numéro n'est pas vide
-//     var validForm = subjectInput.number.value.length > 0;
-//     // ET le pseudo et/ou le prénom et/ou le nom n'est pas vide
-//     validForm = validForm && subjectInput.username.value.length+subjectInput.firstname.value.length+subjectInput.lastname.value.length > 0;
-//
-//     // Si le formulaire n'est pas valide, on ne l'enregistre pas
-//     if( !validForm ) return false;
-//
-//     // {2} On récupère et met en forme les valeurs du deflater //
-//     var obj = {
-//         number:    subjectInput.number.value,
-//         username:  subjectInput.username.value,
-//         firstname: subjectInput.firstname.value,
-//         lastname:  subjectInput.lastname.value
-//     };
-//
-//     // {3} On enregistre les données dans le 'localStorage' //
-//     lsi.set('subject', 'form', obj);
-//
-// }
-//
-// /* (2) Gestion de l'affichage (et mise à jour) du sujet (depuis 'localStorage') */
-// function restoreSubject(){
-//     // {1} On récupère les informations du sujet //
-//     var subjectData = lsi.get('subject', 'form');
-//
-//     if( subjectData == null ) return;
-//
-//     // {2} On restore les valeurs //
-//     subjectInput.number.value    = subjectData.number;
-//     subjectInput.username.value  = subjectData.username;
-//     subjectInput.firstname.value = subjectData.firstname;
-//     subjectInput.lastname.value  = subjectData.lastname;
-// }restoreSubject();
-
-
-/* (n) On attache l'évènement d'enregistrement du formulaire du sujet */
-// subjectInput.store.addEventListener('click', storeSubject, false);
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -195,7 +130,8 @@ include('/js/includes/input-phone-fiche.js', function(){
     =========================================================*/
     /* (1) On crée une instance du gestionnaire des mini fiches relation */
     miniManager = new inputPhoneMini(
-        $('article.mini-relation-panel')
+        $('article.mini-relation-panel'),
+        $('#nav-mini')
     );
 
     miniManager.attach();
@@ -230,304 +166,6 @@ include('/js/includes/input-phone-fiche.js', function(){
 
 
 
-/* (1) Gestion de l'enregistrement des contacts en local ('localStorage') */
-// lsi.createDataset('contacts');
-// function storeContacts(){
-//     console.log('STORING ALL CONTACTS');
-//
-//     // {1} Pour chaque formulaire de contact présent //
-//     var existingContacts = $$('article.contact-panel .new-contact');
-//     for( var i = 0 ; i < existingContacts.length ; i++ ){
-//
-//         // {2} On récupère les informations relatives à l'élément courant //
-//         var indexInParent = existingContacts[i].parentNode.children.indexOf(existingContacts[i]);
-//
-//         // {3} On initialise notre deflater pour récupérer les valeurs //
-//         var deflater = new FormDeflater(existingContacts[i], ['input'], ['data-name']);
-//
-//         // {4} On enregistre ce contact si le numéro n'est pas vide et soit pseudo/prénom/nom //
-//         var deflated = deflater.deflate();
-//
-//         // Le numéro n'est pas vide
-//         var validForm = deflated.number.value.length > 0;
-//         // ET le pseudo et/ou le prénom et/ou le nom n'est pas vide
-//         validForm = validForm && deflated.username.value.length+deflated.firstname.value.length+deflated.lastname.value.length > 0;
-//
-//         // Si le formulaire n'est pas valide, on ne l'enregistre pas
-//         if( !validForm ) continue;
-//
-//         // {5} On récupère et met en forme les valeurs du deflater //
-//         var obj = {
-//             number:    deflated.number.value,
-//             username:  deflated.username.value,
-//             firstname: deflated.firstname.value,
-//             lastname:  deflated.lastname.value
-//         };
-//
-//         // {6} On enregistre les données dans le 'localStorage' //
-//         lsi.set('contacts', 'form'+indexInParent, obj);
-//
-//
-//
-//         // {7} On enregistre les données des MINI fiches associées //
-//         var associatedMiniFiche = lsi.get('mini-fiches', 'form'+indexInParent);
-//
-//         // Si n'existe pas, on la crée
-//         if( associatedMiniFiche === false ){
-//             lsi.set('mini-fiches', 'form'+indexInParent, {
-//                 uid:       indexInParent,
-//                 firstname: obj.firstname,
-//                 lastname:  obj.lastname,
-//                 username:  obj.username,
-//                 age:       '',
-//                 sexe:      [true, false],
-//                 job:       '.',
-//                 location:  [true, false, false, false]
-//             });
-//
-//         // Sinon, on met à jour
-//         }else{
-//
-//             associatedMiniFiche.firstname = obj.firstname;
-//             associatedMiniFiche.lastname  = obj.lastname;
-//             associatedMiniFiche.username  = obj.username;
-//
-//             lsi.set('mini-fiches', 'form'+indexInParent, associatedMiniFiche);
-//         }
-//
-//     }
-//
-//     // {8} On met à jour les mini-fiches //
-//     storeMiniFiches();
-//
-//
-//     // {9} On met à jour le rendu des contacts//
-//     restoreContacts();
-// }
-//
-//
-// /* (2) Fonction pour l'ajout d'un contact */
-// function addNewContact(number, username, firstname, lastname){
-//     // {1} On ajoute le HTML //
-//     contactContainer.innerHTML += contactBuilder.build({
-//         number:    (typeof number    != 'string') ? '' : number,
-//         username:  (typeof username  != 'string') ? '' : username,
-//         firstname: (typeof firstname != 'string') ? '' : firstname,
-//         lastname:  (typeof lastname  != 'string') ? '' : lastname
-//     });
-//
-//     // {2} On attache les évènements sur les boutons 'Enregistrer' //
-//     var contactSubmits = $$('article.contact-panel .new-contact input[type="submit"]');
-//     for( var i = 0 ; i < contactSubmits.length ; i++ )
-//         updateListener(contactSubmits[i], 'click', storeContacts);
-//
-// }
-//
-//
-// /* (3) Gestion de l'affichage (et mise à jour) des contacts (depuis 'localStorage') */
-// function restoreContacts(){
-//     // {1} Pour chaque contact du 'localStorage' //
-//     var existingContacts = lsi.keys('contacts');
-//
-//     // On réinitialise le HTML
-//     contactContainer.innerHTML = '';
-//
-//     for( var i = 0 ; i < existingContacts.length ; i++ ){
-//         // {2} On récupère les informations du contact //
-//         var contactData = lsi.get('contacts', existingContacts[i]);
-//
-//         // {3} On ajoute un contact à la liste //
-//         addNewContact(
-//             contactData.number,
-//             contactData.username,
-//             contactData.firstname,
-//             contactData.lastname
-//         );
-//
-//     }
-//
-//     addNewContact('', '', '', '');
-//
-//     // {4} On met à jour les MINI fiches //
-//     storeMiniFiches();
-//
-// }
-//
-//
-// /* (n) On attache l'évènement d'ajout d'un formulaire de contact */
-// addContact.addEventListener('click', storeContacts, false);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* [5] Gestion des MINI fiches relation
-=========================================================*/
-/* (1) Gestion de l'enregistrement des contacts en local ('localStorage') */
-// lsi.createDataset('mini-fiches');
-// function storeMiniFiches(){
-//     console.log('STORING ALL MINI-FICHES');
-//
-//     // {1} Pour chaque formulaire de contact présent //
-//     var existingMiniFiches = $$('article.mini-relation-panel .mini-fiche-relation   ');
-//     for( var i = 0 ; i < existingMiniFiches.length ; i++ ){
-//
-//         // {2} On initialise notre deflater pour récupérer les valeurs //
-//         var deflater = new FormDeflater(existingMiniFiches[i], ['input', 'select'], ['data-name']);
-//
-//         // {3} On enregistre ce contact si le numéro n'est pas vide et soit pseudo/prénom/nom //
-//         var deflated = deflater.deflate();
-//
-//         // TODO: Condition pour que le formulaire soit valide
-//         var validForm = true;
-//
-//         // Si le formulaire n'est pas valide, on ne l'enregistre pas
-//         if( !validForm ) continue;
-//
-//         // {4} On récupère les données du LSI si elles existent //
-//         var existingData = lsi.get('mini-fiches', 'form'+deflated.uid.value);
-//         console.log('deflated');
-//         console.log(deflated);
-//         // Si n'existe pas, on initialise
-//         if( existingData === false ){
-//             existingData.username   = 'inconnu';
-//             existingData.firstname = 'inconnu';
-//             existingData.lastname  = 'inconnu';
-//         }
-//
-//         // {5} On récupère et met en forme les valeurs du deflater //
-//         var obj = {
-//             uid:          deflated.uid.value,
-//             firstname:    existingData.firstname,
-//             lastname:     existingData.lastname,
-//             username:     existingData.username,
-//             sexe:         [
-//                 deflated.sexe[0].status, // VRAI SI HOMME
-//                 deflated.sexe[1].status  // VRAI SI FEMME
-//                 ],
-//             age:          deflated.age.value,
-//             job:          deflated.job.value,
-//             location: [
-//                 deflated.loc[0].status, // VRAI si choix 1
-//                 deflated.loc[1].status, // VRAI si choix 2
-//                 deflated.loc[2].status, // VRAI si choix 3
-//                 deflated.loc[3].status  // VRAI si choix 4
-//             ]
-//         };
-//
-//         // {6} On enregistre les données dans le 'localStorage' //
-//         lsi.set('mini-fiches', 'form'+obj.uid, obj);
-//
-//     }
-//
-//     // {7} On met à jour le rendu //
-//     restoreMiniFiches();
-// }
-//
-//
-//
-// /* (2) Fonction pour l'ajout d'un contact */
-// function addNewMiniFiche(firstname, lastname, username, uid, age, sexe, job, location){
-//     // {1} Création physique //
-//     miniFicheContainer.innerHTML += miniFicheBuilder.build({
-//         firstname: firstname,
-//         lastname:  lastname,
-//         username:  username,
-//         uid:       uid,
-//         age:       '',
-//         sexe_A:    sexe[0] ? 'true' : 'false',
-//         sexe_B:    sexe[1] ? 'true' : 'false',
-//         job: job,
-//         loc_A:     location[0] ? 'true' : 'false',
-//         loc_B:     location[1] ? 'true' : 'false',
-//         loc_C:     location[2] ? 'true' : 'false',
-//         loc_D:     location[3] ? 'true' : 'false'
-//     });
-//
-// }
-//
-//
-// /* (3) Gestion de l'affichage (et mise à jour) des contacts (depuis 'localStorage') */
-// function restoreMiniFiches(){
-//     // {1} Pour chaque contact du 'localStorage' //
-//     var existingMiniFiches = lsi.keys('mini-fiches');
-//
-//     // On réinitialise le HTML
-//     miniFicheContainer.innerHTML = '';
-//
-//     for( var i = 0 ; i < existingMiniFiches.length ; i++ ){
-//         // {2} On récupère les informations du contact //
-//         var ficheData = lsi.get('mini-fiches', existingMiniFiches[i]);
-//
-//         // {3} On ajoute un contact à la liste //
-//         addNewMiniFiche(
-//             ficheData.firstname,
-//             ficheData.lastname,
-//             ficheData.username,
-//             ficheData.uid,
-//             ficheData.age,
-//             ficheData.sexe,
-//             ficheData.job,
-//             ficheData.location
-//         );
-//     }
-//
-// }
-
-
-
-// TODO : Gestion des MINI fiches relation en fonction des contacts
-/* (1) Fonction pour l'ajout d'une MINI fiche relation */
-
-
-// On ajoute la première
-// addNewFiche();
-
-// Puis on attache l'évènement pour en ajouter d'autres manuellement
-// addContact.addEventListener('click', addNewFiche, false);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* [5] Gestion des deflaters (formulaires) de contact
-=========================================================*/
-
-
-
-
-
-
-
-
-
-
-
-
-