mr-tap/dist/mr-tap.min.js

A tap library, abstracts away from mouse/touch providing source agnostic sync access to the user input.

class Tap{constructor(t,s){this._taps=t,this._id=s,this._timestamp=Date.now(),this._sx=0,this._sy=0,this._x=0,this._y=0,this._lx=0,this._ly=0,this._dx=0,this._dy=0,this._mouse=!1,this._button=null,this._start=!0,this._started=!1,this._up=!1,this._click=!1,this._drag=!1,this._dragstart=!1,this._dragend=!1}change(t){this._x=t.clientX,this._y=t.clientY}update(){if(this._start&&!this._started?this._started=!0:this._started&&this._start&&(this._start=!1),this._up)this._taps._index.delete(this._id);else{if(this._dragstart&&(this._dragstart=!1),!this._drag){const t=this._sx-this._x,s=this._sy-this._y;(Math.sqrt(t*t+s*s)>this._taps._dragDistance||Date.now()-this._timestamp>this._taps._dragDelay)&&(this._dragstart=!0,this._drag=!0)}this._release&&(this._down=!1,this._up=!0,this._drag?this._dragend=!0:this._click=!0),this._dx=this._x-this._lx,this._dy=this._y-this._ly,this._lx=this._x,this._ly=this._y}}get id(){return this._id}get start(){return this._start}get up(){return this._up}get click(){return this._click}get dragstart(){return this._dragstart}get drag(){return this._drag}get dragend(){return this._dragend}get timestamp(){return this._timestamp}get mouse(){return this._mouse}get button(){return this._button}get x(){return this._x}get y(){return this._y}get sx(){return this._sx}get sy(){return this._sy}get dx(){return this._dx}get dy(){return this._dy}}class TapMouse{constructor(t){this._taps=t;const s=this._taps._element;s.addEventListener("mousedown",(t=>{this._onMouseDown(t)}),!1),s.addEventListener("mousemove",(t=>{this._onMouseMove(t)}),!1),s.addEventListener("mouseup",(t=>{this._onMouseUp(t)}),!1)}_onMouseDown(t){const s=-t.button-1,e=new Tap(this._taps,s);this._taps._index.set(e.id,e),e.change(t),e._sx=e._lx=e._x,e._sy=e._ly=e._y,e._mouse=!0,e._button=t.button}_onMouseMove(t){for(const s of this._taps._index.values())s.mouse&&s.change(t)}_onMouseUp(t){const s=-t.button-1,e=this._taps._index.get(s);e&&(e.change(t),e._release=!0)}}class TapTouch{constructor(t){this._taps=t;const s=this._taps._element;s.addEventListener("touchstart",(t=>{this._onTouchStart(t)}),!1),s.addEventListener("touchmove",(t=>{this._onTouchMove(t)}),!1),s.addEventListener("touchend",(t=>{this._onTouchEnd(t)}),!1),s.addEventListener("touchcancel",(t=>{this._onTouchEnd(t)}),!1)}_onTouchStart(t){for(let s=0;s<t.changedTouches.length;s++){const e=t.changedTouches[s],i=new Tap(this._taps,e.identifier);this._taps._index.set(i.id,i),i.change(e),i._sx=i._lx=i._x,i._sy=i._ly=i._y}}_onTouchMove(t){for(let s=0;s<t.changedTouches.length;s++){const e=t.changedTouches[s];this._taps._index.get(e.identifier).change(e)}}_onTouchEnd(t){for(let s=0;s<t.changedTouches.length;s++){const e=t.changedTouches[s],i=this._taps._index.get(e.identifier);i.change(e),i._release=!0}}}class Taps{constructor(t=window){this._element=t,this._dragDistance=20,this._dragDelay=200,this._index=new Map,this._mouse=new TapMouse(this),this._touch=new TapTouch(this),window.addEventListener("blur",(()=>{this._onBlur()}),!1),document.addEventListener("visibilitychange",(()=>{this._onBlur()}),!1)}*_iterator(t){for(const[s,e]of this._index)e[t]&&(yield e)}_onBlur(){for(const[t,s]of this._index)s._release=!0}update(){for(const[t,s]of this._index)s.update()}[Symbol.iterator](){return this._index.values()}set dragDistance(t){this._dragDistance=t}get dragDistance(){return this._dragDistance}set dragDelay(t){this._dragDelay=t}get dragDelay(){return this._dragDelay}get start(){return this._iterator("start")}get up(){return this._iterator("up")}get click(){return this._iterator("click")}get dragstart(){return this._iterator("dragstart")}get drag(){return this._iterator("drag")}get dragend(){return this._iterator("dragend")}}