Skip to content

Instantly share code, notes, and snippets.

@chayn1k
Forked from mathiasbynens/README.md
Created May 22, 2013 10:29
Show Gist options
  • Save chayn1k/5626639 to your computer and use it in GitHub Desktop.
Save chayn1k/5626639 to your computer and use it in GitHub Desktop.

Improved swipe gestures plugin for jQuery

What was changed (compared to the original v0.1.2):

  • Don’t modify the default settings internally.
  • Merge the options recursively (deep copy) so that the custom threshold values actually get used.
  • Allow overriding the options globally through $.fn.swipe.options.
  • Use namespaced jQuery events (using the swipe namespace) instead of DOM2 addEventListener to prevent errors in old IEs.
  • Simplified and optimized code.
  • Changed swipeLeft and swipeRight functions to be called within the context of the bound element. Thanks, @kswedberg!

Mathias

/*
* jSwipe - jQuery Plugin
* http://plugins.jquery.com/project/swipe
* http://ryanscherf.com/demos/swipe/
*
* Copyright (c) 2009 Ryan Scherf <http://ryanscherf.com/>
* Modified by Mathias Bynens <http://mathiasbynens.be/>
* Modified by Karl Swedberg <http://learningjquery.com/>
* Licensed under the MIT license
*
* $Date: 2011-05-25 (Wed, 25 May 2011) $
* $version: 0.2.2
*
* This jQuery plugin will work on any device that supports touch events,
* while degrading gracefully (without throwing errors) on others.
*/
(function($) {
$.fn.swipe = function(options) {
// Default thresholds & swipe functions
options = $.extend(true, {}, $.fn.swipe.options, options);
return this.each(function() {
var self = this,
originalCoord = { 'x': 0, 'y': 0 },
finalCoord = { 'x': 0, 'y': 0 };
// Screen touched, store the initial coordinates
function touchStart(event) {
var touch = event.originalEvent.targetTouches[0];
originalCoord.x = touch.pageX;
originalCoord.y = touch.pageY;
}
// Store coordinates as finger is swiping
function touchMove(event) {
var touch = event.originalEvent.targetTouches[0];
finalCoord.x = touch.pageX; // Updated X,Y coordinates
finalCoord.y = touch.pageY;
event.preventDefault();
}
// Done swiping
// Swipe should only be on X axis, ignore if swipe on Y axis
// Calculate if the swipe was left or right
function touchEnd() {
var changeY = originalCoord.y - finalCoord.y,
changeX,
threshold = options.threshold,
y = threshold.y,
x = threshold.x;
if (changeY < y && changeY > (- y)) {
changeX = originalCoord.x - finalCoord.x;
if (changeX > x) {
options.swipeLeft.call(self);
} else if (changeX < (- x)) {
options.swipeRight.call(self);
}
}
}
// Swipe was canceled
function touchCancel() {
//console.log('Canceling swipe gesture…')
}
// Add gestures to all swipable areas
$(self).bind({
'touchstart.swipe': touchStart,
'touchmove.swipe': touchMove,
'touchend.swipe': touchEnd,
'touchcancel.swipe': touchCancel
});
});
};
$.fn.swipe.options = {
'threshold': {
'x': 30,
'y': 10
},
'swipeLeft': function() {
alert('swiped left');
},
'swipeRight': function() {
alert('swiped right');
}
};
}(jQuery));
/*
* jSwipe - jQuery Plugin
* http://plugins.jquery.com/project/swipe
* http://www.ryanscherf.com/demos/swipe/
*
* Copyright (c) 2009 Ryan Scherf (www.ryanscherf.com)
* Licensed under the MIT license
*
* $Date: 2009-07-14 (Tue, 14 Jul 2009) $
* $version: 0.1.2
*
* This jQuery plugin will only run on devices running Mobile Safari
* on iPhone or iPod Touch devices running iPhone OS 2.0 or later.
* http://developer.apple.com/iphone/library/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5
*/
(function($) {
$.fn.swipe = function(options) {
// Default thresholds & swipe functions
var defaults = {
threshold: {
x: 30,
y: 10
},
swipeLeft: function() { alert('swiped left') },
swipeRight: function() { alert('swiped right') }
};
var options = $.extend(defaults, options);
if (!this) return false;
return this.each(function() {
var me = $(this)
// Private variables for each element
var originalCoord = { x: 0, y: 0 }
var finalCoord = { x: 0, y: 0 }
// Screen touched, store the original coordinate
function touchStart(event) {
//console.log('Starting swipe gesture...')
originalCoord.x = event.targetTouches[0].pageX
originalCoord.y = event.targetTouches[0].pageY
}
// Store coordinates as finger is swiping
function touchMove(event) {
event.preventDefault();
finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates
finalCoord.y = event.targetTouches[0].pageY
}
// Done Swiping
// Swipe should only be on X axis, ignore if swipe on Y axis
// Calculate if the swipe was left or right
function touchEnd(event) {
//console.log('Ending swipe gesture...')
var changeY = originalCoord.y - finalCoord.y
if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {
changeX = originalCoord.x - finalCoord.x
if(changeX > defaults.threshold.x) {
defaults.swipeLeft()
}
if(changeX < (defaults.threshold.x*-1)) {
defaults.swipeRight()
}
}
}
// Swipe was started
function touchStart(event) {
//console.log('Starting swipe gesture...')
originalCoord.x = event.targetTouches[0].pageX
originalCoord.y = event.targetTouches[0].pageY
finalCoord.x = originalCoord.x
finalCoord.y = originalCoord.y
}
// Swipe was canceled
function touchCancel(event) {
//console.log('Canceling swipe gesture...')
}
// Add gestures to all swipable areas
this.addEventListener("touchstart", touchStart, false);
this.addEventListener("touchmove", touchMove, false);
this.addEventListener("touchend", touchEnd, false);
this.addEventListener("touchcancel", touchCancel, false);
});
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment