start to refactor touch.js and add more tests (test for madrobby#454 …

…is failing for now)

src/touch.js

@@ -24,9 +24,17 @@
     }
   }
 
+  function cancelLongTap(){
+    if (longTapTimeout) clearTimeout(longTapTimeout)
+    longTapTimeout = null
+  }
+
   $(document).ready(function(){
+    var now, delta
+
     $(document.body).bind('touchstart', function(e){
-      var now = Date.now(), delta = now - (touch.last || now)
+      now = Date.now()
+      delta = now - (touch.last || now)
       touch.el = $(parentIfText(e.touches[0].target))
       touchTimeout && clearTimeout(touchTimeout)
       touch.x1 = e.touches[0].pageX
@@ -35,21 +43,25 @@
       touch.last = now
       longTapTimeout = setTimeout(longTap, longTapDelay)
     }).bind('touchmove', function(e){
-      if (longTapTimeout) clearTimeout(longTapTimeout)
-      longTapTimeout = null
+      cancelLongTap()
       touch.x2 = e.touches[0].pageX
       touch.y2 = e.touches[0].pageY
     }).bind('touchend', function(e){
-      if (longTapTimeout) clearTimeout(longTapTimeout)
-      longTapTimeout = null
+       cancelLongTap()
+
+      // double tap (tapped twice within 250ms)
       if (touch.isDoubleTap) {
         touch.el.trigger('doubleTap')
         touch = {}
+
+      // swipe
       } else if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
                  (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30)) {
         touch.el.trigger('swipe') &&
           touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
-        touch.x1 = touch.x2 = touch.y1 = touch.y2 = touch.last = 0
+        touch = {}
+
+      // normal tap
       } else if ('last' in touch) {
         touch.el.trigger('tap')
 
@@ -59,7 +71,12 @@
           touch = {}
         }, 250)
       }
-    }).bind('touchcancel', function(){ touch = {} })
+    }).bind('touchcancel', function(){
+      if (touchTimeout) clearTimeout(touchTimeout)
+      if (longTapTimeout) clearTimeout(longTapTimeout)
+      longTapTimeout = touchTimeout = null
+      touch = {}
+    })
   })
 
   ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(m){

test/touch.html

@@ -82,6 +82,33 @@ <h1>Touch tests</h1>
         t.assertEqual(1, count)
       },
 
+      testSingleTapDoesNotInterfereWithTappingTwice: function(t){
+        var count = 0, element = $('#test').get(0)
+
+        $('#test').on('tap', function(){
+          count++
+        })
+
+        down(element, 10, 10)
+        up(element)
+
+        t.pause()
+        setTimeout(function(){
+          down(element, 10, 10)
+
+          t.resume(function(){
+            t.pause()
+
+            setTimeout(function(){
+              up(element)
+              t.resume(function(){
+                t.assertEqual(2, count)
+              })
+            }, 200)
+          })
+        }, 200)
+      },
+
       // should be fired if there is one tap within 250ms
       testSingleTap: function(t){
         var singleCount = 0, doubleCount = 0, element = $('#test').get(0)
@@ -129,6 +156,50 @@ <h1>Touch tests</h1>
         }, 100)
       },
 
+      // should be fired if the finger is down in the same location for >750ms
+      testLongTap: function(t){
+        var count = 0, element = $('#test').get(0)
+
+        $('#test').on('longTap', function(){
+          count++
+        })
+
+        down(element, 10, 10)
+
+        t.pause()
+        setTimeout(function(){
+          up(element)
+
+          t.resume(function(){
+            t.assertEqual(1, count)
+          })
+        }, 900)
+      },
+
+      testLongTapDoesNotFireIfFingerIsMoved: function(t){
+        var count = 0, element = $('#test').get(0)
+
+        $('#test').on('longTap', function(){
+          count++
+        })
+
+        down(element, 10, 10)
+
+        t.pause()
+        setTimeout(function(){
+          move(element, 50, 10)
+          t.resume(function(){
+            t.pause()
+            setTimeout(function(){
+              up(element)
+              t.resume(function(){
+                t.assertEqual(0, count)
+              })
+            }, 450)
+          })
+        }, 450)
+      },
+
       testSwipe: function(t){
         var swipeCount = 0, element = $('#test').get(0)
 
@@ -150,7 +221,6 @@ <h1>Touch tests</h1>
       }
 
       // TODO: test swipes in specific directions
-      // TODO: test longTap
     })
 
   })()