Cette class me permet de créer une fenêtre avec :
/** * 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 ====================*/ /*========================================================================*/ };