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;


    /* (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 */
    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); };