| 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; | |
| 30 this.lastEvent_ = null; | 29 this.lastEvent_ = null; |
| 31 | 30 |
| 32 this.listeners_ = new Map([ | 31 this.listeners_ = new Map([ |
| 33 ['pinchstart', []], | 32 ['pinchstart', []], |
| 34 ['pinchupdate', []], | 33 ['pinchupdate', []], |
| 35 ['pinchend', []] | 34 ['pinchend', []] |
| 36 ]); | 35 ]); |
| 37 } | 36 } |
| 38 | 37 |
| 39 /** | 38 /** |
| 40 * Add a |listener| to be notified of |type| events. | 39 * Add a |listener| to be notified of |type| events. |
| 41 * @param {string} type The event type to be notified for. | 40 * @param {string} type The event type to be notified for. |
| 42 * @param {Function} listener The callback. | 41 * @param {Function} listener The callback. |
| 43 */ | 42 */ |
| 44 addEventListener(type, listener) { | 43 addEventListener(type, listener) { |
| 45 if (this.listeners_.has(type)) { | 44 if (this.listeners_.has(type)) { |
| 46 this.listeners_.get(type).push(listener); | 45 this.listeners_.get(type).push(listener); |
| 47 } | 46 } |
| 48 } | 47 } |
| 49 | 48 |
| 50 /** | 49 /** |
| 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 /** | |
| 59 * Call the relevant listeners with the given |pinchEvent|. | 50 * Call the relevant listeners with the given |pinchEvent|. |
| 60 * @private | 51 * @private |
| 61 * @param {!Object} pinchEvent The event to notify the listeners of. | 52 * @param {!Object} pinchEvent The event to notify the listeners of. |
| 62 */ | 53 */ |
| 63 notify_(pinchEvent) { | 54 notify_(pinchEvent) { |
| 64 let listeners = this.listeners_.get(pinchEvent.type); | 55 let listeners = this.listeners_.get(pinchEvent.type); |
| 65 | 56 |
| 66 for (let l of listeners) | 57 for (let l of listeners) |
| 67 l(pinchEvent); | 58 l(pinchEvent); |
| 68 } | 59 } |
| 69 | 60 |
| 70 /** | 61 /** |
| 71 * The callback for touchstart events on the element. | 62 * The callback for touchstart events on the element. |
| 72 * @private | 63 * @private |
| 73 * @param {!TouchEvent} event Touch event on the element. | 64 * @param {!TouchEvent} event Touch event on the element. |
| 74 */ | 65 */ |
| 75 onTouchStart_(event) { | 66 onTouchStart_(event) { |
| 76 this.lastTouchTouchesCount_ = event.touches.length; | 67 if (event.touches.length == 2) { |
| 77 if (!this.wasTwoFingerTouch()) | 68 this.pinchStartEvent_ = event; |
| 78 return; | 69 this.lastEvent_ = event; |
| 79 | 70 this.notify_({ |
| 80 this.pinchStartEvent_ = event; | 71 type: 'pinchstart', |
| 81 this.lastEvent_ = event; | 72 center: GestureDetector.center_(event) |
| 82 this.notify_({ | 73 }); |
| 83 type: 'pinchstart', | 74 } |
| 84 center: GestureDetector.center_(event) | |
| 85 }); | |
| 86 } | 75 } |
| 87 | 76 |
| 88 /** | 77 /** |
| 89 * The callback for touch move, end, and cancel events on the element. | 78 * The callback for touch move, end, and cancel events on the element. |
| 90 * @private | 79 * @private |
| 91 * @param {!TouchEvent} event Touch event on the element. | 80 * @param {!TouchEvent} event Touch event on the element. |
| 92 */ | 81 */ |
| 93 onTouch_(event) { | 82 onTouch_(event) { |
| 94 if (!this.pinchStartEvent_) | 83 if (!this.pinchStartEvent_) |
| 95 return; | 84 return; |
| (...skipping 71 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 167 */ | 156 */ |
| 168 static center_(event) { | 157 static center_(event) { |
| 169 let touch1 = event.touches[0]; | 158 let touch1 = event.touches[0]; |
| 170 let touch2 = event.touches[1]; | 159 let touch2 = event.touches[1]; |
| 171 return { | 160 return { |
| 172 x: (touch1.clientX + touch2.clientX) / 2, | 161 x: (touch1.clientX + touch2.clientX) / 2, |
| 173 y: (touch1.clientY + touch2.clientY) / 2 | 162 y: (touch1.clientY + touch2.clientY) / 2 |
| 174 }; | 163 }; |
| 175 } | 164 } |
| 176 }; | 165 }; |
| OLD | NEW |