window-controlling.js

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

/**
 * Returns the visibility of the vindow.
 */
Zapatec.Window.prototype.isVisible = function() {
	return this.widgetState == "shown" ? true : false;
};

/**
 * Shows the window.
 */ 
Zapatec.Window.prototype.show = function() {
	if (!this.fireOnState("ready", function() {this.show();})) {return;}

	this.getContainer().style.display = "block";
	if (this.content) {
		this.content.show();
	}
	if (this.config.modal == true && this.modal) {
		var zIndex = null;
		if (this.WCH) {
			zIndex = this.WCH.style.zIndex;
		} else {
			zIndex = this.getContainer().style.zIndex;
		}
		this.modal.show(zIndex - 1);
	}
	if (this.WCH) {
		this.WCH.style.visibility = "";
	}
	this.activate();
	if (this.getConfiguration().fixed) {
		this._updateState();
	}
	if (this.stateReached("ready")) {
		this.changeState("shown");
	}
	this.fireEvent("onShow", this);
	return true;
}

/**
 * Hides the window.
 */ 
Zapatec.Window.prototype.hide = function() {
	if (!this.fireOnState("ready", function() {this.hide();})) return;

	this.content.hide();
	this.getContainer().style.display = "none";
	if (this.config.modal == true && this.modal) {
		this.modal.hide();
	}
	Zapatec.Utils.hideWCH(this.WCH);
	this.deactivate();
	if (this.stateReached("ready")) {
		this.changeState("hidden");
	}
	this.fireEvent("onHide", this);
	return true;
}

/**
 * This function displays the calendar near a given "anchor" element, according
 * to some rules passed in \em opts.  The \em opts argument is a string
 * containing one or 2 letters.  The first letter decides the vertical
 * alignment, and the second letter decides the horizontal alignment relative
 * to the anchor element.  Following we will describe these options; in parens
 * we will use simple descriptions like "top to bottom" which means that the
 * top margin of the calendar is aligned with the bottom margin of the object.
 *
 * \b Vertical align:
 *
 * - T -- the calendar is completely above the element (bottom to top)
 * - t -- the calendar is above the element but might overlap it (bottom to bottom)
 * - C -- the calendar is vertically centered to the element
 * - b -- the calendar is below the element but might overlap it (top to top)
 * - B -- the calendar is completely below the element (top to bottom)
 *
 * \b Horizontal align (defaults to 'l' if no letter passed):
 *
 * - L -- the calendar is completely to the left of the element (right to left)
 * - l -- the calendar is to the left of the element but might overlap it (right to right)
 * - C -- the calendar is horizontally centered to the element
 * - r -- the calendar is to the right of the element but might overlap it (left to left)
 * - R -- the calendar is completely to the right of the element (left to right)
 *
 * @param el [HTMLElement] the anchor element
 * @param opts [string, optional] the align options, as described above.  Defaults to "Bl" if nothing passed.
 */
Zapatec.Window.prototype.showAtElement = function (el, opts) {
	if (!this.fireOnState("ready", function() {this.showAtElement(el, opts);})) {return;}

	var p = Zapatec.Utils.getElementOffset(el);
	if (!opts || typeof opts != "string") {
		this.showAt(p.x, p.y + el.offsetHeight);
		return true;
	}
	this.getContainer().style.display = "block";
	var w = this.getWidth();
	var h = this.getHeight();
	this.getContainer().style.display = "none";
	var valign = opts.substr(0, 1);
	var halign = "l";
	if (opts.length > 1) {
		halign = opts.substr(1, 1);
	}
	// vertical alignment
	switch (valign) {
	    case "T": p.y -= h; break;
	    case "B": p.y += el.offsetHeight; break;
	    case "C": p.y += (el.offsetHeight - h) / 2; break;
	    case "t": p.y += el.offsetHeight - h; break;
	    case "b": break; // already there
	}
	// horizontal alignment
	switch (halign) {
	    case "L": p.x -= w; break;
	    case "R": p.x += el.offsetWidth; break;
	    case "C": p.x += (el.offsetWidth - w) / 2; break;
	    case "l": p.x += el.offsetWidth - w; break;
	    case "r": break; // already there
	}
	p.width = w;
	p.height = h;
	//Zapatec.Utils.fixBoxPosition(p);
	this.showAt(p.x, p.y);
	return true;
}

