source: [view]
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(); }