the-finger/dist/thefinger.min.js

JavaScript library to detect touch gestures: tap, double tap, press, long press, drag, flick, rotate, pinch, spread, pan, two-finger.

var TheFinger=function(){"use strict";var gt=Object.defineProperty;var nt=c=>{throw TypeError(c)};var pt=(c,g,x)=>g in c?gt(c,g,{enumerable:!0,configurable:!0,writable:!0,value:x}):c[g]=x;var ht=(c,g,x)=>pt(c,typeof g!="symbol"?g+"":g,x),tt=(c,g,x)=>g.has(c)||nt("Cannot "+x);var t=(c,g,x)=>(tt(c,g,"read from private field"),x?x.call(c):g.get(c)),d=(c,g,x)=>g.has(c)?nt("Cannot add the same private member more than once"):g instanceof WeakSet?g.add(c):g.set(c,x),l=(c,g,x,m)=>(tt(c,g,"write to private field"),m?m.call(c,x):g.set(c,x),x),u=(c,g,x)=>(tt(c,g,"access private method"),x);var st=(c,g,x,m)=>({set _(k){l(c,g,k,x)},get _(){return t(c,g,m)}});var m,k,T,_,R,z,f,U,N,E,X,j,G,B,K,M,C,S,I,q,w,O,y,P,D,F,b,H,a,rt,lt,at,ot,ct,ut,Z,W,$,it,ft,V,J,dt,et,Q;const c={PRESS_TIME:350,DOUBLE_TAP_INTERVAL:250,FLICK_THRESHOLD:.75,DOUBLE_TAP_DRAG_THRESHOLD:5},g=new WeakMap;class x{constructor(s,i={}){d(this,a);d(this,m);d(this,k);d(this,T);d(this,_,null);d(this,R,!1);d(this,z);d(this,f,{});d(this,U);d(this,N);d(this,E);d(this,X);d(this,j);d(this,G);d(this,B);d(this,K);d(this,M,null);d(this,C,null);d(this,S,0);d(this,I,!1);d(this,q);d(this,w,{});d(this,O,{});d(this,y,new Map);d(this,P,[]);d(this,D);d(this,F,!1);d(this,b,null);ht(this,"gestures",{press:{start:()=>(l(this,_,"press"),{type:"press",data:{x:t(this,E),y:t(this,X)}}),move:()=>{},end:()=>{}},tap:{start:()=>{},move:()=>{clearTimeout(t(this,z))},end:(s,i)=>!t(this,R)&&i-t(this,U)<c.PRESS_TIME?(clearTimeout(t(this,z)),i<t(this,N)+c.DOUBLE_TAP_INTERVAL+c.PRESS_TIME?(l(this,N,null),{type:"double-tap",data:{x:t(this,E),y:t(this,X)}}):(l(this,N,i),{type:"tap",data:{x:t(this,E),y:t(this,X)}})):null},"two-finger-tap":{start:()=>{},move:()=>{},end:(s,i)=>{if(t(this,P).length===2&&!t(this,R)&&i-t(this,U)<c.PRESS_TIME){const e=[...t(this,y).values()].map(n=>({x:n.x[0],y:n.y[0]}));if(e.length===2){const n=(e[0].x+e[1].x)/2,h=(e[0].y+e[1].y)/2;return{type:"two-finger-tap",data:{x:n,y:h,touches:e}}}}return null}},"long-press":{start:(s,i)=>{s.length===1&&l(this,z,setTimeout(()=>{l(this,_,"long-press"),l(this,f,{x:t(this,E),y:t(this,X)}),u(this,a,Q).call(this,"long-press",[t(this,f)])},c.PRESS_TIME))},move:()=>{clearTimeout(t(this,z))},end:()=>{clearTimeout(t(this,z))}},drag:{start:()=>{},move:s=>{if(s.length!==1)return null;const i=s[0],e=i.clientX-t(this,T).left,n=i.clientY-t(this,T).top,{prevX:h,prevY:r}=u(this,a,et).call(this,s,t(this,E),t(this,X));return l(this,f,{x:e,y:n,startX:t(this,E),startY:t(this,X),step:u(this,a,Z).call(this),speed:u(this,a,W).call(this),angle:u(this,a,V).call(this,h,r,e,n)}),t(this,D)||(l(this,D,u(this,a,J).call(this,t(this,E),t(this,X),e,n)),t(this,f).initial_direction=t(this,D)),{type:"drag",data:t(this,f)}},end:()=>{var n,h;if(!t(this,R)||t(this,y).size===0||t(this,_)!=="drag")return null;const s=t(this,y).values().next().value;if(!((n=s==null?void 0:s.x)!=null&&n.length)||!((h=s==null?void 0:s.y)!=null&&h.length))return null;const i=s.x,e=s.y;return l(this,j,i[i.length-1]),l(this,G,e[e.length-1]),t(this,f).endX=t(this,j),t(this,f).endY=t(this,G),t(this,f).speed=u(this,a,W).call(this),t(this,f).initial_direction=t(this,D),i.length>1&&e.length>1&&(t(this,f).final_direction=u(this,a,J).call(this,i[i.length-2],e[e.length-2],t(this,f).endX,t(this,f).endY)),t(this,f).flick=t(this,f).speed>=c.FLICK_THRESHOLD,{type:"drag",data:t(this,f)}}},pan:{start:s=>{if(s.length<2)return null;const{x:i,y:e}=u(this,a,it).call(this,s);l(this,E,i),l(this,X,e)},move:s=>{if(s.length<2)return null;const{x:i,y:e,touchesArr:n}=u(this,a,it).call(this,s),{prevX:h,prevY:r}=u(this,a,et).call(this,s,t(this,E),t(this,X));return l(this,f,{touches:n,x:i,y:e,startX:t(this,E),startY:t(this,X),step:u(this,a,Z).call(this),speed:u(this,a,W).call(this),angle:u(this,a,V).call(this,h,r,i,e)}),t(this,D)||(l(this,D,u(this,a,J).call(this,t(this,E),t(this,X),i,e)),t(this,f).initial_direction=t(this,D)),{type:"pan",data:t(this,f)}},end:()=>{if(t(this,P).length<2||!t(this,R)||t(this,y).size===0)return null;const s=[...t(this,y).values()].map(L=>({x:L.x[L.x.length-1],y:L.y[L.y.length-1]})),i=s.length,e=s.reduce((L,A)=>L+A.x,0)/i,n=s.reduce((L,A)=>L+A.y,0)/i;let h=t(this,f).x||t(this,E),r=t(this,f).y||t(this,X),o=0,p=0,Y=0;for(const[L,A]of t(this,y).entries())A.x.length>=5&&A.y.length>=5&&(o+=A.x[A.x.length-5],p+=A.y[A.y.length-5],Y++);Y>0&&(h=o/Y,r=p/Y);const v=u(this,a,W).call(this);return l(this,f,{touches:s,x:e,y:n,startX:t(this,E),startY:t(this,X),step:u(this,a,Z).call(this),speed:v,angle:u(this,a,V).call(this,h,r,e,n),endX:e,endY:n,initial_direction:t(this,D),final_direction:u(this,a,J).call(this,t(this,E),t(this,X),e,n),flick:v>=c.FLICK_THRESHOLD}),{type:"pan",data:t(this,f)}}},rotate:{start:s=>{if(s.length!==2)return;const[i,e]=s,n=i.clientX,h=i.clientY,r=e.clientX,o=e.clientY;l(this,B,u(this,a,V).call(this,n,h,r,o)),l(this,K,t(this,B)>180?360*t(this,S)+t(this,B)-360:360*t(this,S)+t(this,B))},move:s=>{if(s.length!==2)return null;const[i,e]=s,n=i.clientX,h=i.clientY,r=e.clientX,o=e.clientY,p=u(this,a,V).call(this,n,h,r,o);u(this,a,dt).call(this,p);const Y={touches:[{x:n,y:h},{x:r,y:o}],rotation:t(this,C)-t(this,K),angleAbsolute:p,angleRelative:t(this,C)};return l(this,f,Y),{type:"rotate",data:Y}},end:()=>{}},"pinch-spread":{start:s=>{if(s.length!==2)return;const[i,e]=s,n=i.clientX,h=i.clientY,r=e.clientX,o=e.clientY;l(this,q,u(this,a,$).call(this,n,h,r,o))},move:s=>{if(s.length!==2||!t(this,w)["pinch-spread"])return null;const[i,e]=s,n=i.clientX,h=i.clientY,r=e.clientX,o=e.clientY,p=u(this,a,$).call(this,n,h,r,o),Y=u(this,a,ft).call(this,t(this,q),p),v={touches:[{x:n,y:h},{x:r,y:o}],distance:p,scale:Y};return l(this,f,v),{type:"pinch-spread",data:v}},end:()=>t(this,_)!=="pinch-spread"||!t(this,R)||t(this,y).size===0?null:(t(this,f).end=!0,{type:"pinch-spread",data:t(this,f)})},"double-tap-and-drag":{start:(s,i)=>{if(s.length===1)if(t(this,N)&&i<t(this,N)+c.DOUBLE_TAP_INTERVAL+c.PRESS_TIME){l(this,F,!0);const e=s[0];l(this,b,{x:e.clientX-t(this,T).left,y:e.clientY-t(this,T).top})}else l(this,F,!1)},move:(s,i)=>{if(!t(this,F)||s.length!==1)return null;const e=s[0],n=e.clientX-t(this,T).left,h=e.clientY-t(this,T).top,r=n-t(this,b).x,o=h-t(this,b).y,p=Math.sqrt(r*r+o*o);return p>c.DOUBLE_TAP_DRAG_THRESHOLD?(l(this,_,"double-tap-and-drag"),l(this,f,{x:n,y:h,startX:t(this,b).x,startY:t(this,b).y,dx:r,dy:o,dist:p}),{type:"double-tap-and-drag",data:t(this,f)}):null},end:()=>{l(this,F,!1),l(this,b,null)}}});d(this,H,s=>{var h,r;(h=t(this,k))!=null&&h.preventDefault&&s.preventDefault();const{touches:i,type:e,timeStamp:n}=s;switch(e){case"touchstart":u(this,a,rt).call(this,i,n);break;case"touchmove":u(this,a,lt).call(this,i,n);break;case"touchend":u(this,a,at).call(this,i,n);break}u(this,a,ot).call(this,s),(r=t(this,k))!=null&&r.visualize&&visualize(i)});l(this,m,s),l(this,k,i),s&&this.on(s)}on(s){l(this,m,s),s.addEventListener("touchstart",t(this,H)),s.addEventListener("touchmove",t(this,H)),s.addEventListener("touchend",t(this,H)),g.set(s,{})}off(s){s=s||t(this,m),s.removeEventListener("touchstart",t(this,H)),s.removeEventListener("touchmove",t(this,H)),s.removeEventListener("touchend",t(this,H)),g.delete(s)}track(s,i,e){t(this,w)[s]=i,e&&(e.preventDefault===!0&&(t(this,O)[s]=!0),e.preventDefault==="horizontal"&&(t(this,O)[s]="horizontal"),e.preventDefault==="vertical"&&(t(this,O)[s]="vertical"))}untrack(s){delete t(this,w)[s]}}return m=new WeakMap,k=new WeakMap,T=new WeakMap,_=new WeakMap,R=new WeakMap,z=new WeakMap,f=new WeakMap,U=new WeakMap,N=new WeakMap,E=new WeakMap,X=new WeakMap,j=new WeakMap,G=new WeakMap,B=new WeakMap,K=new WeakMap,M=new WeakMap,C=new WeakMap,S=new WeakMap,I=new WeakMap,q=new WeakMap,w=new WeakMap,O=new WeakMap,y=new WeakMap,P=new WeakMap,D=new WeakMap,F=new WeakMap,b=new WeakMap,H=new WeakMap,a=new WeakSet,rt=function(s,i){l(this,U,i),l(this,M,null),l(this,C,null),l(this,S,0),l(this,I,!1),l(this,_,null),u(this,a,ct).call(this,s,i);const e=Object.values(this.gestures);for(let n=0;n<e.length;n++){const h=e[n];if(h.start){const r=h.start(s,i);r&&(l(this,_,r.type),u(this,a,Q).call(this,r.type,[r.data,t(this,y)]))}}},lt=function(s,i){l(this,R,!0),u(this,a,ut).call(this,s,i);const e=Object.values(this.gestures);for(let n=0;n<e.length;n++){const h=e[n];if(h.move){const r=h.move(s,i);r&&(l(this,_,r.type),u(this,a,Q).call(this,r.type,[r.data,t(this,y)]))}}},at=function(s,i){const e=Object.values(this.gestures);for(let n=0;n<e.length;n++){const h=e[n];if(h.end){const r=h.end(s,i);r&&(l(this,_,r.type),u(this,a,Q).call(this,r.type,[r.data,t(this,y)]))}}s.length===0&&(l(this,y,new Map),l(this,P,[])),l(this,R,!1),l(this,D,null)},ot=function(s){if(t(this,O)[t(this,_)]===!0){s.preventDefault();return}const i=t(this,f).angle;i==null||Number.isNaN(i)||(t(this,O)[t(this,_)]==="horizontal"?(i>45&&i<135||i>225&&i<315)&&s.preventDefault():t(this,O)[t(this,_)]==="vertical"&&(i>315||i<45||i>135&&i<225)&&s.preventDefault())},ct=function(s,i){l(this,T,t(this,m).getBoundingClientRect());for(const e of s){const n=e.identifier;if(!t(this,y).has(n)){const h=e.clientX-t(this,T).left,r=e.clientY-t(this,T).top;l(this,E,h),l(this,X,r),t(this,y).set(n,{x:[h],y:[r],t:[i]}),t(this,P).push(n)}}},ut=function(s,i){if(t(this,y).size!==0)for(const e of s){const n=t(this,y).get(e.identifier);n&&(n.x.push(e.clientX-t(this,T).left),n.y.push(e.clientY-t(this,T).top),n.t.push(i))}},Z=function(){let s=0;const i=t(this,P).length;for(let e=0;e<i;e++){const n=t(this,P)[e],h=t(this,y).get(n);if(h&&h.x.length>1){const r=h.x;s=Math.abs(r[r.length-1]-r[r.length-2]);break}}return s},W=function(){var Y,v,L;const s=t(this,P)[0],i=t(this,y).get(s);if(!((Y=i==null?void 0:i.x)!=null&&Y.length)||!((v=i==null?void 0:i.y)!=null&&v.length)||!((L=i==null?void 0:i.t)!=null&&L.length))return 0;const e=Math.min(5,i.x.length),n=i.x.slice(-e),h=i.y.slice(-e),r=i.t.slice(-e),o=r[r.length-1]-r[0];return o===0?0:u(this,a,$).call(this,n[0],h[0],n[n.length-1],h[h.length-1])/o},$=function(s,i,e,n){return Math.hypot(e-s,n-i)},it=function(s){const i=s.length;let e=0,n=0;for(let o=0;o<i;o++)e+=s[o].clientX-t(this,T).left,n+=s[o].clientY-t(this,T).top;const h=e/i,r=n/i;return{x:h,y:r,touchesArr:Array.from(s).map(o=>({x:o.clientX-t(this,T).left,y:o.clientY-t(this,T).top}))}},ft=function(s,i){return i/s},V=function(s,i,e,n){const h=e-s,r=n-i;let p=Math.atan2(r,h)*180/Math.PI+90;return p<0&&(p+=360),p>360&&(p-=360),p},J=function(s,i,e,n){const h=u(this,a,V).call(this,s,i,e,n);if(h>=315||h<45)return"top";if(h>=45&&h<135)return"right";if(h>=135&&h<225)return"bottom";if(h>=225&&h<315)return"left"},dt=function(s){if(t(this,M)===null){l(this,M,s);return}s-t(this,M)<=-180?t(this,I)?(l(this,S,0),l(this,I,!1)):st(this,S)._++:s-t(this,M)>=180&&(t(this,S)===0&&!t(this,I)?l(this,I,!0):st(this,S)._--),l(this,C,t(this,I)||t(this,S)<0?360*t(this,S)+s-360:360*t(this,S)+s),l(this,M,s)},et=function(s,i,e){let n=i,h=e;if(s.length>1){let r=0,o=0,p=0;for(const Y of s){const v=t(this,y).get(Y.identifier);v&&v.x.length>=5&&v.y.length>=5&&(r+=v.x[v.x.length-5],o+=v.y[v.y.length-5],p++)}if(p>0)return n=r/p,h=o/p,{prevX:n,prevY:h};r=0,o=0,p=0;for(const Y of s){const v=t(this,y).get(Y.identifier);v&&v.x.length>0&&v.y.length>0&&(r+=v.x[0],o+=v.y[0],p++)}p>0&&(n=r/p,h=o/p)}else if(s.length===1){const r=s[0].identifier,o=t(this,y).get(r);o&&o.x.length>1&&o.y.length>1&&(o.x.length>=5?(n=o.x[o.x.length-5],h=o.y[o.y.length-5]):(n=o.x[0],h=o.y[0]))}return{prevX:n,prevY:h}},Q=function(s,i){t(this,y).size>0&&t(this,w)[s]&&t(this,w)[s].apply(this,i)},x}();