vuikit/lib/util/touch.js

A responsive Vue UI library for web site interfaces based on UIkit

/**
 * Vuikit 0.8.10
 * (c) 2018 Miljan Aleksic
 * @license MIT
**/

/* Substantial part of the code is adapted from UIkit,
  Copyright (c) 2013-2018 YOOtheme GmbH, getuikit.com */

import { ready } from './dom';
import { within } from './filter';
import { on, trigger } from './event';
import { pointerDown, pointerMove, pointerUp } from './env';

var touch = {}, clickTimeout, swipeTimeout, tapTimeout, clicked;
function swipeDirection (ref) {
  var x1 = ref.x1;
  var x2 = ref.x2;
  var y1 = ref.y1;
  var y2 = ref.y2;
  return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
}
function cancelAll () {
  clickTimeout && clearTimeout(clickTimeout);
  swipeTimeout && clearTimeout(swipeTimeout);
  tapTimeout && clearTimeout(tapTimeout);
  clickTimeout = swipeTimeout = tapTimeout = null;
  touch = {};
}
ready(function () {
  on(document, 'click', function () { return clicked = true; }, true);
  on(document, pointerDown, function (e) {
    var target = e.target;
    var ref = getPos(e);
    var x = ref.x;
    var y = ref.y;
    var now = Date.now();
    var type = getType(e.type);
    if (touch.type && touch.type !== type) {
      return
    }
    touch.el = 'tagName' in target ? target : target.parentNode;
    clickTimeout && clearTimeout(clickTimeout);
    touch.x1 = x;
    touch.y1 = y;
    if (touch.last && now - touch.last <= 250) {
      touch = {};
    }
    touch.type = type;
    touch.last = now;
    clicked = e.button > 0;
  });
  on(document, pointerMove, function (e) {
    if (e.defaultPrevented) {
      return
    }
    var ref = getPos(e);
    var x = ref.x;
    var y = ref.y;
    touch.x2 = x;
    touch.y2 = y;
  });
  on(document, pointerUp, function (ref) {
    var type = ref.type;
    var target = ref.target;
    if (touch.type !== getType(type)) {
      return
    }
    if (touch.x2 && Math.abs(touch.x1 - touch.x2) > 30 || touch.y2 && Math.abs(touch.y1 - touch.y2) > 30) {
      swipeTimeout = setTimeout(function () {
        if (touch.el) {
          trigger(touch.el, 'swipe');
          trigger(touch.el, ("swipe" + (swipeDirection(touch))));
        }
        touch = {};
      });
    } else if ('last' in touch) {
      tapTimeout = setTimeout(function () { return trigger(touch.el, 'tap'); });
      if (touch.el && type !== 'mouseup' && within(target, touch.el)) {
        clickTimeout = setTimeout(function () {
          clickTimeout = null;
          if (touch.el && !clicked) {
            trigger(touch.el, 'click');
          }
          touch = {};
        }, 350);
      }
    } else {
      touch = {};
    }
  });
  on(document, 'touchcancel', cancelAll);
  on(window, 'scroll', cancelAll);
});
var touching = false;
if (typeof document !== 'undefined') {
  on(document, 'touchstart', function () { return touching = true; }, true);
  on(document, 'click', function () { touching = false; });
  on(document, 'touchcancel', function () { return touching = false; }, true);
}
function isTouch (e) {
  return touching || e.pointerType === 'touch'
}
function getPos (e) {
  var touches = e.touches;
  var changedTouches = e.changedTouches;
  var ref = touches && touches[0] || changedTouches && changedTouches[0] || e;
  var x = ref.pageX;
  var y = ref.pageY;
  return {x: x, y: y}
}
function getType (type) {
  return type.slice(0, 5)
}

export { isTouch, getPos };