paneset-controlling.js

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

Zapatec.PaneSet.prototype.setWidth = function(width, end) {
	if (this.config.orientation == "vertical") {
		this.setBreadth(width, end);
	} else {
		this.setLength(width, end);
	}
};

/**
 * Sets the height of the whole PaneSet.
 * @param height [number] - height of the PaneSet
 * @param end [boolean] - determines if we change space from
 * the pane end or beginning.
 */
Zapatec.PaneSet.prototype.setHeight = function(height, end) {
	if (this.config.orientation == "horizontal") {
		this.setBreadth(height, end);
	} else {
		this.setLength(height, end);
	}
};

/**
 * Sets the breadth of PaneSet.
 * @param breadth [number] - breadth of the PaneSet
 * @param end [boolean] - determines if we change space from
 * the pane end or beginning.
 */
Zapatec.PaneSet.prototype.setBreadth = function(breadth, end) {
	var i;
	breadth = parseInt(breadth, 10);
	if (!this.fireOnState("ready", function() {this.setBreadth(breadth, end);})) {
		return;
	}
	//setting all Panes/PaneSet breadth
	for(i = 0; i < this.panes.length; ++i) {
		this.sizePane(this.panes[i], breadth, null, end);
	}
	//setting all dividers breadth
	for(i = 0; i < this.dividers.length; ++i) {
		this.setDividerBreadth(this.dividers[i], breadth);
	}
	//changing container breadth.
	if (this.config.orientation == "vertical") {
		this.setContainerWidth(breadth);
	} else {
		this.setContainerHeight(breadth);
	}
};

/**
 * Sets the length of PaneSet.
 * @param length [number] - length of the PaneSet
 * @param end [boolean] - determines if we change space from
 * the pane end or beginning.
 */
Zapatec.PaneSet.prototype.setLength = function(length, end) {
	var i, diff, pos = 0, panePos, nextPane, breadth, res;
	length = parseInt(length, 10);
	if (!this.fireOnState("ready", function() {this.setLength(length, end);})) {
		return;
	}
	//difference between new length and current one
	diff = length - this.config.length;
	//if there is no difference stop execution
	if (diff === 0) {
		return;
	}
	//getting number of needed Pane/PaneSet
	pos = this.getFirstOrLastIndex(end);
	//if difference is bigger than 0 we need to try to show disabled
	if (diff > 0) {
		//if we breadth from the beginning we need to move 
		//all the next Panes/PaneSts and dividers
		if (!end) {
			//moving all next childs
			this.moveAllAfter(pos, diff);
		}
		//this represents the available space including the
		//first/last Pane/PaneSet breadth
		breadth = this.panes[pos].config.breadth + diff;
		//if there is available space for showing disabled Panes/PaneSets
		//we try to show them
		diff = breadth - this.config.panes[pos].breadth;
		if (this.getPrevPane(this.panes[pos], end) && diff > 0) {
			//if this is first enabled Pane/PaneSet we need to 
			//position it correctly
			if (!end) {
				//creating new position object
				panePos = {
					x : 0,
					y : 0
				};
				//increasing its coordinates
				this.incCoords(panePos, diff);
				//moving it to specified place
				this.movePane(this.panes[pos], panePos.x, panePos.y);
				//decreasing coordinates to position next pane correctly
				this.decCoords(panePos, this.config.panes[pos].breadth);
			} else {
				//getting the position of this pane
				panePos = Zapatec.Utils.getElementPos(this.panes[pos].getContainer());
				//increasing coordinates to position next pane correctly
				this.incCoords(panePos, this.config.panes[pos].breadth);
			}
			//sizing pane
			this.sizePane(this.panes[pos], null, this.config.panes[pos].breadth, end);
			//trying to show disabled Panes/PaneSets
			this.showDisabled(pos, panePos, diff, end);
		} else {
			//if this is the first/last Pane/PaneSet lets just breadth it
			this.sizePane(this.panes[pos], null, breadth, end);
		}
	} else {
		//if difference is < 0 we need to disable Panes/PaneSets
		//if needed
		res = this.disablePanes(pos, diff, end);
		//correcting the values after we disabled Panes/PaneSets
		diff += res.diff;
		pos = res.position;
		//sizing Pane/PaneSet
		this.sizePane(this.panes[pos], null, this.panes[pos].config.breadth + diff, end);
		if (!end) {
			//if we start from the beginning lets move Pane/PaneSet to (0,0)
			this.movePane(this.panes[pos], 0, 0);
			//and all after it.
			this.moveAllAfter(pos, diff);
		}
	}
	//sizing the whole container.
	if (this.config.orientation == "vertical") {
		this.setContainerHeight(length);
	} else {
		this.setContainerWidth(length);
	}
};

