 Chromium Code Reviews
 Chromium Code Reviews Issue 6661024:
  Use a specialized new tab page in TOUCH_UI builds  (Closed) 
  Base URL: http://git.chromium.org/git/chromium.git@trunk
    
  
    Issue 6661024:
  Use a specialized new tab page in TOUCH_UI builds  (Closed) 
  Base URL: http://git.chromium.org/git/chromium.git@trunk| Index: chrome/browser/resources/touch_ntp/touchhandler.js | 
| diff --git a/chrome/browser/resources/touch_ntp/touchhandler.js b/chrome/browser/resources/touch_ntp/touchhandler.js | 
| new file mode 100644 | 
| index 0000000000000000000000000000000000000000..cb53afcb0754488c208fc0deb91b56a13a2e418d | 
| --- /dev/null | 
| +++ b/chrome/browser/resources/touch_ntp/touchhandler.js | 
| @@ -0,0 +1,838 @@ | 
| +// Copyright (c) 2011 The Chromium Authors. All rights reserved. | 
| +// Use of this source code is governed by a BSD-style license that can be | 
| +// found in the LICENSE file. | 
| + | 
| +/** | 
| + * @fileoverview Touch Handler. Class that handles all touch events and | 
| + * uses them to interpret higher level gestures and behaviors. TouchEvent is a | 
| + * built in mobile safari type: | 
| + * http://developer.apple.com/safari/library/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html. | 
| + * This class is intended to work with all webkit browsers, tested on Chrome and | 
| + * iOS. | 
| + * | 
| + * The following types of gestures are currently supported. See the definition | 
| + * of TouchHandler.EventType for details. | 
| + * | 
| + * Single Touch: | 
| + * This provides simple single-touch events. Any secondary touch is | 
| + * ignored. | 
| + * | 
| + * Drag: | 
| + * A single touch followed by some movement. This behavior will handle all | 
| + * of the required events and report the properties of the drag to you | 
| + * while the touch is happening and at the end of the drag sequence. This | 
| + * behavior will NOT perform the actual dragging (redrawing the element) | 
| + * for you, this responsibility is left to the client code. | 
| + * | 
| + * Long press: | 
| + * When your element is touched and held without any drag occuring, the | 
| + * LONG_PRESS event will fire. | 
| + */ | 
| + | 
| + | 
| +/** | 
| + * A TouchHandler attaches to an Element, listents for low-level touch (or | 
| + * mouse) events and dispatching higher-level events on the element. | 
| + * @param {!Element} element The element to listen on and fire events | 
| + * for. | 
| + * @constructor | 
| + */ | 
| +function TouchHandler(element) { | 
| + /** | 
| + * @type {!Element} | 
| + * @private | 
| + */ | 
| + this.element_ = element; | 
| + | 
| + /** | 
| + * The absolute sum of all touch y deltas. | 
| + * @type {number} | 
| + * @private | 
| + */ | 
| + this.totalMoveY_ = 0; | 
| 
arv (Not doing code reviews)
2011/03/10 19:25:59
move value types to prototype
 | 
| + | 
| + /** | 
| + * The absolute sum of all touch x deltas. | 
| + * @type {number} | 
| + * @private | 
| + */ | 
| + this.totalMoveX_ = 0; | 
| + | 
| + /** | 
| + * An array of tuples where the first item is the horizontal component of a | 
| + * recent relevant touch and the second item is the touch's time stamp. Old | 
| + * touches are removed based on the max tracking time and when direction | 
| + * changes. | 
| + * @type {!Array.<number>} | 
| + * @private | 
| + */ | 
| + this.recentTouchesX_ = []; | 
| + | 
| + /** | 
| + * An array of tuples where the first item is the vertical component of a | 
| + * recent relevant touch and the second item is the touch's time stamp. Old | 
| + * touches are removed based on the max tracking time and when direction | 
| + * changes. | 
| + * @type {!Array.<number>} | 
| + * @private | 
| + */ | 
| + this.recentTouchesY_ = []; | 
| + | 
| + /** | 
| + * Used to keep track of all events we subscribe to so we can easily clean up | 
| + * @type {EventTracker} | 
| + * @private | 
| + */ | 
| + this.events_ = new EventTracker(); | 
| +} | 
| + | 
| + | 
| +/** | 
| + * DOM Events that may be fired by the TouchHandler at the element | 
| + * All events are fired as DOM CustomEvents using TouchHandler.EventDetail | 
| + * to supply the details. | 
| + */ | 
| +TouchHandler.EventType = { | 
| + // Fired whenever the element is touched as the only touch to the device. | 
| + // detail.enableDrag defaults to false, set to true to permit dragging. | 
| + TOUCH_START: 'touchhandler:touch_start', | 
| + | 
| + // Fired when an element is held for a period of time. Prevents dragging | 
| + // from occuring (even if enableDrag was set to true). | 
| + LONG_PRESS: 'touchhandler:long_press', | 
| + | 
| + // If enableDrag was set to true at TOUCH_START, DRAG_START will fire when the | 
| + // touch first moves sufficient distance. detail.enableDrag is set to true | 
| + // but can be reset to false to cancel the drag. | 
| + DRAG_START: 'touchhandler:drag_start', | 
| + | 
| + // If detail.enableDrag was true after DRAG_START, DRAG_MOVE will fire | 
| + // whenever the touch is moved. | 
| + DRAG_MOVE: 'touchhandler:drag_move', | 
| + | 
| + // Fired just before TOUCH_END when a drag is released. Correlates 1:1 with a | 
| + // DRAG_START. | 
| + DRAG_END: 'touchhandler:drag_end', | 
| + | 
| + // Fired whenever a touch that is being tracked has been released. Correlates | 
| + // 1:1 with a TOUCH_START. | 
| + TOUCH_END: 'touchhandler:touch_end' | 
| +}; | 
| + | 
| + | 
| +/** | 
| + * The type of object use for our CustomEvent detail | 
| + * @constructor | 
| + * @param {number} clientX The X location of the touch. | 
| + * @param {number} clientY The Y location of the touch. | 
| + */ | 
| +TouchHandler.EventDetail = function(clientX, clientY) { | 
| + /** | 
| + * The X location of the touch affected | 
| + * @type {number} | 
| + */ | 
| + this.clientX = clientX; | 
| + | 
| + /** | 
| + * The Y location of the touch affected | 
| + * @type {number} | 
| + */ | 
| + this.clientY = clientY; | 
| +}; | 
| + | 
| +/** | 
| + * For TOUCH_START and DRAG START events, set to true to enable dragging or | 
| + * false to disable dragging. | 
| + * @type {boolean|undefined} | 
| + */ | 
| +TouchHandler.EventDetail.enableDrag; | 
| + | 
| +/** | 
| + * For DRAG events, provides the horizontal component of the | 
| + * drag delta. Drag delta is defined as the delta of the start touch position | 
| + * and the current drag position. | 
| + * @type {number|undefined} | 
| + */ | 
| +TouchHandler.EventDetail.dragDeltaX; | 
| + | 
| +/** | 
| + * For DRAG events, provides the vertical component of the | 
| + * drag delta. | 
| + * @type {number|undefined} | 
| + */ | 
| +TouchHandler.EventDetail.dragDeltaY; | 
| + | 
| +/** | 
| + * Minimum movement of touch required to be considered a drag. | 
| + * @type {number} | 
| + * @private | 
| + */ | 
| +TouchHandler.MIN_TRACKING_FOR_DRAG_ = 8; | 
| + | 
| + | 
| +/** | 
| + * The maximum number of ms to track a touch event. After an event is older than | 
| + * this value, it will be ignored in velocity calculations. | 
| + * @type {number} | 
| + * @private | 
| + */ | 
| +TouchHandler.MAX_TRACKING_TIME_ = 250; | 
| + | 
| + | 
| +/** | 
| + * The maximum number of touches to track. | 
| + * @type {number} | 
| + * @private | 
| + */ | 
| +TouchHandler.MAX_TRACKING_TOUCHES_ = 5; | 
| + | 
| + | 
| +/** | 
| + * The maximum velocity to return, in pixels per millisecond, that is used to | 
| + * guard against errors in calculating end velocity of a drag. This is a very | 
| + * fast drag velocity. | 
| + * @type {number} | 
| + * @private | 
| + */ | 
| +TouchHandler.MAXIMUM_VELOCITY_ = 5; | 
| + | 
| + | 
| +/** | 
| + * The velocity to return, in pixel per millisecond, when the time stamps on the | 
| + * events are erroneous. The browser can return bad time stamps if the thread | 
| + * is blocked for the duration of the drag. This is a low velocity to prevent | 
| + * the content from moving quickly after a slow drag. It is less jarring if the | 
| + * content moves slowly after a fast drag. | 
| + * @type {number} | 
| + * @private | 
| + */ | 
| +TouchHandler.VELOCITY_FOR_INCORRECT_EVENTS_ = 1; | 
| + | 
| +/** | 
| + * The time, in milliseconds, that a touch must be held to be considered | 
| + * 'long'. | 
| + * @type {number} | 
| + * @private | 
| + */ | 
| +TouchHandler.TIME_FOR_LONG_PRESS_ = 500; | 
| + | 
| +/** | 
| + * If defined, the identifer of the single touch that is active. Note that 0 is | 
| + * a valid touch identifier - it should not be treated equivalently to | 
| + * undefined. | 
| + * @type {number|undefined} | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.activeTouch_; | 
| + | 
| + | 
| +/** | 
| + * @type {boolean|undefined} | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.tracking_; | 
| + | 
| + | 
| +/** | 
| + * @type {number|undefined} | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.startTouchX_; | 
| + | 
| + | 
| +/** | 
| + * @type {number|undefined} | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.startTouchY_; | 
| + | 
| + | 
| +/** | 
| + * @type {number|undefined} | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.endTouchX_; | 
| + | 
| + | 
| +/** | 
| + * @type {number|undefined} | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.endTouchY_; | 
| + | 
| + | 
| +/** | 
| + * Time of the touchstart event. | 
| + * @type {number|undefined} | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.startTime_; | 
| + | 
| + | 
| +/** | 
| + * The time of the touchend event. | 
| + * @type {number|undefined} | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.endTime_; | 
| + | 
| + | 
| +/** | 
| + * @type {number|undefined} | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.lastTouchX_; | 
| + | 
| + | 
| +/** | 
| + * @type {number|undefined} | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.lastTouchY_; | 
| + | 
| + | 
| +/** | 
| + * @type {number|undefined} | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.lastMoveX_; | 
| + | 
| + | 
| +/** | 
| + * @type {number|undefined} | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.lastMoveY_; | 
| + | 
| +/** | 
| + * @type {number|undefined} | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.longPressTimeout_; | 
| + | 
| +/** | 
| + * If defined and true, the next click event should be swallowed | 
| + * @type {boolean|undefined} | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.swallowNextClick_; | 
| + | 
| +/** | 
| + * Start listenting for events. | 
| + * @param {boolean=} opt_capture True if the TouchHandler should listen to | 
| + * during the capture phase. | 
| + */ | 
| +TouchHandler.prototype.enable = function(opt_capture) { | 
| + var capture = !!opt_capture; | 
| + | 
| + // Just listen to start events for now. When a touch is occuring we'll want | 
| + // to be subscribed to move and end events on the document, but we don't want | 
| + // to incur the cost of lots of no-op handlers on the document. | 
| + this.events_.add(this.element_, 'touchstart', this.onStart_.bind(this), | 
| + capture); | 
| + this.events_.add(this.element_, 'mousedown', | 
| + this.mouseToTouchCallback_(this.onStart_.bind(this)), | 
| + capture); | 
| + | 
| + // If the element is long-pressed, we may need to swallow a click | 
| + this.events_.add(this.element_, 'click', this.onClick_.bind(this), true); | 
| +}; | 
| + | 
| +/** | 
| + * Stop listening to all events. | 
| + */ | 
| +TouchHandler.prototype.disable = function() { | 
| + this.stopTouching_(); | 
| + this.events_.removeAll(); | 
| +}; | 
| + | 
| +/** | 
| + * Wraps a callback with translations of mouse events to touch events. | 
| + * NOTE: These types really should be function(Event) but then we couldn't use | 
| + * this with bind (which operates on any type of function). Doesn't JSDoc | 
| + * support some sort of polymorphic types? | 
| + * @param {Function} callback The event callback. | 
| + * @return {Function} The wrapping callback. | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.mouseToTouchCallback_ = function(callback) { | 
| + return function(e) { | 
| + // Note that there may be synthesizes mouse events caused by touch events (a | 
| + // mouseDown after a touch-click). We leave it up to the client to worry | 
| + // about this if it matters to them (typically a short mouseDown/mouseUp | 
| + // without a click is no big problem and it's not obvious how we identify | 
| + // such synthesized events in a general way). | 
| + var touch = { | 
| + // any fixed value will do for the identifier - there will only | 
| + // ever be a single active 'touch' when using the mouse. | 
| + identifier: 0, | 
| + clientX: e.clientX, | 
| + clientY: e.clientY, | 
| + target: e.target | 
| + }; | 
| + e.touches = []; | 
| + e.targetTouches = []; | 
| + e.changedTouches = [touch]; | 
| + if (e.type != 'mouseup') { | 
| + e.touches[0] = touch; | 
| + e.targetTouches[0] = touch; | 
| + } | 
| + callback(e); | 
| + }; | 
| +}; | 
| + | 
| +/** | 
| + * Is the touch manager currently tracking touch moves to detect a drag? | 
| + * @return {boolean|undefined} True if currently tracking. | 
| + */ | 
| +TouchHandler.prototype.isTracking = function() { | 
| + return this.tracking_; | 
| +}; | 
| + | 
| + | 
| +/** | 
| + * Begin tracking the touchable element, it is eligible for dragging. | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.beginTracking_ = function() { | 
| + this.tracking_ = true; | 
| +}; | 
| + | 
| + | 
| +/** | 
| + * Stop tracking the touchable element, it is no longer dragging. | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.endTracking_ = function() { | 
| + this.tracking_ = false; | 
| + this.dragging_ = false; | 
| + this.totalMoveY_ = 0; | 
| + this.totalMoveX_ = 0; | 
| +}; | 
| + | 
| + | 
| +/** | 
| + * Reset the touchable element as if we never saw the touchStart | 
| + * Doesn't dispatch any end events - be careful of existing listeners. | 
| + */ | 
| +TouchHandler.prototype.cancelTouch = function() { | 
| + this.stopTouching_(); | 
| + this.endTracking_(); | 
| + // If clients needed to be aware of this, we could fire a cancel event here. | 
| +}; | 
| + | 
| +/** | 
| + * Record that touching has stopped | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.stopTouching_ = function() { | 
| + // Mark as no longer being touched | 
| + this.activeTouch_ = undefined; | 
| + | 
| + // If we're waiting for a long press, stop | 
| + window.clearTimeout(this.longPressTimeout_); | 
| + | 
| + // Stop listening for move/end events until there's another touch. | 
| + // We don't want to leave handlers piled up on the document. | 
| + // Note that there's no harm in removing handlers that weren't added, so | 
| + // rather than track whether we're using mouse or touch we do both. | 
| + this.events_.remove(document, 'touchmove'); | 
| + this.events_.remove(document, 'touchend'); | 
| + this.events_.remove(document, 'touchcancel'); | 
| + this.events_.remove(document, 'mousemove'); | 
| + this.events_.remove(document, 'mouseup'); | 
| +}; | 
| + | 
| +/** | 
| + * Touch start handler. | 
| + * @param {!TouchEvent} e The touchstart event. | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.onStart_ = function(e) { | 
| + // Only process single touches. If there is already a touch happening, or | 
| + // two simultaneous touches then just ignore them. | 
| + if (e.touches.length > 1) { | 
| + // Note that we could cancel an active touch here. That would make | 
| + // simultaneous touch behave similar to near-simultaneous. However, if the | 
| + // user is dragging something, an accidental second touch could be quite | 
| + // disruptive if it cancelled their drag. Better to just ignore it. | 
| + return; | 
| + } | 
| + | 
| + // It's still possible there could be an active "touch" if the user is | 
| + // simultaneously using a mouse and a touch input. | 
| + if (this.activeTouch_ !== undefined) { | 
| + return; | 
| + } | 
| + | 
| + var touch = e.targetTouches[0]; | 
| + this.activeTouch_ = touch.identifier; | 
| + | 
| + // We've just started touching so shouldn't swallow any upcoming click | 
| + if (this.swallowNextClick_) { | 
| + this.swallowNextClick_ = false; | 
| + } | 
| + | 
| + // Sign up for end/cancel notifications for this touch. | 
| + // Note that we do this on the document so that even if the user drags their | 
| + // finger off the element, we'll still know what they're doing. | 
| + if (e.type == 'mousedown') { | 
| + this.events_.add(document, 'mouseup', | 
| + this.mouseToTouchCallback_(this.onEnd_.bind(this)), false); | 
| + } else { | 
| + this.events_.add(document, 'touchend', this.onEnd_.bind(this), false); | 
| + this.events_.add(document, 'touchcancel', this.onEnd_.bind(this), false); | 
| + } | 
| + | 
| + // This timeout is cleared on touchEnd and onDrag | 
| + // If we invoke the function then we have a real long press | 
| + window.clearTimeout(this.longPressTimeout_); | 
| + this.longPressTimeout_ = window.setTimeout( | 
| + this.onLongPress_.bind(this), | 
| + TouchHandler.TIME_FOR_LONG_PRESS_); | 
| + | 
| + // Dispatch the TOUCH_START event | 
| + if (!this.dispatchEvent_(TouchHandler.EventType.TOUCH_START, touch)) { | 
| + // Dragging was not enabled, nothing more to do | 
| + return; | 
| + } | 
| + | 
| + // We want dragging notifications | 
| + if (e.type == 'mousedown') { | 
| + this.events_.add(document, 'mousemove', | 
| + this.mouseToTouchCallback_(this.onMove_.bind(this)), false); | 
| + } else { | 
| + this.events_.add(document, 'touchmove', this.onMove_.bind(this), false); | 
| + } | 
| + | 
| + this.startTouchX_ = this.lastTouchX_ = touch.clientX; | 
| + this.startTouchY_ = this.lastTouchY_ = touch.clientY; | 
| + this.startTime_ = e.timeStamp; | 
| + | 
| + this.recentTouchesX_ = []; | 
| + this.recentTouchesY_ = []; | 
| + this.recentTouchesX_.push(touch.clientX, e.timeStamp); | 
| + this.recentTouchesY_.push(touch.clientY, e.timeStamp); | 
| + | 
| + this.beginTracking_(); | 
| +}; | 
| + | 
| +/** | 
| + * Given a list of Touches, find the one matching our activeTouch identifier. | 
| + * Note that Chrome currently always uses 0 as the identifier. In that case | 
| + * we'll end up always choosing the first element in the list. | 
| + * @param {TouchList} touches The list of Touch objects to search. | 
| + * @return {!Touch|undefined} The touch matching our active ID if any. | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.findActiveTouch_ = function(touches) { | 
| + assert(this.activeTouch_ !== undefined, 'Expecting an active touch'); | 
| + // A TouchList isn't actually an array, so we shouldn't use | 
| + // Array.prototype.filter/some, etc. | 
| + for (var i = 0; i < touches.length; i++) { | 
| + if (touches[i].identifier == this.activeTouch_) { | 
| + return touches[i]; | 
| + } | 
| + } | 
| + return undefined; | 
| +}; | 
| + | 
| +/** | 
| + * Touch move handler. | 
| + * @param {!TouchEvent} e The touchmove event. | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.onMove_ = function(e) { | 
| + if (!this.tracking_) { | 
| + return; | 
| + } | 
| + | 
| + // Our active touch should always be in the list of touches still active | 
| + assert(this.findActiveTouch_(e.touches), 'Missing touchEnd'); | 
| + | 
| + var that = this; | 
| + var touch = this.findActiveTouch_(e.changedTouches); | 
| + if (!touch) { | 
| + return; | 
| + } | 
| + | 
| + var clientX = touch.clientX; | 
| + var clientY = touch.clientY; | 
| + | 
| + var moveX = this.lastTouchX_ - clientX; | 
| + var moveY = this.lastTouchY_ - clientY; | 
| + this.totalMoveX_ += Math.abs(moveX); | 
| + this.totalMoveY_ += Math.abs(moveY); | 
| + this.lastTouchX_ = clientX; | 
| + this.lastTouchY_ = clientY; | 
| + | 
| + if (!this.dragging_ && (this.totalMoveY_ > | 
| + TouchHandler.MIN_TRACKING_FOR_DRAG_ || | 
| + this.totalMoveX_ > | 
| + TouchHandler.MIN_TRACKING_FOR_DRAG_)) { | 
| + // If we're waiting for a long press, stop | 
| + window.clearTimeout(this.longPressTimeout_); | 
| + | 
| + // Dispatch the DRAG_START event and record whether dragging should be | 
| + // allowed or not. Note that this relies on the current value of | 
| + // startTouchX/Y - handlers may use the initial drag delta to determine | 
| + // if dragging should be permitted. | 
| + this.dragging_ = this.dispatchEvent_( | 
| + TouchHandler.EventType.DRAG_START, touch); | 
| + | 
| + if (this.dragging_) { | 
| + // Update the start position here so that drag deltas have better values | 
| + // but don't touch the recent positions so that velocity calculations can | 
| + // still use touchstart position in the time and distance delta. | 
| + this.startTouchX_ = clientX; | 
| + this.startTouchY_ = clientY; | 
| + this.startTime_ = e.timeStamp; | 
| + } else { | 
| + this.endTracking_(); | 
| + } | 
| + } | 
| + | 
| + if (this.dragging_) { | 
| + this.dispatchEvent_(TouchHandler.EventType.DRAG_MOVE, touch); | 
| + | 
| + this.removeTouchesInWrongDirection_(this.recentTouchesX_, this.lastMoveX_, | 
| + moveX); | 
| + this.removeTouchesInWrongDirection_(this.recentTouchesY_, this.lastMoveY_, | 
| + moveY); | 
| + this.removeOldTouches_(this.recentTouchesX_, e.timeStamp); | 
| + this.removeOldTouches_(this.recentTouchesY_, e.timeStamp); | 
| + this.recentTouchesX_.push(clientX, e.timeStamp); | 
| + this.recentTouchesY_.push(clientY, e.timeStamp); | 
| + } | 
| + | 
| + this.lastMoveX_ = moveX; | 
| + this.lastMoveY_ = moveY; | 
| +}; | 
| + | 
| + | 
| +/** | 
| + * Filters the provided recent touches array to remove all touches except the | 
| + * last if the move direction has changed. | 
| + * @param {!Array.<number>} recentTouches An array of tuples where the first | 
| + * item is the x or y component of the recent touch and the second item | 
| + * is the touch time stamp. | 
| + * @param {number|undefined} lastMove The x or y component of the previous | 
| + * move. | 
| + * @param {number} recentMove The x or y component of the most recent move. | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.removeTouchesInWrongDirection_ = | 
| + function(recentTouches, lastMove, recentMove) { | 
| + if (lastMove && recentMove && recentTouches.length > 2 && | 
| + (lastMove > 0 ^ recentMove > 0)) { | 
| + recentTouches.splice(0, recentTouches.length - 2); | 
| + } | 
| +}; | 
| + | 
| + | 
| +/** | 
| + * Filters the provided recent touches array to remove all touches older than | 
| + * the max tracking time or the 5th most recent touch. | 
| + * @param {!Array.<number>} recentTouches An array of tuples where the first | 
| + * item is the x or y component of the recent touch and the second item | 
| + * is the touch time stamp. | 
| + * @param {number} recentTime The time of the most recent event. | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.removeOldTouches_ = | 
| + function(recentTouches, recentTime) { | 
| + while (recentTouches.length && recentTime - recentTouches[1] > | 
| + TouchHandler.MAX_TRACKING_TIME_ || | 
| + recentTouches.length > | 
| + TouchHandler.MAX_TRACKING_TOUCHES_ * 2) { | 
| + recentTouches.splice(0, 2); | 
| + } | 
| +}; | 
| + | 
| +/** | 
| + * Touch end handler. | 
| + * @param {!TouchEvent} e The touchend event. | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.onEnd_ = function(e) { | 
| + var that = this; | 
| + assert(this.activeTouch_ !== undefined, 'Expect to already be touching'); | 
| + | 
| + // If the touch we're tracking isn't changing here, ignore this touch end. | 
| + var touch = this.findActiveTouch_(e.changedTouches); | 
| + if (!touch) { | 
| + // In most cases, our active touch will be in the 'touches' collection, | 
| + // but we can't assert that because occasionally two touchend events can | 
| + // occur at almost the same time with both having empty 'touches' lists. | 
| + // I.e., 'touches' seems like it can be a bit more up-to-date than the | 
| + // current event. | 
| + return; | 
| + } | 
| + | 
| + // This is touchEnd for the touch we're monitoring | 
| + assert(!this.findActiveTouch_(e.touches), | 
| + 'Touch ended also still active'); | 
| + | 
| + // Indicate that touching has finished | 
| + this.stopTouching_(); | 
| + | 
| + if (this.tracking_) { | 
| + var clientX = touch.clientX; | 
| + var clientY = touch.clientY; | 
| + | 
| + if (this.dragging_) { | 
| + this.endTime_ = e.timeStamp; | 
| + this.endTouchX_ = clientX; | 
| + this.endTouchY_ = clientY; | 
| + | 
| + this.removeOldTouches_(this.recentTouchesX_, e.timeStamp); | 
| + this.removeOldTouches_(this.recentTouchesY_, e.timeStamp); | 
| + | 
| + this.dispatchEvent_(TouchHandler.EventType.DRAG_END, touch); | 
| + | 
| + // Note that in some situations we can get a click event here as well. | 
| + // For now this isn't a problem, but we may want to consider having some | 
| + // logic that hides clicks that appear to be caused by a touchEnd used for | 
| + // dragging. | 
| + } | 
| + | 
| + this.endTracking_(); | 
| + } | 
| + | 
| + // Note that we dispatch the touchEnd event last so that events at different | 
| + // levels of semantics nest nicely (similar to how DOM drag-and-drop events | 
| + // are nested inside of the mouse events that trigger them). | 
| + this.dispatchEvent_(TouchHandler.EventType.TOUCH_END, touch); | 
| +}; | 
| + | 
| + | 
| +/** | 
| + * Get end velocity of the drag. This method is specific to drag behavior, so if | 
| + * touch behavior and drag behavior is split then this should go with drag | 
| + * behavior. End velocity is defined as deltaXY / deltaTime where deltaXY is | 
| + * the difference between endPosition and the oldest recent position, and | 
| + * deltaTime is the difference between endTime and the oldest recent time stamp. | 
| + * @return {Object} The x and y velocity. | 
| + */ | 
| +TouchHandler.prototype.getEndVelocity = function() { | 
| + // Note that we could move velocity to just be an end-event parameter. | 
| + var velocityX = this.recentTouchesX_.length ? | 
| + (this.endTouchX_ - this.recentTouchesX_[0]) / | 
| + (this.endTime_ - this.recentTouchesX_[1]) : 0; | 
| + var velocityY = this.recentTouchesY_.length ? | 
| + (this.endTouchY_ - this.recentTouchesY_[0]) / | 
| + (this.endTime_ - this.recentTouchesY_[1]) : 0; | 
| + | 
| + velocityX = this.correctVelocity_(velocityX); | 
| + velocityY = this.correctVelocity_(velocityY); | 
| + | 
| + return { | 
| + x: velocityX, | 
| + y: velocityY | 
| + }; | 
| +}; | 
| + | 
| + | 
| +/** | 
| + * Correct erroneous velocities by capping the velocity if we think it's too | 
| + * high, or setting it to a default velocity if know that the event data is bad. | 
| + * @param {number} velocity The x or y velocity component. | 
| + * @return {number} The corrected velocity. | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.correctVelocity_ = function(velocity) { | 
| + var absVelocity = Math.abs(velocity); | 
| + | 
| + // We add to recent touches for each touchstart and touchmove. If we have | 
| + // fewer than 3 touches (6 entries), we assume that the thread was blocked for | 
| + // the duration of the drag and we received events in quick succession with | 
| + // the wrong time stamps. | 
| + if (absVelocity > TouchHandler.MAXIMUM_VELOCITY_) { | 
| + absVelocity = this.recentTouchesY_.length < 3 ? | 
| + TouchHandler.VELOCITY_FOR_INCORRECT_EVENTS_ : | 
| + TouchHandler.MAXIMUM_VELOCITY_; | 
| + } | 
| + return absVelocity * (velocity < 0 ? -1 : 1); | 
| +}; | 
| + | 
| + | 
| +/** | 
| + * Handler when an element has been pressed for a long time | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.onLongPress_ = function() { | 
| + // Swallow any click that occurs on this element without an intervening touch | 
| + // start event. This simple click-busting technique should be sufficient here | 
| + // since a real click should have a touchstart first. | 
| + this.swallowNextClick_ = true; | 
| + | 
| + // Dispatch to the LONG_PRESS | 
| + this.dispatchEventXY_(TouchHandler.EventType.LONG_PRESS, | 
| + /** @type {number} */ (this.startTouchX_), | 
| + /** @type {number} */ (this.startTouchY_)); | 
| +}; | 
| + | 
| +/** | 
| + * Click handler - used to swallow clicks after a long-press | 
| + * @param {!Event} e The click event. | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.onClick_ = function(e) { | 
| + if (this.swallowNextClick_) { | 
| + e.preventDefault(); | 
| + e.stopPropagation(); | 
| + this.swallowNextClick_ = false; | 
| + } | 
| +}; | 
| + | 
| +/** | 
| + * Dispatch a TouchHandler event to the element | 
| + * @param {string} eventType The event to dispatch. | 
| + * @param {Touch} touch The touch triggering this event. | 
| + * @return {boolean|undefined} The value of detail.enableDrag after dispatching | 
| + * the event. | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.dispatchEvent_ = function(eventType, touch) { | 
| + return this.dispatchEventXY_(eventType, touch.clientX, touch.clientY); | 
| +}; | 
| + | 
| +/** | 
| + * Dispatch a TouchHandler event to the element | 
| + * @param {string} eventType The event to dispatch. | 
| + @param {number} clientX The X location for the event. | 
| + @param {number} clientY The Y location for the event. | 
| + * @return {boolean|undefined} The value of detail.enableDrag after dispatching | 
| + * the event. | 
| + * @private | 
| + */ | 
| +TouchHandler.prototype.dispatchEventXY_ = | 
| + function(eventType, clientX, clientY) { | 
| + var event = document.createEvent('CustomEvent'); | 
| + var detail = new TouchHandler.EventDetail(clientX, clientY); | 
| + | 
| + // Set enableDrag as when it can be overridden | 
| + if (eventType == TouchHandler.EventType.TOUCH_START) { | 
| + detail.enableDrag = false; | 
| + } else if (eventType == TouchHandler.EventType.DRAG_START) { | 
| + detail.enableDrag = true; | 
| + } | 
| + | 
| + var isDrag = (eventType == TouchHandler.EventType.DRAG_START || | 
| + eventType == TouchHandler.EventType.DRAG_MOVE || | 
| + eventType == TouchHandler.EventType.DRAG_END); | 
| + if (isDrag) { | 
| + detail.dragDeltaX = clientX - this.startTouchX_; | 
| + detail.dragDeltaY = clientY - this.startTouchY_; | 
| + } | 
| + | 
| + // Drag events don't bubble - we're really just dragging the element, | 
| + // not affecting its parent at all. | 
| + var bubbles = !isDrag; | 
| + | 
| + event.initCustomEvent(eventType, bubbles, /*cancelable*/ true, detail); | 
| 
arv (Not doing code reviews)
2011/03/10 19:25:59
var event = new cr.Event(eventType, bubbles, true)
 | 
| + event.sender = this; | 
| + this.element_.dispatchEvent(event); | 
| + return detail.enableDrag; | 
| +}; | 
| + |