Merge pull request #95 from joaodubas/zepto

--- Enabled vertical swipe, by defining which movement was greater (vertical or horizontal). Also added support to pinch gesture, via gesture events (only available on iOS). Tests where also generated, on touch.html and gesture.html.
madrobby · May 2, 2011 · eac226f · eac226f
2 parents f3c6078 + fbcefc2
commit eac226f
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 6 deletions.
diff --git a/Rakefile b/Rakefile
@@ -15,6 +15,7 @@ ZEPTO_FILES    = [
   File.join(ZEPTO_SRC_DIR,'detect.js'),
   File.join(ZEPTO_SRC_DIR,'fx.js'),
   File.join(ZEPTO_SRC_DIR,'touch.js'),
+  File.join(ZEPTO_SRC_DIR,'gesture.js'),
   File.join(ZEPTO_SRC_DIR,'ajax.js'),
   File.join(ZEPTO_SRC_DIR,'assets.js')
 ]

diff --git a/src/gesture.js b/src/gesture.js
@@ -0,0 +1,33 @@
+(function($){
+  if ($.os.ios) {
+    var gesture = {}, gestureTimeout;
+
+    function parentIfText(node){
+      return 'tagName' in node ? node : node.parentNode;
+    }
+
+    $(document).ready(function(){
+      $(document.body).bind('gesturestart', function(e){
+        var now = Date.now(), delta = now - (gesture.last || now);
+        gesture.target = parentIfText(e.target);
+        gestureTimeout && clearTimeout(gestureTimeout);
+        gesture.e1 = e.scale;
+        gesture.last = now;
+      }).bind('gesturechange', function(e){
+        gesture.e2 = e.scale;
+      }).bind('gestureend', function(e){
+        if (gesture.e2 > 0) {
+          Math.abs(gesture.e1 - gesture.e2) != 0 && $(gesture.target).trigger('pinch') &&
+            $(gesture.target).trigger('pinch' + (gesture.e1 - gesture.e2 > 0 ? 'In' : 'Out'));
+          gesture.e1 = gesture.e2 = gesture.last = 0;
+        } else if ('last' in gesture) {
+          gesture = {};
+        }
+      });
+    });
+
+    ['pinch', 'pinchIn', 'pinchOut'].forEach(function(m){
+      $.fn[m] = function(callback){ return this.bind(m, callback) }
+    });
+  }
+})(Zepto);
diff --git a/src/touch.js b/src/touch.js
@@ -5,24 +5,36 @@
     return 'tagName' in node ? node : node.parentNode;
   }
 
+  function swipeDirection(x1, x2, y1, y2){
+    var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2);
+    if (xDelta >= yDelta) {
+      return (x1 - x2 > 0 ? 'Left' : 'Right');
+    } else {
+      return (y1 - y2 > 0 ? 'Up' : 'Down');
+    }
+  }
+
   $(document).ready(function(){
     $(document.body).bind('touchstart', function(e){
       var now = Date.now(), delta = now - (touch.last || now);
       touch.target = parentIfText(e.touches[0].target);
       touchTimeout && clearTimeout(touchTimeout);
       touch.x1 = e.touches[0].pageX;
+      touch.y1 = e.touches[0].pageY;
       if (delta > 0 && delta <= 250) touch.isDoubleTap = true;
       touch.last = now;
     }).bind('touchmove', function(e){
-      touch.x2 = e.touches[0].pageX
+      touch.x2 = e.touches[0].pageX;
+      touch.y2 = e.touches[0].pageY;
     }).bind('touchend', function(e){
       if (touch.isDoubleTap) {
         $(touch.target).trigger('doubleTap');
         touch = {};
-      } else if (touch.x2 > 0) {
-        Math.abs(touch.x1 - touch.x2) > 30 && $(touch.target).trigger('swipe') &&
-          $(touch.target).trigger('swipe' + (touch.x1 - touch.x2 > 0 ? 'Left' : 'Right'));
-        touch.x1 = touch.x2 = touch.last = 0;
+      } else if (touch.x2 > 0 || touch.y2 > 0) {
+        (Math.abs(touch.x1 - touch.x2) > 30 || Math.abs(touch.y1 - touch.y2) > 30)  &&
+          $(touch.target).trigger('swipe') &&
+          $(touch.target).trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)));
+        touch.x1 = touch.x2 = touch.y1 = touch.y2 = touch.last = 0;
       } else if ('last' in touch) {
         touchTimeout = setTimeout(function(){
           touchTimeout = null;
@@ -33,7 +45,7 @@
     }).bind('touchcancel', function(){ touch = {} });
   });
 
-  ['swipe', 'swipeLeft', 'swipeRight', 'doubleTap', 'tap'].forEach(function(m){
+  ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap'].forEach(function(m){
     $.fn[m] = function(callback){ return this.bind(m, callback) }
   });
 })(Zepto);
diff --git a/test/gesture_functional.html b/test/gesture_functional.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Zepto gesture functional test</title>
+  <meta name="viewport" content="maximum-scale=1,initial-scale=1,user-scalable=0">
+  <script src="../src/zepto.js"></script>
+  <script src="../src/event.js"></script>
+  <script src="../src/detect.js"></script>
+  <script src="../src/gesture.js"></script>
+</head>
+<body>
+  <h1>Zepto gestures functional test</h1>
+
+  <div id="gesture_test" style="width: 200px; height: 200px; background: #ddd">
+    gesture events test
+  </div>
+
+  <script>
+    $('#gesture_test')
+      .pinch(function(){
+        $(this).append(' | pinch!');
+      })
+      .pinchIn(function(){
+        $(this).append(' | pinch in!');
+      })
+      .pinchOut(function(){
+        $(this).append(' | pinch out!');
+      });
+  </script>
+</body>
+</html>
diff --git a/test/touch_functional.html b/test/touch_functional.html
@@ -17,6 +17,7 @@ <h1>Zepto touch functional test</h1>
   </div>
 
   <script>
+    $('body').bind('touchmove', function (e) {e.preventDefault();} );
     $('#touch_test')
       .tap(function(){
         $(this).append(' | tap!');
@@ -32,6 +33,12 @@ <h1>Zepto touch functional test</h1>
       })
       .swipeRight(function(){
         $(this).append(' | swipe right!');
+      })
+      .swipeUp(function(){
+        $(this).append(' | swipe up!');
+      })
+      .swipeDown(function(){
+        $(this).append(' | swipe down!');
       });
   </script>
 </body>

diff --git a/test/touchcancel_functional.html b/test/touchcancel_functional.html
@@ -19,6 +19,7 @@ <h1>Zepto touch functional test</h1>
 
   <script>
     setTimeout(function () {alert("Alert! Now tap again, you should see a tap!, not a double tap!");}, 3000);
+    $('body').bind('touchmove', function (e) {e.preventDefault();} );
     $('#touch_test')
       .tap(function(){
         $(this).append(' | tap!');
@@ -34,7 +35,14 @@ <h1>Zepto touch functional test</h1>
       })
       .swipeRight(function(){
         $(this).append(' | swipe right!');
+      })
+      .swipeUp(function(){
+        $(this).append(' | swipe up!');
+      })
+      .swipeDown(function(){
+        $(this).append(' | swipe down!');
       });
+
   </script>
 </body>
 </html>