diff --git a/README.md b/README.md index 8652980..f259186 100644 --- a/README.md +++ b/README.md @@ -8,14 +8,15 @@ Based on Andreas Waltl's [jQuery TouchWipe](http://www.netcu.de/jquery-touchwipe How to use ---------- - $(".selector").detectSwipe({ - threshold: 20, // The number of pixels your finger must move to trigger a swipe event. Defaults is 20. - }) - .on('swipeleft', function(){ /*...*/ }) - .on('swiperight', function(){ /*...*/ }) - .on('swipeup', function(){ /*...*/ }) - .on('swipedown', function(){ /*...*/ }); + $(".selector").on('swipeleft', function(){ /*...*/ }) + .on('swiperight', function(){ /*...*/ }) + .on('swipeup', function(){ /*...*/ }) + .on('swipedown', function(){ /*...*/ }); This won't have any effect on non-touch devices. You can rely on: - $.fn.detectSwipe.enabled // true on touch devices, false otherwise + $.detectSwipe.enabled // true on touch devices, false otherwise + +Global setting: + + $.detectSwipe.threshold // The number of pixels your finger must move to trigger a swipe event. Defaults is 20. diff --git a/jquery.detect_swipe.js b/jquery.detect_swipe.js index a13a141..b679098 100644 --- a/jquery.detect_swipe.js +++ b/jquery.detect_swipe.js @@ -1,58 +1,61 @@ /** - * jquery.detectSwipe v1.0 + * jquery.detectSwipe v2.0 * jQuery Plugin to obtain touch gestures from iPhone, iPod Touch, iPad and Android * http://github.com/marcandre/detect_swipe * Based on touchwipe by Andreas Waltl, netCU Internetagentur (http://www.netcu.de) */ (function($) { - $.fn.detectSwipe = function(settings) { - var config = { - threshold: 20, - }; - if (settings) $.extend(config, settings); + $.detectSwipe = { + version: '2.0.0', + enabled: 'ontouchstart' in document.documentElement, + threshold: 20 + }; - this.each(function() { - var startX; - var startY; - var isMoving = false; + var startX, + startY, + isMoving = false; - function onTouchMove(e) { - e.preventDefault(); - if(isMoving) { - var x = e.touches[0].pageX; - var y = e.touches[0].pageY; - var dx = startX - x; - var dy = startY - y; - var dir; - if(Math.abs(dx) >= config.threshold) { - dir = dx > 0 ? 'left' : 'right' - } - else if(Math.abs(dy) >= config.threshold) { - dir = dy > 0 ? 'down' : 'up' - } - if(dir) { - this.removeEventListener('touchmove', onTouchMove); - isMoving = false; - $(this).trigger('swipe' + dir); - } - } + function onTouchMove(e) { + e.preventDefault(); + if(isMoving) { + var x = e.touches[0].pageX; + var y = e.touches[0].pageY; + var dx = startX - x; + var dy = startY - y; + var dir; + if(Math.abs(dx) >= $.detectSwipe.threshold) { + dir = dx > 0 ? 'left' : 'right' } - - function onTouchStart(e) { - if (e.touches.length == 1) { - startX = e.touches[0].pageX; - startY = e.touches[0].pageY; - isMoving = true; - this.addEventListener('touchmove', onTouchMove, false); - } + else if(Math.abs(dy) >= $.detectSwipe.threshold) { + dir = dy > 0 ? 'down' : 'up' } - if ($.fn.detectSwipe.enabled) { - this.addEventListener('touchstart', onTouchStart, false); + if(dir) { + this.removeEventListener('touchmove', onTouchMove); + isMoving = false; + $(this).trigger('swipe', dir).trigger('swipe' + dir); } - }); + } + } - return this; - }; - $.fn.detectSwipe.enabled = 'ontouchstart' in document.documentElement; + function onTouchStart(e) { + if (e.touches.length == 1) { + startX = e.touches[0].pageX; + startY = e.touches[0].pageY; + isMoving = true; + this.addEventListener('touchmove', onTouchMove, false); + } + } + + function setup() { + this.addEventListener('touchstart', onTouchStart, false); + } + + $.event.special.swipe = { setup: setup }; + + $.each(['left', 'up', 'down', 'right'], function () { + $.event.special['swipe' + this] = { setup: function(){ + $(this).on('swipe', $.noop); + } }; + }); })(jQuery);