adding unbind functionality

andyjamesdavies · Apr 11, 2012 · c2e021d · c2e021d
1 parent 176a14b
commit c2e021d
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 109 deletions.
diff --git a/index-dev.html b/index-dev.html
@@ -30,7 +30,7 @@
   <script type="text/javascript" src="js/TapController.js"></script>
   <script type="text/javascript" src="js/DragController.js"></script>
   <script type="text/javascript" src="js/SwipeController.js"></script>
-  <script type="text/javascript" src="js/TouchLayer.js"></script>
+  <script type="text/javascript" src="js/touchLayer.js"></script>
 </head>
 <body>
 	<h1>Touch Framework experiments</h1>
@@ -42,9 +42,11 @@ <h1>Touch Framework experiments</h1>
 		var logger = document.getElementById('logger');
 		var target = document.getElementById('triggerArea');
 		var touchLayer = new TouchLayer();
-
+		var id = 0;
+
 		var callback = function(event) {
 			console.log(event);
+
 			var element = document.createElement('li'),
 				str = event.type;
 
@@ -59,11 +61,15 @@ <h1>Touch Framework experiments</h1>
 				} else {
 					logger.appendChild(element);
 				}
+
+			touchLayer.unbind(id);
 		};
 
 		touchLayer.bind('tapstart', target, callback);
 		touchLayer.bind('tapcancel', target, callback);
-		touchLayer.bind('tap', target, callback);
+
+		id = touchLayer.bind('tap', target, callback);
+
 		touchLayer.bind('taphold', target, callback);
 		touchLayer.bind('doubletap', target, callback);
 		touchLayer.bind('singletap', target, callback);

diff --git a/js/DragController.js b/js/DragController.js
@@ -145,110 +145,12 @@ var TouchLayer_DragController = function (options) {
 	mainController.bind(options.el, 'touchstart', onTouchStart, runOnBubble);
 	mainController.bind(options.el, 'touchmove', onTouchMove, runOnBubble);
 	mainController.bind(options.el, 'touchend', onTouchEnd, runOnBubble);
-};
-/*jslint eqeqeq: true, undef: true */
-/*global document, TouchLayer_Controller, setTimeout, clearTimeout */
-/*
- * Borrows Heavily from Sencha Touch v1.1.1 Tap.js
- * @author andyjamesdavies
- * @created 2012-02-06 
- */
-var TouchLayer_SwipeController = function (options) {
-
-	if (!options.eventName || !options.el || !options.callback) {
-		return;
-	}
-
-	var mainController = new TouchLayer_Controller(),
-	runOnBubble = false,
-	startTime = null,
-	startX = null,
-	startY = null,
-	swipeThreshold = 35,
-	swipeTime = 1000,
-	stopped = false,
-	preventDefault = true;
-
-	if (options.preventDefault !== undefined) {
-		preventDefault = options.preventDefault;
-	}
-
-	var onTouchStart = function (e) {
-
-		if (e.originalEvent) {
-			e = e.originalEvent;
-		}
-
-		if (preventDefault) {
-			e.preventDefault();
-			e.stopPropagation();		
-		}
-
-		if (e.touches) { //e.pageX / pageY give 0 values in android
-			startX = e.touches[0].pageX;
-			startY = e.touches[0].pageY;
-		} else if (e.pageX && e.pageY) {
-			startX = e.pageX;
-			startY = e.pageY;
-		}
-
-		startTime = e.timeStamp;
-		stopped = false;
-	};
-
-	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();
-					}
-				}
-				stopped = true;
-			}
+
+	return {
+		unbind: function  () {
+			mainController.unbind(options.el, 'touchstart', onTouchStart);
+			mainController.unbind(options.el, 'touchmove', onTouchMove);
+			mainController.unbind(options.el, 'touchend', onTouchEnd);
 		}
 	};
-
-	mainController.bind(options.el, 'touchstart', onTouchStart, runOnBubble);
-	mainController.bind(options.el, 'touchmove', onTouchMove, runOnBubble);
 };
diff --git a/js/SwipeController.js b/js/SwipeController.js
@@ -103,4 +103,11 @@ var TouchLayer_SwipeController = function (options) {
 
 	mainController.bind(options.el, 'touchstart', onTouchStart, runOnBubble);
 	mainController.bind(options.el, 'touchmove', onTouchMove, runOnBubble);
+
+	return {
+		unbind: function  () {
+			mainController.unbind(options.el, 'touchstart', onTouchStart);
+			mainController.unbind(options.el, 'touchmove', onTouchMove);
+		}
+	};
 };
diff --git a/js/TapController.js b/js/TapController.js
@@ -175,4 +175,12 @@ var TouchLayer_TapController = function (options) {
 	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);
+		}
+	};
 };
diff --git a/js/TouchLayerController.js b/js/TouchLayerController.js
@@ -30,6 +30,15 @@ var TouchLayer_Controller = function () {
 				thisEl.addEventListener(touchHandlers[eventName], callback, callThisOnBubble);
 			}
 		},
+		unbind: function (thisEl, eventName, callback) {
+			if (!thisEl || !eventName || !callback) {
+				return;
+			}
+
+			if (touchHandlers[eventName] !== undefined) {
+				thisEl.removeEventListener(touchHandlers[eventName], callback);
+			}
+		},
 		fire: function (eventName, callback, data) {
 			if (!eventName || !callback) {
 				return;

diff --git a/js/touchLayer.js b/js/touchLayer.js
@@ -33,7 +33,15 @@ var TouchLayer = function () {
 				options.el = targetElem;
 				options.callback = callback;
 
-				boundEvents[boundEvents.length] = new EventToClassMap[eventName](options);
+				var id = boundEvents.length;
+				boundEvents[id] = new EventToClassMap[eventName](options);
+				return id;
+			}
+		},
+		unbind: function (id) {
+			if (boundEvents[id] !== null) {
+				boundEvents[id].unbind();
+				boundEvents[id] = null;
 			}
 		}
 	};

diff --git a/jsTouchLayer.min.js b/jsTouchLayer.min.js