lite-window.js

zapatec suite 最新版 20070204,非常棒的ajax widgets 工具包

// $Id: lite-window.js 6650 2007-03-19 10:14:14Z slip $
/**
 * The Zapatec DHTML Menu
 *
 * Copyright (c) 2004-2006 by Zapatec, Inc.
 * http://www.zapatec.com
 * 1700 MLK Way, Berkeley, California,
 * 94709, U.S.A.
 * All rights reserved.
 *
 * Windows Widget
 * $$
 *
 */

/**
 * The Window object constructor.  Call it, for example, like this:
 *
 * \code
 *   var win = new Zapatec.Window({
 *   	showResize : false
 *   });
 * \endcode
 *
 * The above creates a new Window object.  The Window isn't displayed
 * instantly; using the "win" variable, the programmer can now set certain
 * configuration variables, hook his own event handlers and then display the
 * window using Zapatec.Window.create() and Zapatec.Window.show().
 *
 * @param config [object] - all parameters are passed as the properties of this object.
 * 
 * Constructor recognizes the following properties of the config object
 * \code
 *    prop. name     | description
 *  -------------------------------------------------------------------------------------------------
 *   showCloseButton | whether to show close button (default true).
 *   raiseOnlyOnTitle| whether to raize when clicking on title or on the whole body of the created window (default true).
 *   canDrag         | whether you can drag the window (default true).
 *   modal           | if true modal window will be created (default false).
 *   onClose         | custom handler, will be called when window is closed.
 *   onShow          | custom handler, will be called when show method is called.
 *   onHide          | custom handler, will be called when hide method is called.
 *   onRaize         | custom handler, will be called when window is raized.
 *   onContentLoad   | custom handler, will be called when content is loaded.
 *   
 * \endcode
 */
Zapatec.Window = function (config) {
	this.winDiv = null;
	this.titleArea = null;
	this.titleText = null;
	this.closeButton = null;
	this.contentArea = null;	
	this.winNumber = 0;
	this.config = {};
	this.config.showTitle = true;
	this.config.titleWidth = 0;
	this.config.contentWidth = 0;
	this.config.heightDiff = 0;
	this.config.left = 0;
	this.config.top = 0;
	this.config.width = 0;
	this.config.height = 0;
	this.config.minWidth = 180;
	this.config.minHeight = 70;
	this.setConfig(config);
};

/**
 * \internal This function is called from the constructor, only once, to 
 * store only needed properties of the config object passed to the constructor.
 */
Zapatec.Window.prototype.setConfig = function (config) {
	this.config.showCloseButton = (typeof config.showCloseButton != "undefined") ? config.showCloseButton : true;
	this.config.raiseOnlyOnTitle = (typeof config.raiseOnlyOnTitle != "undefined") ? config.raiseOnlyOnTitle : true;
	this.config.canDrag = (typeof config.canDrag != "undefined") ? config.canDrag : true;
	this.config.modal = (typeof config.modal != "undefined") ? config.modal : false;
	this.config.onClose = (typeof config.onClose != "undefined") ? config.onClose : null;
	this.config.onShow = (typeof config.onShow != "undefined") ? config.onShow : null;
	this.config.onHide = (typeof config.onHide != "undefined") ? config.onHide : null;
	this.config.onRaise = (typeof config.onRaise != "undefined") ? config.onRaise : null;
	this.onContentLoad = (typeof config.onLoad != "undefined") ? config.onLoad : function () {};
};

/**
 * This is a setup function for Window object.
 *
 * It gathers some mostly common routines when seting up the Window object on your page.
 * For example it creates the simple window and shows it, or creates the popup window.
 * Mostly in all cases (except popup window) it will be initialy shown. Possible enhancement
 * is to add a property to control the initial state of the window (including minimized, maximized, etc)
 *
 * @param config [object] - all parameters are passed as the properties of this object. Many of them are 
 * the same as for the constructor.
 * 
 * Function recognizes the following properties of the config object (duplicated properties are listed in 
 * the constructor description so are not included here):
 * \code
 *    prop. name   | description
 *  -------------------------------------------------------------------------------------------------
 *   popup         | if it is set than window will be a popup window, triggered by the element you passed in this variable.
 *   triggerEvent  | if popup is set than this defines which event of the trigger element will force the window to popup. 
 *                 | Possible values: click, mousemove, mouseover, or any DOM event name.
 *   align         | align of the popup window relational to the trigger object. For information on values see the Zapatec.Window.prototype.showAtElement function description
 *   width         | initial width of the window in pixels.
 *   height        | initial height of the window in pixels.
 *   left          | initial X coordinate of the window.
 *   top           | initial Y coordinate of the window.
 *   title         | title of the window.
 *   content       | content of the window.
 *   divContent    | id of or "pointer" to the HTML element containing the content for the window.
 *   urlContent    | URL to load the content from.
 *   
 * \endcode
 */
