Subversion Repositories Applications.papyrus

if(!dojo._hasResource["dojox.layout.ResizeHandle"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.

dojo._hasResource["dojox.layout.ResizeHandle"] = true;

dojo.provide("dojox.layout.ResizeHandle");

dojo.experimental("dojox.layout.ResizeHandle");

dojo.require("dijit._Widget");

dojo.require("dijit._Templated");

dojo.require("dojo.fx");

dojo.declare("dojox.layout.ResizeHandle", [dijit._Widget, dijit._Templated], {

	// summary

	//	The handle on the bottom-right corner of FloatingPane or other widgets that allows

	//	the widget to be resized.

	//	Typically not used directly.

	// targetId: String

	//	id of the Widget OR DomNode that I will size

	targetId: '',

	// targetContainer: DomNode

	//	over-ride targetId and attch this handle directly to a reference of a DomNode

	targetContainer: null,

	// resizeAxis: String

	//	one of: x|y|xy limit resizing to a single axis, default to xy ...

	resizeAxis: "xy",

	// activeResize: Boolean

	// 	if true, node will size realtime with mouse movement,

	//	if false, node will create virtual node, and only resize target on mouseUp

	activeResize: false,

	// activeResizeClass: String

	//	css class applied to virtual resize node.

	activeResizeClass: 'dojoxResizeHandleClone',

	// animateSizing: Boolean

	//	only applicable if activeResize = false. onMouseup, animate the node to the

	//	new size

	animateSizing: true,

	// animateMethod: String

	// 	one of "chain" or "combine" ... visual effect only. combine will "scale"

	// 	node to size, "chain" will alter width, then height

	animateMethod: 'chain',

	// animateDuration: Integer

	//	time in MS to run sizing animation. if animateMethod="chain", total animation

	//	playtime is 2*animateDuration

	animateDuration: 225,

	// minHeight: Integer

	//	smallest height in px resized node can be

	minHeight: 100,

	// minWidth: Integer

	//	smallest width in px resize node can be

	minWidth: 100,

	// resize handle template, fairly easy to override:

	templateString: '<div dojoAttachPoint="resizeHandle" class="dojoxResizeHandle"><div></div></div>',

	// private propteries and holders

	_isSizing: false,

	_connects: [],

	_activeResizeNode: null,

	_activeResizeLastEvent: null,

	// defaults to match default resizeAxis. set resizeAxis variable to modify.

	_resizeX: true,

	_resizeY: true,

	postCreate: function(){

		// summary: setup our one major listener upon creation

		dojo.connect(this.resizeHandle, "onmousedown", this, "_beginSizing");

		if(!this.activeResize){

			this._activeResizeNode = document.createElement('div');

			dojo.addClass(this._activeResizeNode,this.activeResizeClass);

		}else{ this.animateSizing = false; }

		if (!this.minSize) {

			this.minSize = { w: this.minWidth, h: this.minHeight };

		}

		// should we modify the css for the cursor hover to n-resize nw-resize and w-resize?

		this._resizeX = this._resizeY = false;

		switch (this.resizeAxis.toLowerCase()) {

		case "xy" :

			this._resizeX = this._resizeY = true;

			// FIXME: need logic to determine NW or NE class to see

			// based on which [todo] corner is clicked

			dojo.addClass(this.resizeHandle,"dojoxResizeNW");

			break;

		case "x" :

			this._resizeX = true;

			dojo.addClass(this.resizeHandle,"dojoxResizeW");

			break;

		case "y" :

			this._resizeY = true;

			dojo.addClass(this.resizeHandle,"dojoxResizeN");

			break;

		}

	},

	_beginSizing: function(/*Event*/ e){

		// summary: setup movement listeners and calculate initial size

		if (this._isSizing){ return false; }

		this.targetWidget = dijit.byId(this.targetId);

		// FIXME: resizing widgets does weird things, disable virtual resizing for now:

		if (this.targetWidget) { this.activeResize = true; }

		this.targetDomNode = this.targetWidget ? this.targetWidget.domNode : dojo.byId(this.targetId);

		if (this.targetContainer) { this.targetDomNode = this.targetContainer; }

		if (!this.targetDomNode){ return; }

		if (!this.activeResize) {

			this.targetDomNode.appendChild(this._activeResizeNode);

			dojo.fadeIn({ node: this._activeResizeNode, duration:120,

				beforeBegin: dojo.hitch(this,function(){

					this._activeResizeNode.style.display='';

				})

			}).play();

		}

		this._isSizing = true;

		this.startPoint  = {'x':e.clientX, 'y':e.clientY};

		// FIXME: this is funky: marginBox adds height, contentBox ignores padding (expected, but foo!)

		var mb = (this.targetWidget) ? dojo.marginBox(this.targetDomNode) : dojo.contentBox(this.targetDomNode);

		this.startSize  = { 'w':mb.w, 'h':mb.h };

		this._connects = [];

		this._connects.push(dojo.connect(document,"onmousemove",this,"_updateSizing"));

		this._connects.push(dojo.connect(document,"onmouseup", this, "_endSizing"));

		e.preventDefault();

	},

	_updateSizing: function(/*Event*/ e){

		// summary: called when moving the ResizeHandle ... determines

		//	new size based on settings/position and sets styles.

		if(this.activeResize){

			this._changeSizing(e);

		}else{

			var tmp = this._getNewCoords(e);

			if(tmp === false){ return; }

			dojo.style(this._activeResizeNode,"width",tmp.width+"px");

			dojo.style(this._activeResizeNode,"height",tmp.height+"px");

			this._activeResizeNode.style.display='';

		}

	},

	_getNewCoords: function(/* Event */ e){

		// On IE, if you move the mouse above/to the left of the object being resized,

		// sometimes clientX/Y aren't set, apparently.  Just ignore the event.

		try{

			if(!e.clientX  || !e.clientY){ return false; }

		}catch(e){

			// sometimes you get an exception accessing above fields...

			return false;

		}

		this._activeResizeLastEvent = e;

		var dx = this.startPoint.x - e.clientX;

		var dy = this.startPoint.y - e.clientY;

		var newW = (this._resizeX) ? this.startSize.w - dx : this.startSize.w;

		var newH = (this._resizeY) ? this.startSize.h - dy : this.startSize.h;

		// minimum size check

		if(this.minSize){

			//var mb = dojo.marginBox(this.targetDomNode);

			if(newW < this.minSize.w){

				newW = this.minSize.w;

			}

			if(newH < this.minSize.h){

				newH = this.minSize.h;

			}

		}

		return {width:newW, height:newH};  // Object

	},

	_changeSizing: function(/*Event*/ e){

		// summary: apply sizing information based on information in (e) to attached node

		var tmp = this._getNewCoords(e);

		if(tmp===false){ return; }

		if(this.targetWidget && typeof this.targetWidget.resize == "function"){

			this.targetWidget.resize({ w: tmp.width, h: tmp.height });

		}else{

			if(this.animateSizing){

				var anim = dojo.fx[this.animateMethod]([

					dojo.animateProperty({

						node: this.targetDomNode,

						properties: {

							width: { start: this.startSize.w, end: tmp.width, unit:'px' }

						},

						duration: this.animateDuration

					}),

					dojo.animateProperty({

						node: this.targetDomNode,

						properties: {

							height: { start: this.startSize.h, end: tmp.height, unit:'px' }

						},

						duration: this.animateDuration

					})

				]);

				anim.play();

			}else{

				dojo.style(this.targetDomNode,"width",tmp.width+"px");

				dojo.style(this.targetDomNode,"height",tmp.height+"px");

			}

		}

		e.preventDefault();

	},

	_endSizing: function(/*Event*/ e){

		// summary: disconnect listenrs and cleanup sizing

		dojo.forEach(this._connects,function(c){

			dojo.disconnect(c);

		});

		if(!this.activeResize){

			dojo.fadeOut({ node:this._activeResizeNode, duration:250,

				onEnd: dojo.hitch(this,function(){

					this._activeResizeNode.style.display="none";

				})

			}).play();

			this._changeSizing(e);

		}

		this._isSizing = false;

	}

});

}