paneset-utils.js

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

//$Id: paneset-utils.js 6679 2007-03-20 16:39:44Z slip $
/**
 * Just saves the refference to the element in global
 * variables not to load template multiple times.
 * @param el [HTML element] - element to parse.
 */
Zapatec.PaneSet.prototype.parseDom = function(el) {
	if (this.config.orientation == "vertical") {
		if (!Zapatec.PaneSet.vDivider) {
			Zapatec.PaneSet.vDivider = el;
		}
	} else {
		if (!Zapatec.PaneSet.hDivider) {
			Zapatec.PaneSet.hDivider = el;
		}
	}
	return true;
};

/**
 * Gets the container of PaneSet.
 */
Zapatec.PaneSet.prototype.getContainer = function() {
	return this.container;
}; 

/**
 * This method should return the parent element for
 * the Pane that is requesting it.
 * @param pane [object] - Pane that requests for parent.
 * @return [HTML element] the element to be a parent for Pane that requests.
 */
Zapatec.PaneSet.prototype.requestParentFor = function(pane) {
	return this.getContainer();
};

/**
 * Returns the length of the divider, this depends on theme
 * and orientation. It's opposite to the breadth :)
 * @return [number] the length of divider.
 */
Zapatec.PaneSet.prototype.getDividerLength = function() {
	var divider = null;
	if (!this.state.dividerLength) {
		divider = (this.config.orientation == "vertical") ? 
		               Zapatec.PaneSet.vDivider :
		               Zapatec.PaneSet.hDivider;
		divider = divider.cloneNode(true);
		this.getContainer().appendChild(divider);
		divider.style.position = "absolute";
		this.state.dividerLength = (this.config.orientation == "vertical") ? 
		                            divider.offsetHeight : 
		                            divider.offsetWidth;
		this.getContainer().removeChild(divider);
		divider = null;
	}
	return this.state.dividerLength;
};

/**
 * Gets the computed length of the PaneSet, based on the sizes
 * of child Panes/PaneSets.
 * @return [number] the computed length.
 */
Zapatec.PaneSet.prototype.getCompoundLength = function() {
	if (this.config.length) {
		return this.config.length;
	}
	var i, length = 0;
	
	for(i = 0; i < this.panes.length; ++i) {
		if (this.panes[i].widgetType == "pane") {
			length += (this.config.orientation == "vertical") ? this.panes[i].getHeight() : this.panes[i].getWidth();
		} else if (this.panes[i].widgetType == "paneset") {
			length += this.panes[i].getCompoundBreadth();
		}
	}
	
	return length;
};

/**
 * Gets the computed breadth of the PaneSet, based on the biggest
 * Pane/PaneSet length.
 * @return [number] the computed breadth.
 */
Zapatec.PaneSet.prototype.getCompoundBreadth = function() {
	if (this.config.breadth) {
		return this.config.breadth;
	}
	var i, breadth = 0, pLength;
	
	for(i = 0; i < this.panes.length; ++i) {
		if (this.panes[i].widgetType == "pane") {
			pLength = (this.config.orientation == "horizontal") ? this.panes[i].getHeight() : this.panes[i].getWidth();
		} else if (this.panes[i].widgetType == "paneset") {
			pLength = this.panes[i].getCompoundLength();
		}
		if (breadth < pLength) {
			breadth = pLength;
		}
	}
	
	return breadth || 100;
};

/**
 * Checks if "pane" is child Pane/PaneSet and returns its
 * position in array, or if it's not a direct child - 
 * refference to its parent PaneSet.
 * @param pane [object] - Pane or PaneSet object.
 * @return [number or object] - position of Pane/PaneSet or 
 * its parent PaneSet.
 */
Zapatec.PaneSet.prototype.isChildPane = function(pane) {
	var i, position = null;
	//checking if it is present in our panes array
	for(i = 0; i < this.panes.length; ++i) {
		if (this.panes[i] == pane) {
			return i;
		}
	}
	//checking if our child PaneSets have it
	for(i = 0; i < this.panes.length; ++i) {
		if (this.panes[i].widgetType == "paneset") {
			position = this.panes[i].isChildPane(pane);
			if (typeof position == "number") {
				return this.panes[i];
			} else if (position && position.widgetType == "paneset") {
				return position;
			}
		}
	}
	return null;
};


/**
 * Checks if divider is present in this.dividers array.
 * @param divider [HTMl element] - HTML element representing divider.
 * @return true if it is child otherwise false.
 */
Zapatec.PaneSet.prototype.isChildDivider = function(divider) {
	var i;
	//checking if it is present in our dividers array.
	for(i = 0; i < this.dividers.length; ++i) {
		if (this.dividers[i] == divider) {
			return true;
		}
	}
	return false;
};

/**
 * Seeks the pane by ID.
 * @param id [string] - Pane/PaneSet ID.
 */
