gistfile1.js

/***
 * AKD.EC
 * ----------------------------------------------------------------------------
 * <ThumbSlider.js> - 2014/5/20
 * @version 0.1
 * @author  Joye, maolion.j@gmail.com
 * @website http://maolion.com
 */

var 
    Utils    = require("Utils.js"),
    Slider   = require("Slider.js"),
    TS       = null, 
    DEF_CONF = {
        pageButton : null,
        effect     : "ScrollX"
    }
;
TS = module.exports = function ThumbSlider(slider, config)
{
    var _this    = this;
    if (config) {
        delete config.pageButton;
    }
    Slider.call(this, slider, jQuery.extend({}, DEF_CONF, config));
    this._count = this._items.length;
    config = this._config;
    if (config.effect === "ScrollX") {
        this._step   = this._itemWidth;
        this._margin = "marginLeft";
        slider.css({
            width      : this._itemWidth * this._count,
            height     : this._itemHeight,
            marginLeft : 0
        });
        this._items.css("float", "left");
    } else {
        this._step   = this._itemHeight;
        this._margin = "marginTop";
    }
    delete this._pageCount;
    slider.on("click", ">" + this._items[0].tagName , function()
    {
        _this.active(index = jQuery(this).index());
    });
    this._active = this._items.filter(".active:first").index();    
    this._offset = 0;
    this.active(this._active);
    this.resize(config.pageSize);
};

var api = TS.prototype = Utils.create(Slider.prototype, TS);
api.switchTo = function switchTo(index, done)
{
    var 
        index   = Math.min(Math.max(0, ~~index), this._count-1),
        pOffset = this._offset,
        offset  = Math.min(-(Math.min(this._step * index, this._maxOffset)), 0)
    ;
    if (pOffset === offset) {
        this.fireEvent("switch", [index, this.getGroupOffset(offset), null]);
        return;
    }
    pOffset      = this._offset;
    this._offset = offset;

    this.fireEvent("switch", [index, this.getGroupOffset(offset), this.getGroupOffset(pOffset)]);
    var animate = {};
    animate[this._margin] = offset;
    this.nextAnimate(this._slider, animate, done);
    if (!this._from_auto_paly && this._auto_play) {
        this.play();
    }
};

api.active = function active(index)
{
    var 
        index   = Math.min(Math.max(0, ~~index), this._count-1),
        prev    = this._active,
        offset  = null,
        next    = -1
    ;
    if (index !== this._active) {
        this._active = index;
        this._items.removeClass("active");
        this.fireEvent("active", [index, prev]);
    }
    this._items.eq(index).addClass("active");
    offset = (index * this._step) - Math.abs(this._offset);
    if (offset === 0 && this._offset !== 0) {
        next = Math.max(index - this._config.pageSize + 1, 0);
    } else if (offset === this._groupStep - this._step) {
        next = index;
    } else {
        var gOffset = this.getGroupOffset(this._offset);
        if (gOffset[0] > index || gOffset[1] <= index) {
            next = offset === -this._step ?  Math.max(index - this._config.pageSize + 1, 0): index;
        }
    }
    next > -1 && this.switchTo(next);
};

api.next = function next()
{
    this.active(this._active + 1);
};
api.prev = function prev()
{
    this.active(this._active - 1);
};

api.nextGroup = function nextGroup()
{
    this.switchTo(this.getGroupOffset(this._offset)[1]);
};
api.prevGroup = function prevGroup()
{
    this.switchTo(
        Math.max(this.getGroupOffset(this._offset)[0] - this._config.pageSize, 0)
    );
};
api.getActive = function()
{
    return this._active;
};
api.getGroupOffset = function(offset)
{
    var 
        start = Math.abs(offset) / this._step,
        end   = Math.min(start + this._config.pageSize, this._count)
    ;
    return [start, end];
};

api.getVisibleItem = function()
{
    var offset = this.getGroupOffset(this._offset);
    return this._items.slice(offset[0], offset[1]);
};
api.resize = function(size)
{
    size = ~~size;
    this._groupStep = this._step * size;
    this._maxOffset = this._step * this._count - this._groupStep;
    this._config.pageSize = size;
    this.switchTo(this._active);
    this.fireEvent("resize");
};