Zapatec.Window.setup = function (config) {
	if (!config) {config = {};}
	var win = new Zapatec.Window(config);
	win.create(config.left || 0, config.top || 0, config.width || win.config.minWidth, config.height || win.config.minHeight);
	if (config.title) {
		win.setTitle(config.title);
	}
	if (config.content) {
		win.setContent(config.content);
	}
	if (config.divContent) {
     // Save divContent config option for later use
     win.config.divContent = config.divContent;
		win.setDivContent(config.divContent);
	}
	if (config.urlContent) {
		win.setContentUrl(config.urlContent);
	}
	win.show();
	
	return win;
}; 

/**
 * A function that is called to handle mousedown event for our window.
 *
 * This function handles the routines that should be done on mousedown. Target parameter determines
 * whether something was "pushed" and holds that "pushed" element. "pushed" means that mouse was down
 * on that element and was not released. buttonType property of the target element determines the action that will be made.
 * There is one usefull possibility: if the target element has the customMouseDown property and it holds 
 * function, this function will be called except the default action.
 *
 * @param ev [object] - event object.
 * @param win [object] - our window object.
 * @param target [object] - "pushed" element.
 */
Zapatec.Window.mouseDown = function (ev, win, target) {
	if (!win.config.raiseOnlyOnTitle) {
		win.raise();
	} else {
		if (target && ((target.buttonType == "move") || (target.buttonType == "min") || (target.buttonType == "max") || (target.buttonType == "close") || (target.buttonType == "restore"))) {
			win.raise();		
		}
	}
	if (target) {
		switch (target.buttonType) {
			case "move" : {
				if (!target.customMouseDown) {
					if (win.config.canDrag && win.config.state != "min" && win.config.state != "max") {
						var posX = ev.pageX || ev.clientX + window.document.body.scrollLeft || 0;
						var posY = ev.pageY || ev.clientY + window.document.body.scrollTop || 0;
						var L = parseInt(win.winDiv.style.left) || 0;
						var T = parseInt(win.winDiv.style.top) || 0;
						win.winDiv.xOffs = (posX - L);
						win.winDiv.yOffs = (posY - T);
						win.titleArea.style.cursor = "move";
					}
				} else {
					target.customMouseDown(ev, win, target);
				}
				break;
			}

			case "close" : {
				if (!target.customMouseDown) {
				} else {
					target.customMouseDown(ev, win, target);
				}
				break;
			}
		}
	}
}

/**
 * A function that is called to handle mousemove event for our window.
 *
 * This function handles the routines that should be done on mousedown. Target parameter determines
 * whether something was "pushed" and holds that "pushed" element. "pushed" means that mouse was down
 * on that element and was not released. buttonType property of the target element determines the action that will be made.
 * There is one usefull possibility: if the target element has the customMouseMove property and it holds 
 * function, this function will be called except the default action.
 *
 * @param ev [object] - event object.
 * @param win [object] - our window object.
 * @param target [object] - "pushed" element.
 */
Zapatec.Window.mouseMove = function (ev, win, target) {
	if (target) {
		switch (target.buttonType) {
			case "move" : {
				if (!target.customMouseMove) {
					if (win.config.canDrag && win.config.state != "min" && win.config.state != "max") {
						var posX = ev.pageX || ev.clientX + window.document.body.scrollLeft || 0;
						var posY = ev.pageY || ev.clientY + window.document.body.scrollTop || 0;
						var L = posX - win.winDiv.xOffs, T = posY - win.winDiv.yOffs;
						win.setPos(L, T);
					}
				} else {
					target.customMouseMove(ev, win, target);
				}
				break;
			}
		}
	}
}