Zapatec.PaneSet.prototype.getPaneById = function(id) {
	var i, pane;
	//checking if it is present in our panes array.
	for(i = 0; i < this.panes.length; ++i) {
		if (this.panes[i].config.id == id) {
			return this.panes[i];
		}
	}
	//checking if our child PaneSets have it
	for(i = 0; i < this.panes.length; ++i) {
		if (this.panes[i].widgetType == "paneset") {
			pane = this.panes[i].getPaneById(id);
			if (pane) {
				return pane;
			}
		}
	}
	return null;
};

/**
 * Gets the breadth of the PaneSet available for cutting,
 * without harm to the PaneSet structure.
 * @param end [boolean] - determines if we ask for space from
 * the pane end or beginning.
 */
Zapatec.PaneSet.prototype.getAvailableBreadth = function(end) {
	var pos = this.getFirstOrLastIndex(), breadth = this.config.breadth;
	while (this.panes[pos] && this.panes[pos] != this.panes[this.getFirstOrLastIndex(true) + 1]) {
		if (this.panes[pos].widgetType == "paneset") {
			if (this.panes[pos].getAvailableLength(end) < breadth) {
				breadth = this.panes[pos].getAvailableLength(end);
			}
		} else {
			if (this.panes[pos].config.length - 1 < breadth) {
				breadth = this.panes[pos].config.length - 1;
			}
		}
		++pos;
	}
	return breadth;
};

/**
 * Gets the length of the PaneSet available for cutting,
 * without harm to the PaneSet structure.
 * @param end [boolean] - determines if we ask for space from
 * the pane end or beginning.
 */
Zapatec.PaneSet.prototype.getAvailableLength = function(end) {
	var pos = this.getFirstOrLastIndex(end);
	if (this.panes[pos].widgetType == "paneset") {
		return this.panes[pos].getAvailableBreadth(end);
	} else {
		return this.panes[pos].config.breadth - 1;
	}
};

/**
 * Gets first or last enabled Pane/PaneSet.
 * @param last [boolean] - if true than returns last one,
 * otherwise first one.
 * @return [number] - number of last or first Pane/PaneSet object.
 */
Zapatec.PaneSet.prototype.getFirstOrLastIndex = function(last) {
	if (last) {
		return this.getLastEnabledIndex();
	} else {
		return this.getFirstEnabledIndex();
	}
};

/**
 * Gets last enbaled Pane/PaneSet index
 */
Zapatec.PaneSet.prototype.getLastEnabledIndex = function() {
	var pos = this.panes.length - 1;
	while(this.panes[pos] && this.panes[pos].disabled) {
		--pos;
	}
	return pos;
};

/**
 * Gets first enbaled Pane/PaneSet index
 */
Zapatec.PaneSet.prototype.getFirstEnabledIndex = function() {
	var pos = 0;
	while(this.panes[pos] && this.panes[pos].disabled) {
		++pos;
	}
	return pos;
};

/**
 * Returns the first enabled Pane.
 * @return [object] - first pane object
 */
Zapatec.PaneSet.prototype.getFirstPane = function() {
	return this.panes[this.getFirstEnabledIndex()];
};

/**
 * Returns the last enabled Pane.
 * @return [object] - last pane object
 */
Zapatec.PaneSet.prototype.getLastPane = function() {
	return this.panes[this.getLastEnabledIndex()];
};

/**
 * Returns the next Pane position.
 * @param pos [number] - curent position of the Pane in array.
 * @param end [boolean] - are we going from the end(true) or to the end(false)
 * @return [number] - next pane number depending on "end" option
 */
Zapatec.PaneSet.prototype.getNextIndex = function(pos, end) {
	if (end) {
		--pos;
	} else {
		++pos;
	}
	return pos;
};

/**
 * Returns the previous Pane position.
 * @param pos [number] - curent position of the Pane in array.
 * @param end [boolean] - are we going from the end(true) or to the end(false)
 * @return [number] - previous pane number depending on "end" option
 */
Zapatec.PaneSet.prototype.getPrevIndex = function(pos, end) {
	if (end) {
		++pos;
	} else {
		--pos;
	}
	return pos;
};

/**
 * Returns the position of Pane.
 * @param pane [object] - Pane object.
 * @return [number] - pane index
 */
Zapatec.PaneSet.prototype.getPaneIndex = function(pane) {
	var i;
	if (!pane || !pane.widgetType) {
		return null;
	}
	for(i = 0; i < this.panes.length; ++i) {
		if (this.panes[i] == pane) {
			return i;
		}
	}
	return null;
};

/**
 * Returns the next Pane object
 * @param pane [object] - Pane object.
 * @param end [boolean] - are we going from the end(true) or to the end(false).
 * @return [object] - next pane object
 */
Zapatec.PaneSet.prototype.getNextPane = function(pane, end) {
	var pos;
	pos = this.getPaneIndex(pane);
	return this.panes[this.getNextIndex(pos, end)];
};

/**
 * Returns the previous Pane object
 * @param pane [object] - Pane object.
 * @param end [boolean] - are we going from the end(true) or to the end(false).
 * @return [object] - previous pane object
 */
