| 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: false }); | 20 'touchstart', this.onTouchStart_.bind(this), {passive: false}); |
| 21 this.element_.addEventListener( | 21 this.element_.addEventListener( |
| 22 'touchmove', this.onTouch_.bind(this), { passive: true }); | 22 'touchmove', this.onTouch_.bind(this), {passive: true}); |
| 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.lastEvent_ = null; | 29 this.lastEvent_ = null; |
| 30 | 30 |
| 31 this.listeners_ = new Map([ | 31 this.listeners_ = |
| 32 ['pinchstart', []], | 32 new Map([['pinchstart', []], ['pinchupdate', []], ['pinchend', []]]); |
| 33 ['pinchupdate', []], | |
| 34 ['pinchend', []] | |
| 35 ]); | |
| 36 } | 33 } |
| 37 | 34 |
| 38 /** | 35 /** |
| 39 * Add a |listener| to be notified of |type| events. | 36 * Add a |listener| to be notified of |type| events. |
| 40 * @param {string} type The event type to be notified for. | 37 * @param {string} type The event type to be notified for. |
| 41 * @param {Function} listener The callback. | 38 * @param {Function} listener The callback. |
| 42 */ | 39 */ |
| 43 addEventListener(type, listener) { | 40 addEventListener(type, listener) { |
| 44 if (this.listeners_.has(type)) { | 41 if (this.listeners_.has(type)) { |
| 45 this.listeners_.get(type).push(listener); | 42 this.listeners_.get(type).push(listener); |
| (...skipping 17 matching lines...) Expand all Loading... |
| 63 * @private | 60 * @private |
| 64 * @param {!TouchEvent} event Touch event on the element. | 61 * @param {!TouchEvent} event Touch event on the element. |
| 65 */ | 62 */ |
| 66 onTouchStart_(event) { | 63 onTouchStart_(event) { |
| 67 // We must preventDefault if there is a two finger touch. By doing so | 64 // We must preventDefault if there is a two finger touch. By doing so |
| 68 // native pinch-zoom does not interfere with our way of handling the event. | 65 // native pinch-zoom does not interfere with our way of handling the event. |
| 69 if (event.touches.length == 2) { | 66 if (event.touches.length == 2) { |
| 70 event.preventDefault(); | 67 event.preventDefault(); |
| 71 this.pinchStartEvent_ = event; | 68 this.pinchStartEvent_ = event; |
| 72 this.lastEvent_ = event; | 69 this.lastEvent_ = event; |
| 73 this.notify_({ | 70 this.notify_( |
| 74 type: 'pinchstart', | 71 {type: 'pinchstart', center: GestureDetector.center_(event)}); |
| 75 center: GestureDetector.center_(event) | |
| 76 }); | |
| 77 } | 72 } |
| 78 } | 73 } |
| 79 | 74 |
| 80 /** | 75 /** |
| 81 * The callback for touch move, end, and cancel events on the element. | 76 * The callback for touch move, end, and cancel events on the element. |
| 82 * @private | 77 * @private |
| 83 * @param {!TouchEvent} event Touch event on the element. | 78 * @param {!TouchEvent} event Touch event on the element. |
| 84 */ | 79 */ |
| 85 onTouch_(event) { | 80 onTouch_(event) { |
| 86 if (!this.pinchStartEvent_) | 81 if (!this.pinchStartEvent_) |
| (...skipping 10 matching lines...) Expand all Loading... |
| 97 startScaleRatio: startScaleRatio, | 92 startScaleRatio: startScaleRatio, |
| 98 center: center | 93 center: center |
| 99 }; | 94 }; |
| 100 this.pinchStartEvent_ = null; | 95 this.pinchStartEvent_ = null; |
| 101 this.lastEvent_ = null; | 96 this.lastEvent_ = null; |
| 102 this.notify_(endEvent); | 97 this.notify_(endEvent); |
| 103 return; | 98 return; |
| 104 } | 99 } |
| 105 | 100 |
| 106 let scaleRatio = GestureDetector.pinchScaleRatio_(event, this.lastEvent_); | 101 let scaleRatio = GestureDetector.pinchScaleRatio_(event, this.lastEvent_); |
| 107 let startScaleRatio = GestureDetector.pinchScaleRatio_( | 102 let startScaleRatio = |
| 108 event, this.pinchStartEvent_); | 103 GestureDetector.pinchScaleRatio_(event, this.pinchStartEvent_); |
| 109 let center = GestureDetector.center_(event); | 104 let center = GestureDetector.center_(event); |
| 110 this.notify_({ | 105 this.notify_({ |
| 111 type: 'pinchupdate', | 106 type: 'pinchupdate', |
| 112 scaleRatio: scaleRatio, | 107 scaleRatio: scaleRatio, |
| 113 direction: scaleRatio > 1.0 ? 'in' : 'out', | 108 direction: scaleRatio > 1.0 ? 'in' : 'out', |
| 114 startScaleRatio: startScaleRatio, | 109 startScaleRatio: startScaleRatio, |
| 115 center: center | 110 center: center |
| 116 }); | 111 }); |
| 117 | 112 |
| 118 this.lastEvent_ = event; | 113 this.lastEvent_ = event; |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 155 */ | 150 */ |
| 156 static center_(event) { | 151 static center_(event) { |
| 157 let touch1 = event.touches[0]; | 152 let touch1 = event.touches[0]; |
| 158 let touch2 = event.touches[1]; | 153 let touch2 = event.touches[1]; |
| 159 return { | 154 return { |
| 160 x: (touch1.clientX + touch2.clientX) / 2, | 155 x: (touch1.clientX + touch2.clientX) / 2, |
| 161 y: (touch1.clientY + touch2.clientY) / 2 | 156 y: (touch1.clientY + touch2.clientY) / 2 |
| 162 }; | 157 }; |
| 163 } | 158 } |
| 164 }; | 159 }; |
| OLD | NEW |