src/src/event/recognizer/Swipe.js

   1 /**
   2  * A base class used for both {@link Ext.event.recognizer.VerticalSwipe} and {@link Ext.event.recognizer.HorizontalSwipe}
   3  * event recognizers.
   4  *
   5  * @private
   6  */
   7 Ext.define('Ext.event.recognizer.Swipe', {
   8     extend: 'Ext.event.recognizer.SingleTouch',
   9
  10     handledEvents: ['swipestart', 'swipe'],
  11
  12     /**
  13      * @member Ext.dom.Element
  14      * @event swipe
  15      * Fires when there is a swipe
  16      * When listening to this, ensure you know about the {@link Ext.event.Event#direction} property in the `event` object.
  17      * @param {Ext.event.Event} event The {@link Ext.event.Event} event encapsulating the DOM event.
  18      * @param {HTMLElement} node The target of the event.
  19      * @param {Object} options The options object passed to Ext.mixin.Observable.addListener.
  20      */
  21
  22     /**
  23      * @property {Number} direction
  24      * The direction of the swipe. Available options are:
  25      *
  26      * - up
  27      * - down
  28      * - left
  29      * - right
  30      *
  31      * __Note:__ In order to recognize swiping up and down, you must enable the vertical swipe recognizer.
  32      *
  33      * **This is only available when the event type is `swipe`**
  34      * @member Ext.event.Event
  35      */
  36
  37     /**
  38      * @property {Number} duration
  39      * The duration of the swipe.
  40      *
  41      * **This is only available when the event type is `swipe`**
  42      * @member Ext.event.Event
  43      */
  44
  45     inheritableStatics: {
  46         MAX_OFFSET_EXCEEDED: 0x10,
  47         MAX_DURATION_EXCEEDED: 0x11,
  48         DISTANCE_NOT_ENOUGH: 0x12
  49     },
  50
  51     config: {
  52         minDistance: 80,
  53         maxOffset: 35,
  54         maxDuration: 1000
  55     },
  56
  57     onTouchStart: function(e) {
  58         if (this.callParent(arguments) === false) {
  59             return false;
  60         }
  61
  62         var touch = e.changedTouches[0];
  63
  64         this.startTime = e.time;
  65
  66         this.isHorizontal = true;
  67         this.isVertical = true;
  68
  69         this.startX = touch.pageX;
  70         this.startY = touch.pageY;
  71     },
  72
  73     onTouchMove: function(e) {
  74         var touch = e.changedTouches[0],
  75             x = touch.pageX,
  76             y = touch.pageY,
  77             deltaX = x - this.startX,
  78             deltaY = y - this.startY,
  79             absDeltaX = Math.abs(x - this.startX),
  80             absDeltaY = Math.abs(y - this.startY),
  81             duration = e.time - this.startTime,
  82             minDistance = this.getMinDistance(),
  83             time = e.time,
  84             direction, distance;
  85
  86         if (time - this.startTime > this.getMaxDuration()) {
  87             return this.fail(this.self.MAX_DURATION_EXCEEDED);
  88         }
  89
  90         if (this.isHorizontal && absDeltaY > this.getMaxOffset()) {
  91             this.isHorizontal = false;
  92         }
  93
  94         if (this.isVertical && absDeltaX > this.getMaxOffset()) {
  95             this.isVertical = false;
  96         }
  97
  98         if (!this.isVertical || !this.isHorizontal) {
  99             if (this.isHorizontal && absDeltaX < minDistance) {
 100                 direction = (deltaX < 0) ? 'left' : 'right';
 101                 distance = absDeltaX;
 102             }
 103             else if (this.isVertical && absDeltaY < minDistance) {
 104                 direction = (deltaY < 0) ? 'up' : 'down';
 105                 distance = absDeltaY;
 106             }
 107         }
 108
 109         if (direction && !this.started) {
 110             this.started = true;
 111
 112             this.fire('swipestart', e, [touch], {
 113                 touch: touch,
 114                 direction: direction,
 115                 distance: distance,
 116                 duration: duration
 117             });
 118         }
 119
 120         if (!this.isHorizontal && !this.isVertical) {
 121             return this.fail(this.self.MAX_OFFSET_EXCEEDED);
 122         }
 123     },
 124
 125     onTouchEnd: function(e) {
 126         if (this.onTouchMove(e) === false) {
 127             return false;
 128         }
 129
 130         var touch = e.changedTouches[0],
 131             x = touch.pageX,
 132             y = touch.pageY,
 133             deltaX = x - this.startX,
 134             deltaY = y - this.startY,
 135             absDeltaX = Math.abs(deltaX),
 136             absDeltaY = Math.abs(deltaY),
 137             minDistance = this.getMinDistance(),
 138             duration = e.time - this.startTime,
 139             direction, distance;
 140
 141         if (this.isVertical && absDeltaY < minDistance) {
 142             this.isVertical = false;
 143         }
 144
 145         if (this.isHorizontal && absDeltaX < minDistance) {
 146             this.isHorizontal = false;
 147         }
 148
 149         if (this.isHorizontal) {
 150             direction = (deltaX < 0) ? 'left' : 'right';
 151             distance = absDeltaX;
 152         }
 153         else if (this.isVertical) {
 154             direction = (deltaY < 0) ? 'up' : 'down';
 155             distance = absDeltaY;
 156         }
 157         else {
 158             return this.fail(this.self.DISTANCE_NOT_ENOUGH);
 159         }
 160
 161         this.started = false;
 162
 163         this.fire('swipe', e, [touch], {
 164             touch: touch,
 165             direction: direction,
 166             distance: distance,
 167             duration: duration
 168         });
 169     }
 170 });