OLD | NEW |
(Empty) | |
| 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. |
| 4 |
| 5 /** |
| 6 * @fileoverview Touch Handler. Class that handles all touch events and |
| 7 * uses them to interpret higher level gestures and behaviors. TouchEvent is a |
| 8 * built in mobile safari type: |
| 9 * http://developer.apple.com/safari/library/documentation/UserExperience/Refere
nce/TouchEventClassReference/TouchEvent/TouchEvent.html. |
| 10 * This class is intended to work with all webkit browsers, tested on Chrome and |
| 11 * iOS. |
| 12 * |
| 13 * The following types of gestures are currently supported. See the definition |
| 14 * of TouchHandler.EventType for details. |
| 15 * |
| 16 * Single Touch: |
| 17 * This provides simple single-touch events. Any secondary touch is |
| 18 * ignored. |
| 19 * |
| 20 * Drag: |
| 21 * A single touch followed by some movement. This behavior will handle all |
| 22 * of the required events and report the properties of the drag to you |
| 23 * while the touch is happening and at the end of the drag sequence. This |
| 24 * behavior will NOT perform the actual dragging (redrawing the element) |
| 25 * for you, this responsibility is left to the client code. |
| 26 * |
| 27 * Long press: |
| 28 * When your element is touched and held without any drag occuring, the |
| 29 * LONG_PRESS event will fire. |
| 30 */ |
| 31 'use strict'; |
| 32 |
| 33 /** |
| 34 * A TouchHandler attaches to an Element, listents for low-level touch (or |
| 35 * mouse) events and dispatching higher-level events on the element. |
| 36 * @param {!Element} element The element to listen on and fire events |
| 37 * for. |
| 38 * @constructor |
| 39 */ |
| 40 function TouchHandler(element) { |
| 41 /** |
| 42 * @type {!Element} |
| 43 * @private |
| 44 */ |
| 45 this.element_ = element; |
| 46 |
| 47 /** |
| 48 * The absolute sum of all touch y deltas. |
| 49 * @type {number} |
| 50 * @private |
| 51 */ |
| 52 this.totalMoveY_ = 0; |
| 53 |
| 54 /** |
| 55 * The absolute sum of all touch x deltas. |
| 56 * @type {number} |
| 57 * @private |
| 58 */ |
| 59 this.totalMoveX_ = 0; |
| 60 |
| 61 /** |
| 62 * An array of tuples where the first item is the horizontal component of a |
| 63 * recent relevant touch and the second item is the touch's time stamp. Old |
| 64 * touches are removed based on the max tracking time and when direction |
| 65 * changes. |
| 66 * @type {!Array.<number>} |
| 67 * @private |
| 68 */ |
| 69 this.recentTouchesX_ = []; |
| 70 |
| 71 /** |
| 72 * An array of tuples where the first item is the vertical component of a |
| 73 * recent relevant touch and the second item is the touch's time stamp. Old |
| 74 * touches are removed based on the max tracking time and when direction |
| 75 * changes. |
| 76 * @type {!Array.<number>} |
| 77 * @private |
| 78 */ |
| 79 this.recentTouchesY_ = []; |
| 80 |
| 81 /** |
| 82 * Used to keep track of all events we subscribe to so we can easily clean up |
| 83 * @type {EventTracker} |
| 84 * @private |
| 85 */ |
| 86 this.events_ = new EventTracker(); |
| 87 } |
| 88 |
| 89 |
| 90 /** |
| 91 * DOM Events that may be fired by the TouchHandler at the element |
| 92 */ |
| 93 TouchHandler.EventType = { |
| 94 // Fired whenever the element is touched as the only touch to the device. |
| 95 // enableDrag defaults to false, set to true to permit dragging. |
| 96 TOUCH_START: 'touchhandler:touch_start', |
| 97 |
| 98 // Fired when an element is held for a period of time. Prevents dragging |
| 99 // from occuring (even if enableDrag was set to true). |
| 100 LONG_PRESS: 'touchhandler:long_press', |
| 101 |
| 102 // If enableDrag was set to true at TOUCH_START, DRAG_START will fire when the |
| 103 // touch first moves sufficient distance. enableDrag is set to true |
| 104 // but can be reset to false to cancel the drag. |
| 105 DRAG_START: 'touchhandler:drag_start', |
| 106 |
| 107 // If enableDrag was true after DRAG_START, DRAG_MOVE will fire whenever the |
| 108 // touch is moved. |
| 109 DRAG_MOVE: 'touchhandler:drag_move', |
| 110 |
| 111 // Fired just before TOUCH_END when a drag is released. Correlates 1:1 with a |
| 112 // DRAG_START. |
| 113 DRAG_END: 'touchhandler:drag_end', |
| 114 |
| 115 // Fired whenever a touch that is being tracked has been released. Correlates |
| 116 // 1:1 with a TOUCH_START. |
| 117 TOUCH_END: 'touchhandler:touch_end' |
| 118 }; |
| 119 |
| 120 |
| 121 /** |
| 122 * The type of event sent by TouchHandler |
| 123 * @constructor |
| 124 * @param {string} type The type of event (one of Grabber.EventType). |
| 125 * @param {boolean} bubbles Whether or not the event should bubble. |
| 126 * @param {number} clientX The X location of the touch. |
| 127 * @param {number} clientY The Y location of the touch. |
| 128 * @param {!Element} touchedElement The element the original event targetted. |
| 129 */ |
| 130 TouchHandler.Event = function(type, bubbles, clientX, clientY, |
| 131 touchedElement) { |
| 132 var event = document.createEvent('Event'); |
| 133 event.initEvent(type, bubbles, true); |
| 134 event.__proto__ = TouchHandler.Event.prototype; |
| 135 |
| 136 /** |
| 137 * The X location of the touch affected |
| 138 * @type {number} |
| 139 */ |
| 140 event.clientX = clientX; |
| 141 |
| 142 /** |
| 143 * The Y location of the touch affected |
| 144 * @type {number} |
| 145 */ |
| 146 event.clientY = clientY; |
| 147 |
| 148 /** |
| 149 * The element at the location of the touch. |
| 150 * @type {!Element} |
| 151 */ |
| 152 event.touchedElement = touchedElement; |
| 153 |
| 154 return event; |
| 155 }; |
| 156 |
| 157 TouchHandler.Event.prototype = { |
| 158 __proto__: Event.prototype, |
| 159 |
| 160 /** |
| 161 * For TOUCH_START and DRAG START events, set to true to enable dragging or |
| 162 * false to disable dragging. |
| 163 * @type {boolean|undefined} |
| 164 */ |
| 165 enableDrag: undefined, |
| 166 |
| 167 /** |
| 168 * For DRAG events, provides the horizontal component of the |
| 169 * drag delta. Drag delta is defined as the delta of the start touch position |
| 170 * and the current drag position. |
| 171 * @type {number|undefined} |
| 172 */ |
| 173 dragDeltaX: undefined, |
| 174 |
| 175 /** |
| 176 * For DRAG events, provides the vertical component of the |
| 177 * drag delta. |
| 178 * @type {number|undefined} |
| 179 */ |
| 180 dragDeltaY: undefined |
| 181 }; |
| 182 |
| 183 /** |
| 184 * Minimum movement of touch required to be considered a drag. |
| 185 * @type {number} |
| 186 * @private |
| 187 */ |
| 188 TouchHandler.MIN_TRACKING_FOR_DRAG_ = 8; |
| 189 |
| 190 |
| 191 /** |
| 192 * The maximum number of ms to track a touch event. After an event is older than |
| 193 * this value, it will be ignored in velocity calculations. |
| 194 * @type {number} |
| 195 * @private |
| 196 */ |
| 197 TouchHandler.MAX_TRACKING_TIME_ = 250; |
| 198 |
| 199 |
| 200 /** |
| 201 * The maximum number of touches to track. |
| 202 * @type {number} |
| 203 * @private |
| 204 */ |
| 205 TouchHandler.MAX_TRACKING_TOUCHES_ = 5; |
| 206 |
| 207 |
| 208 /** |
| 209 * The maximum velocity to return, in pixels per millisecond, that is used to |
| 210 * guard against errors in calculating end velocity of a drag. This is a very |
| 211 * fast drag velocity. |
| 212 * @type {number} |
| 213 * @private |
| 214 */ |
| 215 TouchHandler.MAXIMUM_VELOCITY_ = 5; |
| 216 |
| 217 |
| 218 /** |
| 219 * The velocity to return, in pixel per millisecond, when the time stamps on the |
| 220 * events are erroneous. The browser can return bad time stamps if the thread |
| 221 * is blocked for the duration of the drag. This is a low velocity to prevent |
| 222 * the content from moving quickly after a slow drag. It is less jarring if the |
| 223 * content moves slowly after a fast drag. |
| 224 * @type {number} |
| 225 * @private |
| 226 */ |
| 227 TouchHandler.VELOCITY_FOR_INCORRECT_EVENTS_ = 1; |
| 228 |
| 229 /** |
| 230 * The time, in milliseconds, that a touch must be held to be considered |
| 231 * 'long'. |
| 232 * @type {number} |
| 233 * @private |
| 234 */ |
| 235 TouchHandler.TIME_FOR_LONG_PRESS_ = 500; |
| 236 |
| 237 TouchHandler.prototype = { |
| 238 /** |
| 239 * If defined, the identifer of the single touch that is active. Note that |
| 240 * 0 is a valid touch identifier - it should not be treated equivalently to |
| 241 * undefined. |
| 242 * @type {number|undefined} |
| 243 * @private |
| 244 */ |
| 245 activeTouch_: undefined, |
| 246 |
| 247 /** |
| 248 * @type {boolean|undefined} |
| 249 * @private |
| 250 */ |
| 251 tracking_: undefined, |
| 252 |
| 253 /** |
| 254 * @type {number|undefined} |
| 255 * @private |
| 256 */ |
| 257 startTouchX_: undefined, |
| 258 |
| 259 /** |
| 260 * @type {number|undefined} |
| 261 * @private |
| 262 */ |
| 263 startTouchY_: undefined, |
| 264 |
| 265 /** |
| 266 * @type {number|undefined} |
| 267 * @private |
| 268 */ |
| 269 endTouchX_: undefined, |
| 270 |
| 271 /** |
| 272 * @type {number|undefined} |
| 273 * @private |
| 274 */ |
| 275 endTouchY_: undefined, |
| 276 |
| 277 /** |
| 278 * Time of the touchstart event. |
| 279 * @type {number|undefined} |
| 280 * @private |
| 281 */ |
| 282 startTime_: undefined, |
| 283 |
| 284 /** |
| 285 * The time of the touchend event. |
| 286 * @type {number|undefined} |
| 287 * @private |
| 288 */ |
| 289 endTime_: undefined, |
| 290 |
| 291 /** |
| 292 * @type {number|undefined} |
| 293 * @private |
| 294 */ |
| 295 lastTouchX_: undefined, |
| 296 |
| 297 /** |
| 298 * @type {number|undefined} |
| 299 * @private |
| 300 */ |
| 301 lastTouchY_: undefined, |
| 302 |
| 303 /** |
| 304 * @type {number|undefined} |
| 305 * @private |
| 306 */ |
| 307 lastMoveX_: undefined, |
| 308 |
| 309 /** |
| 310 * @type {number|undefined} |
| 311 * @private |
| 312 */ |
| 313 lastMoveY_: undefined, |
| 314 |
| 315 /** |
| 316 * @type {number|undefined} |
| 317 * @private |
| 318 */ |
| 319 longPressTimeout_: undefined, |
| 320 |
| 321 /** |
| 322 * If defined and true, the next click event should be swallowed |
| 323 * @type {boolean|undefined} |
| 324 * @private |
| 325 */ |
| 326 swallowNextClick_: undefined, |
| 327 |
| 328 /** |
| 329 * Start listenting for events. |
| 330 * @param {boolean=} opt_capture True if the TouchHandler should listen to |
| 331 * during the capture phase. |
| 332 */ |
| 333 enable: function(opt_capture) { |
| 334 var capture = !!opt_capture; |
| 335 |
| 336 // Just listen to start events for now. When a touch is occuring we'll want |
| 337 // to be subscribed to move and end events on the document, but we don't |
| 338 // want to incur the cost of lots of no-op handlers on the document. |
| 339 this.events_.add(this.element_, 'touchstart', this.onStart_.bind(this), |
| 340 capture); |
| 341 this.events_.add(this.element_, 'mousedown', |
| 342 this.mouseToTouchCallback_(this.onStart_.bind(this)), |
| 343 capture); |
| 344 |
| 345 // If the element is long-pressed, we may need to swallow a click |
| 346 this.events_.add(this.element_, 'click', this.onClick_.bind(this), true); |
| 347 }, |
| 348 |
| 349 /** |
| 350 * Stop listening to all events. |
| 351 */ |
| 352 disable: function() { |
| 353 this.stopTouching_(); |
| 354 this.events_.removeAll(); |
| 355 }, |
| 356 |
| 357 /** |
| 358 * Wraps a callback with translations of mouse events to touch events. |
| 359 * NOTE: These types really should be function(Event) but then we couldn't use |
| 360 * this with bind (which operates on any type of function). Doesn't JSDoc |
| 361 * support some sort of polymorphic types? |
| 362 * @param {Function} callback The event callback. |
| 363 * @return {Function} The wrapping callback. |
| 364 * @private |
| 365 */ |
| 366 mouseToTouchCallback_: function(callback) { |
| 367 return function(e) { |
| 368 // Note that there may be synthesizes mouse events caused by touch events |
| 369 // (a mouseDown after a touch-click). We leave it up to the client to |
| 370 // worry about this if it matters to them (typically a short |
| 371 // mouseDown/mouseUp without a click is no big problem and it's not |
| 372 // obvious how we identify such synthesized events in a general way). |
| 373 var touch = { |
| 374 // any fixed value will do for the identifier - there will only |
| 375 // ever be a single active 'touch' when using the mouse. |
| 376 identifier: 0, |
| 377 clientX: e.clientX, |
| 378 clientY: e.clientY, |
| 379 target: e.target |
| 380 }; |
| 381 e.touches = []; |
| 382 e.targetTouches = []; |
| 383 e.changedTouches = [touch]; |
| 384 if (e.type != 'mouseup') { |
| 385 e.touches[0] = touch; |
| 386 e.targetTouches[0] = touch; |
| 387 } |
| 388 callback(e); |
| 389 }; |
| 390 }, |
| 391 |
| 392 /** |
| 393 * Begin tracking the touchable element, it is eligible for dragging. |
| 394 * @private |
| 395 */ |
| 396 beginTracking_: function() { |
| 397 this.tracking_ = true; |
| 398 }, |
| 399 |
| 400 /** |
| 401 * Stop tracking the touchable element, it is no longer dragging. |
| 402 * @private |
| 403 */ |
| 404 endTracking_: function() { |
| 405 this.tracking_ = false; |
| 406 this.dragging_ = false; |
| 407 this.totalMoveY_ = 0; |
| 408 this.totalMoveX_ = 0; |
| 409 }, |
| 410 |
| 411 /** |
| 412 * Reset the touchable element as if we never saw the touchStart |
| 413 * Doesn't dispatch any end events - be careful of existing listeners. |
| 414 */ |
| 415 cancelTouch: function() { |
| 416 this.stopTouching_(); |
| 417 this.endTracking_(); |
| 418 // If clients needed to be aware of this, we could fire a cancel event here. |
| 419 }, |
| 420 |
| 421 /** |
| 422 * Record that touching has stopped |
| 423 * @private |
| 424 */ |
| 425 stopTouching_: function() { |
| 426 // Mark as no longer being touched |
| 427 this.activeTouch_ = undefined; |
| 428 |
| 429 // If we're waiting for a long press, stop |
| 430 window.clearTimeout(this.longPressTimeout_); |
| 431 |
| 432 // Stop listening for move/end events until there's another touch. |
| 433 // We don't want to leave handlers piled up on the document. |
| 434 // Note that there's no harm in removing handlers that weren't added, so |
| 435 // rather than track whether we're using mouse or touch we do both. |
| 436 this.events_.remove(document, 'touchmove'); |
| 437 this.events_.remove(document, 'touchend'); |
| 438 this.events_.remove(document, 'touchcancel'); |
| 439 this.events_.remove(document, 'mousemove'); |
| 440 this.events_.remove(document, 'mouseup'); |
| 441 }, |
| 442 |
| 443 /** |
| 444 * Touch start handler. |
| 445 * @param {!TouchEvent} e The touchstart event. |
| 446 * @private |
| 447 */ |
| 448 onStart_: function(e) { |
| 449 // Only process single touches. If there is already a touch happening, or |
| 450 // two simultaneous touches then just ignore them. |
| 451 if (e.touches.length > 1) |
| 452 // Note that we could cancel an active touch here. That would make |
| 453 // simultaneous touch behave similar to near-simultaneous. However, if the |
| 454 // user is dragging something, an accidental second touch could be quite |
| 455 // disruptive if it cancelled their drag. Better to just ignore it. |
| 456 return; |
| 457 |
| 458 // It's still possible there could be an active "touch" if the user is |
| 459 // simultaneously using a mouse and a touch input. |
| 460 if (this.activeTouch_ !== undefined) |
| 461 return; |
| 462 |
| 463 var touch = e.targetTouches[0]; |
| 464 this.activeTouch_ = touch.identifier; |
| 465 |
| 466 // We've just started touching so shouldn't swallow any upcoming click |
| 467 if (this.swallowNextClick_) |
| 468 this.swallowNextClick_ = false; |
| 469 |
| 470 // Sign up for end/cancel notifications for this touch. |
| 471 // Note that we do this on the document so that even if the user drags their |
| 472 // finger off the element, we'll still know what they're doing. |
| 473 if (e.type == 'mousedown') { |
| 474 this.events_.add(document, 'mouseup', |
| 475 this.mouseToTouchCallback_(this.onEnd_.bind(this)), false); |
| 476 } else { |
| 477 this.events_.add(document, 'touchend', this.onEnd_.bind(this), false); |
| 478 this.events_.add(document, 'touchcancel', this.onEnd_.bind(this), false); |
| 479 } |
| 480 |
| 481 // This timeout is cleared on touchEnd and onDrag |
| 482 // If we invoke the function then we have a real long press |
| 483 window.clearTimeout(this.longPressTimeout_); |
| 484 this.longPressTimeout_ = window.setTimeout( |
| 485 this.onLongPress_.bind(this), |
| 486 TouchHandler.TIME_FOR_LONG_PRESS_); |
| 487 |
| 488 // Dispatch the TOUCH_START event |
| 489 if (!this.dispatchEvent_(TouchHandler.EventType.TOUCH_START, e.target, |
| 490 touch)) |
| 491 // Dragging was not enabled, nothing more to do |
| 492 return; |
| 493 |
| 494 // We want dragging notifications |
| 495 if (e.type == 'mousedown') { |
| 496 this.events_.add(document, 'mousemove', |
| 497 this.mouseToTouchCallback_(this.onMove_.bind(this)), false); |
| 498 } else { |
| 499 this.events_.add(document, 'touchmove', this.onMove_.bind(this), false); |
| 500 } |
| 501 |
| 502 this.startTouchX_ = this.lastTouchX_ = touch.clientX; |
| 503 this.startTouchY_ = this.lastTouchY_ = touch.clientY; |
| 504 this.startTime_ = e.timeStamp; |
| 505 |
| 506 this.recentTouchesX_ = []; |
| 507 this.recentTouchesY_ = []; |
| 508 this.recentTouchesX_.push(touch.clientX, e.timeStamp); |
| 509 this.recentTouchesY_.push(touch.clientY, e.timeStamp); |
| 510 |
| 511 this.beginTracking_(); |
| 512 }, |
| 513 |
| 514 /** |
| 515 * Given a list of Touches, find the one matching our activeTouch identifier. |
| 516 * Note that Chrome currently always uses 0 as the identifier. In that case |
| 517 * we'll end up always choosing the first element in the list. |
| 518 * @param {TouchList} touches The list of Touch objects to search. |
| 519 * @return {!Touch|undefined} The touch matching our active ID if any. |
| 520 * @private |
| 521 */ |
| 522 findActiveTouch_: function(touches) { |
| 523 assert(this.activeTouch_ !== undefined, 'Expecting an active touch'); |
| 524 // A TouchList isn't actually an array, so we shouldn't use |
| 525 // Array.prototype.filter/some, etc. |
| 526 for (var i = 0; i < touches.length; i++) { |
| 527 if (touches[i].identifier == this.activeTouch_) |
| 528 return touches[i]; |
| 529 } |
| 530 return undefined; |
| 531 }, |
| 532 |
| 533 /** |
| 534 * Touch move handler. |
| 535 * @param {!TouchEvent} e The touchmove event. |
| 536 * @private |
| 537 */ |
| 538 onMove_: function(e) { |
| 539 if (!this.tracking_) |
| 540 return; |
| 541 |
| 542 // Hack to enable a work-around for a bug - see standalone_hack.js |
| 543 var target = e.fixedrealTarget || e.target; |
| 544 |
| 545 /* console.log('MoveTarget: ' + e.target.tagName + ' ' + |
| 546 e.target.classList[0] + ' ' + |
| 547 window.getComputedStyle(e.target).pointerEvents); |
| 548 */ |
| 549 // Our active touch should always be in the list of touches still active |
| 550 assert(this.findActiveTouch_(e.touches), 'Missing touchEnd'); |
| 551 |
| 552 var that = this; |
| 553 var touch = this.findActiveTouch_(e.changedTouches); |
| 554 if (!touch) |
| 555 return; |
| 556 |
| 557 var clientX = touch.clientX; |
| 558 var clientY = touch.clientY; |
| 559 |
| 560 var moveX = this.lastTouchX_ - clientX; |
| 561 var moveY = this.lastTouchY_ - clientY; |
| 562 this.totalMoveX_ += Math.abs(moveX); |
| 563 this.totalMoveY_ += Math.abs(moveY); |
| 564 this.lastTouchX_ = clientX; |
| 565 this.lastTouchY_ = clientY; |
| 566 |
| 567 if (!this.dragging_ && (this.totalMoveY_ > |
| 568 TouchHandler.MIN_TRACKING_FOR_DRAG_ || |
| 569 this.totalMoveX_ > |
| 570 TouchHandler.MIN_TRACKING_FOR_DRAG_)) { |
| 571 // If we're waiting for a long press, stop |
| 572 window.clearTimeout(this.longPressTimeout_); |
| 573 |
| 574 // Dispatch the DRAG_START event and record whether dragging should be |
| 575 // allowed or not. Note that this relies on the current value of |
| 576 // startTouchX/Y - handlers may use the initial drag delta to determine |
| 577 // if dragging should be permitted. |
| 578 this.dragging_ = this.dispatchEvent_( |
| 579 TouchHandler.EventType.DRAG_START, target, touch); |
| 580 |
| 581 if (this.dragging_) { |
| 582 // Update the start position here so that drag deltas have better values |
| 583 // but don't touch the recent positions so that velocity calculations |
| 584 // can still use touchstart position in the time and distance delta. |
| 585 this.startTouchX_ = clientX; |
| 586 this.startTouchY_ = clientY; |
| 587 this.startTime_ = e.timeStamp; |
| 588 } else { |
| 589 this.endTracking_(); |
| 590 } |
| 591 } |
| 592 |
| 593 if (this.dragging_) { |
| 594 this.dispatchEvent_(TouchHandler.EventType.DRAG_MOVE, target, touch); |
| 595 |
| 596 this.removeTouchesInWrongDirection_(this.recentTouchesX_, this.lastMoveX_, |
| 597 moveX); |
| 598 this.removeTouchesInWrongDirection_(this.recentTouchesY_, this.lastMoveY_, |
| 599 moveY); |
| 600 this.removeOldTouches_(this.recentTouchesX_, e.timeStamp); |
| 601 this.removeOldTouches_(this.recentTouchesY_, e.timeStamp); |
| 602 this.recentTouchesX_.push(clientX, e.timeStamp); |
| 603 this.recentTouchesY_.push(clientY, e.timeStamp); |
| 604 } |
| 605 |
| 606 this.lastMoveX_ = moveX; |
| 607 this.lastMoveY_ = moveY; |
| 608 }, |
| 609 |
| 610 /** |
| 611 * Filters the provided recent touches array to remove all touches except the |
| 612 * last if the move direction has changed. |
| 613 * @param {!Array.<number>} recentTouches An array of tuples where the first |
| 614 * item is the x or y component of the recent touch and the second item |
| 615 * is the touch time stamp. |
| 616 * @param {number|undefined} lastMove The x or y component of the previous |
| 617 * move. |
| 618 * @param {number} recentMove The x or y component of the most recent move. |
| 619 * @private |
| 620 */ |
| 621 removeTouchesInWrongDirection_: function(recentTouches, lastMove, |
| 622 recentMove) { |
| 623 if (lastMove && recentMove && recentTouches.length > 2 && |
| 624 (lastMove > 0 ^ recentMove > 0)) { |
| 625 recentTouches.splice(0, recentTouches.length - 2); |
| 626 } |
| 627 }, |
| 628 |
| 629 /** |
| 630 * Filters the provided recent touches array to remove all touches older than |
| 631 * the max tracking time or the 5th most recent touch. |
| 632 * @param {!Array.<number>} recentTouches An array of tuples where the first |
| 633 * item is the x or y component of the recent touch and the second item |
| 634 * is the touch time stamp. |
| 635 * @param {number} recentTime The time of the most recent event. |
| 636 * @private |
| 637 */ |
| 638 removeOldTouches_: function(recentTouches, recentTime) { |
| 639 while (recentTouches.length && recentTime - recentTouches[1] > |
| 640 TouchHandler.MAX_TRACKING_TIME_ || |
| 641 recentTouches.length > |
| 642 TouchHandler.MAX_TRACKING_TOUCHES_ * 2) { |
| 643 recentTouches.splice(0, 2); |
| 644 } |
| 645 }, |
| 646 |
| 647 /** |
| 648 * Touch end handler. |
| 649 * @param {!TouchEvent} e The touchend event. |
| 650 * @private |
| 651 */ |
| 652 onEnd_: function(e) { |
| 653 var that = this; |
| 654 assert(this.activeTouch_ !== undefined, 'Expect to already be touching'); |
| 655 |
| 656 // If the touch we're tracking isn't changing here, ignore this touch end. |
| 657 var touch = this.findActiveTouch_(e.changedTouches); |
| 658 if (!touch) { |
| 659 // In most cases, our active touch will be in the 'touches' collection, |
| 660 // but we can't assert that because occasionally two touchend events can |
| 661 // occur at almost the same time with both having empty 'touches' lists. |
| 662 // I.e., 'touches' seems like it can be a bit more up-to-date than the |
| 663 // current event. |
| 664 return; |
| 665 } |
| 666 |
| 667 // This is touchEnd for the touch we're monitoring |
| 668 assert(!this.findActiveTouch_(e.touches), |
| 669 'Touch ended also still active'); |
| 670 |
| 671 // Indicate that touching has finished |
| 672 this.stopTouching_(); |
| 673 |
| 674 if (this.tracking_) { |
| 675 var clientX = touch.clientX; |
| 676 var clientY = touch.clientY; |
| 677 |
| 678 if (this.dragging_) { |
| 679 this.endTime_ = e.timeStamp; |
| 680 this.endTouchX_ = clientX; |
| 681 this.endTouchY_ = clientY; |
| 682 |
| 683 this.removeOldTouches_(this.recentTouchesX_, e.timeStamp); |
| 684 this.removeOldTouches_(this.recentTouchesY_, e.timeStamp); |
| 685 |
| 686 this.dispatchEvent_(TouchHandler.EventType.DRAG_END, e.target, touch); |
| 687 |
| 688 // Note that in some situations we can get a click event here as well. |
| 689 // For now this isn't a problem, but we may want to consider having some |
| 690 // logic that hides clicks that appear to be caused by a touchEnd used |
| 691 // for dragging. |
| 692 } |
| 693 |
| 694 this.endTracking_(); |
| 695 } |
| 696 |
| 697 // Note that we dispatch the touchEnd event last so that events at different |
| 698 // levels of semantics nest nicely (similar to how DOM drag-and-drop events |
| 699 // are nested inside of the mouse events that trigger them). |
| 700 this.dispatchEvent_(TouchHandler.EventType.TOUCH_END, e.target, touch); |
| 701 }, |
| 702 |
| 703 /** |
| 704 * Get end velocity of the drag. This method is specific to drag behavior, so |
| 705 * if touch behavior and drag behavior is split then this should go with drag |
| 706 * behavior. End velocity is defined as deltaXY / deltaTime where deltaXY is |
| 707 * the difference between endPosition and the oldest recent position, and |
| 708 * deltaTime is the difference between endTime and the oldest recent time |
| 709 * stamp. |
| 710 * @return {Object} The x and y velocity. |
| 711 */ |
| 712 getEndVelocity: function() { |
| 713 // Note that we could move velocity to just be an end-event parameter. |
| 714 var velocityX = this.recentTouchesX_.length ? |
| 715 (this.endTouchX_ - this.recentTouchesX_[0]) / |
| 716 (this.endTime_ - this.recentTouchesX_[1]) : 0; |
| 717 var velocityY = this.recentTouchesY_.length ? |
| 718 (this.endTouchY_ - this.recentTouchesY_[0]) / |
| 719 (this.endTime_ - this.recentTouchesY_[1]) : 0; |
| 720 |
| 721 velocityX = this.correctVelocity_(velocityX); |
| 722 velocityY = this.correctVelocity_(velocityY); |
| 723 |
| 724 return { |
| 725 x: velocityX, |
| 726 y: velocityY |
| 727 }; |
| 728 }, |
| 729 |
| 730 /** |
| 731 * Correct erroneous velocities by capping the velocity if we think it's too |
| 732 * high, or setting it to a default velocity if know that the event data is |
| 733 * bad. |
| 734 * @param {number} velocity The x or y velocity component. |
| 735 * @return {number} The corrected velocity. |
| 736 * @private |
| 737 */ |
| 738 correctVelocity_: function(velocity) { |
| 739 var absVelocity = Math.abs(velocity); |
| 740 |
| 741 // We add to recent touches for each touchstart and touchmove. If we have |
| 742 // fewer than 3 touches (6 entries), we assume that the thread was blocked |
| 743 // for the duration of the drag and we received events in quick succession |
| 744 // with the wrong time stamps. |
| 745 if (absVelocity > TouchHandler.MAXIMUM_VELOCITY_) { |
| 746 absVelocity = this.recentTouchesY_.length < 3 ? |
| 747 TouchHandler.VELOCITY_FOR_INCORRECT_EVENTS_ : |
| 748 TouchHandler.MAXIMUM_VELOCITY_; |
| 749 } |
| 750 return absVelocity * (velocity < 0 ? -1 : 1); |
| 751 }, |
| 752 |
| 753 /** |
| 754 * Handler when an element has been pressed for a long time |
| 755 * @private |
| 756 */ |
| 757 onLongPress_: function() { |
| 758 // Swallow any click that occurs on this element without an intervening |
| 759 // touch start event. This simple click-busting technique should be |
| 760 // sufficient here since a real click should have a touchstart first. |
| 761 this.swallowNextClick_ = true; |
| 762 |
| 763 // Dispatch to the LONG_PRESS |
| 764 this.dispatchEventXY_(TouchHandler.EventType.LONG_PRESS, this.element_, |
| 765 this.startTouchX_, this.startTouchY_); |
| 766 }, |
| 767 |
| 768 /** |
| 769 * Click handler - used to swallow clicks after a long-press |
| 770 * @param {!Event} e The click event. |
| 771 * @private |
| 772 */ |
| 773 onClick_: function(e) { |
| 774 if (this.swallowNextClick_) { |
| 775 e.preventDefault(); |
| 776 e.stopPropagation(); |
| 777 this.swallowNextClick_ = false; |
| 778 } |
| 779 }, |
| 780 |
| 781 /** |
| 782 * Dispatch a TouchHandler event to the element |
| 783 * @param {string} eventType The event to dispatch. |
| 784 * @param {!Element} touchedElement The element which was touched. |
| 785 * @param {Touch} touch The touch triggering this event. |
| 786 * @return {boolean|undefined} The value of enableDrag after dispatching |
| 787 * the event. |
| 788 * @private |
| 789 */ |
| 790 dispatchEvent_: function(eventType, touchedElement, touch) { |
| 791 return this.dispatchEventXY_(eventType, touchedElement, touch.clientX, |
| 792 touch.clientY); |
| 793 }, |
| 794 |
| 795 /** |
| 796 * Dispatch a TouchHandler event to the element |
| 797 * @param {string} eventType The event to dispatch. |
| 798 @param {number} clientX The X location for the event. |
| 799 @param {number} clientY The Y location for the event. |
| 800 * @return {boolean|undefined} The value of enableDrag after dispatching |
| 801 * the event. |
| 802 * @private |
| 803 */ |
| 804 dispatchEventXY_: function(eventType, touchedElement, clientX, clientY) { |
| 805 var isDrag = (eventType == TouchHandler.EventType.DRAG_START || |
| 806 eventType == TouchHandler.EventType.DRAG_MOVE || |
| 807 eventType == TouchHandler.EventType.DRAG_END); |
| 808 |
| 809 // Drag events don't bubble - we're really just dragging the element, |
| 810 // not affecting its parent at all. |
| 811 var bubbles = !isDrag; |
| 812 |
| 813 var event = new TouchHandler.Event(eventType, bubbles, clientX, clientY, |
| 814 touchedElement); |
| 815 |
| 816 // Set enableDrag when it can be overridden |
| 817 if (eventType == TouchHandler.EventType.TOUCH_START) |
| 818 event.enableDrag = false; |
| 819 else if (eventType == TouchHandler.EventType.DRAG_START) |
| 820 event.enableDrag = true; |
| 821 |
| 822 if (isDrag) { |
| 823 event.dragDeltaX = clientX - this.startTouchX_; |
| 824 event.dragDeltaY = clientY - this.startTouchY_; |
| 825 } |
| 826 |
| 827 this.element_.dispatchEvent(event); |
| 828 return event.enableDrag; |
| 829 } |
| 830 }; |
| 831 |
OLD | NEW |