/**
 * A function that is called to handle mouseup event for our window.
 *
 * This function handles the routines that should be done on mousedown. Target parameter determines
 * whether something was "pushed" and holds that "pushed" element. "pushed" means that mouse was down
 * on that element and was not released. buttonType property of the target element determines the action that will be made.
 * There is one usefull possibility: if the target element has the customMouseUp property and it holds 
 * function, this function will be called except the default action.
 *
 * @param ev [object] - event object.
 * @param win [object] - our window object.
 * @param target [object] - "pushed" element.
 */
Zapatec.Window.mouseUp = function (ev, win, target, hi) {
	if (target) {
		switch (target.buttonType) {
			case "move" : {
				if (!target.customMouseUp) {
					if (win.config.canDrag) {
						win.titleArea.style.cursor = "default";
					}
				} else {
					target.customMouseUp(ev, win, target);
				}
				break;
			}

			case "close" : {
				if (!target.customMouseUp) {
					if (target == (ev.srcElement || ev.target)) {
						win.close();
					}
				} else {
					target.customMouseUp(ev, win, target);
				}
				break;
			}
		}
	}
}

/**
 * This function assigns event handlers and implements "pushed" element finding.
 *
 * "Pushed" element finding is implemented the following way: all the event handlers see one
 * global variable target. When mouse is down on some element we try to get its buttonType property
 * or seek this property in elements parents. If the element with the buttonType is found it is put
 * into target variable. 
 */
Zapatec.Window.prototype.addEvents = function () {
	var self = this, target = null;
	Zapatec.Utils.addEvent(this.winDiv, "mousedown", function (ev) {
		ev = ev || window.event; 
		target = Zapatec.Utils.getTargetElement(ev);
		while(!target.buttonType && (target != self.winDiv)) {
			target = target.parentNode;
		}
		if (!target.buttonType) target = null;
		Zapatec.Window.mouseDown(ev, self, target);
		if (target) return Zapatec.Utils.stopEvent(ev);
	});
	Zapatec.Utils.addEvent(window.document, "mousemove", function (ev) {
		ev = ev || window.event; 
		Zapatec.Window.mouseMove(ev, self, target);
		if (target) return Zapatec.Utils.stopEvent(ev);
	});
	Zapatec.Utils.addEvent(window.document, "mouseup", function (ev) {
		ev = ev || window.event; 
		Zapatec.Window.mouseUp(ev, self, target);
		target = null;
		if (target) return Zapatec.Utils.stopEvent(ev);
	});
}

/*
 * \internal
 * For internal use only. Calculates some sizes needed to implement title and status text cutting and content scrolling.
 */
Zapatec.Window.prototype.calculateSizes = function () {
	this.winDiv.style.display = "block";
	if (this.titleArea) {
		//Safari Fix
		this.config.titleWidth = this.config.width - (this.winDiv.offsetWidth - (Zapatec.is_khtml ? this.titleText.firstChild.offsetWidth : this.titleText.offsetWidth));
		//Safari Fix
		if (Zapatec.is_khtml) this.titleText.removeChild(this.titleText.firstChild);
	}
	
	if (this.contentArea) {
		//Safari Fix
		this.config.contentWidthDiff = this.winDiv.offsetWidth - (Zapatec.is_khtml ? this.contentArea.firstChild.offsetWidth : this.contentArea.offsetWidth);
		this.config.contentWidth = this.config.width - this.config.contentWidthDiff;
		//Safari Fix
		if (Zapatec.is_khtml) this.contentArea.removeChild(this.contentArea.firstChild);
	}
	
	this.config.heightDiff = this.winDiv.offsetHeight - this.config.height;
	this.winDiv.style.display = "none";
}

/**
 * Creates all HTML elements of the window. This function takes in account
 * this.config object, trough its properties you can disable the following elements:
 *  - The whole title (currently don't work) - this.showTitle property;
 *  - Any of 3 buttons (min, max, close) - this.show(Min|Max|Close)Button property;
 *  - The status area - this.showStatus property;
 *  - The resize icon - this.canResize property;
 * Also calls this.addEvents to assign event handlers to the main div and creates WCH 
 * (http://www.aplus.co.yu/WCH/).
 * This function defines the following properties for HTML elements, needed for event handlers:
 *  - buttonType - one of three buttons or resize icon;