aboutsummaryrefslogtreecommitdiffstats
path: root/src/ngTouch/swipe.js
diff options
context:
space:
mode:
authorBrian Ford2013-08-09 10:02:48 -0700
committerIgor Minar2013-08-09 11:54:35 -0700
commit94ec84e7b9c89358dc00e4039009af9e287bbd05 (patch)
treeb06c84f1329a8e4fd6ce75b6bbde64bdf4d0e60e /src/ngTouch/swipe.js
parent0d17838a0881376be3c226a68242b5d74dac208b (diff)
downloadangular.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.js136
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));
+ });
+ }
+ };
+}]);
+
+