FisheyeList.js
No OneTemporary
Actions

Size

19 KB

Subscribers

None

FisheyeList.js
View Options

	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.timerScalethis.itemMaxWidth :
	(1.0-this.timerScale)this.itemHeight + this.timerScalethis.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
	}
	});

	}

File Metadata

Mime Type: text/plain
Expires: Sun, Apr 6, 10:29 (2 w, 9 h ago)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 25018
Default Alt Text: FisheyeList.js (19 KB)

FisheyeList.jsNo OneTemporaryActions

FisheyeList.jsView Options

File Metadata

Event Timeline

FisheyeList.js
No OneTemporary
Actions

FisheyeList.js
View Options