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
|
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("dojox.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);
// | });
//
// 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: dojox.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: dojox.fx.easing.elasticOut,
// properties: Object
// An object of "property":scale pairs
// defaults to font-size with a scale of 2.75
properties: {
fontSize: 2.75
},
// unit: String
// Sometimes, you need to specify a unit. Should be part of
// properties attrib, but was trying to shorthand the logic there
unit:"px",
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 = {};
var _out = {};
var cs = dojo.getComputedStyle(this._target);
for(var p in this.properties){
var 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 ;)
_out[p] = { end: v, unit:this.unit };
_in[p] = { end: (this.properties[p]*v), unit:this.unit };
}
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.
}
});
}
|
