StatusBar
Barre d'état
Cette barre permet d'afficher 2 types de messages :
- message de chargement, avec image pour montrer la progression (pas une vraie)
- message d'erreur
Source
/** * Barre d'état * * Cette barre permet d'afficher 2 types de messages : * - message de chargement, avec image pour montrer la progression (pas une vraie) * - message d'erreur * @author neolao <neo@neolao.com> * @version 0.3 (22/01/2006) * @license http://creativecommons.org/licenses/by-sa/2.5/ */ function StatusBar(){ this.__construct.apply(this, arguments); } StatusBar.prototype = { // ----------------------------- CONSTANTES -------------------------------- // ----------------------------- VARIABLES --------------------------------- /** * La cible * @var htmlNode */ _target : 0, /** * La barre * @var HTMLElement */ _bar : 0, /** * La barre principale * @var HTMLElement */ _first : 0, /** * Le reste des messages * @var HTMLElement */ _stack : 0, /** * Le bouton deplier * @var HTMLElement */ _expand : 0, /** * Le bouton replier * @var HTMLElement */ _collapse : 0, /** * La liste des messages * @var Array */ _list : 0, // ----------------------------- EVENEMENTS -------------------------------- /*============================= CONSTRUCTEUR =============================*/ /*========================================================================*/ /** * Initialisation de l'application * @param string pTarget L'id de la cible de la barre * @param string pClassName (optional) Le style CSS */ __construct : function(pTarget, pClassName){ this._target = document.getElementById(pTarget); // Création de la barre this._createBar(); this._bar.className = (pClassName)?pClassName:"statusbar"; // Initialisation de la liste des messages this._list = new Array(); }, /*======================= FIN = CONSTRUCTEUR = FIN =======================*/ /*========================================================================*/ /*=========================== METHODES PRIVEES ===========================*/ /*========================================================================*/ /** * Délégation de fonction * @param object pTarget La cible de la fonction * @param function pFunction La fonction * @param mixed pParam1 Un paramètre supplémentaire (sans limite) * @return function La fonction qui fait la délégation */ _delegate : function(pTarget, pFunction, pParam1){ var f = function(){ var a = new Array(); for(var j=0; j<arguments.length; j++){ a.push(arguments[j]); } return arguments.callee.func.apply(arguments.callee.target, a.concat(arguments.callee.bonus)); }; var args = new Array(); for(var i=0; i<arguments.length; i++){ args.push(arguments[i]); } f.target = args.shift(); f.func = args.shift(); f.bonus = args; return f; }, /** * Création de la barre */ _createBar : function(){ // Barre this._bar = document.createElement("div"); this._target.appendChild(this._bar); // Bouton replier this._collapse = document.createElement("div"); this._collapse.className = "collapse"; var onCollapse = function(pEvent){ this.collapse(); }; this._collapse.addEventListener("mousedown", this._delegate(this, onCollapse), false); this._bar.appendChild(this._collapse); // Bouton deplier this._expand = document.createElement("div"); this._expand.className = "expand"; var onExpand = function(pEvent){ this.expand(); }; this._expand.addEventListener("mousedown", this._delegate(this, onExpand), false); this._bar.appendChild(this._expand); // Message principal this._first = document.createElement("div"); this._first.className = "first"; this._bar.appendChild(this._first); // Le reste this._stack = document.createElement("div"); this._stack.className = "stack"; this._bar.appendChild(this._stack); }, /** * Création d'un message de chargement * @param String pMessage Le message * @return HTMLElement Le node du message */ _createLoadMessage : function(pMessage){ // Element var item = document.createElement("div"); item.className = "item_load"; // Chargement var loading = document.createElement("div"); loading.className = "loading"; item.appendChild(loading); // Message var message = document.createElement("p"); message.className = "message"; message.appendChild(document.createTextNode(pMessage)); item.appendChild(message); return item; }, /** * Création d'un message d'erreur * @param String pMessage Le message * @return HTMLElement Le node du message */ _createErrorMessage : function(pMessage){ // Element var item = document.createElement("div"); item.className = "item_error"; // Icone var icon = document.createElement("div"); icon.className = "icon"; item.appendChild(icon); // Message var message = document.createElement("p"); message.className = "message"; message.appendChild(document.createTextNode(pMessage)); item.appendChild(message); return item; }, /** * Retire une erreur * @param int pIntTimeout L'identifiant du timeout * @param object pObject Un objet de la forme {item:object, node:HTMLElement} */ _removeError : function(pIntTimeout, pObject){ this._removeMessage(pObject); }, /** * Ajoute un message dans l'affichage * @param object pObject L'objet du message */ _addMessage : function(pObject){ if(this._list.length == 0){ this._first.appendChild(pObject.node); this.collapse(); }else{ this._stack.appendChild(pObject.node); } this._list.push(pObject); }, /** * Retire un message de l'affichage * @param object pObject L'objet du message * @return bool true si l'opération s'est bien passée, sinon false */ _removeMessage : function(pObject){ for(var i=0; i<this._list.length; i++){ if(this._list[i] == pObject){ // On retire le message this._list[i].node.parentNode.removeChild(this._list[i].node); this._list.splice(i, 1); // On vérifie si la première place est libre et qu'il reste des messages if(this._list.length > 0){ // Il reste des messages if(this._first.firstChild != null){ // Il y a un message à la première place // on ne fait rien }else{ // il n'y a pas de message à la première place // il faut mettre le premier de la liste dedans this._first.appendChild(this._list[0].node); } }else{ // Il n'y a plus de message this.collapse(); this._expand.style.display = "none"; } return true; } } return false; }, /*===================== FIN = METHODES PRIVEES = FIN =====================*/ /*========================================================================*/ /*============================ GETTER SETTER ============================*/ /*========================================================================*/ /*====================== FIN = GETTER SETTER = FIN ======================*/ /*========================================================================*/ /*========================== METHODES PUBLIQUES ==========================*/ /*========================================================================*/ /** * Un chargement commence * @param object pItem Un objet qui vient de RequestManager */ onStartLoad : function(pItem){ var message = this._createLoadMessage(pItem.message); var object = {item: pItem, node:message}; this._addMessage(object); }, /** * Un chargement se termine * @param object pItem Un objet qui vient de RequestManager */ onLoad : function(pItem){ // On vérifie que c'est ok var root = pItem.response.responseXML.documentElement; if(root.nodeName == "error"){ var text = root.firstChild.data; var message = this._createErrorMessage(text); var object = {item: pItem, node:message}; this._addMessage(object); setTimeout(this._delegate(this, this._removeError, object), 5000); } for(var i=0; i<this._list.length; i++){ if(this._list[i].item == pItem){ this._removeMessage(this._list[i]); i = this._list.length; } } }, /** * Une erreur survient * Le message doit rester 5 secondes * @param object pItem Un objet qui vient de RequestManager */ onError : function(pItem){ var message = this._createErrorMessage("Error xmlHttp "+pItem.errorType); var object = {item: pItem, node:message}; this._addMessage(object); setTimeout(this._delegate(this, this._removeError, object), 5000); }, /** * replie le stack */ collapse : function(){ this._stack.style.display = "none"; this._expand.style.display = "block"; this._collapse.style.display = "none"; }, /** * deplie le stack */ expand : function(){ this._stack.style.display = "block"; this._expand.style.display = "none"; this._collapse.style.display = "block"; }, /** * Affiche la barre */ show : function(){ this._bar.style.visibility = "visible"; }, /** * Cache la barre */ hide : function(){ this._bar.style.visibility = "hidden"; } /*==================== FIN = METHODES PUBLIQUES = FIN ====================*/ /*========================================================================*/ };