NxTIC/js/includes/input-facebook-contact.js

/* [0] Constructeur -> définit le conteneur et le bouton d'ajout
=========================================================*/
function inputFacebookContact(container, navContainer){
	this.container     = container;
	this.nav_container = navContainer;
}

/* [1] Attributs
=========================================================*/
inputFacebookContact.prototype = {
	container: this.container,         // Conteneur des formulaires de contact
	nav_container: this.nav_container, // Conteneur de la navigation entre les formulaires
	selected: 0,                       // UID du permier des contacts sélectionnés (10 par 10)
	handler: null                      // Fonction pour l'enregistrement et la synchronisation des données
};



/* [2] Vérification des données d'un contact
=========================================================*/
inputFacebookContact.prototype.check = function(deflated){
	/* On retourne la validité du formulaire */
	return !isNaN(deflated.existing) || deflated.username.length > 0;
}


/* [3] Gestion de l'enregistrement des formulaires de contact
=========================================================*/
inputFacebookContact.prototype.fieldsToStorage = function(){
	console.log('CONTACTS: FIELDS TO STORAGE');

	// {1} Pour chaque formulaire de contact présent //
	var visibleContacts = $$('[data-sublink="facebook"] article.contact-panel .new-contact');
	for( var i = 0 ; i < visibleContacts.length ; i++ ){

		// {2} On initialise notre deflater pour récupérer les valeurs //
		var deflater = new FormDeflater(visibleContacts[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();

		// Si le formulaire n'est pas valide, on ne l'enregistre pas
		if( !this.check(deflated) ) continue;

		// {4} On récupère et met en forme les valeurs du deflater //
		var obj = {
			uid:       parseInt(deflated.uid),
			username:  deflated.username,
			firstname: deflated.firstname,
			lastname:  deflated.lastname,

			existing:  (!isNaN(deflated.existing)) ? parseInt(deflated.existing) : '.'
		};

		/* (5) On calcule et ajoute le hash des données */
		obj.hash = crc32( JSON.stringify(obj) );

		// {6} On enregistre les données dans le 'localStorage' //
		lsi.set('f_contacts', parseInt(deflated.uid), obj);

	}

};









/* [4] Gestion de l'ajout physique d'un nouveau contact
=========================================================*/
/*
*
* @objectData<Object>                                     Objet contenant les informations nécessaires à l'affichage
*
*/
inputFacebookContact.prototype.add = function(objectData){
	console.log('CONTACTS: ADD');

	// Si pas d'uid, on quitte
	if( objectData == null || objectData.uid == null || isNaN(objectData.uid) )
		return false

	// {0} On formatte l'object //
	objectData.username  = (objectData.username  != null) ? objectData.username  : '';
	objectData.existing  = (objectData.existing  != null) ? objectData.existing  : '.';


	// {1} On récupére la liste des contacts déja renseignés //
	var existing = lsi.export('f_friends');
	var buildData = objectData;
	buildData.contacts = '';

	for( var i in existing )
		buildData.contacts += "\t\t<option value='"+i+"'>"+existing[i].name+"</option>\n";

	// {2} On ajoute le HTML //
	this.container.innerHTML += fContactBuilder.build(buildData);

	// {3} On remplit @existing s'il y a une valeur //
	var existingOption = $('[data-sublink="facebook"] article.contact-panel .new-contact input[data-name="uid"][value="'+objectData.uid+'"] ~ span select[data-name="existing"]>option[value="'+objectData.existing+'"]');
	if( existingOption != null )
		existingOption.setAttribute('selected', 'selected');

	// {4} On attache les évènements sur les formulaires //
	var contactForms = $$('[data-sublink="facebook"] article.contact-panel .new-contact');

	// On met à jour les listener (remove, puis add)
	var ptr = this;
	for( var i = 0 ; i < contactForms.length ; i++ ){
		contactForms[i].removeEventListener('click', function(e){ ptr.nav(e.target); ptr.handler(e.target); }, false);
		contactForms[i].addEventListener('click',    function(e){ ptr.nav(e.target); ptr.handler(e.target); }, false);
	}

};










/* [5] Gestion de l'affichage depuis le 'localStorage'
=========================================================*/
inputFacebookContact.prototype.storageToFields = function(){
	console.log('CONTACTS: STORAGE TO FIELDS');

	// {1} Pour chaque contact du 'localStorage' //
	var contactKeys = lsi.keys('f_contacts');

	// On réinitialise le HTML
	this.container.innerHTML = '';

	// {2} On ajoute chaque contact (parmi les séléctionnés) à la liste //
	var min = this.selected;    // On affiche du contact sélectionné
	var max = this.selected+10; // On s'arrête à 10 contacs

	for( var i = min ; i < max && i < contactKeys.length ; i++ )
		this.add( lsi.get('f_contacts', contactKeys[i]) );


	// On ajoute un champ de plus à remplir si c'est la dernière page
	if( max >= contactKeys.length )
		this.add({uid: contactKeys.length});

	/* (3) On met à jour la barre de navigation */
	this.updateNavBar();

};






/* [6] Gestion de la navigation entre les formulaires (10 par 10)
=========================================================*/
inputFacebookContact.prototype.nav = function(element){
	/* (1) On vérifie que l'élément contient un nombre et existe */
	if( element == null  )
		return false;

	if( element.getData('n') === false || isNaN(element.getData('n')) || element.parentNode.id != 'f_nav-contact' )
		return false;

	/* (2) On désactive tous les éléments actifs */
	var activeElements = $$('[data-sublink="facebook"] #f_nav-contact > 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.getData('n'));
};







/* [7] Mise à jour de la navigation
=========================================================*/
inputFacebookContact.prototype.updateNavBar = function(){
	var contactKeys = lsi.keys('f_contacts');
	var len         = contactKeys.length;


	/* (1) On vérifie si la barre de navigation est à jour */
	var navBarUpToDate = this.nav_container.children.length == len;


	/* (2) On vide et remplit la barre de nav, si elle n'est pas à jour */
	if( !navBarUpToDate ){
		this.nav_container.innerHTML = '';

		for( var i = 0 ; i < len ; i+=10 )
			this.nav_container.innerHTML += '<span data-n="'+i+'">'+ (1+i/10) +'</span>';
	}


	/* (4) On séléctionne par défaut la dernière MINI fiche sélectionnée */
	this.nav( $('[data-sublink="facebook"] #f_nav-contact [data-n="'+( this.selected )+'"]') );
};






/* [8] Point d'amorçage de la gestion des contacts
=========================================================*/
inputFacebookContact.prototype.attach = function(handler){
	console.log('CONTACTS: ATTACH');

	/* (1) On initialise le jeu de données */
	lsi.createDataset('f_contacts');

	/* (2) On charge les contacts depuis la mémoire ('localStorage') */
	this.storageToFields();

	/* (3) On enregistre le handler */
	this.handler = handler;

	/* (4) On attache l'évènement sur le conteneur de navigation */
	var ptr = this;
	this.nav_container.addEventListener('click', function(e){
		// 1. On gère la navigation
		ptr.nav(e.target);

		// 2. On gere le chargement dynamique
		ptr.handler(e.target);
	}, false);

};