/**
 * Shows the calendar at a given absolute position (beware that, depending on
 * the calendar element style -- position property -- this might be relative to
 * the parent's containing rectangle).
 *
 * @param x [int] the X position
 * @param y [int] the Y position
 */
Zapatec.Window.prototype.showAt = function (x, y) {
	if (!this.fireOnState("ready", function() {this.showAt(x, y);})) {return;}

	this.setPagePosition(x, y);
	this.show();
	return true;
}

/**
 * Minimizes the window.
 */ 
Zapatec.Window.prototype.minimize = function() {
	if (!this.config.showMinButton) {
		return false;
	}
	if (!this.fireOnState("ready", function() {this.minimize();})) return;

	//Do we really need to minimize
	if (this.state.state != "min" && this.titleArea) {
		var self = this;
		//this function recursively hides all the elements in the Window except title and its parents
		function hideExcept(el, exc) {
			if (el != self.container) {
				var first = el.firstChild;
				while(first) {
					if (first && first.style && first != exc) {
						if (!first.restorer) {
							first.restorer = new Zapatec.SRProp(first);
						}
						first.restorer.saveProp("style.display");
						first.style.display = "none";
					}
					first = first.nextSibling;
				}
				hideExcept(el.parentNode, el);
			}
		}
		if (this.state.state != "simple") {
			this.restore();
		}
		hideExcept(this.titleArea.parentNode, this.titleArea);
		this.content.hide();
		this.restorer.saveProps(
			"_updateState", "content", "statusText", 
			"getConfiguration().limit.minHeight"
		);
		this.content = this.statusText = this.getConfiguration().limit.minHeight = null;
		this._updateState = function() {};
		this.setHeight(Zapatec.Utils.getHeight(this.face));
		if (this.config.bottomMinimize) {
			this.setWidth(Zapatec.Window.minWinWidth);
			//Putting it to the left bottom corner in the appropriate order
			this.setScreenPosition(Zapatec.Window.minimizeLeft, "bottom");
			Zapatec.Window.minimizeLeft += Zapatec.Window.minWinWidth + 5;
		}
		//lets disable dragging
		if (!this.config.dragMin) {
			this._setCanDrag(false);
		} else {
			this._setCanDrag(true);
			this.restorer.restoreProp("_updateState");
		}
		this._setCanResize(false);
		//Need to hide some buttons and show restore one
		if (this.state.state == "max") {
			this.showButton("maxButton");
		} else {
			this.showButton("restoreButton");
		}
		this.hideButton("minButton");
		//storing old state for restore
		this.state.prevState = this.state.state;
		//setting new state
		this.state.state = "min";
		//if the window is not fixed need to fixate it on the screen
		if (!this.getConfiguration().fixed) {
			Zapatec.FixateOnScreen.register(this.getContainer());
			Zapatec.FixateOnScreen.register(this.WCH);
		}
		//deactivateing window
		this.deactivate();
	} else {
		return false;
	}
	//calling handler
	this.fireEvent("onMinimize", this);

	return true;
}

/**
 * Maximizes the window.
 */ 
Zapatec.Window.prototype.maximize = function() {
	if (!this.config.showMaxButton) {
		return false;
	}
	var self = this;
	if (!this.fireOnState("ready", function() {self.maximize();})) return;

	if (this.state.state != "max") {
		var sizes = Zapatec.Utils.getWindowSize();
		//Need to hide some buttons and show restore one, restore some properties of the window, etc.
		if (this.state.state == "min") {
			this.restore();
		}
		this.showButton("restoreButton");
		this.hideButton("maxButton");
		//lets disable dragging
		this._setCanDrag(false);
		this._setCanResize(false);
		this.restorer.saveProp("_updateState");
		this._updateState = function() {};
		this.setHeight(this.getHeight());
		this.setScreenPosition(0, 0);
		this.setSize(sizes.width, sizes.height);
		//setting previous state to be restored correctly
		this.state.prevState = "simple";
		//setting new state
		this.state.state = "max";
		//if the window is not fixed need to fixate it on the screen
		if (!this.getConfiguration().fixed) {
			Zapatec.FixateOnScreen.register(this.getContainer());
			Zapatec.FixateOnScreen.register(this.WCH);
		}
		this.activate();
	} else {
		return false;
	}
	this.fireEvent("onMaximize", this);
	
	return true;
}

