From ce2a4ea613fb00580f38f9f84ed75ac60de5663c Mon Sep 17 00:00:00 2001 From: Thomas Fuchs Date: Sun, 8 Apr 2012 21:54:42 +0200 Subject: [PATCH] start to refactor touch.js and add more tests (test for #454 is failing for now) --- src/touch.js | 31 ++++++++++++++++----- test/touch.html | 72 ++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 95 insertions(+), 8 deletions(-) diff --git a/src/touch.js b/src/touch.js index 286995d95..c31595089 100644 --- a/src/touch.js +++ b/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){ diff --git a/test/touch.html b/test/touch.html index 898a82ef9..97507caf5 100644 --- a/test/touch.html +++ b/test/touch.html @@ -82,6 +82,33 @@

Touch tests

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 @@

Touch tests

}, 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 @@

Touch tests

} // TODO: test swipes in specific directions - // TODO: test longTap }) })()