Subversion Repositories Applications.papyrus

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

dojo._hasResource["dojox.widget.FisheyeList"] = true;

dojo.provide("dojox.widget.FisheyeList");

dojo.require("dijit._Widget");

dojo.require("dijit._Templated");

dojo.require("dijit._Container");

dojo.declare("dojox.widget.FisheyeList", [dijit._Widget, dijit._Templated, dijit._Container], {

	// summary:

	//	Menu similar to the fish eye menu on the Mac OS

	// example:

	// |	<div dojoType="FisheyeList"

	// |		itemWidth="40" itemHeight="40"

	// |		itemMaxWidth="150" itemMaxHeight="150"

	// |		orientation="horizontal"

	// |		effectUnits="2"

	// |		itemPadding="10"

	// |		attachEdge="center"

	// |		labelEdge="bottom">

	// |

	// |		<div dojoType="FisheyeListItem"

	// |			id="item1"

	// |			onclick="alert('click on' + this.label + '(from widget id ' + this.widgetId + ')!');"

	// |			label="Item 1"

	// |			iconSrc="images/fisheye_1.png">

	// |		</div>

	// |		...

	// |	</div>

	//

	constructor: function(){

		//

		// TODO

		// fix really long labels in vertical mode

		//

		this.pos = {'x': -1, 'y': -1};	// current cursor position, relative to the grid

		// for conservative trigger mode, when triggered, timerScale is gradually increased from 0 to 1

		this.timerScale = 1.0;

	},

	EDGE: {

		CENTER: 0,

		LEFT: 1,

		RIGHT: 2,

		TOP: 3,

		BOTTOM: 4

	},

	templateString: '<div class="dojoxFisheyeListBar" dojoAttachPoint="containerNode"></div>',

	snarfChildDomOutput: true,

	// itemWidth: Integer

	//	width of menu item (in pixels) in it's dormant state (when the mouse is far away)

	itemWidth: 40,

	// itemHeight: Integer

	//	height of menu item (in pixels) in it's dormant state (when the mouse is far away)

	itemHeight: 40,

	// itemMaxWidth: Integer

	//	width of menu item (in pixels) in it's fully enlarged state (when the mouse is directly over it)

	itemMaxWidth: 150,

	// itemMaxHeight: Integer

	//	height of menu item (in pixels) in it's fully enlarged state (when the mouse is directly over it)

	itemMaxHeight: 150,

	imgNode: null,

	// orientation: String

	//	orientation of the menu, either "horizontal" or "vertical"

	orientation: 'horizontal',

	// isFixed: Boolean

	//	toggle to enable additional listener (window scroll) if FisheyeList is in a fixed postion

	isFixed: false,

	// conservativeTrigger: Boolean

	//	if true, don't start enlarging menu items until mouse is over an image;

	//	if false, start enlarging menu items as the mouse moves near them.

	conservativeTrigger: false,

	// effectUnits: Number

	//	controls how much reaction the menu makes, relative to the distance of the mouse from the menu

	effectUnits: 2,

	// itemPadding: Integer

	//	padding (in pixels) betweeen each menu item

	itemPadding: 10,

	// attachEdge: String

	//	controls the border that the menu items don't expand past;

	//	for example, if set to "top", then the menu items will drop downwards as they expand.

	// values

	//	"center", "left", "right", "top", "bottom".

	attachEdge: 'center',

	// labelEdge: String

	//	controls were the labels show up in relation to the menu item icons

	// values

	//	"center", "left", "right", "top", "bottom".

	labelEdge: 'bottom',

	postCreate: function(){

		var e = this.EDGE;

		dojo.setSelectable(this.domNode, false);

		var isHorizontal = this.isHorizontal = (this.orientation == 'horizontal');

		this.selectedNode = -1;

		this.isOver = false;

		this.hitX1 = -1;

		this.hitY1 = -1;

		this.hitX2 = -1;

		this.hitY2 = -1;

		//

		// only some edges make sense...

		//

		this.anchorEdge = this._toEdge(this.attachEdge, e.CENTER);

		this.labelEdge  = this._toEdge(this.labelEdge,  e.TOP);

		if(this.labelEdge == e.CENTER){ this.labelEdge = e.TOP; }

		if(isHorizontal){

			if(this.anchorEdge == e.LEFT){ this.anchorEdge = e.CENTER; }

			if(this.anchorEdge == e.RIGHT){ this.anchorEdge = e.CENTER; }

			if(this.labelEdge == e.LEFT){ this.labelEdge = e.TOP; }

			if(this.labelEdge == e.RIGHT){ this.labelEdge = e.TOP; }

		}else{

			if(this.anchorEdge == e.TOP){ this.anchorEdge = e.CENTER; }

			if(this.anchorEdge == e.BOTTOM){ this.anchorEdge = e.CENTER; }

			if(this.labelEdge == e.TOP){ this.labelEdge = e.LEFT; }

			if(this.labelEdge == e.BOTTOM){ this.labelEdge = e.LEFT; }

		}

		//

		// figure out the proximity size

		//

		var effectUnits = this.effectUnits;

		this.proximityLeft   = this.itemWidth  * (effectUnits - 0.5);

		this.proximityRight  = this.itemWidth  * (effectUnits - 0.5);

		this.proximityTop    = this.itemHeight * (effectUnits - 0.5);

		this.proximityBottom = this.itemHeight * (effectUnits - 0.5);

		if(this.anchorEdge == e.LEFT){

			this.proximityLeft = 0;

		}

		if(this.anchorEdge == e.RIGHT){

			this.proximityRight = 0;

		}

		if(this.anchorEdge == e.TOP){

			this.proximityTop = 0;

		}

		if(this.anchorEdge == e.BOTTOM){

			this.proximityBottom = 0;

		}

		if(this.anchorEdge == e.CENTER){

			this.proximityLeft   /= 2;

			this.proximityRight  /= 2;

			this.proximityTop    /= 2;

			this.proximityBottom /= 2;

		}

	},

	startup: function(){

		// summary: create our connections and setup our FisheyeList

		this.children = this.getChildren();

		//original postCreate() --tk

		this._initializePositioning();

		//

		// in liberal trigger mode, activate menu whenever mouse is close

		//

		if(!this.conservativeTrigger){

			this._onMouseMoveHandle = dojo.connect(document.documentElement, "onmousemove", this, "_onMouseMove");

		}

		if (this.isFixed){

			this._onScrollHandle = dojo.connect(document,"onscroll",this,"_onScroll");

		}

		// Deactivate the menu if mouse is moved off screen (doesn't work for FF?)

		this._onMouseOutHandle = dojo.connect(document.documentElement, "onmouseout", this, "_onBodyOut");

		this._addChildHandle = dojo.connect(this, "addChild", this, "_initializePositioning");

		this._onResizeHandle = dojo.connect(window,"onresize", this, "_initializePositioning");

	},

	_initializePositioning: function(){

		this.itemCount = this.children.length;

		this.barWidth  = (this.isHorizontal ? this.itemCount : 1) * this.itemWidth;

		this.barHeight = (this.isHorizontal ? 1 : this.itemCount) * this.itemHeight;

		this.totalWidth  = this.proximityLeft + this.proximityRight  + this.barWidth;

		this.totalHeight = this.proximityTop  + this.proximityBottom + this.barHeight;

		//

		// calculate effect ranges for each item

		//

		for(var i=0; i<this.children.length; i++){

			this.children[i].posX = this.itemWidth  * (this.isHorizontal ? i : 0);

			this.children[i].posY = this.itemHeight * (this.isHorizontal ? 0 : i);

			this.children[i].cenX = this.children[i].posX + (this.itemWidth  / 2);

			this.children[i].cenY = this.children[i].posY + (this.itemHeight / 2);

			var isz = this.isHorizontal ? this.itemWidth : this.itemHeight;

			var r = this.effectUnits * isz;

			var c = this.isHorizontal ? this.children[i].cenX : this.children[i].cenY;

			var lhs = this.isHorizontal ? this.proximityLeft : this.proximityTop;

			var rhs = this.isHorizontal ? this.proximityRight : this.proximityBottom;

			var siz = this.isHorizontal ? this.barWidth : this.barHeight;

			var range_lhs = r;

			var range_rhs = r;

			if(range_lhs > c+lhs){ range_lhs = c+lhs; }

			if(range_rhs > (siz-c+rhs)){ range_rhs = siz-c+rhs; }

			this.children[i].effectRangeLeft = range_lhs / isz;

			this.children[i].effectRangeRght = range_rhs / isz;

			//dojo.debug('effect range for '+i+' is '+range_lhs+'/'+range_rhs);

		}

		//

		// create the bar

		//

		this.domNode.style.width = this.barWidth + 'px';

		this.domNode.style.height = this.barHeight + 'px';

		//

		// position the items

		//

		for(var i=0; i<this.children.length; i++){

			var itm = this.children[i];

			var elm = itm.domNode;

			elm.style.left   = itm.posX + 'px';

			elm.style.top    = itm.posY + 'px';

			elm.style.width  = this.itemWidth + 'px';

			elm.style.height = this.itemHeight + 'px';

			itm.imgNode.style.left = this.itemPadding+'%';

			itm.imgNode.style.top = this.itemPadding+'%';

			itm.imgNode.style.width = (100 - 2 * this.itemPadding) + '%';

			itm.imgNode.style.height = (100 - 2 * this.itemPadding) + '%';

		}

		//

		// calc the grid

		//

		this._calcHitGrid();

	},

	_overElement: function(/* DomNode|String */node, /* Event */e){

		// summary:

		//	Returns whether the mouse is over the passed element.

		// Node: Must must be display:block (ie, not a <span>)

		node = dojo.byId(node);

		var mouse = {x: e.pageX, y: e.pageY};

		var bb = dojo._getBorderBox(node);

		var absolute = dojo.coords(node, true);

		var top = absolute.y;

		var bottom = top + bb.h;

		var left = absolute.x;

		var right = left + bb.w;

		return (mouse.x >= left

			&& mouse.x <= right

			&& mouse.y >= top

			&& mouse.y <= bottom

		);	//	boolean

	},

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

		// clicking over an object inside of body causes this event to fire; ignore that case

		if( this._overElement(dojo.body(), e) ){

			return;

		}

		this._setDormant(e);

	},

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

		// summary: called when mouse moves out of menu's range

		if(!this.isOver){ return; }	// already dormant?

		this.isOver = false;

		if(this.conservativeTrigger){

			// user can't re-trigger the menu expansion

			// until he mouses over a icon again

			dojo.disconnect(this._onMouseMoveHandle);

		}

		this._onGridMouseMove(-1, -1);

	},

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

		// summary: called when mouse is moved into menu's range

		if(this.isOver){ return; }	// already activated?

		this.isOver = true;

		if(this.conservativeTrigger){

			// switch event handlers so that we handle mouse events from anywhere near

			// the menu

			this._onMouseMoveHandle = dojo.connect(document.documentElement, "onmousemove", this, "_onMouseMove");

			this.timerScale=0.0;

			// call mouse handler to do some initial necessary calculations/positioning

			this._onMouseMove(e);

			// slowly expand the icon size so it isn't jumpy

			this._expandSlowly();

		}

	},

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

		// summary: called when mouse is moved

		if(	(e.pageX >= this.hitX1) && (e.pageX <= this.hitX2) &&

			(e.pageY >= this.hitY1) && (e.pageY <= this.hitY2)	){

			if(!this.isOver){

				this._setActive(e);

			}

			this._onGridMouseMove(e.pageX-this.hitX1, e.pageY-this.hitY1);

		}else{

			if(this.isOver){

				this._setDormant(e);

			}

		}

	},

	_onScroll: function(){

		this._calcHitGrid();

	},

	onResized: function(){

		this._calcHitGrid();

	},

	_onGridMouseMove: function(x, y){

		// summary: called when mouse is moved in the vicinity of the menu

		this.pos = {x:x, y:y};

		this._paint();

	},

	_paint: function(){

		var x=this.pos.x;

		var y=this.pos.y;

		if(this.itemCount <= 0){ return; }

		//

		// figure out our main index

		//

		var pos = this.isHorizontal ? x : y;

		var prx = this.isHorizontal ? this.proximityLeft : this.proximityTop;

		var siz = this.isHorizontal ? this.itemWidth : this.itemHeight;

		var sim = this.isHorizontal ?

			(1.0-this.timerScale)*this.itemWidth + this.timerScale*this.itemMaxWidth :

			(1.0-this.timerScale)*this.itemHeight + this.timerScale*this.itemMaxHeight ;

		var cen = ((pos - prx) / siz) - 0.5;

		var max_off_cen = (sim / siz) - 0.5;

		if(max_off_cen > this.effectUnits){ max_off_cen = this.effectUnits; }

		//

		// figure out our off-axis weighting

		//

		var off_weight = 0;

		if(this.anchorEdge == this.EDGE.BOTTOM){

			var cen2 = (y - this.proximityTop) / this.itemHeight;

			off_weight = (cen2 > 0.5) ? 1 : y / (this.proximityTop + (this.itemHeight / 2));

		}

		if(this.anchorEdge == this.EDGE.TOP){

			var cen2 = (y - this.proximityTop) / this.itemHeight;

			off_weight = (cen2 < 0.5) ? 1 : (this.totalHeight - y) / (this.proximityBottom + (this.itemHeight / 2));

		}

		if(this.anchorEdge == this.EDGE.RIGHT){

			var cen2 = (x - this.proximityLeft) / this.itemWidth;

			off_weight = (cen2 > 0.5) ? 1 : x / (this.proximityLeft + (this.itemWidth / 2));

		}

		if(this.anchorEdge == this.EDGE.LEFT){

			var cen2 = (x - this.proximityLeft) / this.itemWidth;

			off_weight = (cen2 < 0.5) ? 1 : (this.totalWidth - x) / (this.proximityRight + (this.itemWidth / 2));

		}

		if(this.anchorEdge == this.EDGE.CENTER){

			if(this.isHorizontal){

				off_weight = y / (this.totalHeight);

			}else{

				off_weight = x / (this.totalWidth);

			}

			if(off_weight > 0.5){

				off_weight = 1 - off_weight;

			}

			off_weight *= 2;

		}

		//

		// set the sizes

		//

		for(var i=0; i<this.itemCount; i++){

			var weight = this._weighAt(cen, i);

			if(weight < 0){weight = 0;}

			this._setItemSize(i, weight * off_weight);

		}

		//

		// set the positions

		//

		var main_p = Math.round(cen);

		var offset = 0;

		if(cen < 0){

			main_p = 0;

		}else if(cen > this.itemCount - 1){

			main_p = this.itemCount -1;

		}else{

			offset = (cen - main_p) * ((this.isHorizontal ? this.itemWidth : this.itemHeight) - this.children[main_p].sizeMain);

		}

		this._positionElementsFrom(main_p, offset);

	},

	_weighAt: function(/*Integer*/ cen, /*Integer*/ i){

		var dist = Math.abs(cen - i);

		var limit = ((cen - i) > 0) ? this.children[i].effectRangeRght : this.children[i].effectRangeLeft;

		return (dist > limit) ? 0 : (1 - dist / limit); // Integer

	},

	_setItemSize: function(p, scale){

		scale *= this.timerScale;

		var w = Math.round(this.itemWidth  + ((this.itemMaxWidth  - this.itemWidth ) * scale));

		var h = Math.round(this.itemHeight + ((this.itemMaxHeight - this.itemHeight) * scale));

		if(this.isHorizontal){

			this.children[p].sizeW = w;

			this.children[p].sizeH = h;

			this.children[p].sizeMain = w;

			this.children[p].sizeOff  = h;

			var y = 0;

			if(this.anchorEdge == this.EDGE.TOP){

				y = (this.children[p].cenY - (this.itemHeight / 2));

			}else if(this.anchorEdge == this.EDGE.BOTTOM){

				y = (this.children[p].cenY - (h - (this.itemHeight / 2)));

			}else{

				y = (this.children[p].cenY - (h / 2));

			}

			this.children[p].usualX = Math.round(this.children[p].cenX - (w / 2));

			this.children[p].domNode.style.top  = y + 'px';

			this.children[p].domNode.style.left  = this.children[p].usualX + 'px';

		}else{

			this.children[p].sizeW = w;

			this.children[p].sizeH = h;

			this.children[p].sizeOff  = w;

			this.children[p].sizeMain = h;

			var x = 0;

			if(this.anchorEdge == this.EDGE.LEFT){

				x = this.children[p].cenX - (this.itemWidth / 2);

			}else if (this.anchorEdge == this.EDGE.RIGHT){

				x = this.children[p].cenX - (w - (this.itemWidth / 2));

			}else{

				x = this.children[p].cenX - (w / 2);

			}

			this.children[p].domNode.style.left = x + 'px';

			this.children[p].usualY = Math.round(this.children[p].cenY - (h / 2));

			this.children[p].domNode.style.top  = this.children[p].usualY + 'px';

		}

		this.children[p].domNode.style.width  = w + 'px';

		this.children[p].domNode.style.height = h + 'px';

		if(this.children[p].svgNode){

			this.children[p].svgNode.setSize(w, h);

		}

	},

	_positionElementsFrom: function(p, offset){

		var pos = 0;

		if(this.isHorizontal){

			pos = Math.round(this.children[p].usualX + offset);

			this.children[p].domNode.style.left = pos + 'px';

		}else{

			pos = Math.round(this.children[p].usualY + offset);

			this.children[p].domNode.style.top = pos + 'px';

		}

		this._positionLabel(this.children[p]);

		// position before

		var bpos = pos;

		for(var i=p-1; i>=0; i--){

			bpos -= this.children[i].sizeMain;

			if (this.isHorizontal){

				this.children[i].domNode.style.left = bpos + 'px';

			}else{

				this.children[i].domNode.style.top = bpos + 'px';

			}

			this._positionLabel(this.children[i]);

		}

		// position after

		var apos = pos;

		for(var i=p+1; i<this.itemCount; i++){

			apos += this.children[i-1].sizeMain;

			if(this.isHorizontal){

				this.children[i].domNode.style.left = apos + 'px';

			}else{

				this.children[i].domNode.style.top = apos + 'px';

			}

			this._positionLabel(this.children[i]);

		}

	},

	_positionLabel: function(itm){

		var x = 0;

		var y = 0;

		var mb = dojo.marginBox(itm.lblNode);

		if(this.labelEdge == this.EDGE.TOP){

			x = Math.round((itm.sizeW / 2) - (mb.w / 2));

			y = -mb.h;

		}

		if(this.labelEdge == this.EDGE.BOTTOM){

			x = Math.round((itm.sizeW / 2) - (mb.w / 2));

			y = itm.sizeH;

		}

		if(this.labelEdge == this.EDGE.LEFT){

			x = -mb.w;

			y = Math.round((itm.sizeH / 2) - (mb.h / 2));

		}

		if(this.labelEdge == this.EDGE.RIGHT){

			x = itm.sizeW;

			y = Math.round((itm.sizeH / 2) - (mb.h / 2));

		}

		itm.lblNode.style.left = x + 'px';

		itm.lblNode.style.top  = y + 'px';

	},

	_calcHitGrid: function(){

		var pos = dojo.coords(this.domNode, true);

		this.hitX1 = pos.x - this.proximityLeft;

		this.hitY1 = pos.y - this.proximityTop;

		this.hitX2 = this.hitX1 + this.totalWidth;

		this.hitY2 = this.hitY1 + this.totalHeight;

	},

	_toEdge: function(inp, def){

		return this.EDGE[inp.toUpperCase()] || def;

	},

	_expandSlowly: function(){

		// summary: slowly expand the image to user specified max size

		if(!this.isOver){ return; }

		this.timerScale += 0.2;

		this._paint();

		if(this.timerScale<1.0){

			setTimeout(dojo.hitch(this, "_expandSlowly"), 10);

		}

	},

	destroyRecursive: function(){

		// need to disconnect when we destroy

		dojo.disconnect(this._onMouseOutHandle);

		dojo.disconnect(this._onMouseMoveHandle);

		dojo.disconnect(this._addChildHandle);

		if (this.isFixed) { dojo.disconnect(this._onScrollHandle); }

		dojo.disconnect(this._onResizeHandle);

		this.inherited("destroyRecursive",arguments);

	}

});

