@edgeworkscreative/st-press
Version:
Adds the `onPress` event to your Stencil app. Press is recognized when the pointer is down for 251ms without any movement.
1 lines • 1.14 kB
JavaScript
class PressEvents{constructor(t=251,e=9){this.time=t,this.threshold=e,document.addEventListener("touchstart",this.onStart.bind(this),!0),document.addEventListener("mousedown",this.onStart.bind(this),!0),document.addEventListener("touchend",this.onEnd.bind(this),!0),document.addEventListener("mouseup",this.onEnd.bind(this),!0),document.addEventListener("touchmove",this.onMove.bind(this),!0),document.addEventListener("mousemove",this.onMove.bind(this),!0)}onStart(t){this.hasStarted||(this.moveX=this.startX=t instanceof MouseEvent?t.pageX:t.touches[0].pageX,this.moveY=this.startY=t instanceof MouseEvent?t.pageY:t.touches[0].pageY,setTimeout(()=>{if(this.hasStarted&&Math.abs(this.startX-this.moveX)<=this.threshold&&Math.abs(this.startY-this.moveY)<=this.threshold){const e=t.path;for(let t=0;t<e.length-2;t++){const s=e[t],n=new CustomEvent("press",{bubbles:!1,detail:s});s.dispatchEvent(n)}this.hasStarted=!1}},this.time),this.hasStarted=!0)}onEnd(){this.hasStarted=!1}onMove(t){this.moveX=t instanceof MouseEvent?t.pageX:t.changedTouches[0].pageX,this.moveY=t instanceof MouseEvent?t.pageY:t.changedTouches[0].pageY}}new PressEvents;