Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Swipe Event: made it possible to hook to the start and stop objects a…
Browse files Browse the repository at this point in the history 
…nd swipe event handler to allow custom implementations and extensions. Fixes #2328 - Scrolling up and down causes swipe event
  • Loading branch information
Alexander Schmitz committed Nov 27, 2012
1 parent 9f7cbfc commit 02f332b
Showing 1 changed file with 33 additions and 20 deletions.
53 changes: 33 additions & 20 deletions js/events/touch.js
View file
Expand Up @@ -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 ) {
Expand All @@ -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 ) {
Expand All @@ -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;
});
Expand Down

9 comments on commit 02f332b

@kof
Copy link

@kof kof commented on 02f332b Jun 30, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and now there is no swipeup and swipedown at all?

@arschmitz
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link

@kof kof commented on 02f332b Jun 30, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it was implemented!

@kof
Copy link

@kof kof commented on 02f332b Jun 30, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in jQuery Mobile Framework 1.1.1 1981b3f

@arschmitz
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@kof
Copy link

@kof kof commented on 02f332b Jun 30, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link

@kof kof commented on 02f332b Jun 30, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@jaspermdegroot
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@kof kof commented on 02f332b Jun 30, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.