OLD | NEW |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 'use strict'; | 5 'use strict'; |
6 | 6 |
7 /** | 7 /** |
8 * A class that listens for touch events and produces events when these | 8 * A class that listens for touch events and produces events when these |
9 * touches form gestures (e.g. pinching). | 9 * touches form gestures (e.g. pinching). |
10 */ | 10 */ |
11 class GestureDetector { | 11 class GestureDetector { |
12 /** | 12 /** |
13 * Constructs a GestureDetector. | 13 * Constructs a GestureDetector. |
14 * @param {!Element} element The element to monitor for touch gestures. | 14 * @param {!Element} element The element to monitor for touch gestures. |
15 */ | 15 */ |
16 constructor(element) { | 16 constructor(element) { |
17 this.element_ = element; | 17 this.element_ = element; |
18 | 18 |
19 this.element_.addEventListener( | 19 this.element_.addEventListener( |
20 'touchstart', this.onTouchStart_.bind(this), { passive: true }); | 20 'touchstart', this.onTouchStart_.bind(this), { passive: true }); |
21 this.element_.addEventListener( | 21 this.element_.addEventListener( |
22 'touchmove', this.onTouch_.bind(this), { passive: false }); | 22 'touchmove', this.onTouch_.bind(this), { passive: false }); |
23 this.element_.addEventListener( | 23 this.element_.addEventListener( |
24 'touchend', this.onTouch_.bind(this), { passive: true }); | 24 'touchend', this.onTouch_.bind(this), { passive: true }); |
25 this.element_.addEventListener( | 25 this.element_.addEventListener( |
26 'touchcancel', this.onTouch_.bind(this), { passive: true }); | 26 'touchcancel', this.onTouch_.bind(this), { passive: true }); |
27 | 27 |
28 this.pinchStartEvent_ = null; | 28 this.pinchStartEvent_ = null; |
| 29 this.lastTouchTouchesCount_ = 0; |
29 this.lastEvent_ = null; | 30 this.lastEvent_ = null; |
30 | 31 |
31 this.listeners_ = new Map([ | 32 this.listeners_ = new Map([ |
32 ['pinchstart', []], | 33 ['pinchstart', []], |
33 ['pinchupdate', []], | 34 ['pinchupdate', []], |
34 ['pinchend', []] | 35 ['pinchend', []] |
35 ]); | 36 ]); |
36 } | 37 } |
37 | 38 |
38 /** | 39 /** |
39 * Add a |listener| to be notified of |type| events. | 40 * Add a |listener| to be notified of |type| events. |
40 * @param {string} type The event type to be notified for. | 41 * @param {string} type The event type to be notified for. |
41 * @param {Function} listener The callback. | 42 * @param {Function} listener The callback. |
42 */ | 43 */ |
43 addEventListener(type, listener) { | 44 addEventListener(type, listener) { |
44 if (this.listeners_.has(type)) { | 45 if (this.listeners_.has(type)) { |
45 this.listeners_.get(type).push(listener); | 46 this.listeners_.get(type).push(listener); |
46 } | 47 } |
47 } | 48 } |
48 | 49 |
49 /** | 50 /** |
| 51 * Returns true if the last touch start was a two finger touch. |
| 52 * @return {boolean} True if the last touch start was a two finger touch. |
| 53 */ |
| 54 wasTwoFingerTouch() { |
| 55 return this.lastTouchTouchesCount_ == 2; |
| 56 } |
| 57 |
| 58 /** |
50 * Call the relevant listeners with the given |pinchEvent|. | 59 * Call the relevant listeners with the given |pinchEvent|. |
51 * @private | 60 * @private |
52 * @param {!Object} pinchEvent The event to notify the listeners of. | 61 * @param {!Object} pinchEvent The event to notify the listeners of. |
53 */ | 62 */ |
54 notify_(pinchEvent) { | 63 notify_(pinchEvent) { |
55 let listeners = this.listeners_.get(pinchEvent.type); | 64 let listeners = this.listeners_.get(pinchEvent.type); |
56 | 65 |
57 for (let l of listeners) | 66 for (let l of listeners) |
58 l(pinchEvent); | 67 l(pinchEvent); |
59 } | 68 } |
60 | 69 |
61 /** | 70 /** |
62 * The callback for touchstart events on the element. | 71 * The callback for touchstart events on the element. |
63 * @private | 72 * @private |
64 * @param {!TouchEvent} event Touch event on the element. | 73 * @param {!TouchEvent} event Touch event on the element. |
65 */ | 74 */ |
66 onTouchStart_(event) { | 75 onTouchStart_(event) { |
67 if (event.touches.length == 2) { | 76 this.lastTouchTouchesCount_ = event.touches.length; |
68 this.pinchStartEvent_ = event; | 77 if (!this.wasTwoFingerTouch()) |
69 this.lastEvent_ = event; | 78 return; |
70 this.notify_({ | 79 |
71 type: 'pinchstart', | 80 this.pinchStartEvent_ = event; |
72 center: GestureDetector.center_(event) | 81 this.lastEvent_ = event; |
73 }); | 82 this.notify_({ |
74 } | 83 type: 'pinchstart', |
| 84 center: GestureDetector.center_(event) |
| 85 }); |
75 } | 86 } |
76 | 87 |
77 /** | 88 /** |
78 * The callback for touch move, end, and cancel events on the element. | 89 * The callback for touch move, end, and cancel events on the element. |
79 * @private | 90 * @private |
80 * @param {!TouchEvent} event Touch event on the element. | 91 * @param {!TouchEvent} event Touch event on the element. |
81 */ | 92 */ |
82 onTouch_(event) { | 93 onTouch_(event) { |
83 if (!this.pinchStartEvent_) | 94 if (!this.pinchStartEvent_) |
84 return; | 95 return; |
(...skipping 71 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
156 */ | 167 */ |
157 static center_(event) { | 168 static center_(event) { |
158 let touch1 = event.touches[0]; | 169 let touch1 = event.touches[0]; |
159 let touch2 = event.touches[1]; | 170 let touch2 = event.touches[1]; |
160 return { | 171 return { |
161 x: (touch1.clientX + touch2.clientX) / 2, | 172 x: (touch1.clientX + touch2.clientX) / 2, |
162 y: (touch1.clientY + touch2.clientY) / 2 | 173 y: (touch1.clientY + touch2.clientY) / 2 |
163 }; | 174 }; |
164 } | 175 } |
165 }; | 176 }; |
OLD | NEW |