sailun-shop/script/touchSlider.js

(function(E) {
    E.fn.drag = function(L, K, J) {
        if (K) {
            this.bind("dragstart", L)
        }
        if (J) {
            this.bind("dragend", J)
        }
        return !L ? this.trigger("drag") : this.bind("drag", K ? K : L)
    }
    ;
    var A = E.event
      , B = A.special
      , F = B.drag = {
        not: ":input",
        distance: 0,
        which: 1,
        dragging: false,
        setup: function(J) {
            J = E.extend({
                distance: F.distance,
                which: F.which,
                not: F.not
            }, J || {});
            J.distance = I(J.distance);
            A.add(this, "mousedown", H, J);
            if (this.attachEvent) {
                this.attachEvent("ondragstart", D)
            }
        },
        teardown: function() {
            A.remove(this, "mousedown", H);
            if (this === F.dragging) {
                F.dragging = F.proxy = false
            }
            G(this, true);
            if (this.detachEvent) {
                this.detachEvent("ondragstart", D)
            }
        }
    };
    B.dragstart = B.dragend = {
        setup: function() {},
        teardown: function() {}
    };
    function H(L) {
        var K = this, J, M = L.data || {};
        if (M.elem) {
            K = L.dragTarget = M.elem;
            L.dragProxy = F.proxy || K;
            L.cursorOffsetX = M.pageX - M.left;
            L.cursorOffsetY = M.pageY - M.top;
            L.offsetX = L.pageX - L.cursorOffsetX;
            L.offsetY = L.pageY - L.cursorOffsetY
        } else {
            if (F.dragging || (M.which > 0 && L.which != M.which) || E(L.target).is(M.not)) {
                return
            }
        }
        switch (L.type) {
        case "mousedown":
            E.extend(M, E(K).offset(), {
                elem: K,
                target: L.target,
                pageX: L.pageX,
                pageY: L.pageY
            });
            A.add(document, "mousemove mouseup", H, M);
            G(K, false);
            F.dragging = null;
            return false;
        case !F.dragging && "mousemove":
            if (I(L.pageX - M.pageX) + I(L.pageY - M.pageY) < M.distance) {
                break
            }
            L.target = M.target;
            J = C(L, "dragstart", K);
            if (J !== false) {
                F.dragging = K;
                F.proxy = L.dragProxy = E(J || K)[0]
            }
        case "mousemove":
            if (F.dragging) {
                J = C(L, "drag", K);
                if (B.drop) {
                    B.drop.allowed = (J !== false);
                    B.drop.handler(L)
                }
                if (J !== false) {
                    break
                }
                L.type = "mouseup"
            }
        case "mouseup":
            A.remove(document, "mousemove mouseup", H);
            if (F.dragging) {
                if (B.drop) {
                    B.drop.handler(L)
                }
                C(L, "dragend", K)
            }
            G(K, true);
            F.dragging = F.proxy = M.elem = false;
            break
        }
        return true
    }
    function C(M, K, L) {
        M.type = K;
        var J = E.event.handle.call(L, M);
        return J === false ? false : J || M.result
    }
    function I(J) {
        return Math.pow(J, 2)
    }
    function D() {
        return (F.dragging === false)
    }
    function G(K, J) {
        if (!K) {
            return
        }
        K.unselectable = J ? "off" : "on";
        K.onselectstart = function() {
            return J
        }
        ;
        if (K.style) {
            K.style.MozUserSelect = J ? "" : "none"
        }
    }
}
)(jQuery);

