/* [0] Constructeur -> définit le conteneur et le bouton d'ajout =========================================================*/ function inputPhoneContact(container, add_button){ this.container = container; this.add_button = add_button; } /* [1] Attributs =========================================================*/ inputPhoneContact.prototype = { container: this.container, // Conteneur des formulaires de contact add_button: this.add_button // Bouton d'ajout d'un formulaire }; /* [2] Gestion de l'enregistrement des formulaires de contact =========================================================*/ inputPhoneContact.prototype.fieldsToStorage = function(){ console.log('CONTACTS: FIELDS TO STORAGE'); // {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 le rendu des contacts// this.storageToFields(); }; /* [3] Gestion de l'ajout physique d'un nouveau contact =========================================================*/ /* * * @objectData Objet contenant les informations nécessaires à l'affichage * */ inputPhoneContact.prototype.add = function(objectData){ console.log('CONTACTS: ADD'); // {0} On formatte l'object // objectData.number = (objectData.number != null) ? objectData.number : ''; objectData.username = (objectData.username != null) ? objectData.username : ''; objectData.firstname = (objectData.firstname != null) ? objectData.firstname : ''; objectData.lastname = (objectData.lastname != null) ? objectData.lastname : ''; // {1} On ajoute le HTML // this.container.innerHTML += contactBuilder.build(objectData); // {2} On attache les évènements sur les boutons 'Enregistrer' // var contactSubmits = $$('article.contact-panel .new-contact input[type="submit"]'); // On met à jour les listener (remove, puis add) var ptr = this; for( var i = 0 ; i < contactSubmits.length ; i++ ){ contactSubmits[i].removeEventListener('click', function(e){ ptr.fieldsToStorage(); }, false); contactSubmits[i].addEventListener('click', function(e){ ptr.fieldsToStorage(); }, false); } }; /* [4] Gestion de l'affichage depuis le 'localStorage' =========================================================*/ inputPhoneContact.prototype.storageToFields = function(){ console.log('CONTACTS: STORAGE TO FIELDS'); // {1} Pour chaque contact du 'localStorage' // var existingContacts = lsi.keys('contacts'); // On réinitialise le HTML this.container.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 // this.add(contactData); } // On ajoute un champ de plus à remplir this.add({number:'', firstname:'', lastname:'', username:''}); // {4} On met à jour les MINI fiches // // miniFiche.fieldsToStorage(); }; /* [5] Point d'amorçage de la gestion des contacts =========================================================*/ inputPhoneContact.prototype.attach = function(){ console.log('CONTACTS: ATTACH'); /* (1) On initialise le jeu de données */ lsi.createDataset('contacts'); /* (2) On attache l'évènement sur le bouton d'ajout de contact */ var ptr = this; this.add_button.addEventListener('click', function(e){ ptr.fieldsToStorage(); }, false); /* (3) On charge les contacts depuis la mémoire ('localStorage') */ this.storageToFields(); };