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

Added vertical swipes by separating into 2 functions: horizontalswipe & verticalswipe #5112

Closed
jsmits21 wants to merge 1 commit into from
+79 −11
Closed

Added vertical swipes by separating into 2 functions: horizontalswipe & verticalswipe #5112

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 79 additions & 11 deletions js/events/touch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ define( [ "jquery", "../jquery.mobile.vmouse", "../jquery.mobile.support.touch"
// add new event shortcuts
$.each( ( "touchstart touchmove touchend " +
"tap taphold " +
"swipe swipeleft swiperight " +
"horizontalswipe swipeleft swiperight verticalswipe swipeup swipedown" +
"scrollstart scrollstop" ).split( " " ), function( i, name ) {

$.fn[ name ] = function( fn ) {
Expand Down Expand Up @@ -124,8 +124,8 @@ define( [ "jquery", "../jquery.mobile.vmouse", "../jquery.mobile.support.touch"
};

// also handles swipeleft, swiperight
$.event.special.swipe = {
scrollSupressionThreshold: 30, // More than this horizontal displacement, and we will suppress scrolling.
$.event.special.horizontalswipe = {
scrollSupressionThreshold: 10, // More than this horizontal displacement, and we will suppress scrolling.

durationThreshold: 1000, // More time than this, and it isn't a swipe.

Expand All @@ -139,7 +139,7 @@ define( [ "jquery", "../jquery.mobile.vmouse", "../jquery.mobile.support.touch"

$this.bind( touchStartEvent, function( event ) {
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] : event,
event.originalEvent.touches[ 0 ] : event,
start = {
time: ( new Date() ).getTime(),
coords: [ data.pageX, data.pageY ],
Expand All @@ -154,15 +154,15 @@ define( [ "jquery", "../jquery.mobile.vmouse", "../jquery.mobile.support.touch"
}

var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] : event;
event.originalEvent.touches[ 0 ] : event;

stop = {
time: ( new Date() ).getTime(),
coords: [ data.pageX, data.pageY ]
};

// prevent scrolling
if ( Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.scrollSupressionThreshold ) {
if ( Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.horizontalswipe.scrollSupressionThreshold ) {
event.preventDefault();
}
}
Expand All @@ -172,9 +172,9 @@ 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 ) {
if ( stop.time - start.time < $.event.special.horizontalswipe.durationThreshold &&
Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.horizontalswipe.horizontalDistanceThreshold &&
Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.horizontalswipe.verticalDistanceThreshold ) {

start.origin.trigger( "swipe" )
.trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
Expand All @@ -185,11 +185,79 @@ define( [ "jquery", "../jquery.mobile.vmouse", "../jquery.mobile.support.touch"
});
}
};

// also handles swipeup, swipedown
$.event.special.verticalswipe = {
scrollSupressionThreshold: 30, // More than this vertical displacement, and we will suppress scrolling.

durationThreshold: 1000, // More time than this, and it isn't a swipe.

horizontalDistanceThreshold: 45, // Swipe horizontal displacement must be less than this.

verticalDistanceThreshold: 85, // Swipe vertical displacement must be more than this.

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 )
},
stop;

function moveHandler( event ) {

if ( !start ) {
return;
}

var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] : event;

stop = {
time: ( new Date() ).getTime(),
coords: [ data.pageX, data.pageY ],
};

//console.log("startY:"+start.coords[1]+"ZY:"+stop.coords[1])

// prevent scrolling
if ( Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) > $.event.special.verticalswipe.scrollSupressionThreshold ) {
event.preventDefault();
}
}

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

if ( start && stop ) {
if ( stop.time - start.time < $.event.special.verticalswipe.durationThreshold &&
Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) > $.event.special.verticalswipe.verticalDistanceThreshold &&
Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) < $.event.special.verticalswipe.horizontalDistanceThreshold ) {

start.origin.trigger( "swipe" )
.trigger( start.coords[ 1 ] < stop.coords[ 1 ] ? "swipedown" : "swipeup" );
}
}
start = stop = undefined;
});
});
}
};

$.each({
scrollstop: "scrollstart",
taphold: "tap",
swipeleft: "swipe",
swiperight: "swipe"
swipeleft: "horizontalswipe",
swiperight: "horizontalswipe",
swipeup: "verticalswipe",
swipedown: "verticalswipe"
}, function( event, sourceEvent ) {

$.event.special[ event ] = {
Expand Down