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
  • Loading branch information...
Alexander Schmitz
Alexander Schmitz committed Nov 27, 2012
1 parent 9f7cbfc commit 02f332bb38bd09de746ca1d4da64c922c3845061
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

This comment has been minimized.

Show comment
Hide comment
@kof

kof Jun 30, 2013

and now there is no swipeup and swipedown at all?

kof replied Jun 30, 2013

and now there is no swipeup and swipedown at all?

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jun 30, 2013

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.

Member

arschmitz replied Jun 30, 2013

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

This comment has been minimized.

Show comment
Hide comment
@kof

kof Jun 30, 2013

it was implemented!

kof replied Jun 30, 2013

it was implemented!

@kof

This comment has been minimized.

Show comment
Hide comment
@kof

kof Jun 30, 2013

in jQuery Mobile Framework 1.1.1 1981b3f

kof replied Jun 30, 2013

in jQuery Mobile Framework 1.1.1 1981b3f

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jun 30, 2013

Member

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

Member

arschmitz replied Jun 30, 2013

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

@kof

This comment has been minimized.

Show comment
Hide comment
@kof

kof 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 replied 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

This comment has been minimized.

Show comment
Hide comment
@kof

kof 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.

kof replied 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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 30, 2013

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.

Member

jaspermdegroot replied Jun 30, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@kof

kof 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?

kof replied 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.