dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
219 lines (189 loc) • 5.97 kB
JavaScript
define([
"dojo/_base/array",
"dojo/_base/connect",
"dojo/_base/lang",
"dojo/_base/fx",
"dojo/dom-style",
"dojo/fx"
], function(array, connect, lang, baseFx, domStyle, fx) {
// Constants used to identify which edge the pane pans in from.
var DOWN = 0,
RIGHT = 1,
UP = 2,
LEFT = 3;
function _pan(/*int*/type, /*Object*/args){
// summary:
// Handles the preparation of the dom node and creates the dojo.Animation object.
var j = {
node: args.current.node,
duration: args.duration,
easing: args.easing
},
k = {
node: args.next.node,
duration: args.duration,
easing: args.easing
},
r = args.rotatorBox,
m = type % 2,
a = m ? "left" : "top",
s = (m ? r.w : r.h) * (type < 2 ? -1 : 1),
p = {},
q = {};
domStyle.set(k.node, {
display: "",
opacity: 0
});
p[a] = {
start: 0,
end: -s
};
q[a] = {
start: s,
end: 0
};
return fx.combine([ /*dojo.Animation*/
baseFx.animateProperty(lang.mixin({ properties: p }, j)),
baseFx.fadeOut(j),
baseFx.animateProperty(lang.mixin({ properties: q }, k)),
baseFx.fadeIn(k)
]);
}
function _setZindex(/*DomNode*/n, /*int*/z){
// summary:
// Helper function for continuously panning.
domStyle.set(n, "zIndex", z);
}
var exports = {
panFade: function(/*Object*/args){
// summary:
// Returns a dojo.Animation that either pans left or right to the next pane.
// The actual direction depends on the order of the panes.
//
// If panning forward from index 1 to 3, it will perform a pan left. If panning
// backwards from 5 to 1, then it will perform a pan right.
//
// If the parameter "continuous" is set to true, it will return an animation
// chain of several pan animations of each intermediate pane panning. For
// example, if you pan forward from 1 to 3, it will return an animation panning
// left from 1 to 2 and then 2 to 3.
//
// If an easing is specified, it will be applied to each pan transition. For
// example, if you are panning from pane 1 to pane 5 and you set the easing to
// "dojo.fx.easing.elasticInOut", then it will "wobble" 5 times, once for each
// pan transition.
//
// If the parameter "wrap" is set to true, it will pan to the next pane using
// the shortest distance in the array of panes. For example, if there are 6
// panes, then panning from 5 to 1 will pan forward (left) from pane 5 to 6 and
// 6 to 1. If the distance is the same either going forward or backwards, then
// it will always pan forward (left).
//
// A continuous pan will use the target pane's duration to pan all intermediate
// panes. To use the target's pane duration for each intermediate pane, then
// set the "quick" parameter to "false".
var w = args.wrap,
p = args.rotator.panes,
len = p.length,
z = len,
j = args.current.idx,
k = args.next.idx,
nw = Math.abs(k - j),
ww = Math.abs((len - Math.max(j, k)) + Math.min(j, k)) % len,
_forward = j < k,
_dir = LEFT,
_pans = [],
_nodes = [],
_duration = args.duration;
// default to pan left, but check if we should pan right.
// need to take into account wrapping.
if((!w && !_forward) || (w && (_forward && nw > ww || !_forward && nw < ww))){
_dir = RIGHT;
}
if(args.continuous){
// if continuous pans are quick, then divide the duration by the number of panes
if(args.quick){
_duration = Math.round(_duration / (w ? Math.min(ww, nw) : nw));
}
// set the current pane's z-index
_setZindex(p[j].node, z--);
var f = (_dir == LEFT);
// loop and set z-indexes and get all pan animations
while(1){
// set the current pane
var i = j;
// increment/decrement the next pane's index
if(f){
if(++j >= len){
j = 0;
}
}else{
if(--j < 0){
j = len - 1;
}
}
var x = p[i],
y = p[j];
// set next pane's z-index
_setZindex(y.node, z--);
// build the pan animation
_pans.push(_pan(_dir, lang.mixin({
easing: function(m){ return m; } // continuous gets a linear easing by default
}, args, {
current: x,
next: y,
duration: _duration
})));
// if we're done, then break out of the loop
if((f && j == k) || (!f && j == k)){
break;
}
// this must come after the break... we don't want the last pane to get it's
// styles reset.
_nodes.push(y.node);
}
// build the chained animation of all pan animations
var _anim = fx.chain(_pans);
// clean up styles when the chained animation finishes
var h = connect.connect(_anim, "onEnd", function(){
connect.disconnect(h);
array.forEach(_nodes, function(q){
domStyle.set(q, {
display: "none",
left: 0,
opacity: 1,
top: 0,
zIndex: 0
});
});
});
return _anim;
}
// we're not continuous, so just return a normal pan animation
return _pan(_dir, args); /*dojo.Animation*/
},
panFadeDown: function(/*Object*/args){
// summary:
// Returns a dojo.Animation that pans in the next rotator pane from the top.
return _pan(DOWN, args); /*dojo.Animation*/
},
panFadeRight: function(/*Object*/args){
// summary:
// Returns a dojo.Animation that pans in the next rotator pane from the right.
return _pan(RIGHT, args); /*dojo.Animation*/
},
panFadeUp: function(/*Object*/args){
// summary:
// Returns a dojo.Animation that pans in the next rotator pane from the bottom.
return _pan(UP, args); /*dojo.Animation*/
},
panFadeLeft: function(/*Object*/args){
// summary:
// Returns a dojo.Animation that pans in the next rotator pane from the left.
return _pan(LEFT, args); /*dojo.Animation*/
}
};
// back-compat, remove for 2.0
lang.mixin(lang.getObject("dojox.widget.rotator"), exports);
return exports;
});