FisheyeLite.js #1

/*
	Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
	Available via Academic Free License >= 2.1 OR the modified BSD license.
	see: http://dojotoolkit.org/license for details
*/


if(!dojo._hasResource["dojox.widget.FisheyeLite"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.widget.FisheyeLite"] = true;
dojo.provide("dojox.widget.FisheyeLite");
dojo.experimental("dojox.widget.FisheyeLite");

dojo.require("dijit._Widget");
dojo.require("dojo.fx.easing");

dojo.declare("dojox.widget.FisheyeLite",
	dijit._Widget,
	{
	// summary:  A Light-weight Fisheye Component, or an exhanced version
	//		of dojo.fx.Toggler ...
	//
	// description:
	//		A Simple FisheyeList-like widget which (in the interest of
	//		performance) relies on well-styled content for positioning,
	// 		and natural page layout for rendering.
	//
	//		use position:absolute/relative nodes to prevent layout
	//		changes, and use caution when seleting properties to
	//		scale. Negative scaling works, but some properties
	//		react poorly to being set to negative values, IE being
	//		particularly annoying in that regard.
	//
	//		quirk: uses the domNode as the target of the animation
	//		unless it finds a node class="fisheyeTarget" in the container
	//		being turned into a FisheyeLite instance
	//
	// example:
	//	|	// make all the LI's in a node Fisheye's:
	//	|   dojo.query("#node li").forEach(function(n){
	// 	|		new dojox.widget.FisheyeLite({},n);
	//	|	});
	//
	//
	// example:
	//	|	new dojox.widget.FisheyeLite({
	//	|		properties:{
	//	|			// height is literal, width is multiplied
	//	|			height:{ end: 200 }, width:2.3
	//	|		}
	//	|	}, "someNode");
	//
	// duationIn: Integer
	//		The time (in ms) the run the show animation
	durationIn: 350,
	
	// easeIn: Function
	//		An easing function to use for the show animation
	easeIn: dojo.fx.easing.backOut,
	
	// durationOut: Integer
	//		The Time (in ms) to run the hide animation
	durationOut: 1420,
	
	// easeOut: Function
	// 		An easing function to use for the hide animation
	easeOut: dojo.fx.easing.elasticOut,

	//	properties: Object
	//			An object of "property":scale pairs, or "property":{} pairs.
	//			defaults to font-size with a scale of 2.75
	//			If a named property is an integer or float, the "scale multiplier"
	//			is used. If the named property is an object, that object is mixed
	//			into the animation directly. eg: height:{ end:20, units:"em" }
	properties: null,
	
	// units: String
	//		Sometimes, you need to specify a unit. Should be part of
	//		properties attrib, but was trying to shorthand the logic there
	units:"px",
	
	constructor: function(props, node){
		this.properties = props.properties || {
			fontSize: 2.75
		}
	},
	
	postCreate: function(){
		
		this.inherited(arguments);
		this._target = dojo.query(".fisheyeTarget", this.domNode)[0] || this.domNode;
		this._makeAnims();
		
		this.connect(this.domNode, "onmouseover", "show");
		this.connect(this.domNode, "onmouseout", "hide");
		this.connect(this._target, "onclick", "onClick");

	},
	
	show: function(){
		// summary:
		//		Show this Fisheye item.
		this._runningOut.stop();
		this._runningIn.play();
	},
	
	hide: function(){
		// summary:
		//		Hide this fisheye item on mouse leave
		this._runningIn.stop();
		this._runningOut.play();
	},
	
	_makeAnims: function(){
		// summary:
		//		Pre-generate the animations

		// create two properties: objects, one for each "state"
		var _in = {}, _out = {}, cs = dojo.getComputedStyle(this._target);
		for(var p in this.properties){
			var prop = this.properties[p],
				deep = dojo.isObject(prop),
				v = parseInt(cs[p])
			;
			// note: do not set negative scale for [a list of properties] for IE support
			// note: filter:'s are your own issue, too ;)
			// FIXME: this.unit here is bad, likely. d._toPixelValue ?
			_out[p] = { end: v, units:this.units };
			_in[p] = deep ? prop : { end: prop * v, units:this.units };
		}
		
		this._runningIn = dojo.animateProperty({
			node: this._target,
			easing: this.easeIn,
			duration: this.durationIn,
			properties: _in
		});
		
		this._runningOut = dojo.animateProperty({
			node: this._target,
			duration: this.durationOut,
			easing: this.easeOut,
			properties: _out
		});
		
		this.connect(this._runningIn, "onEnd", dojo.hitch(this, "onSelected", this));
	},
	
	onClick: function(/* Event */e){
		// summary: stub function fired when target is clicked
		//		connect or override to use.
	},
	
	onSelected: function(/* Object */e){
		// summary: stub function fired when Fisheye Item is fully visible and
		// 		hovered. connect or override use.
	}
	
});

}