diff options
| author | Brian Ford | 2013-08-09 10:02:48 -0700 | 
|---|---|---|
| committer | Igor Minar | 2013-08-09 11:54:35 -0700 | 
| commit | 94ec84e7b9c89358dc00e4039009af9e287bbd05 (patch) | |
| tree | b06c84f1329a8e4fd6ce75b6bbde64bdf4d0e60e /src/ngTouch/swipe.js | |
| parent | 0d17838a0881376be3c226a68242b5d74dac208b (diff) | |
| download | angular.js-94ec84e7b9c89358dc00e4039009af9e287bbd05.tar.bz2 | |
chore(ngMobile): rename module ngTouch and file to angular-touch.js
BREAKING CHANGE: since all the code in the ngMobile module is touch related,
we are renaming the module to ngTouch.
To migrate, please replace all references to "ngMobile" with "ngTouch" and
"angular-mobile.js" to "angular-touch.js".
Closes #3526
Diffstat (limited to 'src/ngTouch/swipe.js')
| -rw-r--r-- | src/ngTouch/swipe.js | 136 | 
1 files changed, 136 insertions, 0 deletions
| diff --git a/src/ngTouch/swipe.js b/src/ngTouch/swipe.js new file mode 100644 index 00000000..655043f8 --- /dev/null +++ b/src/ngTouch/swipe.js @@ -0,0 +1,136 @@ +'use strict'; + +    /** +     * @ngdoc object +     * @name ngTouch.$swipe +     * +     * @description +     * The `$swipe` service is a service that abstracts the messier details of hold-and-drag swipe +     * behavior, to make implementing swipe-related directives more convenient. +     * +     * It is used by the `ngSwipeLeft` and `ngSwipeRight` directives in `ngTouch`, and by +     * `ngCarousel` in a separate component. +     * +     * # Usage +     * The `$swipe` service is an object with a single method: `bind`. `bind` takes an element +     * which is to be watched for swipes, and an object with four handler functions. See the +     * documentation for `bind` below. +     */ + +ngTouch.factory('$swipe', [function() { +  // 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 { +    /** +     * @ngdoc method +     * @name ngTouch.$swipe#bind +     * @methodOf ngTouch.$swipe +     * +     * @description +     * The main method of `$swipe`. It takes an element to be watched for swipe motions, and an +     * object containing event handlers. +     * +     * The four events are `start`, `move`, `end`, and `cancel`. `start`, `move`, and `end` +     * receive as a parameter a coordinates object of the form `{ x: 150, y: 310 }`. +     * +     * `start` is called on either `mousedown` or `touchstart`. After this event, `$swipe` is +     * watching for `touchmove` or `mousemove` events. These events are ignored until the total +     * distance moved in either dimension exceeds a small threshold. +     * +     * Once this threshold is exceeded, either the horizontal or vertical delta is greater. +     * - If the horizontal distance is greater, this is a swipe and `move` and `end` events follow. +     * - If the vertical distance is greater, this is a scroll, and we let the browser take over. +     *   A `cancel` event is sent. +     * +     * `move` is called on `mousemove` and `touchmove` after the above logic has determined that +     * a swipe is in progress. +     * +     * `end` is called when a swipe is successfully completed with a `touchend` or `mouseup`. +     * +     * `cancel` is called either on a `touchcancel` from the browser, or when we begin scrolling +     * as described above. +     * +     */ +    bind: function(element, eventHandlers) { +      // Absolute total movement, used to control swipe vs. scroll. +      var totalX, totalY; +      // Coordinates of the start position. +      var startCoords; +      // Last event's position. +      var lastPos; +      // Whether a swipe is active. +      var active = false; + +      element.on('touchstart mousedown', function(event) { +        startCoords = getCoordinates(event); +        active = true; +        totalX = 0; +        totalY = 0; +        lastPos = startCoords; +        eventHandlers['start'] && eventHandlers['start'](startCoords); +      }); + +      element.on('touchcancel', function(event) { +        active = false; +        eventHandlers['cancel'] && eventHandlers['cancel'](); +      }); + +      element.on('touchmove mousemove', function(event) { +        if (!active) 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. + +        if (!startCoords) return; +        var coords = getCoordinates(event); + +        totalX += Math.abs(coords.x - lastPos.x); +        totalY += Math.abs(coords.y - lastPos.y); + +        lastPos = coords; + +        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) { +          // Allow native scrolling to take over. +          active = false; +          eventHandlers['cancel'] && eventHandlers['cancel'](); +          return; +        } else { +          // Prevent the browser from scrolling. +          event.preventDefault(); + +          eventHandlers['move'] && eventHandlers['move'](coords); +        } +      }); + +      element.on('touchend mouseup', function(event) { +        if (!active) return; +        active = false; +        eventHandlers['end'] && eventHandlers['end'](getCoordinates(event)); +      }); +    } +  }; +}]); + + | 
