From: Nicolas Coden <nicolas@ncoden.fr>
Date: Wed, 1 Aug 2018 21:09:30 +0000 (+0200)
Subject: fix: fix "tap" event triggering in Touch
X-Git-Tag: v6.6.0~3^2~85^2~8
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e07bd4e;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

fix: fix "tap" event triggering in Touch

The current implementation actually never triggers the "tap" event. This commit refactor its handling to triggers it when the screen is touched without sliding.

Changes:
- Register the `tap` event in jQuery
- Triggers the `tap` event on `mouseend` if no moves were recorded before.
---

diff --git a/js/foundation.util.touch.js b/js/foundation.util.touch.js
index cdc9d07b6..9d0eec908 100644
--- a/js/foundation.util.touch.js
+++ b/js/foundation.util.touch.js
@@ -11,25 +11,33 @@ var startPosX,
     startPosY,
     startTime,
     elapsedTime,
-    isMoving = false;
+    isMoving = false,
+    didMoved = false;
 
 function onTouchEnd() {
-  //  alert(this);
   this.removeEventListener('touchmove', onTouchMove);
   this.removeEventListener('touchend', onTouchEnd);
+
+
+  // If the touch did not moved, consider it as a "tap"
+  if (!didMoved) {
+    $(this).trigger('tap');
+  }
+
   isMoving = false;
+  didMoved = false;
 }
 
 function onTouchMove(e) {
   if ($.spotSwipe.preventDefault) { e.preventDefault(); }
 
-  // Moved: swipe
   if(isMoving) {
     var x = e.touches[0].pageX;
     var y = e.touches[0].pageY;
     var dx = startPosX - x;
     var dy = startPosY - y;
     var dir;
+    didMoved = true;
     elapsedTime = new Date().getTime() - startTime;
     if(Math.abs(dx) >= $.spotSwipe.moveThreshold && elapsedTime <= $.spotSwipe.timeThreshold) {
       dir = dx > 0 ? 'left' : 'right';
@@ -43,18 +51,16 @@ function onTouchMove(e) {
       $(this).trigger('swipe', dir).trigger(`swipe${dir}`);
     }
   }
-  // Otherwise: tap
-  else {
-    $(this).trigger('tap');
-  }
 
 }
 
 function onTouchStart(e) {
+
   if (e.touches.length == 1) {
     startPosX = e.touches[0].pageX;
     startPosY = e.touches[0].pageY;
     isMoving = true;
+    didMoved = false;
     startTime = new Date().getTime();
     this.addEventListener('touchmove', onTouchMove, false);
     this.addEventListener('touchend', onTouchEnd, false);
@@ -83,6 +89,7 @@ class SpotSwipe {
   _init() {
     var $ = this.$;
     $.event.special.swipe = { setup: init };
+    $.event.special.tap = { setup: init };
 
     $.each(['left', 'up', 'down', 'right'], function () {
       $.event.special[`swipe${this}`] = { setup: function(){
@@ -146,7 +153,8 @@ Touch.setupTouchHandler = function($) {
   };
 };
 
-Touch.init = function($) {
+Touch.init = function ($) {
+
   if(typeof($.spotSwipe) === 'undefined') {
     Touch.setupSpotSwipe($);
     Touch.setupTouchHandler($);