diff options
Diffstat (limited to 'js/dojo/dojox/widget/FisheyeLite.js')
| -rw-r--r-- | js/dojo/dojox/widget/FisheyeLite.js | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/js/dojo/dojox/widget/FisheyeLite.js b/js/dojo/dojox/widget/FisheyeLite.js new file mode 100644 index 0000000..90305c3 --- /dev/null +++ b/js/dojo/dojox/widget/FisheyeLite.js @@ -0,0 +1,151 @@ +//>>built +define("dojox/widget/FisheyeLite", ["dojo", "dojox", "dijit/_Widget", "dojo/fx/easing"], function(dojo, dojox, widget, easing){ + + dojo.getObject("widget", true, dojox); + dojo.experimental("dojox.widget.FisheyeLite"); + + return 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: 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: 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. + } + + }); + +});
\ No newline at end of file |