]>
Commit | Line | Data |
---|---|---|
c4685c84 TL |
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 | }); |