/*
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.Roller"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.widget.Roller"] = true;
dojo.provide("dojox.widget.Roller");
dojo.require("dijit._Widget");
dojo.declare("dojox.widget.Roller", dijit._Widget, {
// summary: A simple widget to take an unordered-list of Text and roll through them
//
// description:
// The Roller widget takes an unordered-list of items, and converts
// them to a single-area (the size of one list-item, however you so choose
// to style it) and loops continually, fading between items.
//
// In it's current state, it requires it be created from an unordered (or ordered)
// list, though can contain complex markup.
//
// You can manipulate the `items` array at any point during the cycle with
// standard array manipulation techniques.
//
// The class "dojoxRoller" is added to the UL element for styling purposes.
//
// example:
// | // create a scroller from a unordered list with id="lister"
// | var thinger = new dojox.widget.Roller.Roller({},"lister");
//
// example:
// | // create a scroller from a fixed array, and place in the DOM:
// | new dojox.widget.Roller({ items:["one","two","three"] }).placeAt(dojo.body());
//
// example:
// | // add an item:
// | dijit.byId("roller").items.push("I am a new Label");
//
// example:
// | // stop a roller from rolling:
// | dijit.byId("roller").stop();
//
// delay: Integer
// Interval between rolls
delay: 2000,
// autoStart: Boolean
// Toggle to control starup behavior. Call .start() manually
// if set to `false`
autoStart: true,
// itemSelector: String
// A CSS selector to be used by `dojo.query` to find the children
// items in this widget. Defaults to "> li", finding only first-children
// list-items in the list, allowing for embedded lists to occur.
itemSelector: "> li",
// durationIn: Integer
// Speed (in ms) to apply to the "in" animation (show the node)
durationIn: 400,
// durationOut: Integer
// Speed (in ms) to apply to the "out" animation (hide the showing node)
durationOut: 275,
/*=====
// items: Array
// If populated prior to instantiation, is used as the Items over the children
items: [],
=====*/
// _idx: Integer
// Index of the the currently visible item in the list of items[]
_idx: -1,
postCreate: function(){
// add some instance vars:
if(!this["items"]){
this.items = [];
}
dojo.addClass(this.domNode,"dojoxRoller");
// find all the items in this list, and popuplate
dojo.query(this.itemSelector, this.domNode).forEach(function(item, i){
this.items.push(item.innerHTML);
// reuse the first match, destroy the rest
if(i == 0){
this._roller = item;
this._idx = 0;
}else{ dojo.destroy(item); }
}, this);
// handle the case where items[] were passed, and no srcNodeRef exists
if(!this._roller){
this._roller = dojo.create('li', null, this.domNode);
}
// stub out animation creation (for overloading maybe later)
this.makeAnims();
// and start, if true:
if(this.autoStart){ this.start(); }
},
makeAnims: function(){
// summary: Animation creator function. Need to create an 'in' and 'out'
// Animation stored in _anim Object, which the rest of the widget
// will reuse.
var n = this.domNode;
dojo.mixin(this, {
_anim: {
"in": dojo.fadeIn({ node:n, duration: this.durationIn }),
"out": dojo.fadeOut({ node:n, duration: this.durationOut })
}
});
this._setupConnects();
},
_setupConnects: function(){
// summary: setup the loop connection logic
var anim = this._anim;
this.connect(anim["out"], "onEnd", function(){
// onEnd of the `out` animation, select the next items and play `in` animation
this._setIndex(this._idx + 1);
anim["in"].play(15);
});
this.connect(anim["in"], "onEnd", function(){
// onEnd of the `in` animation, call `start` again after some delay:
this._timeout = setTimeout(dojo.hitch(this, "_run"), this.delay);
});
},
start: function(){
// summary: Starts to Roller looping
if(!this.rolling){
this.rolling = true;
this._run();
}
},
_run: function(){
this._anim["out"].gotoPercent(0, true);
},
stop: function(){
// summary: Stops the Roller from looping anymore.
this.rolling = false;
var m = this._anim,
t = this._timeout;
if(t){ clearTimeout(t); }
m["in"].stop();
m["out"].stop();
},
_setIndex: function(i){
// summary: Set the Roller to some passed index. If beyond range, go to first.
var l = this.items.length - 1;
if(i < 0){ i = l; }
if(i > l){ i = 0; }
this._roller.innerHTML = this.items[i] || "error!";
this._idx = i;
}
});
dojo.declare("dojox.widget.RollerSlide", dojox.widget.Roller, {
// summary: An add-on to the Roller to modify animations. This produces
// a slide-from-bottom like effect. See `dojox.widget.Roller` for
// full API information.
durationOut: 175, // slightly faster than default
makeAnims: function(){
// summary: Animation creator function. Need to create an 'in' and 'out'
// Animation stored in _anim Object, which the rest of the widget
// will reuse.
var n = this.domNode, pos = "position",
props = {
top: { end: 0, start: 25 },
opacity: 1
}
;
dojo.style(n, pos, "relative");
dojo.style(this._roller, pos, "absolute");
dojo.mixin(this, {
_anim: {
"in": dojo.animateProperty({
node: n,
duration: this.durationIn,
properties: props
}),
"out": dojo.fadeOut({ node: n, duration: this.durationOut })
}
});
// don't forget to do this in the class. override if necessary.
this._setupConnects();
}
});
dojo.declare("dojox.widget._RollerHover", null, {
// summary: A mixin class to provide a way to automate the "stop on hover" functionality.
//
// description:
// A mixin class used to provide a way to automate a "stop on hover" behavior,
// while still allowing for ambigious subclassing for custom animations.
// Simply mix this class into a `dojox.widget.Roller` variant, and instantiate
// as you would. The hover connection is done automatically.
//
// The "hover" functionality is as such: Stop rotation while the mouse is over the
// instance, and resume again once leaving. Even if autoStart is disabled, the widget
// will start if a mouse enters and leaves the node in this case.
//
// example:
// | dojo.declare("my.Roller", [dojox.widget.RollerSlide, dojox.widget._RollerHover], {});
// | new my.Roller({}, "myList");
postCreate: function(){
this.inherited(arguments);
this.connect(this.domNode, "onmouseenter", "stop");
this.connect(this.domNode, "onmouseleave", "start");
}
});
}