NxTIC/js/lib/notif.js

/* [0] CONSTRUCTEUR
=========================================================*/
var NotificationClass = function(container){
	this.container = container;
};



/* [1] PROTOTYPE ET ATTRIBUTS
=========================================================*/
NotificationClass.prototype = {
	container: this.container, // Parent de la page à notifier
	stack:     [],             // Contiendra les données de toutes les notifications actives
	types: [                   // Définition des différents types
		'warning',
		'info',
		'success',
		'error'
	],
	defaultTimeout: 2000,      // Temps d'apparition par défaut
	errorCodes:     {}         // codes d'erreurs sous la forme {codeErreur1: texteErreur1, codeErreur2: texteErreur2, ...}
};


/* [2] AJOUT D'UN ELEMENT DANS LA PILE
=========================================================*/
/*
*
* @stack<Array>             Pile dans laquelle on veut ajouter un élément
* @element<Mixed>           Elément que l'on veut ajouter à la pile
* @emptyValues<Array>       Liste des valeurs à considérer comme 'vides'
*
*/
NotificationClass.prototype.pushStack = function(stack, element, emptyValues){
	/* (0) Vérification des INPUT
	---------------------------------------------------------*/
	/* (1) Vérification de @stack */
	if( !(stack instanceof Array) )
		return null;
	/* (2) Vérification de @emptyValues */
	if( !(emptyValues instanceof Array) )
		return null;
	/* (3) Vérification de element */
	if( !(element instanceof Element) )
		return null;


	/* (1) On cherche la première valeur vide dans @stack
	---------------------------------------------------------*/
	var index = -1;
	for( var i in stack )
		if( emptyValues.indexOf(stack[i]) > -1 ){
			index = i;
			break;
		}

	/* (2) Insertion et résultat
	---------------------------------------------------------*/
	/* (1) Si on a rien trouvé, on fait un push normal */
	if( index == -1 )
		return stack.push(element) - 1;

	/* (2) Si on a trouvé, on enregistre @element et on renvoie @index */
	stack[index] = element;
	return index;

};



/* [3] SUPPRESSION D'UNE NOTIFICATION
=========================================================*/
/*
*
* @id<int>             Id de la notification dans la pile
*
*/
NotificationClass.prototype.hide = function(id){
	/* (0) Vérification de @id */
	if( isNaN(id) )
		return false;

	id = parseInt(id);


	/* (1) Suppression de l'élément */
	if( this.stack[id].element instanceof Element )
		this.container.removeChild( this.stack[id].element );

	/* (2) On supprime la notification de la pile */
	this.stack[id] = null;
};


/* [4] AFFICHAGE D'UNE NOTIFICATION
=========================================================*/
/*
*
* @type<String>        Type de notification parmi 'warning', 'info', 'success', 'error'
* @title<String>       Titre de la notification
* @message<String>     Message de la notification
* @timeout<int>        Temps d'apparition de la notification en ms (millisecondes) + 2 * 500ms (fadeIn+fadeOut)
*
*/
NotificationClass.prototype.show = function(type, title, message, timeout){
	/* (0) Vérification des INPUT
	---------------------------------------------------------*/
	/* (1) Vérification de @type */
	type = this.types.indexOf(type) > -1 ? type : this.types[0];

	/* (2) Vérification de @title */
	title = typeof title == 'string' ? title : '';

	/* (3) Vérification de @message */
	message = typeof message.toString() == 'string' ? message : '...';

	// On cherche s'il y a une occurence dans le dictionnaire
	if( this.errorCodes[message] != null )
		message = this.errorCodes[message];

	/* (4) Vérification de @timeout */
	timeout = typeof timeout == 'number' ? timeout : this.defaultTimeout;

	/* (1) Construction de l'élément
	---------------------------------------------------------*/
	/* (1) Création du set de données */
	var stackItem = {
		element: document.createElement('div'),
		type:    type,
		title:   title,
		message: message,
		timeout: null
	};

	/* (2) Construction de l'élément */
	stackItem.element.className = 'notification-element';
	stackItem.element.setAttribute('data-'+type, '');
	stackItem.element.innerHTML = '<p><strong>'+title+':</strong> '+message+'<p>';

	/* (2) Ajout à la pile et au DOM
	---------------------------------------------------------*/
	this.container.appendChild(stackItem.element);
	var id = this.pushStack( this.stack, stackItem, [null] );
	stackItem.element.id = id;

	/* (3) Gestion du temps d'apparition
	---------------------------------------------------------*/
	var ptr = this;

	// {1} fadeIn START //
	stackItem.element.className = 'notification-element notification-visible';

	// {2} fadeOut START //
	setTimeout(function(){
		stackItem.element.className = 'notification-element';
	}, 500+timeout);

	// {3} fadeOut STOP + animation STOP //
	stackItem.timeout = setTimeout(function(){
		ptr.hide(id);
	}, 500+timeout+500);


	/* (4) Gestion du clic qui ferme la notification
	---------------------------------------------------------*/
	stackItem.element.addEventListener('click', function(e){
		ptr.hide(id);
	}, false);


	/* (5) On retourne l'élément
	---------------------------------------------------------*/
	return stackItem.element;

};


/* [6] 'Raccourcis' d'accès
=========================================================*/
NotificationClass.prototype.warning = function(title, message, timeout){ return this.show('warning', title, message, timeout); };
NotificationClass.prototype.info    = function(title, message, timeout){ return this.show('info',    title, message, timeout); };
NotificationClass.prototype.success = function(title, message, timeout){ return this.show('success', title, message, timeout); };
NotificationClass.prototype.error   = function(title, message, timeout){ return this.show('error',   title, message, timeout); };