fixing bugs with swipe and drag

index-dev.html

@@ -62,13 +62,13 @@ <h1>Touch Framework experiments</h1>
 					logger.appendChild(element);
 				}
 
-			touchLayer.unbind(id);
+			//touchLayer.unbind(id);
 		};
 
 		touchLayer.bind('tapstart', target, callback);
 		touchLayer.bind('tapcancel', target, callback);
 
-		id = touchLayer.bind('tap', target, callback);
+		touchLayer.bind('tap', target, callback);
 
 		touchLayer.bind('taphold', target, callback);
 		touchLayer.bind('doubletap', target, callback);

js/DragController.js

@@ -41,16 +41,16 @@ var TouchLayer_DragController = function (options) {
 		if (e.originalEvent) {
 			e = e.originalEvent;
 		}
-		
+
 		if (preventDefault) {
 			e.preventDefault();
 			e.stopPropagation();		
 		}
-		
-		if (e.touches) {
+
+		if (e.touches !== undefined) {
 			startX = previousX = e.touches[0].pageX; 
 			startY = previousY = e.touches[0].pageY;
-		} else if (e.startX && e.startY) {
+		} else if (e.pageX && e.pageY) {
 			startX = previousX = e.pageX;
 			startY = previousY = e.pageY;
 		}
@@ -61,11 +61,12 @@ var TouchLayer_DragController = function (options) {
 	};
 
 	var onTouchMove = function (e) {
+
 		if (startX && startY) {
 			if (e.originalEvent) {
 				e = e.originalEvent;
 			}
-			
+
 			if (preventDefault) {
 				e.preventDefault();
 				e.stopPropagation();		
@@ -140,6 +141,7 @@ var TouchLayer_DragController = function (options) {
 		}
 		dragging = false;
 		touchStart = false;
+		startX = startY = null;
 	};
 
 	mainController.bind(options.el, 'touchstart', onTouchStart, runOnBubble);

js/SwipeController.js

@@ -49,65 +49,75 @@ var TouchLayer_SwipeController = function (options) {
 	};
 
 	var onTouchMove = function (e) {
-		if (e.originalEvent) {
-			e = e.originalEvent;
-		}
-
-		if (preventDefault) {
-			e.preventDefault();
-			e.stopPropagation();
-		}
-
-		var deltaX = null,
-			deltaY = null;
-		if (e.touches) { //e.pageX / pageY give 0 values in android
-			deltaY = e.touches[0].pageY - startY;
-			deltaX = e.touches[0].pageX - startX;	
-		} else if (e.pageX && e.pageY) {
-			deltaY = e.pageY - startY;
-			deltaX = e.pageX - startX;
-		}
-
-		if (deltaX && deltaY) {
-			var absDeltaY = Math.abs(deltaY),
-				absDeltaX = Math.abs(deltaX),
-				deltaTime = e.timeStamp - startTime;
-
-			// If the swipeTime is over, we are not gonna check for it again
-			if (absDeltaY - absDeltaX > 3 || deltaTime > swipeTime) {		
-				stopped = true;
-
-			} else if (absDeltaX > swipeThreshold && absDeltaX > absDeltaY) {
-				// If this is a swipe, a scroll is not possible anymore
-				var info = {
-						direction: (deltaX < 0) ? 'left' : 'right',
-						distance: absDeltaX,
-						deltaTime: deltaTime,
-						deltaX: deltaX,
-						deltaY: deltaY
-					};	
-
-				if (options.eventName === 'swipe') {
-					var data = mainController.makeReturnData(e, options.el, info);
-					mainController.fire('swipe', options.callback, data);
-
-					if (preventDefault) {
-						e.preventDefault();
-						e.stopPropagation();
+
+		if (startX && startY) {
+			if (e.originalEvent) {
+				e = e.originalEvent;
+			}
+
+			if (preventDefault) {
+				e.preventDefault();
+				e.stopPropagation();
+			}
+
+			var deltaX = null,
+				deltaY = null;
+			if (e.touches) { //e.pageX / pageY give 0 values in android
+				deltaY = e.touches[0].pageY - startY;
+				deltaX = e.touches[0].pageX - startX;	
+			} else if (e.pageX && e.pageY) {
+				deltaY = e.pageY - startY;
+				deltaX = e.pageX - startX;
+			}
+
+			if (deltaX && deltaY) {
+				var absDeltaY = Math.abs(deltaY),
+					absDeltaX = Math.abs(deltaX),
+					deltaTime = e.timeStamp - startTime;
+
+				// If the swipeTime is over, we are not gonna check for it again
+				if (absDeltaY - absDeltaX > 3 || deltaTime > swipeTime) {		
+					stopped = true;
+
+				} else if (absDeltaX > swipeThreshold && absDeltaX > absDeltaY) {
+					// If this is a swipe, a scroll is not possible anymore
+					var info = {
+							direction: (deltaX < 0) ? 'left' : 'right',
+							distance: absDeltaX,
+							deltaTime: deltaTime,
+							deltaX: deltaX,
+							deltaY: deltaY
+						};	
+
+					if (options.eventName === 'swipe') {
+						var data = mainController.makeReturnData(e, options.el, info);
+						mainController.fire('swipe', options.callback, data);
+
+						if (preventDefault) {
+							e.preventDefault();
+							e.stopPropagation();
+						}
 					}
+					stopped = true;
 				}
-				stopped = true;
 			}
 		}
 	};
 
+	var onTouchEnd = function () {
+		stopped = true;
+		startX = startY = null;
+	};
+
 	mainController.bind(options.el, 'touchstart', onTouchStart, runOnBubble);
 	mainController.bind(options.el, 'touchmove', onTouchMove, runOnBubble);
+	mainController.bind(options.el, 'touchend', onTouchEnd, runOnBubble);
 
 	return {
 		unbind: function  () {
 			mainController.unbind(options.el, 'touchstart', onTouchStart);
 			mainController.unbind(options.el, 'touchmove', onTouchMove);
+			mainController.unbind(options.el, 'touchend', onTouchEnd);
 		}
 	};
 };