mathiasbynens · April 22, 2011 08:06 · May 25, 2011 · May 25, 2011 · May 2, 2011 · Apr 25, 2011
diff --git a/jquery.swipe.js b/jquery.swipe.js
@@ -67,7 +67,7 @@
 			}
 
 			// Add gestures to all swipable areas
-			$(this).bind({
+			$(self).bind({
 				'touchstart.swipe': touchStart,
 				'touchmove.swipe': touchMove,
 				'touchend.swipe': touchEnd,

diff --git a/README.md b/README.md
@@ -1,11 +1,12 @@
 # Improved swipe gestures plugin for jQuery
 
-What I changed (compared to the original v0.1.2):
+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](http://mathiasbynens.be/)_
diff --git a/jquery.swipe.js b/jquery.swipe.js
@@ -5,10 +5,11 @@
  *
  * 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-04-20 (Fri, 22 Apr 2011) $
- * $version: 0.2.0
+ * $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.
@@ -22,7 +23,8 @@
 
 		return this.each(function() {
 
-			var originalCoord = { 'x': 0, 'y': 0 },
+			var self = this,
+                            originalCoord = { 'x': 0, 'y': 0 },
 			    finalCoord = { 'x': 0, 'y': 0 };
 
 			// Screen touched, store the initial coordinates
@@ -52,9 +54,9 @@
 				if (changeY < y && changeY > (- y)) {
 					changeX = originalCoord.x - finalCoord.x;
 					if (changeX > x) {
-						options.swipeLeft()
+						options.swipeLeft.call(self);
 					} else if (changeX < (- x)) {
-						options.swipeRight()
+						options.swipeRight.call(self);
 					}
 				}
 			}

diff --git a/jquery.swipe.js b/jquery.swipe.js
@@ -27,14 +27,14 @@
 
 			// Screen touched, store the initial coordinates
 			function touchStart(event) {
-				var touch = event.targetTouches[0];
+				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.targetTouches[0];
+				var touch = event.originalEvent.targetTouches[0];
 				finalCoord.x = touch.pageX; // Updated X,Y coordinates
 				finalCoord.y = touch.pageY;
 				event.preventDefault();

diff --git a/jquery.swipe.js b/jquery.swipe.js
@@ -26,7 +26,7 @@
 			    finalCoord = { 'x': 0, 'y': 0 };
 
 			// Screen touched, store the initial coordinates
-			function touchStart() {
+			function touchStart(event) {
 				var touch = event.targetTouches[0];
 				originalCoord.x = touch.pageX;
 				originalCoord.y = touch.pageY;

diff --git a/jquery.swipe.js b/jquery.swipe.js
@@ -33,7 +33,7 @@
 			}
 
 			// Store coordinates as finger is swiping
-			function touchMove() {
+			function touchMove(event) {
 				var touch = event.targetTouches[0];
 				finalCoord.x = touch.pageX; // Updated X,Y coordinates
 				finalCoord.y = touch.pageY;

diff --git a/README.md b/README.md
@@ -3,6 +3,7 @@
 What I 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.

diff --git a/README.md b/README.md
@@ -0,0 +1,10 @@
+# Improved swipe gestures plugin for jQuery
+
+What I changed (compared to the original v0.1.2):
+
+* Don’t modify the default settings internally.
+* 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.
+
+_– [Mathias](http://mathiasbynens.be/)_
diff --git a/jquery.swipe.js b/jquery.swipe.js
@@ -0,0 +1,92 @@
+/*
+ * 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/>
+ * Licensed under the MIT license
+ *
+ * $Date: 2011-04-20 (Fri, 22 Apr 2011) $
+ * $version: 0.2.0
+ *
+ * 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 originalCoord = { 'x': 0, 'y': 0 },
+			    finalCoord = { 'x': 0, 'y': 0 };
+
+			// Screen touched, store the initial coordinates
+			function touchStart() {
+				var touch = event.targetTouches[0];
+				originalCoord.x = touch.pageX;
+				originalCoord.y = touch.pageY;
+			}
+
+			// Store coordinates as finger is swiping
+			function touchMove() {
+				var touch = event.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()
+					} else if (changeX < (- x)) {
+						options.swipeRight()
+					}
+				}
+			}
+
+			// Swipe was canceled
+			function touchCancel() {
+				//console.log('Canceling swipe gesture…')
+			}
+
+			// Add gestures to all swipable areas
+			$(this).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));
diff --git a/jquery.swipe.original.js b/jquery.swipe.original.js
@@ -0,0 +1,96 @@
+/*
+ * 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);
No results found