inertia scrolling in demo, improvements to touch events (closes #3, #10)

hakimel · Oct 14, 2012 · e349323 · e349323
1 parent 227d3ca
commit e349323
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -95,6 +95,10 @@ meny.addEventListener( 'close', function() {
 
 ## History
 
+#### 1.2
+- Improvements to touch interaction
+- Setting threshold to 0 disables hover/touch-to-open
+
 #### 1.1
 - Instances of Meny now dispatch 'open'/'close' events
 

diff --git a/css/demo.css b/css/demo.css
@@ -135,6 +135,8 @@ h2 {
 	height: 100%;
 	overflow-y: auto;
 
+	-webkit-overflow-scrolling: touch;
+
 	-webkit-box-sizing: border-box;
 	   -moz-box-sizing: border-box;
 	        box-sizing: border-box;

diff --git a/js/meny.js b/js/meny.js
@@ -1,5 +1,5 @@
 /*!
- * meny 1.1
+ * meny 1.2
  * http://lab.hakim.se/meny
  * MIT licensed
  *
@@ -90,7 +90,9 @@ var Meny = {
 			setupMenu();
 			setupContents();
 
-			bindEvents();
+			if( config.threshold ) {
+				bindEvents();
+			}
 
 			/**
 			 * Prepares the transforms for the current positioning 
@@ -273,11 +275,15 @@ var Meny = {
 			 * Attaches all input event listeners.
 			 */
 			function bindEvents() {
-				Meny.bindEvent( document, 'mousedown', onMouseDown );
+				if( 'ontouchstart' in window ) {
-				Meny.bindEvent( document, 'mouseup', onMouseUp );
+					Meny.bindEvent( document, 'touchstart', onTouchStart );
-				Meny.bindEvent( document, 'mousemove', onMouseMove );
+					Meny.bindEvent( document, 'touchend', onTouchEnd );
-				Meny.bindEvent( document, 'touchstart', onTouchStart );
+				}
-				Meny.bindEvent( document, 'touchend', onTouchEnd );
+				else {
+					Meny.bindEvent( document, 'mousedown', onMouseDown );
+					Meny.bindEvent( document, 'mouseup', onMouseUp );
+					Meny.bindEvent( document, 'mousemove', onMouseMove );
+				}
 			}
 
 			/**
@@ -421,17 +427,21 @@ var Meny = {
 
 				// Check for swipe gestures in any direction
 
-				if( touchMoveX < touchStartX - config.threshold ) {
+				if( Math.abs( touchMoveX - touchStartX ) > Math.abs( touchMoveY - touchStartY ) ) {
-					swipeMethod = onSwipeRight;
+					if( touchMoveX < touchStartX - config.threshold ) {
-				}
+						swipeMethod = onSwipeRight;
-				else if( touchMoveX > touchStartX + config.threshold ) {
+					}
-					swipeMethod = onSwipeLeft;
+					else if( touchMoveX > touchStartX + config.threshold ) {
-				}
+						swipeMethod = onSwipeLeft;
-				else if( touchMoveY < touchStartY - config.threshold ) {
+					}
-					swipeMethod = onSwipeDown;
 				}
-				if( touchMoveY > touchStartY + config.threshold ) {
+				else {
-					swipeMethod = onSwipeUp;
+					if( touchMoveY < touchStartY - config.threshold ) {
+						swipeMethod = onSwipeDown;
+					}
+					else if( touchMoveY > touchStartY + config.threshold ) {
+						swipeMethod = onSwipeUp;
+					}
 				}
 
 				if( swipeMethod && swipeMethod() ) {

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