(function($) {
    $.fn.touchSlider = function(settings) {
        settings.supportsCssTransitions = (function(style) {
            var prefixes = ['Webkit', 'Moz', 'Ms'];
            for (var i = 0, l = prefixes.length; i < l; i++) {
                if (typeof style[prefixes[i] + 'Transition'] !== 'undefined') {
                    return true;
                }
            }
            return false;
        }
        )(document.createElement('div').style);
        settings = jQuery.extend({
            roll: true,
            flexible: false,
            btn_prev: null,
            btn_next: null,
            paging: null,
            speed: 75,
            view: 1,
            range: 0.15,
            page: 1,
            transition: false,
            initComplete: null,
            counter: null,
            multi: false
        }, settings);
        var opts = [];
        opts = $.extend({}, $.fn.touchSlider.defaults, settings);
        return this.each(function() {
            $.fn.extend(this, touchSlider);
            var _this = this;
            this.opts = opts;
            this._view = this.opts.view;
            this._speed = this.opts.speed;
            this._tg = $(this);
            this._list = this._tg.children().children();
            this._width = parseInt(this._tg.css("width"));
            this._item_w = parseInt(this._list.css("width"));
            this._len = this._list.length;
            this._range = this.opts.range * this._width;
            this._pos = [];
            this._start = [];
            this._startX = 0;
            this._startY = 0;
            this._left = 0;
            this._top = 0;
            this._drag = false;
            this._scroll = false;
            this._btn_prev;
            this._btn_next;
            this.init();
            $(this).bind("touchstart", this.touchstart).bind("touchmove", this.touchmove).bind("touchend", this.touchend).bind("dragstart", this.touchstart).bind("drag", this.touchmove).bind("dragend", this.touchend)
            $(window).bind("orientationchange resize", function() {
                _this.resize(_this);
            });
        });
    }
    ;
    var touchSlider = {
        init: function() {
            var _this = this;
            $(this).children().css({
                "width": this._width + "px",
                "overflow": "visible"
            });
            if (this.opts.flexible)
                this._item_w = this._width / this._view;
            if (this.opts.roll)
                this._len = Math.ceil(this._len / this._view) * this._view;
            var page_gap = (this.opts.page > 1 && this.opts.page <= this._len) ? (this.opts.page - 1) * this._item_w : 0;
            for (var i = 0; i < this._len; ++i) {
                this._pos[i] = this._item_w * i - page_gap;
                this._start[i] = this._pos[i];
                this._list.eq(i).css({
                    "float": "none",
                    "display": "block",
                    "position": "absolute",
                    "top": "0",
                    "left": this._pos[i] + "px",
                    "width": this._item_w + "px"
                });
                if (this.opts.supportsCssTransitions && this.opts.transition) {
                    this._list.eq(i).css({
                        "-moz-transition": "0ms",
                        "-moz-transform": "",
                        "-ms-transition": "0ms",
                        "-ms-transform": "",
                        "-webkit-transition": "0ms",
                        "-webkit-transform": "",
                        "transition": "0ms",
                        "transform": ""
                    });
                }
            }
            if (this.opts.btn_prev && this.opts.btn_next) {
                this.opts.btn_prev.bind("click", function() {
                    _this.animate(1, true);
                    return false;
                })
                this.opts.btn_next.bind("click", function() {
                    _this.animate(-1, true);
                    return false;
                });
            }
            if (this.opts.paging) {
                $(this._list).each(function(i, el) {
                    var btn_page = _this.opts.paging.eq(i);
                    btn_page.bind("click", function(e) {
                        _this.go_page(i, e);
                        return false;
                    });
                });
            }
            this.counter();
            this.initComplete();
        },
        initComplete: function() {
            if (typeof (this.opts.initComplete) == "function") {
                this.opts.initComplete(this);
            }
        },
        resize: function(e) {
            if (e.opts.flexible) {
                var tmp_w = e._item_w;
                e._width = parseInt(e._tg.css("width"));
                e._item_w = e._width / e._view;
                e._range = e.opts.range * e._width;
                for (var i = 0; i < e._len; ++i) {
                    e._pos[i] = e._pos[i] / tmp_w * e._item_w;
                    e._start[i] = e._start[i] / tmp_w * e._item_w;
                    e._list.eq(i).css({
                        "left": e._pos[i] + "px",
                        "width": e._item_w + "px"
                    });
                    if (this.opts.supportsCssTransitions && this.opts.transition) {
                        e._list.eq(i).css({
                            "-moz-transition": "0ms",
                            "-moz-transform": "",
                            "-ms-transition": "0ms",
                            "-ms-transform": "",
                            "-webkit-transition": "0ms",
                            "-webkit-transform": "",
                            "transition": "0ms",
                            "transform": ""
                        });
                    }
                }
            }
            this.counter();
        },
        touchstart: function(e) {
            if ((e.type == "touchstart" && e.originalEvent.touches.length <= 1) || e.type == "dragstart") {
                this._startX = e.pageX || e.originalEvent.touches[0].pageX;
                this._startY = e.pageY || e.originalEvent.touches[0].pageY;
                this._scroll = false;
                this._start = [];
                for (var i = 0; i < this._len; ++i) {
                    this._start[i] = this._pos[i];
                }
            }
        },
        touchmove: function(e) {
            if ((e.type == "touchmove" && e.originalEvent.touches.length <= 1) || e.type == "drag") {
                this._left = (e.pageX || e.originalEvent.touches[0].pageX) - this._startX;
                this._top = (e.pageY || e.originalEvent.touches[0].pageY) - this._startY;
                var w = this._left < 0 ? this._left * -1 : this._left;
                var h = this._top < 0 ? this._top * -1 : this._top;
                if (w < h || this._scroll) {
                    this._left = 0;
                    this._drag = false;
                    this._scroll = true;
                } else {
                    e.preventDefault();
                    this._drag = true;
                    this._scroll = false;
                    this.position(e);
                }
                for (var i = 0; i < this._len; ++i) {
                    var tmp = this._start[i] + this._left;
                    if (this.opts.supportsCssTransitions && this.opts.transition) {
                        var trans = "translate3d(" + tmp + "px,0,0)";
                        this._list.eq(i).css({
                            "left": "",
                            "-moz-transition": "0ms",
                            "-moz-transform": trans,
                            "-ms-transition": "0ms",
                            "-ms-transform": trans,
                            "-webkit-transition": "0ms",
                            "-webkit-transform": trans,
                            "transition": "0ms",
                            "transform": trans
                        });
                    } else {
                        this._list.eq(i).css("left", tmp + "px");
                    }
                    this._pos[i] = tmp;
                }
            }
        },
        touchend: function(e) {
            if ((e.type == "touchend" && e.originalEvent.touches.length <= 1) || e.type == "dragend") {
                if (this._scroll) {
                    this._drag = false;
                    this._scroll = false;
                    return false;
                }
                this.animate(this.direction());
                this._drag = false;
                this._scroll = false;
            }
        },
        position: function(d) {
            var gap = this._view * this._item_w;
            if (d == -1 || d == 1) {
                this._startX = 0;
                this._start = [];
                for (var i = 0; i < this._len; ++i) {
                    this._start[i] = this._pos[i];
                }
                this._left = d * gap;
            } else {
                if (this._left > gap)
                    this._left = gap;
                if (this._left < -gap)
                    this._left = -gap;
            }
            if (this.opts.roll) {
                var tmp_pos = [];
                for (var i = 0; i < this._len; ++i) {
                    tmp_pos[i] = this._pos[i];
                }
                tmp_pos.sort(function(a, b) {
                    return a - b;
                });
                var max_chk = tmp_pos[this._len - this._view];
                var p_min = $.inArray(tmp_pos[0], this._pos);
                var p_max = $.inArray(max_chk, this._pos);
                if (this._view <= 1)
                    max_chk = this._len - 1;
                if (this.opts.multi) {
                    if ((d == 1 && tmp_pos[0] >= 0) || (this._drag && tmp_pos[0] >= 100)) {
                        for (var i = 0; i < this._view; ++i,
                        ++p_min,
                        ++p_max) {
                            this._start[p_max] = this._start[p_min] - gap;
                            this._list.eq(p_max).css("left", this._start[p_max] + "px");
                        }
                    } else if ((d == -1 && tmp_pos[0] <= 0) || (this._drag && tmp_pos[0] <= -100)) {
                        for (var i = 0; i < this._view; ++i,
                        ++p_min,
                        ++p_max) {
                            this._start[p_min] = this._start[p_max] + gap;
                            this._list.eq(p_min).css("left", this._start[p_min] + "px");
                        }
                    }
                } else {
                    if ((d == 1 && tmp_pos[0] >= 0) || (this._drag && tmp_pos[0] > 0)) {
                        for (var i = 0; i < this._view; ++i,
                        ++p_min,
                        ++p_max) {
                            this._start[p_max] = this._start[p_min] - gap;
                            this._list.eq(p_max).css("left", this._start[p_max] + "px");
                        }
                    } else if ((d == -1 && tmp_pos[max_chk] <= 0) || (this._drag && tmp_pos[max_chk] <= 0)) {
                        for (var i = 0; i < this._view; ++i,
                        ++p_min,
                        ++p_max) {
                            this._start[p_min] = this._start[p_max] + gap;
                            this._list.eq(p_min).css("left", this._start[p_min] + "px");
                        }
                    }
                }
            } else {
                if (this.limit_chk())
                    this._left = this._left / 2;
            }
        },
        animate: function(d, btn_click) {
            if (this._drag || !this._scroll || btn_click) {
                var _this = this;
                var speed = this._speed;
                if (btn_click)
                    this.position(d);
                var gap = d * (this._item_w * this._view);
                if (this._left == 0 || (!this.opts.roll && this.limit_chk()))
                    gap = 0;
                this._list.each(function(i, el) {
                    _this._pos[i] = _this._start[i] + gap;
                    if (_this.opts.supportsCssTransitions && _this.opts.transition) {
                        var transition = speed + "ms";
                        var transform = "translate3d(" + _this._pos[i] + "px,0,0)";
                        if (btn_click)
                            transition = "0ms";
                        $(this).css({
                            "left": "",
                            "-moz-transition": transition,
                            "-moz-transform": transform,
                            "-ms-transition": transition,
                            "-ms-transform": transform,
                            "-webkit-transition": transition,
                            "-webkit-transform": transform,
                            "transition": transition,
                            "transform": transform
                        });
                    } else {
                        $(this).stop();
                        $(this).animate({
                            "left": _this._pos[i] + "px"
                        }, speed);
                    }
                });
                this.counter();
            }
        },
        direction: function() {
            var r = 0;
            if (this._left < -(this._range))
                r = -1;
            else if (this._left > this._range)
                r = 1;
            if (!this._drag || this._scroll)
                r = 0;
            return r;
        },
        limit_chk: function() {
            var last_p = parseInt((this._len - 1) / this._view) * this._view;
            return ((this._start[0] == 0 && this._left > 0) || (this._start[last_p] == 0 && this._left < 0));
        },
        go_page: function(i, e) {
            var crt = ($.inArray(0, this._pos) / this._view) + 1;
            var cal = crt - (i + 1);
            while (cal != 0) {
                if (cal < 0) {
                    this.animate(-1, true);
                    cal++;
                } else if (cal > 0) {
                    this.animate(1, true);
                    cal--;
                }
            }
        },
        counter: function() {
            if (typeof (this.opts.counter) == "function") {
                var param = {
                    total: Math.ceil(this._len / this._view),
                    current: ($.inArray(0, this._pos) / this._view) + 1
                };
                this.opts.counter(param);
            }
        }
    };
}
)(jQuery);