diff --git a/Rakefile b/Rakefile index 3879d7f84..323060e6b 100644 --- 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 new file mode 100644 index 000000000..74ba4b0d1 --- /dev/null +++ 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 index bb31acdd1..7c4d2a502 100644 --- 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 new file mode 100644 index 000000000..4b06dabdd --- /dev/null +++ b/test/gesture_functional.html @@ -0,0 +1,32 @@ + + + + + Zepto gesture functional test + + + + + + + +

Zepto gestures functional test

+ +
+ gesture events test +
+ + + + diff --git a/test/touch_functional.html b/test/touch_functional.html index 8bcdbdfb3..b1c4e4abc 100644 --- a/test/touch_functional.html +++ b/test/touch_functional.html @@ -17,6 +17,7 @@

Zepto touch functional test

diff --git a/test/touchcancel_functional.html b/test/touchcancel_functional.html index 20690cd49..927329bb3 100644 --- a/test/touchcancel_functional.html +++ b/test/touchcancel_functional.html @@ -19,6 +19,7 @@

Zepto touch functional test