/**
 * Moves all dividers and Panes/PaneSets after given.
 * @param position [number] - number of the Pane/PaneSet in array.
 * @param diff [number] - difference to move for.
 */
Zapatec.PaneSet.prototype.moveAllAfter = function(position, diff) {
	var i, divPos, panePos;
	if (!this.fireOnState("ready", function() {this.moveAllAfter(position, diff);})) {
		return;
	}
	//looping through all the dividers and Panes/PaneSets
	//after given Pane/PaneSet
	for(i = position; this.panes[i + 1] && !this.panes[i + 1].disabled; ++i) {
		//retreiving the position of the divider
		divPos = Zapatec.Utils.getPos(this.dividers[i]);
		//retreiving the position of the Pane
		panePos = Zapatec.Utils.getPos(this.panes[i + 1].getContainer());
		//calculating new position
		this.incCoords(divPos, diff);
		this.incCoords(panePos, diff);
		//moving divider
		this.moveDivider(this.dividers[i], divPos.x, divPos.y);
		//moving Pane/PaneSet
		this.movePane(this.panes[i + 1], panePos.x, panePos.y);
	}
};

/**
 * Shows all disabled Panes/PaneSets that can be
 * showned for given diff.
 * @param pane [number] - position of the Pane/PaneSet in array, 
 * we start from the one right after it.
 * @param position [object] - object with x and y coords
 * @param diff [number] - difference available.
 * @param end [boolean] - determines if we take space from the end
 */
Zapatec.PaneSet.prototype.showDisabled = function(pane, position, diff, end) {
	var nextPane, breadth;
	//getting next Pane/PaneSet, and taking the next one to it
	position = this.getNextIndex(position, end);
	nextPane = this.getNextIndex(position, end);
	//if there is no such Pane/PaneSet we should stop execution.
	if (!this.panes[position]) {
		return;
	}
	//checking if we can enable the next Pane/PaneSet
	if (this.panes[nextPane] && diff > this.config.panes[position].breadth) {
		//creating Pane/PaneSet
		this.createPane(this.panes[position], panePos.x, panePos.y, this.config.panes[position].breadth, this.config.length);
		//changing coordinates
		if (!end) {
			this.decCoords(panePos, this.config.panes[position].breadth);
		} else {
			this.incCoords(panePos, this.config.panes[position].breadth);
		}
		//showing/creating divider
		if (this.dividers[position]) {
			//showing hidden divider
			this.dividers[position].style.display = "block";
			//changing coordinates
			if (!end) {
				this.decCoords(panePos, this.getDividerlength());
			} else {
				this.incCoords(panePos, this.getDividerlength());
			}
		} else {
			//creating divider
			this.createDivider(this.panes[position], panePos.x, panePos.y, this.config.breadth);
			//changing coordinates
			if (!end) {
				this.decCoords(panePos, this.getDividerlength());
			} else {
				this.incCoords(panePos, this.getDividerlength());
			}
		}
		//trying to show next one
		this.showDisabled(position, panePos, diff, end);
	} else {
		//just creating this one and giving it the breadth to take all the space.
		this.createPane(this.panes[position], panePos.x, panePos.y, diff, this.config.length);
	}
};

/**
 * Disables all panes starting from pointed in position.
 * @param position [number] - the number of Pane/PaneSet in the array.
 * @param diff [number] - difference available.
 * @param end [boolean] - determines if we take space from the end
 */
Zapatec.PaneSet.prototype.disablePanes = function(position, diff, end) {
	//we need to take absolute value
	var oldDiff = Math.abs(diff);
	//if Pane/PaneSet should be disabled lets do it.
	while(oldDiff > this.panes[position].config.breadth) {
		//setting display none
		this.panes[position].getContainer().style.display = "none";
		//pointing it as disabled
		this.panes[position].disabled = true;
		//decreasing cutting space
		oldDiff -= this.panes[position].config.breadth;
		//disabling divider if needed
		if (this.dividers[position]) {
			//setting display to none
			this.dividers[position].style.display = "none";
			//decreasing cutting space
			oldDiff -= this.getDividerLength();
		}
		//taking the next one
		position = this.getNextIndex(position, end);
	}
	//result is an object
	return {
		"diff" : Math.abs(diff) - oldDiff,
		"position" : position
	};
};