Permalink
Browse files

Swipe Event: made it possible to hook to the start and stop objects a…

…nd swipe event handler to allow custom implementations and extensions. Fixes #2328 - Scrolling up and down causes swipe event
1 parent 9f7cbfc commit 02f332bb38bd09de746ca1d4da64c922c3845061 Alexander Schmitz committed Nov 27, 2012
Showing with 33 additions and 20 deletions.
  1. +33 −20 js/events/touch.js
View
@@ -133,18 +133,43 @@ define( [ "jquery", "../jquery.mobile.vmouse", "../jquery.mobile.support.touch"
verticalDistanceThreshold: 75, // Swipe vertical displacement must be less than this.
+ start: function( event ) {
+ var data = event.originalEvent.touches ?
+ event.originalEvent.touches[ 0 ] : event;
+ return {
+ time: ( new Date() ).getTime(),
+ coords: [ data.pageX, data.pageY ],
+ origin: $( event.target )
+ };
+ },
+
+ stop: function( event ) {
+ var data = event.originalEvent.touches ?
+ event.originalEvent.touches[ 0 ] : event;
+ return {
+ time: ( new Date() ).getTime(),
+ coords: [ data.pageX, data.pageY ]
+ };
+ },
+
+ handleSwipe: function( start, stop ) {
+ if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
+ Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
+ Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
+
+ start.origin.trigger( "swipe" )
+ .trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
+ }
+ },
+
setup: function() {
var thisObject = this,
$this = $( thisObject );
$this.bind( touchStartEvent, function( event ) {
var data = event.originalEvent.touches ?
- event.originalEvent.touches[ 0 ] : event,
- start = {
- time: ( new Date() ).getTime(),
- coords: [ data.pageX, data.pageY ],
- origin: $( event.target )
- },
+ event.originalEvent.touches[ 0 ] : event,
+ start = $.event.special.swipe.start( event ),
stop;
function moveHandler( event ) {
@@ -153,13 +178,7 @@ define( [ "jquery", "../jquery.mobile.vmouse", "../jquery.mobile.support.touch"
return;
}
- var data = event.originalEvent.touches ?
- event.originalEvent.touches[ 0 ] : event;
-
- stop = {
- time: ( new Date() ).getTime(),
- coords: [ data.pageX, data.pageY ]
- };
+ stop = $.event.special.swipe.start( event );
// prevent scrolling
if ( Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.scrollSupressionThreshold ) {
@@ -172,13 +191,7 @@ define( [ "jquery", "../jquery.mobile.vmouse", "../jquery.mobile.support.touch"
$this.unbind( touchMoveEvent, moveHandler );
if ( start && stop ) {
- if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
- Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
- Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
-
- start.origin.trigger( "swipe" )
- .trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
- }
+ $.event.special.swipe.handleSwipe( start, stop );
}
start = stop = undefined;
});

9 comments on commit 02f332b

@kof
kof commented on 02f332b Jun 30, 2013

and now there is no swipeup and swipedown at all?

@arschmitz
Member

there never was a swipe up or swipe down and we do not currently plan on adding it it would make no sense with scrolling it can however be added if you desire and you page does not need to scroll by overwriting the event methods in your mobile init.

@kof
kof commented on 02f332b Jun 30, 2013

it was implemented!

@kof
kof commented on 02f332b Jun 30, 2013

in jQuery Mobile Framework 1.1.1 1981b3f

@arschmitz
Member

that commit is just a version number change in our version.txt?

@kof
kof commented on 02f332b Jun 30, 2013

its from the header of the jquery.mobild.js file I was using, where swipeup and swipedown are implemented, if you look at code older than this commit, I am sure you will find those events, here is a snippet

        $this.bind( touchMoveEvent, moveHandler )
            .one( touchStopEvent, function( event ) {
                $this.unbind( touchMoveEvent, moveHandler );

                var x = Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ),
                    y = Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ),
                    callback = '';

                if ( start && stop ) {
                    if ( stop.time - start.time < $.event.special.swipe.durationThreshold ) {
                        if ( x > 30 && y < 75 ) {
                            callback = start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight";
                        } else if ( x < 75 && y > 30 ) {
                            callback = start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown";
                        }
                    }
                };
                if ( callback ) {
                    start.origin.trigger( "swipe" ).trigger( callback );
                }
                start = stop = undefined;
            });

Its just strange, that a feature is removed without any alternatives provided. The right behaviour in case of scroll event conflict would be to make it configurable whether scoll or swipeup/down should be triggered on a particular element.

@kof
kof commented on 02f332b Jun 30, 2013

Also there should be a conflict with swiperight/left events too, because horizontal scrolling is less popular but still possible and usefull.

@jaspermdegroot
Member

@kof

Here is a link to the uncompressed jQuery Mobile 1.1.1 JS: http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.js. There is no swipeup or swipedown in there.

@kof
kof commented on 02f332b Jun 30, 2013

I can't find it too, it must have been reverted or so .... those I have an 8 months old file with its implementation, here is a gist

https://gist.github.com/kof/5897163

well actually it doesn't matter, the question is what is different on horizontal scrolling compared to vertical scrolling? What enables to implement horizontal swiping but not vertical?

Please sign in to comment.