paneset-core.js

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

};

/**
 * Preapares all needed HTML elements for the PaneSet
 * and its children Panes/PaneSets.
 */
Zapatec.PaneSet.prototype.prepareHtml = function() {
	if (!this.fireOnState("inited", function() {this.prepareHtml();})) {
		return;
	}
	//creating container if we are not reusing old one
	if (!this.config.reuseContainer) {
		this.container = document.createElement("div");
	} else if (this.config.reuseContainer = Zapatec.Widget.getElementById(this.config.reuseContainer)) {
		this.container = this.config.reuseContainer;
	}
	//preparing all the child Panes/PaneSets
	for(var i = 0; i < this.panes.length; ++i) {
		if (this.panes[i].prepareHtml) {
			this.panes[i].prepareHtml();
		}
	}
	//state became "prepared"
	this.changeState("prepared");
};

/**
 * We overwrite the zpwidgets loadDataHtml method to parse 
 * needed values from given HTML source.
 * @param el [HTML element] - DOM representation of or HTML part.
 */
Zapatec.PaneSet.prototype.loadDataHtml = function(el) {
	if (!this.fireOnState("prepared", function() {this.loadDataHtml(el);})) {
		return;
	}
	//el is an DOM element created from the struct.html file, which contains HTML part of this widget.
	if (this.parseDom(el)) {
		this.changeState("loaded");
	}
};

/**
 * This function should create and configure all the Panes
 * and PaneSets.
 * @param breadth [number] - breadth of the PaneSet, default is config.breadth
 * @param length [number] - length of the PaneSet, default is config.length
 */
Zapatec.PaneSet.prototype.create = function(breadth, length) {
	if (!this.fireOnState("loaded", function() {this.create(breadth, length);}) || !this.fireOnState("body_loaded", function() {this.create(breadth, length);})) {
		return;
	}
	//searching Pane's parent
	var parent = Zapatec.Widget.getElementById(this.config.parent);
	if (!parent) {
		Zapatec.Log({description: "No reference to parent element."});
		return null;
	}
	this.config.parent = parent;
	//I need this kind of interface to be able to pass widget objects as
	//parent property of config.
	if (parent.requestParentFor && !(parent = parent.requestParentFor(this))) {
		Zapatec.Log({description: "No reference to parent element after request to the Parent Widget!"});
		return null;
	}
	//if we need to reuse container let's try to do that
	if (this.config.reuseContainer && (!this.container || !(this.contianer = Zapatec.Widget.getElementById(this.config.reuseContainer)))) {
		Zapatec.Log({description: "No container element found!" + this.config.reuseContainer});
		return null;
	}
	
	//checking if this.config.parent is direct parent of container
	//if not we make it so :)
	if (!this.container.parentNode || this.container.parentNode != parent) {
		parent.appendChild(this.container);
	}
	//let's make container relatively positioned, if it is not
	//absolute.
	if (this.container.style.position == "" || this.container.style.position == "static") {
		this.container.style.position == "relative";
	}
	Zapatec.Utils.addClass(this.container, this.getClassName({prefix : this.config.prefix, suffix : "Container"}));
	Zapatec.Utils.addClass(this.container, "zpPaneSetMarker");
	this.container.style.display = "block";
	this.container.style.overflow = "hidden";
	this.systemEventsOn = true;
	//creating all child Panes/PaneSets
	this.createPanes(breadth, length);
	//setting the sizes
	this.setContainerSizes();
	this.systemEventsOn = false;
	this.changeState("ready");
	this.container.style.overflow = "visible";
};

/**
 * Creates all child Panes.
 * @param breadth [number] - breadth of our PaneSet.
 * @param length [number] - length of our PaneSet.
 */
