/* [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 handler: null // Fonction pour l'enregistrement et la synchronisation des données }; /* [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 = { uid: indexInParent, 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 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.handler(); }, false); contactSubmits[i].addEventListener('click', function(e){ ptr.handler(); }, 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:''}); }; /* [5] Point d'amorçage de la gestion des contacts =========================================================*/ inputPhoneContact.prototype.attach = function(handler){ console.log('CONTACTS: ATTACH'); /* (1) On initialise le jeu de données */ lsi.createDataset('contacts'); // On enregistre le handler this.handler = handler; /* (2) On attache l'évènement sur le bouton d'ajout de contact */ var ptr = this; this.add_button.addEventListener('click', function(){ ptr.handler(); }, false); /* (3) On charge les contacts depuis la mémoire ('localStorage') */ this.storageToFields(); };