UNPKG

zingfinger

Version:

super tiny size multi-touch gestures library for the web

11 lines (10 loc) 8.86 kB
/*! * zingfinger v0.1.0 * * Copyright 2018-2020, ilgei <email@ahthw.com> * Licensed under the MIT license * http://www.opensource.org/licenses/mit-license * */ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.ZingFinger=e()}(this,function(){"use strict";var t=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},e=function(){function t(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}return function(e,i,s){return i&&t(e.prototype,i),s&&t(e,s),e}}(),i=function(t){return Math.sqrt(t.x*t.x+t.y*t.y)},s=function(t,e){var s=function(t,e){var s=i(t)*i(e);if(0===s)return 0;var h=function(t,e){return t.x*e.x+t.y*e.y}(t,e)/s;return h>1&&(h=1),Math.acos(h)}(t,e);return function(t,e){return t.x*e.y-e.x*t.y}(t,e)>0&&(s*=-1),180*s/Math.PI},h=function(t){if(!t)return{x:0,y:0};var e=function(t){var e=t.getBoundingClientRect();return{left:e.left+document.body.scrollLeft,top:e.top+document.body.scrollTop,width:t.offsetWidth,height:t.offsetHeight}}(t),i=e.left+t.getBoundingClientRect().width/2,s=e.top+t.getBoundingClientRect().width/2;return{x:Math.round(i),y:Math.round(s)}},n=function(){function i(e){t(this,i),this.handlers=[],this.el=e}return e(i,[{key:"add",value:function(t){this.handlers.push(t)}},{key:"del",value:function(t){t||(this.handlers=[]);for(var e=this.handlers.length;e>=0;e--)this.handlers[e]===t&&this.handlers.splice(e,1)}},{key:"dispatch",value:function(){for(var t=0,e=this.handlers.length;t<e;t++){var i=this.handlers[t];"function"==typeof i&&i.apply(this.el,arguments)}}}]),i}(),l=function(t){return"string"==typeof t?document.querySelector(t):t},o=function(t,e){var i=new n(t);return i.add(e),i};return function(){function n(e,i,s){t(this,n),this.element=l(e),this.handleEl=l(s),this.start=this.start.bind(this),this.move=this.move.bind(this),this.end=this.end.bind(this),this.cancel=this.cancel.bind(this),this.element.addEventListener("touchstart",this.start,!1),this.element.addEventListener("touchmove",this.move,!1),this.element.addEventListener("touchend",this.end,!1),this.element.addEventListener("touchcancel",this.cancel,!1),this.preV={x:null,y:null},this.pinchStartLen=null,this.zoom=1,this.isDoubleTap=!1;var h=function(){};this.rotate=o(this.element,i.rotate||h),this.singleRotate=o(this.handleEl,i.singleRotate||h),this.touchStart=o(this.element,i.touchStart||h),this.multipointStart=o(this.element,i.multipointStart||h),this.multipointEnd=o(this.element,i.multipointEnd||h),this.pinch=o(this.element,i.pinch||h),this.singlePinch=o(this.handleEl,i.singlePinch||h),this.swipe=o(this.element,i.swipe||h),this.tap=o(this.element,i.tap||h),this.doubleTap=o(this.element,i.doubleTap||h),this.longTap=o(this.element,i.longTap||h),this.singleTap=o(this.element,i.singleTap||h),this.pressMove=o(this.element,i.pressMove||h),this.twoFingerPressMove=o(this.element,i.twoFingerPressMove||h),this.touchMove=o(this.element,i.touchMove||h),this.touchEnd=o(this.element,i.touchEnd||h),this.touchCancel=o(this.element,i.touchCancel||h),this._cancelAllHandler=this.cancelAll.bind(this),window.addEventListener("scroll",this._cancelAllHandler),this.delta=null,this.last=null,this.now=null,this.tapTimeout=null,this.singleTapTimeout=null,this.longTapTimeout=null,this.swipeTimeout=null,this.x1=this.x2=this.y1=this.y2=null,this.preTapPosition={x:null,y:null}}return e(n,[{key:"start",value:function(t){if(t.touches){this.now=Date.now(),this.x1=t.touches[0].pageX,this.y1=t.touches[0].pageY,this.delta=this.now-(this.last||this.now),this.touchStart.dispatch(t,this.element),null!==this.preTapPosition.x&&(this.isDoubleTap=this.delta>0&&this.delta<=250&&Math.abs(this.preTapPosition.x-this.x1)<30&&Math.abs(this.preTapPosition.y-this.y1)<30,this.isDoubleTap&&clearTimeout(this.singleTapTimeout)),this.preTapPosition.x=this.x1,this.preTapPosition.y=this.y1,this.last=this.now;var e=this.preV;if(t.touches.length>1){this._cancelLongTap(),this._cancelSingleTap();var s={x:t.touches[1].pageX-this.x1,y:t.touches[1].pageY-this.y1};e.x=s.x,e.y=s.y,this.pinchStartLen=i(e),this.multipointStart.dispatch(t,this.element)}this._preventTap=!1,this.longTapTimeout=setTimeout(function(){this.longTap.dispatch(t,this.element),this._preventTap=!0}.bind(this),750)}}},{key:"move",value:function(t){if(t.touches){var e=this.preV,n=t.touches.length,l=t.touches[0].pageX,o=t.touches[0].pageY;if(this.isDoubleTap=!1,n>1){var a=t.touches[1].pageX,u=t.touches[1].pageY,r={x:t.touches[1].pageX-l,y:t.touches[1].pageY-o};null!==e.x&&(this.pinchStartLen>0&&(t.zoom=i(r)/this.pinchStartLen,this.pinch.dispatch(t,this.element)),t.angle=s(r,e),this.rotate.dispatch(t,this.element)),e.x=r.x,e.y=r.y,null!==this.x2&&null!==this.sx2?(t.deltaX=(l-this.x2+a-this.sx2)/2,t.deltaY=(o-this.y2+u-this.sy2)/2):(t.deltaX=0,t.deltaY=0),this.twoFingerPressMove.dispatch(t,this.element),this.sx2=a,this.sy2=u}else{if(null!==this.x2){t.deltaX=l-this.x2,t.deltaY=o-this.y2;var c=Math.abs(this.x1-this.x2),p=Math.abs(this.y1-this.y2);(c>10||p>10)&&(this._preventTap=!0)}else t.deltaX=0,t.deltaY=0;if(this.pressMove.dispatch(t,this.element),this.handleEl&&function(t,e){for(var i=e.parentNode;null!=i;){if(i==t)return!0;i=i.parentNode}return!1}(this.element,this.handleEl)&&"true"==this.handleEl.dataset.single&&t.target==this.handleEl){var d=h(this.element),m={x:this.handleEl.offsetLeft-this.handleEl.offsetWidth/4,y:this.handleEl.offsetTop-this.handleEl.offsetHeight/4},T={x:l-m.x,y:o-m.y};e={x:T.x-this.x1,y:T.y-this.y1},this.pinchStartLen=i(e),t.zoom=i(T)/this.pinchStartLen,this.singlePinch.dispatch(t,this.handleEl);var f={x:d.x-l,y:d.y-o};t.angle=s(f,e),e.x=f.x,e.y=f.y,this.singleRotate.dispatch(t,this.handleEl),t.preventDefault()}}this.touchMove.dispatch(t,this.element),this._cancelLongTap(),this.x2=l,this.y2=o,n>1&&t.preventDefault()}}},{key:"end",value:function(t){if(t.changedTouches){this._cancelLongTap();var e=this;t.touches.length<2&&(this.multipointEnd.dispatch(t,this.element),this.sx2=this.sy2=null),this.x2&&Math.abs(this.x1-this.x2)>30||this.y2&&Math.abs(this.y1-this.y2)>30?(t.direction=this._swipeDirection(this.x1,this.x2,this.y1,this.y2),this.swipeTimeout=setTimeout(function(){e.swipe.dispatch(t,e.element)},0)):(this.tapTimeout=setTimeout(function(){e._preventTap||e.tap.dispatch(t,e.element),e.isDoubleTap&&(e.doubleTap.dispatch(t,e.element),e.isDoubleTap=!1)},0),e.isDoubleTap||(e.singleTapTimeout=setTimeout(function(){e.singleTap.dispatch(t,e.element)},250))),this.touchEnd.dispatch(t,this.element),this.preV.x=0,this.preV.y=0,this.zoom=1,this.pinchStartLen=null,this.x1=this.x2=this.y1=this.y2=null}}},{key:"cancelAll",value:function(){this._preventTap=!0,clearTimeout(this.singleTapTimeout),clearTimeout(this.tapTimeout),clearTimeout(this.longTapTimeout),clearTimeout(this.swipeTimeout)}},{key:"cancel",value:function(t){this.cancelAll(),this.touchCancel.dispatch(t,this.element)}},{key:"_cancelLongTap",value:function(){clearTimeout(this.longTapTimeout)}},{key:"_cancelSingleTap",value:function(){clearTimeout(this.singleTapTimeout)}},{key:"_swipeDirection",value:function(t,e,i,s){return Math.abs(t-e)>=Math.abs(i-s)?t-e>0?"Left":"Right":i-s>0?"Up":"Down"}},{key:"on",value:function(t,e){this[t]&&this[t].add(e)}},{key:"off",value:function(t,e){this[t]&&this[t].del(e)}},{key:"destroy",value:function(){return this.singleTapTimeout&&clearTimeout(this.singleTapTimeout),this.tapTimeout&&clearTimeout(this.tapTimeout),this.longTapTimeout&&clearTimeout(this.longTapTimeout),this.swipeTimeout&&clearTimeout(this.swipeTimeout),this.element.removeEventListener("touchstart",this.start),this.element.removeEventListener("touchmove",this.move),this.element.removeEventListener("touchend",this.end),this.element.removeEventListener("touchcancel",this.cancel),this.rotate.del(),this.singleRotate.del(),this.touchStart.del(),this.multipointStart.del(),this.multipointEnd.del(),this.pinch.del(),ths.singlePinch.del(),this.swipe.del(),this.tap.del(),this.doubleTap.del(),this.longTap.del(),this.singleTap.del(),this.pressMove.del(),this.twoFingerPressMove.del(),this.touchMove.del(),this.touchEnd.del(),this.touchCancel.del(),this.preV=this.pinchStartLen=this.zoom=this.isDoubleTap=this.delta=this.last=this.now=this.tapTimeout=this.singleTapTimeout=this.longTapTimeout=this.swipeTimeout=this.x1=this.x2=this.y1=this.y2=this.preTapPosition=this.rotate=this.singleRotate=this.touchStart=this.multipointStart=this.multipointEnd=this.pinch=this.singlePinch=this.swipe=this.tap=this.doubleTap=this.longTap=this.singleTap=this.pressMove=this.touchMove=this.touchEnd=this.touchCancel=this.twoFingerPressMove=null,window.removeEventListener("scroll",this._cancelAllHandler),null}}]),n}()}); //# sourceMappingURL=zingfinger.min.js.map