Zapatec.PaneSet.prototype.createPanes = function(breadth, length) {
	if (!this.fireOnState("inited", function() {this.createPanes(breadth, length);})) {
		return;
	}
	var pos = {x : 0, y : 0}, i, maxLength, compLength, maxBreadth, compBreadth, pBreadth, pLength;
	//maximum length of PaneSet if set
	maxLength = length || this.config.length || null;
	//if no maximum length set than lets retreive
	//compound length of all child Panes/PaneSets
	if (!maxLength) {
		compLength = this.getCompoundLength();
	}
	//maximum breadth of PaneSet if set
	maxBreadth = breadth || this.config.breadth || null
	//if no maximum breadth set than lets retreive
	//compound breadth of all child Panes/PaneSets
	if (!maxBreadth) {
		compBreadth = this.getCompoundBreadth();
	}
	//positioning and sizing accordingly all the child Panes/PaneSets
	for(i = 0; i < this.panes.length; ++i) {
		//if there is still avaliable area for creating pane
		//lets create it, otherwise, lets hide Pane/PaneSet
		if (maxLength !== 0) {
			//this is actually part of PaneSet length property
			//that will be used for sizing child Pane/PaneSet, 
			//but for the child Pane it is breadth as we always think
			//it has opposite orientation, messy isn't it :)
			pBreadth = null;
			//this is opposite to the previous.
			pLength = maxBreadth || compBreadth;
			//if there is maxLength set we need to check if the Pane/PaneSet
			//plus devider are not taking too much space, so they can fit 
			//available space.
			if (maxLength && maxLength - (this.panes[i].config.breadth + this.getDividerLength()) <= 0) {
				//if Pane/PaneSet is bigger then we cut it!
				pBreadth = maxLength;
				//and stop creating new Panes/PaneSets
				maxLength = 0;
			} else if (maxLength) {
				//if it fits the area, let's exclude its
				//breadth from maxLength.
				maxLength -= this.panes[i].config.breadth;
				//and set its breadth
				pBreadth = this.panes[i].config.breadth;
				//if this is last Pane/PaneSet and it doesn't takes
				//all the area left, let's force it to take all available
				//space.
				if (i === this.panes.length - 1 && maxLength !== 0) {
					pBreadth += maxLength;
					maxLength = 0;
				}
			}
			//creating the Pane/PaneSet
			this.createPane(this.panes[i], pos.x, pos.y, pBreadth, pLength);
			//increasing coordinates
			this.incCoords(pos, pBreadth || this.panes[i].config.breadth);
			//if it is not last Pane/PaneSet and there is avaliable area
			//we add divider
			if (i !== this.panes.length - 1 && maxLength !== 0) {
				//creating divider
				this.createDivider(this.panes[i], pos.x, pos.y, pLength);
				//increasing coordinates
				this.incCoords(pos, this.getDividerLength());
				//excluding its length from maxLength
				if (maxLength) {
					maxLength -= this.getDividerLength();
				}
			}
		} else {
			//hiding and disabling the Pane/PaneSet to 
			//disable work with later.
			this.panes[i].getContainer().style.display = "none";
			this.panes[i].disabled = true;
		}
	}
	//saving dimensions of this PaneSet
	this.config.length = length || this.config.length || compLength + (this.getDividerLength() * this.dividers.length);
	this.config.breadth = breadth || this.config.breadth || compBreadth;
};

/**
 * Creates a child Pane/PaneSet with given position and sizes.
 * @param pane [object] - Pane/PaneSet object.
 * @param x [number] - X coordinate.
 * @param y [number] - Y coordinate.
 * @param breadth [number] - breadth of the Pane, optional.
 * @param length [number] - length of the Pane, optional.
 */
Zapatec.PaneSet.prototype.createPane = function(pane, x, y, breadth, length) {
	if (!this.fireOnState("prepared", function() {this.createPane(pane, x, y, breadth, length);})) {
		return;
	}
	//if no Pane/PaneSet passed then what to create! :)
	if (!pane) {
		return false;
	}
	//if this is Pane, create it depending on our orientation :)
	//otherwise just create PaneSet
	if (pane.widgetType == "pane") {
		if (pane.config.containerType != "iframe") {
			Zapatec.Utils.addClass(pane.getContainer(), "zpPaneMarker");
		}
		if (this.config.orientation == "vertical") {
			pane.create(length, breadth);
			pane.config.breadth = breadth || pane.config.height;
			pane.config.length = length || pane.config.width;
		} else {
			pane.create(breadth, length);
			pane.config.breadth = breadth || pane.config.width;
			pane.config.length = length || pane.config.height;
		}
	} else if (pane.widgetType == "paneset") {
		pane.create(breadth, length);
	}
	//move Pane/PaneSet to specified position
	this.movePane(pane, x, y);
	//enabling the Pane/PaneSet to work with later
	pane.disabled = false;
};

/**
 * Creates a divider in the specified position.
 * @param after [object] - Pane/PaneSet object after 
 * which we want to create a divider.
 * @param x [number] - X coordinate.
 * @param y [number] - Y coordinate.
 * @param length [number] - length of the divider, optional.
 */
Zapatec.PaneSet.prototype.createDivider = function(after, x, y, length) {
	var self = this;
	if (!this.fireOnState("loaded", function() {this.createDivider(after, x, y, length);}) ||
	    (after.widgetType == "paneset" && 
	    !after.fireOnState("ready", function() {self.createDivider(after, x, y, length);}))
	   ) {
			return;
	}
	//cloning divider template
	var divider = this.config.orientation == "vertical" ? 
	          Zapatec.PaneSet.vDivider.cloneNode(true) : 
			  Zapatec.PaneSet.hDivider.cloneNode(true);
	//adding it to array
	this.dividers.push(divider);
	//insert it
	this.requestParentFor(divider).insertBefore(divider, after.getContainer().nextSibling);
	//set its breadth
	this.setDividerBreadth(divider, length || this.config.breadth);
	//move it
	this.moveDivider(divider, x, y);
	//firing the event of divider creation
	if (this.config.resizable) {
		this.makeDragable(divider);
		if (this.config.orientation == "vertical") {
			Zapatec.Utils.addClass(divider, "zpPaneSetVResizable");
		} else {
			Zapatec.Utils.addClass(divider, "zpPaneSetHResizable");
		}
	}
};