StatusBar

Barre d'état

Cette barre permet d'afficher 2 types de messages :

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