diff options
Diffstat (limited to 'src/ngMobile/directive/ngSwipe.js')
| -rw-r--r-- | src/ngMobile/directive/ngSwipe.js | 94 |
1 files changed, 16 insertions, 78 deletions
diff --git a/src/ngMobile/directive/ngSwipe.js b/src/ngMobile/directive/ngSwipe.js index 6de7aa57..e68e45da 100644 --- a/src/ngMobile/directive/ngSwipe.js +++ b/src/ngMobile/directive/ngSwipe.js @@ -55,36 +55,20 @@ */ function makeSwipeDirective(directiveName, direction) { - ngMobile.directive(directiveName, ['$parse', function($parse) { + ngMobile.directive(directiveName, ['$parse', '$swipe', function($parse, $swipe) { // The maximum vertical delta for a swipe should be less than 75px. var MAX_VERTICAL_DISTANCE = 75; // Vertical distance should not be more than a fraction of the horizontal distance. var MAX_VERTICAL_RATIO = 0.3; // At least a 30px lateral motion is necessary for a swipe. var MIN_HORIZONTAL_DISTANCE = 30; - // The total distance in any direction before we make the call on swipe vs. scroll. - var MOVE_BUFFER_RADIUS = 10; - - function getCoordinates(event) { - var touches = event.touches && event.touches.length ? event.touches : [event]; - var e = (event.changedTouches && event.changedTouches[0]) || - (event.originalEvent && event.originalEvent.changedTouches && - event.originalEvent.changedTouches[0]) || - touches[0].originalEvent || touches[0]; - - return { - x: e.clientX, - y: e.clientY - }; - } return function(scope, element, attr) { var swipeHandler = $parse(attr[directiveName]); + var startCoords, valid; - var totalX, totalY; - var lastX, lastY; - function validSwipe(event) { + function validSwipe(coords) { // Check that it's within the coordinates. // Absolute vertical distance must be within tolerances. // Horizontal distance, we take the current X - the starting X. @@ -94,7 +78,6 @@ function makeSwipeDirective(directiveName, direction) { // illegal ones a negative delta. // Therefore this delta must be positive, and larger than the minimum. if (!startCoords) return false; - var coords = getCoordinates(event); var deltaY = Math.abs(coords.y - startCoords.y); var deltaX = (coords.x - startCoords.x) * direction; return valid && // Short circuit for already-invalidated swipes. @@ -104,65 +87,20 @@ function makeSwipeDirective(directiveName, direction) { deltaY / deltaX < MAX_VERTICAL_RATIO; } - element.bind('touchstart mousedown', function(event) { - startCoords = getCoordinates(event); - valid = true; - totalX = 0; - totalY = 0; - lastX = startCoords.x; - lastY = startCoords.y; - }); - - element.bind('touchcancel', function(event) { - valid = false; - }); - - element.bind('touchmove mousemove', function(event) { - if (!valid) return; - - // Android will send a touchcancel if it thinks we're starting to scroll. - // So when the total distance (+ or - or both) exceeds 10px in either direction, - // we either: - // - On totalX > totalY, we send preventDefault() and treat this as a swipe. - // - On totalY > totalX, we let the browser handle it as a scroll. - - // Invalidate a touch while it's in progress if it strays too far away vertically. - // We don't want a scroll down and back up while drifting sideways to be a swipe just - // because you happened to end up vertically close in the end. - if (!startCoords) return; - var coords = getCoordinates(event); - - if (Math.abs(coords.y - startCoords.y) > MAX_VERTICAL_DISTANCE) { + $swipe.bind(element, { + 'start': function(coords) { + startCoords = coords; + valid = true; + }, + 'cancel': function() { valid = false; - return; - } - - totalX += Math.abs(coords.x - lastX); - totalY += Math.abs(coords.y - lastY); - - lastX = coords.x; - lastY = coords.y; - - if (totalX < MOVE_BUFFER_RADIUS && totalY < MOVE_BUFFER_RADIUS) { - return; - } - - // One of totalX or totalY has exceeded the buffer, so decide on swipe vs. scroll. - if (totalY > totalX) { - valid = false; - return; - } else { - event.preventDefault(); - } - }); - - element.bind('touchend mouseup', function(event) { - if (validSwipe(event)) { - // Prevent this swipe from bubbling up to any other elements with ngSwipes. - event.stopPropagation(); - scope.$apply(function() { - swipeHandler(scope, {$event:event}); - }); + }, + 'end': function(coords) { + if (validSwipe(coords)) { + scope.$apply(function() { + swipeHandler(scope); + }); + } } }); }; |
