Skip to content
This repository
Browse code

Merge pull request #2015 from mlitwin/bug_1992

Fixes #1992; Swipe threshold constants are configurable
  • Loading branch information...
commit 7b1966c8506b10ab357f446f18637e11bdced6ea 2 parents e567742 + 1ef7313
authored

Showing 1 changed file with 12 additions and 4 deletions. Show diff stats Hide diff stats

  1. 16  js/jquery.mobile.event.js
16  js/jquery.mobile.event.js
@@ -115,6 +115,14 @@ $.event.special.tap = {
115 115
 
116 116
 // also handles swipeleft, swiperight
117 117
 $.event.special.swipe = {
  118
+	scrollSupressionThreshold: 10, // More than this horizontal displacement, and we will suppress scrolling.
  119
+	
  120
+	durationThreshold: 1000, // More time than this, and it isn't a swipe.
  121
+	
  122
+	horizontalDistanceThreshold: 30,  // Swipe horizontal displacement must be more than this.
  123
+	
  124
+	verticalDistanceThreshold: 75,  // Swipe vertical displacement must be less than this.
  125
+
118 126
 	setup: function() {
119 127
 		var thisObject = this,
120 128
 			$this = $( thisObject );
@@ -144,7 +152,7 @@ $.event.special.swipe = {
144 152
 				};
145 153
 
146 154
 				// prevent scrolling
147  
-				if ( Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > 10 ) {
  155
+				if ( Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.scrollSupressionThreshold ) {
148 156
 					event.preventDefault();
149 157
 				}
150 158
 			}
@@ -154,9 +162,9 @@ $.event.special.swipe = {
154 162
 					$this.unbind( touchMoveEvent, moveHandler );
155 163
 
156 164
 					if ( start && stop ) {
157  
-						if ( stop.time - start.time < 1000 &&
158  
-								Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > 30 &&
159  
-								Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < 75 ) {
  165
+						if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
  166
+								Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
  167
+								Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
160 168
 
161 169
 							start.origin.trigger( "swipe" )
162 170
 								.trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );

5 notes on commit 7b1966c

Joe Bergantine

We've had some difficulty understanding the documentation and source code on this and tried illustration so that we could talk about it to each other, we're still not sure if we have it right though. So far it has been a trial and error process. Would love some feedback from any of the contributors on this.

Events

In essence our understanding is that the swipe must break out of the box created by horizontalDistanceThreshold and verticalDistanceThreshold in a horizontal manner. And to scroll there can't be horizontal movement wider than the scrollSupressionThreshold. Is this a correct english interpretation of the math?

Kin Blas

@jbergantine

Basically what the code is trying to say is that if the following constraints were satisfied:

  • Touch event ended before the durationThreshod expired.
  • The x-direction (horizontal) exceeded the horizontalDistanceThreshold
  • The y-direction did NOT stray more than verticalDistanceThreshold from the original y value saved during the touchstart event

then a left/right swipe event is triggered.

In my opinion the scrollSupressionThreshold is un-necessary, and should be removed such that we always prevent the scroll. The reason I say this is because the threshold is 10px which is the same magic number that iOS and Android use to trigger/initiate scrolling. If we don't want scrolling, then we should just preventDefault on every touchmove event.

Joe Bergantine

Thank you! We were pretty close then I guess. scrollSupressionThreshold seems a bit weird still (we're using a number of 100 on that for an app that navigates between long scrolling pages via swipe where most people in our user testing want to be scrolling down the page not swiping on any given movement).

Kin Blas

After thinking about this a bit more, I think we only want to supress scrolling if the user's touch has not exceeded the vertical threshold. Once they exceed this, then we should allow scrolling. This will allow folks to use swipe on longer pages.

Joe Bergantine

FWIW this is the configuration we're currently using:

$.event.special.swipe.scrollSupressionThreshold = 100;
$.event.special.swipe.durationThreshold = 1000;
$.event.special.swipe.horizontalDistanceThreshold = 175;
$.event.special.swipe.verticalDistanceThreshold = 30;

We found the defaults way to prone to cause a swipe instead of a scroll. Additionally, when people got to the bottom of a long scroll the page had a tendency to "jump" to the next page which seemed to be a result of their fingers staying on the page etc.

Please sign in to comment.
Something went wrong with that request. Please try again.