1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
/*
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
*/
dojo._xdResourceLoaded(function(dojo, dijit, dojox){
return {depends: [["provide", "dojox.widget.FisheyeLite"],
["require", "dijit._Widget"],
["require", "dojo.fx.easing"]],
defineResource: function(dojo, dijit, dojox){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.
}
});
}
}};});
|
