viRotator.js

/// <reference path="jquery-1.6.4.min.js" />
; (function ($) {
    /***********************************ViScrollBar************************************/
    //create the ScrollBar class
    var ViScrollBar = function (element, options) {
        var defaults = {
            maxDistance: 100,
            limitDistance: 100,
            animSpeed: 300,
            direction: 'horizontal',
            onChanging: $.noop(),
            onChanged: $.noop()
        };

        //default options
        this.setting = $.extend({}, defaults, options);
        this.vars = {
            direction: {
                horizontal: "horizontal",
                vertical: "vertical"
            }
        };
        //initialize dom
        this.scrollBar = $(element);
        this.initialize();
    };

    ViScrollBar.prototype = {
        initialize: function () {
            var _this = this,
                setting = _this.setting,
                vars = _this.vars,
                scrollBar = _this.scrollBar;

            scrollBar.append("<div class=\"vi-scroll-bg\"></div><div class=\"vi-scroll-handler\"></div>");

            var scrollBarWidth = scrollBar.outerWidth(true),
                scrollBarHeight = scrollBar.outerHeight(true);

            _this.handlerSize = _this.getHandlerSize();
            scrollBar.addClass(setting.direction);

            if (setting.direction == vars.direction.horizontal) {
                _this.limitDistance = Math.round(scrollBarWidth - _this.handlerSize);
                _this.scrollHandler = scrollBar.find(".vi-scroll-handler").width(_this.handlerSize).height(scrollBar.outerHeight(true));
            } else {
                _this.limitDistance = Math.round(scrollBarHeight - _this.handlerSize);
                _this.scrollHandler = scrollBar.find(".vi-scroll-handler").height(_this.handlerSize).width(scrollBar.outerWidth(true));
            }

            scrollBar.disableSelection();
            _this._registeDragEvent();
        },
        _registeDragEvent: function () {
            var _this = this,
                setting = _this.setting,
                vars = _this.vars,
                scrollBar = _this.scrollBar,
                scrollHandler = _this.scrollHandler,
                limited = {
                    min: 0,
                    max: _this.limitDistance
                };

            //bind mousedown event
            scrollHandler.bind("mousedown", function (e) {
                scrollBar.disableSelection();
                var dx = null;

                if (setting.direction == vars.direction.horizontal) {
                    dx = {
                        left: $(e.target).position().left,
                        pageX: e.pageX
                    };
                } else {
                    dx = {
                        top: $(e.target).position().top,
                        pageY: e.pageY
                    };
                }

                scrollHandler.css('opacity', 0.8);
                $(document).bind("mousemove", dx, onMoveStart).bind('mouseup', dx, onMoveEnd);
            });

            function onMoveStart(e) {
                scrollBar.disableSelection();
                var dx = e.data;

                var left = Math.min(Math.max(e.pageX - dx.pageX + dx.left, limited.min), limited.max),
                    top = Math.min(Math.max(e.pageY - dx.pageY + dx.top, limited.min), limited.max);

                if (setting.direction == vars.direction.horizontal) {
                    scrollHandler.css({ left: left });
                } else {
                    scrollHandler.css({ top: top });
                }

                if (setting.onChanging && $.isFunction(setting.onChanging)) {
                    if (setting.direction == vars.direction.horizontal) {
                        setting.onChanging(left);
                    } else {
                        setting.onChanging(top);
                    }
                }
            }

            function onMoveEnd(e) {
                scrollBar.disableSelection();

                scrollHandler.css('opacity', 1);
                $(document).unbind("mousemove", onMoveStart).unbind("mouseup", onMoveEnd);

                if (setting.onChanged && $.isFunction(setting.onChanged)) {
                    setting.onChanged();
                }
            }
        },
        getHandlerSize: function () {
            var _this = this,
                setting = _this.setting,
                vars = _this.vars,
                scrollBar = _this.scrollBar,
                maxDistance = _this.setting.maxDistance;

            if (setting.direction == vars.direction.horizontal) {
                var scrollBarWidth = scrollBar.outerWidth(true);
                var handlerWidth = scrollBarWidth / maxDistance * scrollBarWidth;
                handlerWidth = handlerWidth > 20 ? handlerWidth : 20;
                return handlerWidth;
            } else {
                var scrollBarHeight = scrollBar.outerHeight(true);
                var handlerHeight = scrollBarHeight / maxDistance * scrollBarHeight;
                handlerHeight = handlerHeight > 20 ? handlerHeight : 20;
                return handlerHeight;
            }
        },

        scrollTo: function (val, callBack) {
            var _this = this,
                setting = _this.setting,
                vars = _this.vars,
                handler = _this.scrollHandler,
                limited = _this.limitDistance;

            try {
                var moveExpress = null,
                    animateOption = null;

                var moveInstance = setting.direction == vars.direction.horizontal ? handler.position().left : handler.position().top;
                moveExpress = val > 0 ? (limited - moveInstance >= val ? val : limited - moveInstance) : (moveInstance > Math.abs(val) ? val : -moveInstance);

                if (setting.direction == vars.direction.horizontal) {
                    animateOption = { left: "+=" + moveExpress };
                } else {
                    animateOption = { top: "+=" + moveExpress };
                }
                handler.animate(animateOption, {
                    queue: false,
                    duration: setting.animSpeed,
                    easing: 'linear',
                    complete: function () {
                        if (callBack && $.isFunction(callBack)) {
                            callBack();
                        }
                    }
                });
            }
            catch (e) { }
        }
    };

    $.fn.viScrollBar = function (options) {
        return this.each(function (key, value) {
            var element = $(this);
            if (element.data('viScrollBar')) return element.data('viScrollBar');
            // Pass options to plugin constructor
            var viScrollBar = new ViScrollBar(this, options);
            // Store plugin object in this element's data
            element.data('viScrollBar', viScrollBar);
        });
    };

    /**********************************ViRotator*************************************/
    //create the ViRotator class
    var ViRotator = function (element, options) {
        var setting = this.setting = $.extend(this, $.fn.viRotator.defaults, options);

        this.vars = {
            prev: "prev",
            next: "next",
            direction: {
                horizontal: "horizontal",
                vertical: "vertical"
            }
        };

        this.rotator = element;
        this.isHorizontal = setting.direction == this.vars.direction.horizontal;
        this.moveDirection = this.isHorizontal ? "margin-left" : "margin-top";
        this.initialize();
    };

    ViRotator.prototype = {
        initialize: function () {
            var _this = this,
                rotator = _this.rotator,
                setting = _this.setting,
                vars = _this.vars;

            //由于牵涉到拖动的操作，设置元素的不可选操作有助于用户体验，
            //要不会出现选中更多个item的情况，ui变得丑陋
            rotator.disableSelection();
            rotator.addClass("vi-rotator")
                   .children("ul:first")
                   .wrap("<div class=\"vi-rotator-container\">" +
                            "<div class=\"vi-rotator-outer\">" +
                                "<div class=\"vi-rotator-items\"></div>" +
                            "</div>" +
                         "</div>");

            //设置rotator的相关样式，尺寸
            var rotatorItems = _this.rotatorItems = $(".vi-rotator-items", rotator);
            var rotatorOuter = _this.rotatorOuter = $(".vi-rotator-outer", rotator);
            var rotatorItem = _this.rotatorItem = _this._getItem();

            rotatorItem.addClass("vi-rotator-item").css({
                "float": "left"
            });

            if (!_this.isHorizontal) {
                //这里为了解决ul > li的margin-top, margin-bottom样式重叠的bug.
                rotatorItem.css({
                    "clear": "both"
                });
            }

            var itemsWidth = _this._getItemsWidth(),
                itemsHeight = _this._getItemsHeight(),
                containerWidth = _this._getContainerWidth(),
                containerHeight = _this._getContainerHeight();

            //检查是否需要显示操作栏，例如：滚动轴，导航按钮
            var isShowBar = _this.isHorizontal ? itemsWidth > containerWidth : itemsHeight > containerHeight;

            rotatorOuter.width(containerWidth);

            if (_this.isHorizontal) {
                rotatorItems.css({
                    width: itemsWidth,
                    height: _this._getItemHeight(),
                    overflow: 'hidden'
                });
            } else {
                rotatorOuter.css({
                    height: containerHeight,
                    overflow: "hidden"
                });
            }

            //构建滚动轴
            if (setting.scrollBar && isShowBar) {
                _this._buildScrollBar();
            }

            //构建导航
            if (setting.navBar && isShowBar) {
                _this._buildNavControl();
            }

            //注册item的点击事件
            if (setting.itemClick != null && $.isFunction(setting.itemClick)) {
                rotator.delegate(".vi-rotator-item", "click", function () {
                    rotatorItem.removeClass("active");
                    $(this).addClass("active");
                    setting.itemClick($(this));
                });
            }

            //设置默认开始项
            if (setting.startItem == null && $.type(setting.startItem) == "number") {
                if (setting.startItem <= 0) { return; }
                this.setStartItem(setting.startItem);
            }

            //设置自动循环播放
            if (setting.autoPlay) {
                //未实现
            }
        },

        _getContainerWidth: function () {
            var rotator = this.rotator;
            return rotator.outerWidth();
        },

        _getContainerHeight: function () {
            var rotator = this.rotator;
            return rotator.outerHeight();
        },

        _getItem: function () {
            return this.rotator.find(".vi-rotator-items > ul > li");
        },

        _getItemWidth: function () {
            //这里Item的宽度通过样式定义
            return this._getItem().outerWidth(true);
        },

        _getItemHeight: function () {
            //这里Item的高度通过样式定义
            return this._getItem().outerHeight(true);
        },

        _getItemsWidth: function () {
            var itemsWidth = 0;
            this._getItem().each(function (i, n) {
                itemsWidth += $(n).outerWidth(true);
            });

            return itemsWidth;
        },

        _getItemsHeight: function () {
            var itemsHeight = 0;
            this._getItem().each(function (i, n) {
                itemsHeight += $(n).outerHeight(true);
            });

            return itemsHeight;
        },

        _getBarStepDistance: function (moveDistance) {
            var _this = this,
                vars = _this.vars,
                setting = _this.setting,
                containerWidth = _this._getContainerWidth(),
                containerHeight = _this._getContainerHeight(),
                itemsWidth = _this._getItemsWidth(),
                itemsHeight = _this._getItemsHeight();

            if (itemsWidth <= 0 || containerWidth <= 0) {
                return 0;
            }

            if (itemsHeight <= 0 || containerHeight <= 0) {
                return 0;
            }

            if (setting.direction == vars.direction.horizontal) {
                return moveDistance / itemsWidth * containerWidth;
            } else {
                return moveDistance / itemsHeight * containerHeight;
            }
        },

        _buildScrollBar: function () {
            var _this = this,
                vars = _this.vars,
                rotator = _this.rotator,
                setting = _this.setting,
                itemsWidth = _this._getItemsWidth(),
                itemsHeight = _this._getItemsHeight(),
                containerWidth = _this._getContainerWidth(),
                containerHeight = _this._getContainerHeight(),
                moveDistance = setting.moveDistance,
                barStepDistance = _this._getBarStepDistance(moveDistance);

            if ($.fn.viScrollBar) {
                $(".vi-rotator-container", rotator).append("<div class=\"vi-scroll-bar\"></div>");

                var scrollBar = $(".vi-scroll-bar", rotator);
                if (_this.isHorizontal) {
                    scrollBar.addClass(setting.direction);
                    scrollBar.width(containerWidth);
                } else {
                    scrollBar.addClass(setting.direction);
                    var boxWidth = containerWidth - scrollBar.outerWidth(true);
                    _this.rotatorOuter.width(boxWidth);
                    var rotatorItem = _this.rotatorItem;
                    rotatorItem.width(boxWidth - (rotatorItem.outerWidth(true) - rotatorItem.outerWidth()));
                    scrollBar.height(containerHeight);
                }

                scrollBar.viScrollBar({
                    animSpeed: setting.animSpeed,
                    maxDistance: _this.isHorizontal ? itemsWidth : itemsHeight,
                    direction: setting.direction,
                    onChanging: function (e) {
                        if (_this.isHorizontal) {
                            _this.slideAnimate(-itemsWidth / containerWidth * e);
                        } else {
                            _this.slideAnimate(-itemsHeight / containerHeight * e);
                        }
                    }
                });

                var scrollBarObj = scrollBar.data("viScrollBar");
                rotator.delegate(".vi-prev", "click", function (e) {
                    scrollBarObj.scrollTo(barStepDistance, function () { });
                });

                rotator.delegate(".vi-next", "click", function (e) {
                    scrollBarObj.scrollTo(-barStepDistance, function () { });
                });
            }
        },

        _buildNavControl: function () {
            var _this = this,
                vars = _this.vars,
                rotator = _this.rotator,
                setting = _this.setting,
                moveDistance = setting.moveDistance,
                barStepDistance = _this._getBarStepDistance(moveDistance);

            var rotatorOuter = _this.rotatorOuter;
            $("<a href=\"javascript:void(0);\" class=\"vi-prev\">" + setting.prevText + "</a>").insertBefore(rotatorOuter);
            $("<a href=\"javascript:void(0);\" class=\"vi-next\">" + setting.nextText + "</a>").insertAfter(rotatorOuter);

            var prevElement = $(".vi-prev", rotator);
            var nextElement = $(".vi-next", rotator);

            prevElement.addClass(setting.direction);
            nextElement.addClass(setting.direction);

            setting.prevClass && prevElement.addClass(setting.prevClass);
            setting.nextClass && nextElement.addClass(setting.nextClass);

            //注册移动事件
            //计算出能够移动的最大距离
            var maxMoveDistance = _this.isHorizontal ? _this._getItemsWidth() - _this._getContainerWidth() : _this._getItemsHeight() - _this._getContainerHeight();
            var moveDirection = _this.moveDirection;
            var rotatorItems = _this.rotatorItems;

            rotator.delegate(".vi-prev", "click", function (e) {
                var marginDistance = Math.abs(parseFloat(rotatorItems.css(moveDirection)));
                if (maxMoveDistance >= marginDistance) {
                    var prevMoveDistance = Math.min(maxMoveDistance - Math.abs(marginDistance), moveDistance);
                    _this.slideAnimate(prevMoveDistance, vars.prev, e);
                }
            });

            rotator.delegate(".vi-next", "click", function (e) {
                var marginDistance = parseFloat(rotatorItems.css(moveDirection));
                if (maxMoveDistance >= Math.abs(marginDistance) && marginDistance < 0) {
                    var nextMoveDistance = moveDistance;
                    if (Math.floor(maxMoveDistance - Math.abs(marginDistance)) !== 0) {
                        nextMoveDistance = Math.min(Math.abs(marginDistance), moveDistance);;
                    }
                    _this.slideAnimate(nextMoveDistance, vars.next, e);
                }
            });
        },

        slideAnimate: function (moveDistance, moveDirection, e) {
            var _this = this,
                rotator = _this.rotator,
                vars = _this.vars,
                setting = _this.setting,
                rotatorItems = _this.rotatorItems;

            if (setting == null) { setting = $.fn.viRotator.defaults; }

            if (moveDirection == null) {
                rotatorItems.css(_this.moveDirection, moveDistance);
            } else {
                var moveDirect = moveDirection === vars.prev ? '-=' : '+=';

                if (setting.beforeChange && $.isFunction(setting.beforeChange)) {
                    setting.beforeChange.call(_this, moveDirection, e);
                }

                //难点是:如何设置动画结束的逻辑，需要计算当items到达最极限的位置，
                //将不再执行任何动画
                var animateOption = _this.isHorizontal ? { marginLeft: moveDirect + moveDistance } : { marginTop: moveDirect + moveDistance };
                rotatorItems.stop().animate(animateOption, {
                    queue: false,
                    duration: setting.animSpeed,
                    easing: 'linear',
                    complete: function () {
                        if (setting.afterChange && $.isFunction(setting.afterChange)) {
                            setting.afterChange.call(_this, moveDirection, e);
                        }
                    }
                });
            }
        },

        setStartItem: function (index) {
            var _this = this,
                rotator = _this.rotator,
                itemIndex = 0,
                rotatorItemSize = _this._getItem().length;

            if (index > rotatorItemSize) {
                itemIndex = rotatorItemSize - 1;
            } else {
                itemIndex = index > 0 ? index - 1 : 0;
            }
            var currentItem = _this.rotator.find("li:eq(" + itemIndex + ")");
            var scrollLeft = currentItem.position().left;
            _this.slideAnimate(scrollLeft);
        }
    };

    $.fn.viRotator = function (options) {
        return this.each(function (key, value) {
            var element = $(this);
            // Return early if this element already has a plugin instance
            if (element.data('viRotator')) return element.data('viRotator');
            // Pass options to plugin constructor
            var viRotator = new ViRotator(element, options);
            // Store plugin object in this element's data
            element.data('viRotator', viRotator);
        });
    };

    //Default settings
    $.fn.viRotator.defaults = {
        moveDistance: 130,
        startItem: 0,
        animSpeed: 300,
        autoPlay: false, //暂时没有实现
        scrollBar: true,
        navBar: true,
        prevText: 'Prev',
        nextText: 'Next',
        direction: "horizontal",
        itemClick: $.noop(),
        beforeChange: $.noop(),
        afterChange: $.noop()
    };

})(jQuery);