dojo.declare("dojox.widget.FisheyeListItem", [dijit._Widget, dijit._Templated, dijit._Contained], {

	/*

	 * summary

	 *	Menu item inside of a FisheyeList.

	 *	See FisheyeList documentation for details on usage.

	 */

	// iconSrc: String

	//	pathname to image file (jpg, gif, png, etc.) of icon for this menu item

	iconSrc: "",

	// label: String

	//	label to print next to the icon, when it is moused-over

	label: "",

	// id: String

	//	will be set to the id of the orginal div element

	id: "",

	_blankImgPath: dojo.moduleUrl("dojox.widget", "FisheyeList/blank.gif"),

	templateString:

		'<div class="dojoxFisheyeListItem">' +

		'  <img class="dojoxFisheyeListItemImage" dojoAttachPoint="imgNode" dojoAttachEvent="onmouseover:onMouseOver,onmouseout:onMouseOut,onclick:onClick">' +

		'  <div class="dojoxFisheyeListItemLabel" dojoAttachPoint="lblNode"></div>' +

		'</div>',

	_isNode: function(/* object */wh){

		//	summary:

		//		checks to see if wh is actually a node.

		if(typeof Element == "function") {

			try{

				return wh instanceof Element;	//	boolean

			}catch(e){}

		}else{

			// best-guess

			return wh && !isNaN(wh.nodeType);	//	boolean

		}

	},

	_hasParent: function(/*Node*/node){

		//	summary:

		//		returns whether or not node is a child of another node.

		return Boolean(node && node.parentNode && this._isNode(node.parentNode));	//	boolean

	},

	postCreate: function() {

		// set image

		if((this.iconSrc.toLowerCase().substring(this.iconSrc.length-4)==".png")&&(dojo.isIE)&&(dojo.isIE<7)){

			/* we set the id of the new fisheyeListItem to the id of the div defined in the HTML */

			if(this._hasParent(this.imgNode) && this.id != ""){

				var parent = this.imgNode.parentNode;

				parent.setAttribute("id", this.id);

			}

			this.imgNode.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.iconSrc+"', sizingMethod='scale')";

			this.imgNode.src = this._blankImgPath.toString();

		}else{

			if(this._hasParent(this.imgNode) && this.id != ""){

				var parent = this.imgNode.parentNode;

				parent.setAttribute("id", this.id);

			}

			this.imgNode.src = this.iconSrc;

		}

		// Label

		if(this.lblNode){

			this.lblNode.appendChild(document.createTextNode(this.label));

		}

		dojo.setSelectable(this.domNode, false);

		this.startup();

	},

	startup: function(){

		this.parent = this.getParent();

	},

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

		// summary: callback when user moves mouse over this menu item

		// in conservative mode, don't activate the menu until user mouses over an icon

		if(!this.parent.isOver){

			this.parent._setActive(e);

		}

		if(this.label != "" ){

			dojo.addClass(this.lblNode, "dojoxFishSelected");

			this.parent._positionLabel(this);

		}

	},

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

		// summary: callback when user moves mouse off of this menu item

		dojo.removeClass(this.lblNode, "dojoxFishSelected");

	},

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

		// summary: user overridable callback when user clicks this menu item

	}

});

}