All files / src/utils touchHandlers.js

0% Statements 0/37
0% Branches 0/22
0% Functions 0/6
0% Lines 0/30
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49                                                                                                 
import defaults from './defaults';
import { isFunction } from './typeCheckers';
 
export const registerTapOrClick = (element, handler) => {
  if (!element || !element.addEventListener || !isFunction(handler)) return null;
  const registration = {
    touchState: null,
  };
  const onTouchStart = (e) => {
    const t = e.targetTouches[0];
    registration.touchState = {
      started: true,
      startedOn: new Date(),
      startX: t.screenX,
      startY: t.screenY,
      x: t.screenX,
      y: t.screenY,
    };
  };
  const onTouchEnd = (e) => {
    const state = registration.touchState;
    if (!state || !state.started) return;
    const t = e.changedTouches[0];
    state.x = t.screenX;
    state.y = t.screenY;
    state.tapDetected = new Date() - state.startedOn <= defaults.maxTapDuration &&
      Math.abs(state.x - state.startX) <= defaults.maxTapTolerance &&
      Math.abs(state.y - state.startY) <= defaults.maxTapTolerance;
    if (state.tapDetected) {
      handler(e);
    }
    state.started = false;
  };
  const onClick = (e) => {
    const state = registration.touchState;
    if (state && state.tapDetected) return;
    handler(e);
  };
  element.addEventListener('touchstart', onTouchStart);
  element.addEventListener('touchend', onTouchEnd);
  element.addEventListener('click', onClick);
  registration.cleanup = () => {
    element.removeEventListener('touchstart', onTouchStart);
    element.removeEventListener('touchend', onTouchEnd);
    element.removeEventListener('click', onClick);
  };
  return registration;
};