/* [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 Pile dans laquelle on veut ajouter un élément * @element Elément que l'on veut ajouter à la pile * @emptyValues 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 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 Type de notification parmi 'warning', 'info', 'success', 'error' * @title Titre de la notification * @message Message de la notification * @timeout 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 = '

'+title+': '+message+'

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