Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

New touch events: swipeUp, swipeDown, longTap #83

Merged
4 commits merged into from

3 participants

Matt D Parker Selbert Thomas Fuchs
Matt D

Seemed like these were missing from touch.js so added them in. I've also updated the touch functional test page to include the new events.

I've tested on a real-life Android 2.2 device and works nicely, but I don't have access to iOS or Web OS so I was unable to verify on those.

Parker Selbert

The issue with swiping up and down on iOS is that you have to prevent the default 'touchmove' behavior or you will simply scroll the page up and down (regardless of length). I'm curious whether these will fire correctly without doing so.

Thomas Fuchs
Owner

I think the longtap event is useful, but i'm unsure about up/down either. The left/right swipes are here so it's easy to implement swipe-to-delete.

More complicated interactions probably require the direct use of touch events; or we could add an other plugin that provides for cross-browser handling of "manipulation" events. However, only iOS supports multi-touch in the browser right now (e.g. for pinch zooming).

Matt D

Ok, appreciate the up-down scroll thing.

Seems a shame to not support up/down though - for example in Web OS as I understand that the "swipe up" gesture is the delete one, whilst on iOS the same semantics is the "swipe sideways" gesture. Simply not implementing swipe-up/down purely because you can implement a known gesture on 1 of the 3 target device platforms seems like a real shame. I guess it depends on your intended use for the library but I assumed (perhaps wrongly) that this library was general purpose, and not just for imitating existing UI patterns.

Simple option would be a way to enable these events if you want them, with a default at off. This would allow the developer to decide if up/down/left/right is applicable to their app and wont add much extra code bloat.

Let me know your thoughts - happy to implement on-off or something more detailed for manipulations if you'd like.

Thomas Fuchs
Owner

It definitely is genera-purpuse. That's one reason why the touch add-ons are in a separate file, so we can eventually build a build system so you can include it or not if needed. Can you make it so that you can turn on/off the up/down swipes? Maybe a flag, e.g. Zepto.enableUpDownSwipe = true; or something like that.

Matt D

Ok I've added in the flag as discussed. As before, tested on a real-life Android 2.2 device, bu not iOS or Web OS

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 23, 2011
  1. Added longTap event and updated test page

    Matt authored
Commits on Feb 5, 2011
  1. Merge https://github.com/madrobby/zepto

    unknown authored
This page is out of date. Refresh to see the latest.
Showing with 27 additions and 5 deletions.
  1. +18 −5 src/touch.js
  2. +9 −0 test/touch_functional.html
23 src/touch.js
View
@@ -1,5 +1,5 @@
(function($){
- var touch = {}, touchTimeout;
+ var touch = {}, touchTimeout, longTapTimeout;
function parentIfText(node){
return 'tagName' in node ? node : node.parentNode;
@@ -11,18 +11,31 @@
touch.target = parentIfText(e.touches[0].target);
touchTimeout && clearTimeout(touchTimeout);
touch.x1 = e.touches[0].pageX;
+ touch.y1 = e.touches[0].pageY;
if (delta > 0 && delta <= 250) touch.isDoubleTap = true;
touch.last = now;
+ longTapTimeout = setTimeout(function(){
+ longTapTimeout = null;
+ $(touch.target).trigger('longTap')
+ touch = {};
+ }, 1000);
}).bind('touchmove', function(e){
touch.x2 = e.touches[0].pageX
+ touch.y2 = e.touches[0].pageY
}).bind('touchend', function(e){
+ clearTimeout(longTapTimeout);
if (touch.isDoubleTap) {
$(touch.target).trigger('doubleTap');
touch = {};
- } else if (touch.x2 > 0) {
+ } else if (touch.x2 > 0 || touch.y2 > 0) {
Math.abs(touch.x1 - touch.x2) > 30 && $(touch.target).trigger('swipe') &&
- $(touch.target).trigger('swipe' + (touch.x1 - touch.x2 > 0 ? 'Left' : 'Right'));
- touch.x1 = touch.x2 = touch.last = 0;
+ $(touch.target).trigger('swipe' + (touch.x1 - touch.x2 > 0 ? 'Left' : 'Right'));
+ touch.x1 = touch.x2 = touch.last = 0
+ if (Zepto.enableUpDownSwipe) {
+ Math.abs(touch.y1 - touch.y2) > 30 && $(touch.target).trigger('swipe') &&
+ $(touch.target).trigger('swipe' + (touch.y1 - touch.y2 > 0 ? 'Up' : 'Down'));
+ touch.y1 = touch.y2 = 0;
+ }
} else if ('last' in touch) {
touchTimeout = setTimeout(function(){
touchTimeout = null;
@@ -33,7 +46,7 @@
}).bind('touchcancel', function(){ touch = {} });
});
- ['swipe', 'swipeLeft', 'swipeRight', 'doubleTap', 'tap'].forEach(function(m){
+ ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'longTap'].forEach(function(m){
$.fn[m] = function(callback){ return this.bind(m, callback) }
});
})(Zepto);
9 test/touch_functional.html
View
@@ -21,6 +21,9 @@
.tap(function(){
$(this).append(' | tap!');
})
+ .longTap(function(){
+ $(this).append(' | long tap!');
+ })
.doubleTap(function(){
$(this).append(' | double tap!');
})
@@ -32,6 +35,12 @@
})
.swipeRight(function(){
$(this).append(' | swipe right!');
+ })
+ .swipeUp(function(){
+ $(this).append(' | swipe up!');
+ })
+ .swipeDown(function(){
+ $(this).append(' | swipe down!');
});
</script>
</body>
Something went wrong with that request. Please try again.