jucai/public/themes/default/assets/mobile/js/jquery.swipe.js

var isSwipeX = null;
$(function() {
    $.fn.swipe = function(options) {
        var _data = this.data("data");
        if (_data != null) {
            if (_data.index != options.index) {
                this.css({
                    "-webkit-transform": "translate3d(" + options.index * -1 * _data.width + "rem,0,0)"
                })
            }
            this.data("data", $.extend({}, _data, options));
            _data = this.data("data");
            return
        }
        var defaults = {
            index: 0,
            isRem: false
        };
        var opts = $.extend({}, defaults, options);
        this.data("data", opts);
        this.each(function() {
            var that = $(this);
            var _this = $(this)[0];
            var _width = opts.width || parseInt($(this).children().css("width"));
            var sx = 0,
                sy = 0,
                mx = 0,
                my = 0,
                fontNum = 1,
                cRem = "px";
            if (opts.isRem) {
                cRem = "rem";
                fontNum = parseInt($("html").css("font-size"))
            }
            that.css({
                "-webkit-transition-duration": "300ms",
                "-webkit-transition-style": "preserve-3d",
                "-webkit-transition-timing-function": "linear",
                "-webkit-transform": "translate3d(" + opts.index * -1 * opts.width + cRem + ",0,0)"
            });
            _this.addEventListener("touchstart", function(e) {
                sx = e.touches[0].pageX, sy = e.touches[0].pageY, mx = 0, my = 0;
                that.css({
                    "-webkit-transition-duration": "0ms"
                })
            }, false);
            _this.addEventListener("touchmove", function(e) {
                mx = (e.touches[0].pageX - sx) / fontNum, my = (e.touches[0].pageY - sy) / fontNum;
                if (isSwipeX == null) {
                    isSwipeX = Math.abs(mx) > Math.abs(my)
                }
                if (isSwipeX) {
                    e.preventDefault();
                    that.css({
                        "-webkit-transform": "translate3d(" + (opts.index * -1 * opts.width + mx) + cRem + ",0,0)"
                    })
                }
            }, false);
            _this.addEventListener("touchend", function(e) {
                if (isSwipeX) {
                    var num = 45 / fontNum;
                    if (Math.abs(mx) > num) {
                        var _n = that.children(opts.childrenClass).length;
                        if (mx < 0) {
                            if (opts.index < _n - 1) opts.index++
                        } else {
                            if (opts.index > 0) opts.index--
                        }
                    }
                    that.attr("data-indexNum", opts.index);
                    that.css({
                        "-webkit-transition-duration": "200ms",
                        "-webkit-transform": "translate3d(" + opts.index * -1 * opts.width + cRem + ",0,0)"
                    });
                    if (opts.afterSwipe) {
                        opts.afterSwipe(opts.index)
                    }
                }
                isSwipeX = null
            }, false)
        });
        return this
    };
    $.fn.swipeUp = function(options) {
        var _data = this.data("data");
        if (_data != null) {
            if (_data.index != options.index) {
                var _c = this.children(_data.childrenClass);
                _c.css({
                    zIndex: "18",
                    display: "none"
                });
                $(_c.get(options.index)).css({
                    zIndex: "20",
                    display: "block"
                })
            }
            this.data("data", $.extend({}, _data, options));
            _data = this.data("data");
            return
        }
        var defaults = {
            index: 0,
            speed: 300,
            childrenClass: ".house_section"
        };
        var opts = $.extend({}, defaults, options);
        this.data("data", opts);
        return this.each(function() {
            var that = $(this);
            var w = parseInt(that.css("width"));
            var h = parseInt(that.css("height"));
            var o = 0,
                c = "white";
            var childrenObj = that.children(opts.childrenClass);
            if (opts.index >= childrenObj.length) {
                alert("index value is too big.")
            }
            var currObj, prevObj, nextObj;
            var freshObj = function() {
                childrenObj.css({
                    "-webkit-transform": "translate3d(0,0,0)",
                    "-webkit-transition-duration": "0ms",
                    opacity: 1,
                    display: "none"
                });
                currObj = prevObj = nextObj = null;
                if (opts.index < 0) {
                    currObj = $(childrenObj[childrenObj.length - 1]).show().css({
                        zIndex: "20"
                    });
                    opts.index = childrenObj.length - 1
                } else {
                    if (opts.index == childrenObj.length) {
                        currObj = $(childrenObj[0]).show().css({
                            zIndex: "20"
                        });
                        opts.index = 0
                    } else {
                        currObj = $(childrenObj[opts.index]).show().css({
                            zIndex: "20"
                        })
                    }
                }
                if (opts.index > 0) {
                    prevObj = $(childrenObj[opts.index - 1])
                } else {
                    prevObj = $(childrenObj[childrenObj.length - 1])
                }
                if (opts.index < childrenObj.length - 1) {
                    nextObj = $(childrenObj[opts.index + 1])
                } else {
                    if (!currObj.hasClass("isshare_wrap")) {
                        nextObj = $(childrenObj[0])
                    }
                }
            };
            freshObj();
            var startY = 0,
                moveY = 0,
                endY = 0;
            swipeUpFlag = true;
            this.addEventListener("touchstart", function(e) {
                if (!swipeUpFlag) return;
                opts = that.data("data");
                freshObj();
                if (opts.beforeSwipe) {
                    opts.beforeSwipe(opts.index)
                }
                startY = e.touches[0].pageY, endY = 0;
                c = currObj.css("backgroundColor");
                childrenObj.css({
                    "-webkit-transition-duration": "0ms"
                })
            });
            this.addEventListener("touchmove", function(e) {
                if (!swipeUpFlag || isSwipeX != null && isSwipeX != false) return;
                e.preventDefault();
                moveY = e.touches[0].pageY;
                endY = moveY - startY;
                o = Math.abs(endY) / h;
                var e = false;
                if (prevObj) {
                    if (endY > 0) {
                        prevObj.css({
                            zIndex: 18,
                            display: "block",
                            opacity: .5 + o
                        })
                    } else {
                        prevObj.hide()
                    }
                } else if (endY > 0) {
                    e = true
                }
                if (nextObj) {
                    if (endY < 0) {
                        nextObj.css({
                            zIndex: 18,
                            display: "block",
                            opacity: .5 + o
                        })
                    } else {
                        nextObj.hide()
                    }
                } else if (endY < 0) {
                    e = true
                }
                if (e) {
                    o = 0;
                    endY = endY / 2;
                    $("body").css("backgroundColor", c)
                } else {
                    $("body").css("backgroundColor", "white")
                }
                currObj.css({
                    "-webkit-transform": "translate3d(0," + endY + "px,0)",
                    opacity: 1 - o / 2
                })
            });
            this.addEventListener("touchend", function(e) {
                if (!swipeUpFlag || isSwipeX != null && isSwipeX != false) return;
                if (Math.abs(endY) > 0) {
                    childrenObj.css({
                        "-webkit-transition-duration": opts.speed + "ms"
                    });
                    if (Math.abs(endY) < h / 8) {
                        currObj.css({
                            "-webkit-transform": "translate3d(0,0,0)",
                            opacity: 1
                        });
                        if (nextObj) {
                            nextObj.css({
                                display: "none",
                                opacity: 1
                            })
                        }
                    } else {
                        e.preventDefault();
                        var _my = 0;
                        if (endY < 0 && nextObj) {
                            nextObj.css({
                                opacity: 1
                            });
                            opts.index++;
                            _my = -1 * h
                        } else if (endY > 0 && prevObj) {
                            prevObj.css({
                                opacity: 1
                            });
                            opts.index--;
                            _my = h
                        } else {
                            _my = 0
                        }
                        endY = 0;
                        swipeUpFlag = false;
                        currObj.css({
                            "-webkit-transform": "translate3d(0," + _my + "px,0)",
                            opacity: _my == 0 ? 1 : 0,
                            zIndex: 20
                        });
                        setTimeout(function() {
                            freshObj();
                            swipeUpFlag = true;
                            if (opts.afterSwipe) {
                                opts.afterSwipe(opts.index)
                            }
                        }, opts.speed)
                    }
                }
                that.attr("data-indexNum", opts.index)
            });
            if (opts.init) {
                opts.init()
            }
        });
        return this
    }
})