Window

Cette class me permet de créer une fenêtre avec :

Source

/**
 * Fenêtre
 * @author			neolao <neo@neolao.com>
 * @version			0.3 (29/01/2006)
 * @license			http://creativecommons.org/licenses/by-sa/2.5/
 */
function Window(){
	this.__construct.apply(this, arguments);
}
Window.prototype = {
	// ----------------------------- CONSTANTES --------------------------------
 
	// ----------------------------- VARIABLES ---------------------------------
	/**
	 * La référence du node html de la fenêtre
	 * @var node html
	 */
	_window : 0,
	/**
	 * La référence du node html de l'en-tête
	 * @var node html
	 */
	_header : 0,
	/**
	 * La référence du node html du titre
	 * @var node html
	 */
	_title : 0,
	/**
	 * La référence du node html du bouton replier
	 * @var node html
	 */
	_collapse : 0,
	/**
	 * La référence du node html du bouton deplier
	 * @var node html
	 */
	_expand : 0,
	/**
	 * La référence du node html du contenu
	 * @var node html
	 */
	_content : 0,
	/**
	 * Le titre de la fenêtre
	 * @var string
	 */
	_titleName : "title",
	/**
	 * L'instance du RequestManager
	 * @var RequestManager
	 */
	_requestManager : 0,
	/**
	 * L'écouteur du gestionnaire des requêtes
	 * @var Object
	 */
	_requestListener : 0,
	/**
	 * L'adresse pour les requête
	 * @var string
	 */
	requestUrl : "index.php",
	/**
	 * La langue
	 * @var object
	 */
	lang : new Object(),
	/**
	 * L'identifiant
	 * 
	 * Pour indiquer que la fenêtre n'est pas prête à être positionnée,
	 * il faut donner la valeur false à l'identifiant
	 * @var int
	 */
	id : 0,
 
	// ----------------------------- EVENEMENTS --------------------------------
	/**
	 * Invoqué lorsque la fenêtre se ferme
	 */
	onClose : function(){},
	/**
	 * Invoqué lorsqu'on édite la fenêtre
	 */
	onEdit : function(){},
 
	/*============================= CONSTRUCTEUR =============================*/
	/*========================================================================*/
	/**
	 * Initialisation
	 * @param string pTitle Le titre de la fenêtre
	 * @param string pClassName (optional) Le style CSS
	 */
	__construct : function(pTitle, pClassName){
		this._titleName = pTitle;
 
		// Création de la fenêtre
		this._createWindow();
		this._window.className = (pClassName)?pClassName:"window";
 
		// Création de l'en-tête
		this._createHeader();
 
		// Création du contenu
		this._createContent();
	},
	/*======================= FIN = CONSTRUCTEUR = FIN =======================*/
	/*========================================================================*/
 
	/*=========================== METHODES PRIVEES ===========================*/
	/*========================================================================*/
	/**
	 * Délégation de fonction
	 * @param object pTarget La cible de la fonction
	 * @param function pFunction La fonction
	 * @return function La fonction qui fait la délégation
	 */
	_delegate : function(pTarget, pFunction){
		var f = function(){
			arguments.callee.func.apply(arguments.callee.target, arguments);
		};
		f.target = pTarget;
		f.func = pFunction;
		return f;
	},
	/**
	 * Création de la fenêtre
	 */
	_createWindow : function(){
		this._window = document.createElement("div");
	},
	/**
	 * Création de l'en-tête
	 * 
	 * L'événement mousedown du header envoi un objet Event typé "WindowHeader"
	 * Ca permet au gestionnaire de fenêtre de récupérer l'événement
	 * Même chose pour l'événement mouseup
	 * 
	 * Sur les boutons, on stoppe la propagation de l'événement
	 * Parce qu'ils sont "sur le chemin" du header
	 */
	_createHeader : function(){
		// Fonction générique pour stopper la propagation
		var stopPropagation = function(pEvent){
			pEvent.stopPropagation();
		};
 
		// En-tête
		this._header = document.createElement("div");
		this._header.className = "header";
		var onHeader = function(pEvent){
			pEvent.targetType = "WindowHeader";
			pEvent.targetWindow = this._window;
		};
		this._header.addEventListener("mousedown", this._delegate(this, onHeader), false);
		this._header.addEventListener("mouseup", this._delegate(this, onHeader), false);
		this._header.addEventListener("dblclick", this._delegate(this, this.collapseExpand), false);
		this._window.appendChild(this._header);
 
		// Bouton replier
		this._collapse = document.createElement("div");
		this._collapse.className = "collapse";
		var onCollapse = function(pEvent){
			pEvent.stopPropagation();
			this.collapse();
		};
		this._collapse.addEventListener("mousedown", this._delegate(this, onCollapse), false);
		this._collapse.addEventListener("mouseup", stopPropagation, false);
		this._header.appendChild(this._collapse);
 
		// Bouton deplier
		this._expand = document.createElement("div");
		this._expand.className = "expand";
		var onExpand = function(pEvent){
			pEvent.stopPropagation();
			this.expand();
		};
		this._expand.addEventListener("mousedown", this._delegate(this, onExpand), false);
		this._expand.addEventListener("mouseup", stopPropagation, false);
		this._header.appendChild(this._expand);
 
		// Bouton fermer
		var close = document.createElement("div");
		close.className = "close";
		var onClose = function(pEvent){
			pEvent.stopPropagation();
			this.close();
		};
		close.addEventListener("mousedown", this._delegate(this, onClose), false);
		close.addEventListener("mouseup", stopPropagation, false);
		this._header.appendChild(close);
 
		// Bouton editer
		var edit = document.createElement("div");
		edit.className = "edit";
		var onEdit = function(pEvent){
			pEvent.stopPropagation();
			this.edit();
		};
		edit.addEventListener("mousedown", this._delegate(this, onEdit), false);
		edit.addEventListener("mouseup", stopPropagation, false);
		this._header.appendChild(edit);
 
		// titre
		this._title = document.createElement("div");
		this._title.className = "title";
		this._title.innerHTML = this._titleName;
		this._header.appendChild(this._title);
	},
	/**
	 * Création du contenu
	 */
	_createContent : function(){
		this._content = document.createElement("div");
		this._content.className = "content";
		this._window.appendChild(this._content);
	},
	/*===================== FIN = METHODES PRIVEES = FIN =====================*/
	/*========================================================================*/
 
	/*============================ GETTER  SETTER ============================*/
	/*========================================================================*/
	/**
	 * Change le titre
	 * @param string pTitle Le nouveau titre
	 */
	setTitle : function(pTitle){
		this._titleName = pTitle;
		this._title.innerHTML = pTitle;
	},
	/**
	 * Récupère le titre
	 * @return string Le titre
	 */
	getTitle : function(){
		return this._titleName;
	},
	/**
	 * Récupère le node html de la fenètre
	 * @return node La fenètre
	 */
	getNode : function(){
		return this._window;
	},
	/**
	 * La réponse du chargement
	 * @param Object pResponse La ressource xmlHttp
	 */
	setResponse : function(pResponse){
		// A surcharger
	},
	/**
	 * Initialise le gesrtionnaire des requêtes
	 * @param RequestManager pRequestManager Le gestionnaire des requêtes
	 */
	setRequestManager : function(pRequestManager){
		this._requestManager = pRequestManager;
		// Création d'un écouteur
		this._requestListener = new Object();
		this._requestListener.onStartLoad = function(pItem){};
		this._requestListener.onError = function(pItem){};
		this._requestListener.onLoad = this._delegate(this, function(pItem){
			if(pItem.id.window == this){
				this.setResponse(pItem.response);
			}
		});
		this._requestManager.addListener(this._requestListener);
	},
	/*====================== FIN = GETTER  SETTER = FIN ======================*/
	/*========================================================================*/
 
	/*========================== METHODES PUBLIQUES ==========================*/
	/*========================================================================*/
	/**
	 * Lance une requête
	 * @param string pUrl L'adresse
	 * @param string pMethod La méthode (GET ou POST)
	 * @param string pData Les données envoyées
	 * @param string pMessage Le message de chargement
	 */
	request : function(pUrl, pMethod, pData, pMessage){
		var request = this._requestManager.load(pUrl, pMethod, pData, pMessage);
		// Je mémorise l'instance de la fenêtre dans la requête
		// C'est pas super, mais bon ...
		request.window = this;
	},
	/**
	 * Mise à jour du contenu
	 * Cette méthode va être appelée dans le WindowManager, quand c'est prêt
	 * Méthode à surcharger
	 */
	update : function(){
 
	},
	/**
	 * Affiche la fenêtre
	 */
	show : function(){
		this._window.style.display = "block";
	},
	/**
	 * Cache la fenètre
	 */
	hide : function(){
		this._window.style.display = "none";
	},
	/**
	 * replie le contenu
	 */
	collapse : function(){
		this._content.style.display = "none";
		this._expand.style.display = "block";
		this._collapse.style.display = "none";
	},
	/**
	 * deplie le contenu
	 */
	expand : function(){
		this._content.style.display = "block";
		this._expand.style.display = "none";
		this._collapse.style.display = "block";
	},
	/**
	 * replie/deplie le contenu
	 */
	collapseExpand : function(){
		if(this._content.style.display == "none"){
			this._content.style.display = "block";
			this._expand.style.display = "none";
			this._collapse.style.display = "block";
		}else{
			this._content.style.display = "none";
			this._expand.style.display = "block";
			this._collapse.style.display = "none";
		}
	},
	/**
	 * Edite la fenêtre
	 */
	edit : function(){
		this.onEdit();
	},
	/**
	 * Ferme la fenêtre
	 */
	close : function(){
		this._window.parentNode.removeChild(this._window);
		this.onClose();
	}
	/*==================== FIN = METHODES PUBLIQUES = FIN ====================*/
	/*========================================================================*/
};