swipeHelper.js 3.25 KB
define(['mUtil', 'hammer'], function (mUtil) {
    return {
        swipe: function ($target, pageid) {
            if ($target.data("swipe-init")) return;

            var $silderHandle = $target.siblings(".wev-slider-handle");
            var swipeWith = $silderHandle.width();

            var mc = new Hammer($target[0]);
            var timestamp;    //时间戳
            var _setTransform = function ($el, x, isNotTransferX) {
                $el.css({
                    "-webkit-transform": "translate3d(" + x + "px, 0, 0)",
                    "transform": "translate3d(" + x + "px, 0, 0)"
                }).attr({
                    "data-transformX-mapping": x
                });

                !isNotTransferX && $el.attr("data-transformX", x);
            };

            $target.data("swipe-init", true);
            mc.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 0 });
            mc.on('panstart', function (ev) {
                timestamp = new Date().valueOf();
                $target.parent().removeClass("wev-transitioning");

                var $others = $target.parent().siblings(".wev-table-view-cell").children("a");
                if(!$others.length){
                    $others = $target.parent().parent().siblings("li").find(".wev-table-view-cell").children("a");
                }
                if (!$others.length) { // 当只有$target一条数据的时候
                    $others = $target;
                }

                _setTransform($others, 0);
            });
            mc.on('panmove', function (ev) {
                var x = ev.deltaX;
                var t_x = $target.attr("data-transformX"), m_x;

                t_x = parseInt(t_x || 0);
                m_x = t_x + x;

                if (m_x > 0) {
                    m_x = 0;
                } else if (m_x < -swipeWith) {
                    m_x = -swipeWith;
                }

                _setTransform($target, m_x, true);
            });
            mc.on('panleft', function (ev) {
                $target.attr("data-swipe-direct", "left");
            });
            mc.on('panright', function (ev) {
                $target.attr("data-swipe-direct", "right");
            });
            mc.on('pancancel', function () {
                _setTransform($target, 0);
            });
            mc.on('panend', function (ev) {
                var direct = $target.attr("data-swipe-direct");
                var mappingX = $target.attr("data-transformX-mapping");

                timestamp = (new Date()).valueOf() - timestamp;
                $target.attr("data-transformX", mappingX).parent().addClass("wev-transitioning");

                // direct != left right
                if (!~["left", "right"].indexOf(direct)) return;

                var axisX = 0;

                if (direct == "left" && timestamp > 50 && Math.abs(mappingX) > $silderHandle.width() / 2) {
                    axisX = $silderHandle.width();
                }

                _setTransform($target, -axisX);
            });

            $silderHandle.on("click", ".btnBox", function () {
                var script = $(this).attr("script");

                mUtil.eval(decodeURIComponent(script), pageid);
                _setTransform($target, 0);
            });
        }
    };
});