avascript手势库代码,Js代码库,德仔网

代码语言
代码分类
【Js】 avascript手势库
作者: / 发布于2017/3/28/ 618
/**
 * Toucher
 * git：https://github.com/cometwo/Toucher-1
 */

"use strict";

(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        define([], function () {
            return factory(root);
        });
    } else {
        root.Toucher = factory(root);
    }
}(window, function (root, undefined) {

    if (!"ontouchstart" in window) {
        return;
    }

    var _wrapped;

    //  获取对象上的类名
    function _typeOf(obj) {
        return Object.prototype.toString.call(obj).toLowerCase().slice(8, -1);
    }

    //  获取当前时间戳
    function getTimeStr() {
        return +(new Date());
    }

    //  获取位置信息
    function getPosInfo(ev) {
        var _touches = ev.touches;
        if (!_touches || _touches.length === 0) {
            return;
        }
        return {
            pageX: ev.touches[0].pageX,
            pageY: ev.touches[0].pageY,
            clientX: ev.touches[0].clientX || 0,
            clientY: ev.touches[0].clientY || 0
        };
    }

    //  绑定事件
    function bindEv(el, type, fn) {
        if (el.addEventListener) {
            el.addEventListener(type, fn, false);
        } else {
            el["on" + type] = fn;
        }
    }

    //  解绑事件
    function unBindEv(el, type, fn) {
        if (el.removeEventListener) {
            el.removeEventListener(type, fn, false);
        } else {
            el["on" + type] = fn;
        }
    }

    //  获得滑动方向
    function getDirection(startX, startY, endX, endY) {
        var xRes = startX - endX;
        var xResAbs = Math.abs(startX - endX);
        var yRes = startY - endY;
        var yResAbs = Math.abs(startY - endY);
        var direction = "";

        if (xResAbs >= yResAbs && xResAbs > 25) {
            direction = (xRes > 0) ? "Right" : "Left";
        } else if (yResAbs > xResAbs && yResAbs > 25) {
            direction = (yRes > 0) ? "Down" : "Up";
        }
        return direction;
    }

    //  取得两点之间直线距离
    function getDistance(startX, startY, endX, endY) {
        return Math.sqrt(Math.pow((startX - endX), 2) + Math.pow((startY - endY), 2));
    }

    function getLength(pos) {
        return Math.sqrt(Math.pow(pos.x, 2) + Math.pow(pos.y, 2));
    }

    function cross(v1, v2) {
        return v1.x * v2.y - v2.x * v1.y;
    }

    //  取向量
    function getVector(startX, startY, endX, endY) {
        return (startX * endX) + (startY * endY);
    }

    //  获取角度
    function getAngle(v1, v2) {
        var mr = getLength(v1) * getLength(v2);
        if (mr === 0) {
            return 0
        }
        ;
        var r = getVector(v1.x, v1.y, v2.x, v2.y) / mr;
        if (r > 1) {
            r = 1;
        }
        return Math.acos(r);
    }

    //  获取旋转的角度
    function getRotateAngle(v1, v2) {
        var angle = getAngle(v1, v2);
        if (cross(v1, v2) > 0) {
            angle *= -1;
        }
        return angle * 180 / Math.PI;
    }

    //  包装一个新的事件对象
    function wrapEvent(ev, obj) {
        var res = {
            touches: ev.touches,
            type: ev.type
        };
        if (_typeOf(obj) === "object") {
            for (var i in obj) {
                res[i] = obj[i];
            }
        }
        return res;
    }

    //  把伪数组转换成数组
    function toArray(list) {
        if (list && (typeof list === "object") && isFinite(list.length) && (list.length >= 0) && (list.length === Math.floor(list.length)) && list.length < 4294967296) {
            return [].slice.call(list);
        }
    }

    //  判断一个元素列表里面是否有多个元素
    function isContain(collection, el) {
        if (arguments.length === 2) {
            return collection.some(function (elItem) {
                return el.isEqualNode(elItem);
            });
        }
        return false;
    }

    //  生成一个随机id
    function uId() {
        return Math.random().toString(16).slice(2);
    }

    //  事件模块
    var Event = (function () {

        var storeEvents = {};

        return {

            //  add an event handle
            add: function (type, el, handler) {
                var selector = el,
                    len = arguments.length,
                    finalObject = {}, _type;
                /**
                 * Event.add("swipe", function() {
                 *      //  ...
                 * });
                 */

                if (_typeOf(el) === "string") {
                    el = document.querySelectorAll(el);
                }

                if (len === 2 && _typeOf(el) === "function") {
                    finalObject = {
                        handler: el
                    };
                } else if (len === 3 && el instanceof HTMLElement || el instanceof NodeList && _typeOf(handler) === "function") {
                    /**
                     * Event.add("swipe", "#div", function(ev) {
                     *      //  ...
                     * });
                     */
                    _type = _typeOf(el);
                    finalObject = {
                        type: _type,
                        selector: selector,
                        el: _type === "nodelist" ? toArray(el) : el,
                        handler: handler
                    };
                }

                if (!storeEvents[type]) {
                    storeEvents[type] = [];
                }

                storeEvents[type].push(finalObject);
            },

            //  remove an event handle
            remove: function (type, selector) {
                var len = arguments.length;
                if (_typeOf(type) === "string" && _typeOf(storeEvents[type]) === "array" && storeEvents[type].length) {
                    if (len === 1) {
                        storeEvents[type] = [];
                    } else if (len === 2) {
                        storeEvents[type] = storeEvents[type].filter(function (item) {
                            return !(item.selector === selector || _typeOf(selector) !== "string" && item.selector.isEqualNode(selector));
                        });
                    }
                }
            },

            //  trigger an event handle
            trigger: function (type, el, argument) {
                var len = arguments.length;

                /**
                 * Event.trigger("swipe", document.querySelector("#div"), {
                 *      //  ...
                 * });
                 */
                if (len === 3 && _typeOf(storeEvents[type]) === "array" && storeEvents[type].length) {
                    storeEvents[type].forEach(function (item) {
                        if (_typeOf(item.handler) === "function") {
                            if (item.type && item.el) {
                                argument.target = el;
                                if (item.type === "nodelist" && isContain(item.el, el)) {
                                    item.handler(argument);
                                } else if (item.el.isEqualNode && item.el.isEqualNode(el)) {
                                    item.handler(argument);
                                }
                            } else {
                                item.handler(argument);
                            }
                        }
                    });
                }
            }
        };
    })();

    //  构造函数
    function Toucher(selector) {
        return new Toucher.fn.init(selector);
    }

    Toucher.fn = Toucher.prototype = {

        //  修改原型构造器
        constructor: Toucher,

        //  初始化方法
        init: function (selector) {
            this.el = selector instanceof HTMLElement ? selector :
                _typeOf(selector) === "string" ? document.querySelector(selector) : null;
            if (_typeOf(this.el) === "null") {
                throw new Error("you must specify a particular selector or a particular DOM object");
            }
            this.scale = 1;
            this.pinchStartLen = null;
            this.isDoubleTap = false;
            this.triggedSwipeStart = false;
            this.triggedLongTap = false;
            this.delta = null;
            this.last = null;
            this.now = null;
            this.tapTimeout = null;
            this.singleTapTimeout = null;
            this.longTapTimeout = null;
            this.swipeTimeout = null;
            this.startPos = {};
            this.endPos = {};
            this.preTapPosition = {};

            this.cfg = {
                doubleTapTime: 400,
                longTapTime: 700
            };

            //  绑定4个事件
            bindEv(this.el, "touchstart", this._start.bind(this));
            bindEv(this.el, "touchmove", this._move.bind(this));
            bindEv(this.el, "touchcancel", this._cancel.bind(this));
            bindEv(this.el, "touchend", this._end.bind(this));
            return this;
        },

        //  提供config方法进行配置
        config: function (option) {
            if (_typeOf(option) !== "object") {
                throw new Error("method Toucher.config must pass in an anguments which is an instance of Object, but passed in " + option.toString());
            }
            for (var i in option) {
                this.cfg[i] = option[i];
            }
            return this;
        },

        //  on方法绑定事件
        /**
         * var toucher = Toucher({...});
         *
         * toucher.on("swipe", function(ev) {
         *     //   ...
         * });
         *
         * //   or
         *
         * toucher.on("tap", "#id", function(ev) {
         *     //   ...
         * });
         *
         * support events: singleTap,longTap,swipe,swipeStart,swipeEnd,swipeUp,swipeRight,swipeDown,swipeLeft,pinch,rotate
         *
         */

        on: function (type, el, callback) {
            var len = arguments.length;
            if(len === 2) {
                Event.add(type, el);
            } else {
                Event.add(type, el, callback);
            }
            return this;
        },

        //  off 解除绑定
        /**
         *  var toucher = Toucher({...});
         *  toucher.off(type);
         *
         *  //  or
         *
         *  toucher.off(type, selector);
         */
        off: function (type, selector) {
            Event.remove(type, selector);
            return this;
        },

        //  手指刚触碰到屏幕
        _start: function (ev) {
            if (!ev.touches || ev.touches.length === 0) {
                return;
            }

            var self = this;
            var otherToucher, v,
                preV = this.preV,
                target = ev.target;

            self.now = getTimeStr();
            self.startPos = getPosInfo(ev);
            self.delta = self.now - (self.last || self.now);
            self.triggedSwipeStart = false;
            self.triggedLongTap = false;

            //  快速双击
            if (JSON.stringify(self.preTapPosition).length > 2 && self.delta < self.cfg.doubleTapTime && getDistance(self.preTapPosition.clientX, self.preTapPosition.clientY, self.startPos.clientX, self.startPos.clientY) < 25) {
                self.isDoubleTap = true;
            }

            //  长按定时
            self.longTapTimeout = setTimeout(function () {
                _wrapped = {
                    el: self.el,
                    type: "longTap",
                    timeStr: getTimeStr(),
                    position: self.startPos
                };
                Event.trigger("longTap", target, _wrapped);
                self.triggedLongTap = true;
            }, self.cfg.longTapTime);

            //  多个手指放到屏幕
            if (ev.touches.length > 1) {
                self._cancelLongTap();
                otherToucher = ev.touches[1];
                v = {
                    x: otherToucher.pageX - self.startPos.pageX,
                    y: otherToucher.pageY - self.startPos.pageY
                };
                this.preV = v;
                self.pinchStartLen = getLength(v);
                self.isDoubleTap = false;
            }

            self.last = self.now;
            self.preTapPosition = self.startPos;

            ev.preventDefault();
        },

        //  手指在屏幕上移动
        _move: function (ev) {
            if (!ev.touches || ev.touches.length === 0) {
                return;
            }

            var v, otherToucher;
            var self = this;
            var len = ev.touches.length;
            var posNow = getPosInfo(ev);
            var preV = self.preV;
            var currentX = posNow.pageX;
            var currentY = posNow.pageY;
            var target = ev.target;

            //  手指移动取消长按事件和双击
            self._cancelLongTap();
            self.isDoubleTap = false;

            //  一次按下抬起只触发一次swipeStart
            if (!self.triggedSwipeStart) {
                _wrapped = {
                    el: self.el,
                    type: "swipeStart",
                    timeStr: getTimeStr(),
                    position: posNow
                };
                Event.trigger("swipeStart", target, _wrapped);
                self.triggedSwipeStart = true;
            } else {
                _wrapped = {
                    el: self.el,
                    type: "swipe",
                    timeStr: getTimeStr(),
                    position: posNow
                };
                Event.trigger("swipe", target, _wrapped);
            }

            if (len > 1) {
                otherToucher = ev.touches[1];
                v = {
                    x: otherToucher.pageX - currentX,
                    y: otherToucher.pageY - currentY
                };

                //  缩放
                _wrapped = wrapEvent(ev, {
                    el: self.el,
                    type: "pinch",
                    scale: getLength(v) / this.pinchStartLen,
                    timeStr: getTimeStr(),
                    position: posNow
                });
                Event.trigger("pinch", target, _wrapped);

                //  旋转
                _wrapped = wrapEvent(ev, {
                    el: self.el,
                    type: "rotate",
                    angle: getRotateAngle(v, preV),
                    timeStr: getTimeStr(),
                    position: posNow
                });
                Event.trigger("rotate", target, _wrapped);
                ev.preventDefault();
            }

            self.endPos = posNow;
        },

        //  触碰取消
        _cancel: function (ev) {
            clearTimeout(this.longTapTimeout);
            clearTimeout(this.tapTimeout);
            clearTimeout(this.swipeTimeout);
            clearTimeout(self.singleTapTimeout);
        },

        //  手指从屏幕离开
        _end: function (ev) {
            if (!ev.changedTouches) {
                return;
            }

            //  取消长按
            this._cancelLongTap();

            var self = this;
            var direction = getDirection(self.endPos.clientX, self.endPos.clientY, self.startPos.clientX, self.startPos.clientY);
            var callback, target = ev.target;

            if (direction !== "") {
                self.swipeTimeout = setTimeout(function () {
                    _wrapped = wrapEvent(ev, {
                        el: self.el,
                        type: "swipe",
                        timeStr: getTimeStr(),
                        position: self.endPos
                    });
                    Event.trigger("swipe", target, _wrapped);

                    //  获取具体的swipeXyz方向
                    callback = self["swipe" + direction];
                    _wrapped = wrapEvent(ev, {
                        el: self.el,
                        type: "swipe" + direction,
                        timeStr: getTimeStr(),
                        position: self.endPos
                    });
                    Event.trigger(("swipe" + direction), target, _wrapped);

                    _wrapped = wrapEvent(ev, {
                        el: self.el,
                        type: "swipeEnd",
                        timeStr: getTimeStr(),
                        position: self.endPos
                    });
                    Event.trigger("swipeEnd", target, _wrapped);
                }, 0);
            } else if (!self.triggedLongTap) {
                self.tapTimeout = setTimeout(function () {
                    if (self.isDoubleTap) {
                        _wrapped = wrapEvent(ev, {
                            el: self.el,
                            type: "doubleTap",
                            timeStr: getTimeStr(),
                            position: self.startPos
                        });
                        Event.trigger("doubleTap", target, _wrapped);
                        clearTimeout(self.singleTapTimeout);
                        self.isDoubleTap = false;
                    } else {
                        self.singleTapTimeout = setTimeout(function () {
                            _wrapped = wrapEvent(ev, {
                                el: self.el,
                                type: "singleTap",
                                timeStr: getTimeStr(),
                                position: self.startPos
                            });
                            Event.trigger("singleTap", target, _wrapped);
                        }, 100);
                    }
                }, 0);
            }

            this.startPos = {};
            this.endPos = {};
        },

        //  取消长按定时器
        _cancelLongTap: function () {
            if (_typeOf(this.longTapTimeout) !== "null") {
                clearTimeout(this.longTapTimeout);
            }
        }
    };

    Toucher.fn.init.prototype = Toucher.fn;

    return Toucher;

}));
试试其它关键字
同语言下
可能有用的
贡献的其它代码Label