/**
 * Restores the window.
 */ 
Zapatec.Window.prototype.restore = function() {
	if (!this.config.showMaxButton && !this.config.showMinButton) {
		return false;
	}
	var self = this;
	if (!this.fireOnState("ready", function() {self.restore();})) return;
	
	if (this.state.prevState == "max") {
		return this.maximize();
	}
	if (this.state.state != "simple") {
		var self = this;
		//this function recursively hides all the elements in the Window except title and its parents
		function showAll(el) {
			if (el != self.container) {
				var first = el.firstChild;
				while(first) {
					if (first && first.restorer) {
						first.restorer.restoreProp("style.display");
						first.restorer = null;
					}
					first = first.nextSibling;
				}
				showAll(el.parentNode);
			}
		}
		//Need to hide some buttons and show restore one
		if (this.config.showMaxButton) {
			this.showButton("maxButton"); 
		}
		if (this.config.showMinButton) {
			this.showButton("minButton");
		}
		this.hideButton("restoreButton");
		//setting new state
		var wasState = this.state.state;
		this.state.state = "simple";
		//if the window is not fixed need to unregister 
		//it from being fixated on the screen
		if (wasState == "min" && this.config.bottomMinimize) {
			Zapatec.Window.sortMin(this);
		}
		if (!this.getConfiguration().fixed) {
			Zapatec.FixateOnScreen.unregister(this.getContainer());
			Zapatec.FixateOnScreen.unregister(this.WCH);
			this.setPosition(this.state.left, this.state.top);
		} else {
			this.setScreenPosition(this.state.left, this.state.top);
		}
		//seting the initial pos and sizes
		this.setSize(this.state.width, this.state.height);
		//enable dragging
		this._setCanDrag(true);
		//enable resizing
		this._setCanResize(true);
		if (wasState == "min") {
			showAll(this.titleArea);
		}
		this.restorer.restoreProps(
			"_updateState", "content", "statusText",
			"getConfiguration().limit.minHeight"
		);
		if (wasState == "min") {
			this.content.show();
		}
		//activateing this window
		this.activate();
	}

	this.fireEvent("onRestore", this);

	return true;
}

/**
 * Closes the window. Currently does not destroys the window object, just the HTML part of it
 */ 
Zapatec.Window.prototype.close = function() {
	var self = this;
	if (!this.fireOnState("ready", function() {self.close();})) return;
	
	this.restore();
	this.deactivate();
	// Return content back to the place it was taken from
	// Destroy window
	this.fireEvent("onClose", this);
	if (!this.config.hideOnClose) {
		if (this.content.destroy) this.content.destroy();
		this.content = null;
		
		this.restoreOfDrag();
		this.restoreOfResize();
		if (this.minButton.destroy) this.minButton = this.minButton.destroy();
		if (this.maxButton.destroy) this.maxButton = this.maxButton.destroy();
		if (this.closeButton.destroy) this.closeButton = this.closeButton.destroy();
		if (this.restoreButton.destroy) this.restoreButton = this.restoreButton.destroy();

		for(var iEl in this) {
			if (this[iEl] && typeof this[iEl] == "object" && this[iEl].nodeType && iEl != "container" && iEl != "WCH") {
				this[iEl] = null;
			}
		}
		if (this.config.modal == true && this.modal) {
			this.modal.hide(true);
			delete this.modal;
		}
		this.config = null;
		this.restorer = this.restorer.destroy();
		if (this.container.outerHTML) {
			this.container.outerHTML = "";
		} else {
			Zapatec.Utils.destroy(this.container);
		}
		if (this.WCH && this.WCH.outerHTML) {
			this.WCH.outerHTML = "";
		} else if (this.WCH) {
			Zapatec.Utils.destroy(this.WCH);
		}
		delete this.container;
		delete this.WCH;
		this.changeState("destroyed");
		this.removeEvent("onRestore");
		this.removeEvent("onMinimize");
		this.removeEvent("onMaximize");
		this.removeEvent("onShow");
		this.removeEvent("onHide");
		this.removeEvent("onRaise");
		this.removeEvent("onContentLoad");
		this.removeEvent("privileged_execution_on");
		this.removeEvent("privileged_execution_off");
		this.removeEvent("delayed_execution_on");
		this.removeEvent("delayed_execution_off");
	} else {
		this.hide();
	}
	return true;
}