Zapatec.PaneSet.prototype.getPrevPane = function(pane, end) {
	var pos;
	pos = this.getPaneIndex(pane);
	return this.panes[this.getPrevIndex(pos, end)];
};

/**
 * Returns the next enabled Pane object
 * @param pane [object] - Pane object.
 * @param end [boolean] - are we going from the end(true) or to the end(false).
 * @return [object] - next pane object
 */
Zapatec.PaneSet.prototype.getNextEnabledPane = function(pane, end) {
	var pos;
	pos = this.getPaneIndex(pane);
	pos = this.getNextIndex(pos);
	if (this.panes[pos].disabled) {
		return this.panes[pos];
	} else {
		return null;
	}
};

/**
 * Returns the previous enabled Pane object
 * @param pane [object] - Pane object.
 * @param end [boolean] - are we going from the end(true) or to the end(false).
 * @return [object] - previous pane object
 */
Zapatec.PaneSet.prototype.getPrevEnabledPane = function(pane, end) {
	var pos;
	pos = this.getPaneIndex(pane);
	pos = this.getNextIndex(pos);
	if (this.panes[pos].disabled) {
		return this.panes[pos];
	} else {
		return null;
	}
};

/**
 * Increases the coordinates in the pos object depending
 * on the orientation.
 * @param pos [object] - object with x and y properties.
 * @param breadth [number] - breadth to increase.
 */
Zapatec.PaneSet.prototype.incCoords = function(pos, breadth) {
	if (this.config.orientation == "vertical") {
		pos.y += breadth;
	} else {
		pos.x += breadth;
	}
};

/**
 * Decreases the coordinates in the pos object depending
 * on the orientation.
 * @param pos [object] - object with x and y properties.
 * @param breadth [number] - breadth to decrease.
 */
Zapatec.PaneSet.prototype.decCoords = function(pos, breadth) {
	if (this.config.orientation == "vertical") {
		pos.y -= breadth;
	} else {
		pos.x -= breadth;
	}
};

/**
 * Makes the divider draggable.
 * @param divider [HTML element] - HTML element representing divider.
 */
Zapatec.PaneSet.prototype.makeDragable = function(divider) {
	var self = this, start,
	draggable = new Zapatec.Utils.Draggable({
		container : divider,
		direction : this.config.orientation,
		followShape : false,
		moveLayer : this.getContainer(),
		method : "dummy",
		dragCSS : "zpDummyDivider",
		eventListeners : {
			onDragInit : function() {
				self.restrictDivider(divider);
				var pos = Zapatec.Utils.getPos(this.getMovableElements()[0]);
				if (self.config.orientation == "vertical") {
					start = pos.y;
				} else {
					start = pos.x;
				}
			},
			beforeDragEnd : function() {
				var index = self.getDividerIndex(divider),
				pos = Zapatec.Utils.getPos(this.getMovableElements()[0]),
				diff = 0;
				if (self.config.orientation == "vertical") {
					diff = pos.y - start;
				} else {
					diff = pos.x - start;
				}
				self.setPaneLength(self.panes[index], self.panes[index].config.breadth + diff);
			}
		}
	});
};

/**
 * Restrict the movement of divider.
 * @param divider [HTML element] - HTML element representing divider.
 */
Zapatec.PaneSet.prototype.restrictDivider = function(divider) {
	var index = this.getDividerIndex(divider),
	availLeft = this.panes[index].getAvailableBreadth ? this.panes[index].getAvailableBreadth(true) : this.panes[index].config.breadth - 1,
	availRight = this.panes[index + 1].getAvailableBreadth ? this.panes[index + 1].getAvailableBreadth() : this.panes[index + 1].config.breadth - 1,
	pos = Zapatec.Utils.getPos(divider);
	if (this.config.orientation == "vertical") {
		divider.dragObj.reconfigure({limit : {
			minY : pos.y - availLeft,
			maxY : pos.y + availRight
		}});
	} else {
		divider.dragObj.reconfigure({limit : {
			minX : pos.x - availLeft,
			maxX : pos.x + availRight
		}});
	}
};

/**
 * Gets the index of the passed divider.
 * @param divider [HTML element] - HTML element representing divider.
 * @return [number] - index of divider.
 */
Zapatec.PaneSet.prototype.getDividerIndex = function(divider) {
	for(var i = 0; i < this.dividers.length; ++i) {
		if (this.dividers[i] == divider) {
			return i;
		}
	}
};

/**
 * Imitates event bubling from child PaneSet to root one.
 * All parameters passed after eventName are passed 
 * to fireEvent method;
 * @param eventName {string} event to "buble up".
 */
Zapatec.PaneSet.prototype.bubleEvent = function(eventName) {
	//firing event 
	this.fireEvent.apply(this, arguments);
	if (!Zapatec.isHtmlElement(this.config.parent)) {
		this.config.parent.bubleEvent.apply(this.config.parent, arguments);
	}
};