closure-slider.js

/**
 * @fileoverview A content slider.
 */

// TODO: emit events.
 
goog.provide("goox.ui.Slider");

goog.require("goog.dom");
goog.require("goog.style");
goog.require("goog.math");
goog.require("goog.fx");
goog.require("goog.fx.dom");
goog.require("goog.fx.AnimationParallelQueue");

/**
 * A generic content slider control.
 *
 * Example markup:
 * <div>
 *     <a href="#" id="prev-slide">prev</a>
 *     <a href="#" id="next-slide">next</a>    
 * </div> 
 * <div id="slider" class="goox-slider">
 *     <div class="goox-slide goox-slide-default"><span style="background: #f00">Hello</span></div>
 *     <div class="goox-slide"><span style="background: #0f0">World</span></div>
 *     <div class="goox-slide"><span style="background: #00f">Bye</span></div>
 * </div>
 *
 * Example setup:
 * var slider = new goox.ui.Slider(goog.dom.getElementsByTagNameAndClass(null, "goox-slide", goog.dom.getElement("slider")));
 * goog.events.listen(goog.dom.getElement("next-slide"), goog.events.EventType.CLICK, function (e) {
 *     e.preventDefault();
 *     slider.nextPrev(true);
 * });
 * goog.events.listen(goog.dom.getElement("prev-slide"), goog.events.EventType.CLICK, function (e) {
 *     e.preventDefault();
 *     slider.nextPrev(false);
 * }); 
 *
 * @param {Array.<Element>} slides The slide elements.
 * @constructor
 */
goox.ui.Slider = function (slides) {
    this.slides = slides; 
    this.selectedIndex_ = 0;

    goog.array.forEach(this.slides, function (slide, i) {
        if (goog.dom.classes.has(slide, goog.getCssName("goox-slide-default"))) {
            this.selectedIndex_ = i;
        }
        goog.style.setStyle(slide, {
            position: "absolute",
            top: "0px",
            left: "0px"
        });
        goog.style.showElement(slide, this.selecteIndex_ == i);        
    }, this);
}

/**
 * Select the next or previous slide. Implemented as a single function to yield
 * better compression ratios.
 * @param {boolean} next If true, show the next slide, else the previous.
 */
goox.ui.Slider.prototype.nextPrev = function (next) {
    if (!this.animation_) {
        var d = next ? 1 : -1;
        this.setSelectedIndex(goog.math.modulo(this.selectedIndex_ + d, this.slides.length));
    }
}

/**
 * Sets the selected slide by zero based index.
 * @param {number} idx Zero based index of the slide.
 */
goox.ui.Slider.prototype.setSelectedIndex = function (idx) {
    var old = this.slides[this.selectedIndex_],
        slide = this.slides[idx];

    goog.style.setStyle(old, "z-index", 1);
    goog.style.setStyle(slide, {"z-index": 0, display: "block"});        

    this.animation_ = this.createAnimation(slide, old);
    goog.events.listen(this.animation_, goog.fx.Animation.EventType.END, function (e) {
        this.animation_.dispose();
        this.animation_ = null;
    }, false, this);
    this.animation_.play();
      
    this.selectedIndex_ = idx;
}

/**
 * Create the animation used for the slide transition effect.
 * Overide this method for custom effects.
 * @param {Element} slide The new slide.
 * @param {Element} old The old slide
 * @returns {goog.fx.Animation} The animation used for slide transition.
 */
goox.ui.Slider.prototype.createAnimation = function (slide, old) {
    var a = new goog.fx.AnimationParallelQueue();
    a.add(new goog.fx.dom.FadeIn(slide, 800, goog.fx.easing.easeOut));
    a.add(new goog.fx.dom.FadeOut(old, 800, goog.fx.easing.easeOut));
    return a;
}