Remove TOUCH_UI specific new tab page.

chrome/browser/resources/touch_ntp/grabber.js

-// 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 Grabber implementation.
- * Allows you to pick up objects (with a long-press) and drag them around the
- * screen.
- *
- * Note: This should perhaps really use standard drag-and-drop events, but there
- * is no standard for them on touch devices.  We could define a model for
- * activating touch-based dragging of elements (programatically and/or with
- * CSS attributes) and use it here (even have a JS library to generate such
- * events when the browser doesn't support them).
- */
-
-// Use an anonymous function to enable strict mode just for this file (which
-// will be concatenated with other files when embedded in Chrome)
-var Grabber = (function() {
-  'use strict';
-
-  /**
-   * Create a Grabber object to enable grabbing and dragging a given element.
-   * @constructor
-   * @param {!Element} element The element that can be grabbed and moved.
-   */
-  function Grabber(element) {
-    /**
-     * The element the grabber is attached to.
-     * @type {!Element}
-     * @private
-     */
-    this.element_ = element;
-
-    /**
-     * The TouchHandler responsible for firing lower-level touch events when the
-     * element is manipulated.
-     * @type {!TouchHandler}
-     * @private
-     */
-    this.touchHandler_ = new TouchHandler(this.element);
-
-    /**
-     * Tracks all event listeners we have created.
-     * @type {EventTracker}
-     * @private
-     */
-    this.events_ = new EventTracker();
-
-    // Enable the generation of events when the element is touched (but no need
-    // to use the early capture phase of event processing).
-    this.touchHandler_.enable(/* opt_capture */ false);
-
-    // Prevent any built-in drag-and-drop support from activating for the
-    // element. Note that we don't want details of how we're implementing
-    // dragging here to leak out of this file (eg. we may switch to using webkit
-    // drag-and-drop).
-    this.events_.add(this.element, 'dragstart', function(e) {
-      e.preventDefault();
-    }, true);
-
-    // Add our TouchHandler event listeners
-    this.events_.add(this.element, TouchHandler.EventType.TOUCH_START,
-        this.onTouchStart_.bind(this), false);
-    this.events_.add(this.element, TouchHandler.EventType.LONG_PRESS,
-        this.onLongPress_.bind(this), false);
-    this.events_.add(this.element, TouchHandler.EventType.DRAG_START,
-        this.onDragStart_.bind(this), false);
-    this.events_.add(this.element, TouchHandler.EventType.DRAG_MOVE,
-        this.onDragMove_.bind(this), false);
-    this.events_.add(this.element, TouchHandler.EventType.DRAG_END,
-        this.onDragEnd_.bind(this), false);
-    this.events_.add(this.element, TouchHandler.EventType.TOUCH_END,
-        this.onTouchEnd_.bind(this), false);
-  }
-
-  /**
-   * Events fired by the grabber.
-   * Events are fired at the element affected (not the element being dragged).
-   * @enum {string}
-   */
-  Grabber.EventType = {
-    // Fired at the grabber element when it is first grabbed
-    GRAB: 'grabber:grab',
-    // Fired at the grabber element when dragging begins (after GRAB)
-    DRAG_START: 'grabber:dragstart',
-    // Fired at an element when something is dragged over top of it.
-    DRAG_ENTER: 'grabber:dragenter',
-    // Fired at an element when something is no longer over top of it.
-    // Not fired at all in the case of a DROP
-    DRAG_LEAVE: 'grabber:drag',
-    // Fired at an element when something is dropped on top of it.
-    DROP: 'grabber:drop',
-    // Fired at the grabber element when dragging ends (successfully or not) -
-    // after any DROP or DRAG_LEAVE
-    DRAG_END: 'grabber:dragend',
-    // Fired at the grabber element when it is released (even if no drag
-    // occured) - after any DRAG_END event.
-    RELEASE: 'grabber:release'
-  };
-
-  /**
-   * The type of Event sent by Grabber
-   * @constructor
-   * @param {string} type The type of event (one of Grabber.EventType).
-   * @param {Element!} grabbedElement The element being dragged.
-   */
-  Grabber.Event = function(type, grabbedElement) {
-    var event = document.createEvent('Event');
-    event.initEvent(type, true, true);
-    event.__proto__ = Grabber.Event.prototype;
-
-    /**
-     * The element which is being dragged.  For some events this will be the
-     * same as 'target', but for events like DROP that are fired at another
-     * element it will be different.
-     * @type {!Element}
-     */
-    event.grabbedElement = grabbedElement;
-
-    return event;
-  };
-
-  Grabber.Event.prototype = {
-    __proto__: Event.prototype
-  };
-
-
-  /**
-   * The CSS class to apply when an element is touched but not yet
-   * grabbed.
-   * @type {string}
-   */
-  Grabber.PRESSED_CLASS = 'grabber-pressed';
-
-  /**
-   * The class to apply when an element has been held (including when it is
-   * being dragged.
-   * @type {string}
-   */
-  Grabber.GRAB_CLASS = 'grabber-grabbed';
-
-  /**
-   * The class to apply when a grabbed element is being dragged.
-   * @type {string}
-   */
-  Grabber.DRAGGING_CLASS = 'grabber-dragging';
-
-  Grabber.prototype = {
-    /**
-     * @return {!Element} The element that can be grabbed.
-     */
-    get element() {
-      return this.element_;
-    },
-
-    /**
-     * Clean up all event handlers (eg. if the underlying element will be
-     * removed)
-     */
-    dispose: function() {
-      this.touchHandler_.disable();
-      this.events_.removeAll();
-
-      // Clean-up any active touch/drag
-      if (this.dragging_)
-        this.stopDragging_();
-      this.onTouchEnd_();
-    },
-
-    /**
-     * Invoked whenever this element is first touched
-     * @param {!TouchHandler.Event} e The TouchHandler event.
-     * @private
-     */
-    onTouchStart_: function(e) {
-      this.element.classList.add(Grabber.PRESSED_CLASS);
-
-      // Always permit the touch to perhaps trigger a drag
-      e.enableDrag = true;
-    },
-
-    /**
-     * Invoked whenever the element stops being touched.
-     * Can be called explicitly to cleanup any active touch.
-     * @param {!TouchHandler.Event=} opt_e The TouchHandler event.
-     * @private
-     */
-    onTouchEnd_: function(opt_e) {
-      if (this.grabbed_) {
-        // Mark this element as no longer being grabbed
-        this.element.classList.remove(Grabber.GRAB_CLASS);
-        this.element.style.pointerEvents = '';
-        this.grabbed_ = false;
-
-        this.sendEvent_(Grabber.EventType.RELEASE, this.element);
-      } else {
-        this.element.classList.remove(Grabber.PRESSED_CLASS);
-      }
-    },
-
-    /**
-     * Handler for TouchHandler's LONG_PRESS event
-     * Invoked when the element is held (without being dragged)
-     * @param {!TouchHandler.Event} e The TouchHandler event.
-     * @private
-     */
-    onLongPress_: function(e) {
-      assert(!this.grabbed_, 'Got longPress while still being held');
-
-      this.element.classList.remove(Grabber.PRESSED_CLASS);
-      this.element.classList.add(Grabber.GRAB_CLASS);
-
-      // Disable mouse events from the element - we care only about what's
-      // under the element after it's grabbed (since we're getting move events
-      // from the body - not the element itself).  Note that we can't wait until
-      // onDragStart to do this because it won't have taken effect by the first
-      // onDragMove.
-      this.element.style.pointerEvents = 'none';
-
-      this.grabbed_ = true;
-
-      this.sendEvent_(Grabber.EventType.GRAB, this.element);
-    },
-
-    /**
-     * Invoked when the element is dragged.
-     * @param {!TouchHandler.Event} e The TouchHandler event.
-     * @private
-     */
-    onDragStart_: function(e) {
-      assert(!this.lastEnter_, 'only expect one drag to occur at a time');
-      assert(!this.dragging_);
-
-      // We only want to drag the element if its been grabbed
-      if (this.grabbed_) {
-        // Mark the item as being dragged
-        // Ensures our translate transform won't be animated and cancels any
-        // outstanding animations.
-        this.element.classList.add(Grabber.DRAGGING_CLASS);
-
-        // Determine the webkitTransform currently applied to the element.
-        // Note that it's important that we do this AFTER cancelling animation,
-        // otherwise we could see an intermediate value.
-        // We'll assume this value will be constant for the duration of the drag
-        // so that we can combine it with our translate3d transform.
-        this.baseTransform_ = this.element.ownerDocument.defaultView.
-            getComputedStyle(this.element).webkitTransform;
-
-        this.sendEvent_(Grabber.EventType.DRAG_START, this.element);
-        e.enableDrag = true;
-        this.dragging_ = true;
-
-      } else {
-        // Hasn't been grabbed - don't drag, just unpress
-        this.element.classList.remove(Grabber.PRESSED_CLASS);
-        e.enableDrag = false;
-      }
-    },
-
-    /**
-     * Invoked when a grabbed element is being dragged
-     * @param {!TouchHandler.Event} e The TouchHandler event.
-     * @private
-     */
-    onDragMove_: function(e) {
-      assert(this.grabbed_ && this.dragging_);
-
-      this.translateTo_(e.dragDeltaX, e.dragDeltaY);
-
-      var target = e.touchedElement;
-      if (target && target != this.lastEnter_) {
-        // Send the events
-        this.sendDragLeave_(e);
-        this.sendEvent_(Grabber.EventType.DRAG_ENTER, target);
-      }
-      this.lastEnter_ = target;
-    },
-
-    /**
-     * Send DRAG_LEAVE to the element last sent a DRAG_ENTER if any.
-     * @param {!TouchHandler.Event} e The event triggering this DRAG_LEAVE.
-     * @private
-     */
-    sendDragLeave_: function(e) {
-      if (this.lastEnter_) {
-        this.sendEvent_(Grabber.EventType.DRAG_LEAVE, this.lastEnter_);
-        this.lastEnter_ = undefined;
-      }
-    },
-
-    /**
-     * Moves the element to the specified position.
-     * @param {number} x Horizontal position to move to.
-     * @param {number} y Vertical position to move to.
-     * @private
-     */
-    translateTo_: function(x, y) {
-      // Order is important here - we want to translate before doing the zoom
-      this.element.style.WebkitTransform = 'translate3d(' + x + 'px, ' +
-          y + 'px, 0) ' + this.baseTransform_;
-    },
-
-    /**
-     * Invoked when the element is no longer being dragged.
-     * @param {TouchHandler.Event} e The TouchHandler event.
-     * @private
-     */
-    onDragEnd_: function(e) {
-      // We should get this before the onTouchEnd.  Don't change
-      // this.grabbed_ - it's onTouchEnd's responsibility to clear it.
-      assert(this.grabbed_ && this.dragging_);
-      var event;
-
-      // Send the drop event to the element underneath the one we're dragging.
-      var target = e.touchedElement;
-      if (target)
-        this.sendEvent_(Grabber.EventType.DROP, target);
-
-      // Cleanup and send DRAG_END
-      // Note that like HTML5 DND, we don't send DRAG_LEAVE on drop
-      this.stopDragging_();
-    },
-
-    /**
-     * Clean-up the active drag and send DRAG_LEAVE
-     * @private
-     */
-    stopDragging_: function() {
-      assert(this.dragging_);
-      this.lastEnter_ = undefined;
-
-      // Mark the element as no longer being dragged
-      this.element.classList.remove(Grabber.DRAGGING_CLASS);
-      this.element.style.webkitTransform = '';
-
-      this.dragging_ = false;
-      this.sendEvent_(Grabber.EventType.DRAG_END, this.element);
-    },
-
-    /**
-     * Send a Grabber event to a specific element
-     * @param {string} eventType The type of event to send.
-     * @param {!Element} target The element to send the event to.
-     * @private
-     */
-    sendEvent_: function(eventType, target) {
-      var event = new Grabber.Event(eventType, this.element);
-      target.dispatchEvent(event);
-    },
-
-    /**
-     * Whether or not the element is currently grabbed.
-     * @type {boolean}
-     * @private
-     */
-    grabbed_: false,
-
-    /**
-     * Whether or not the element is currently being dragged.
-     * @type {boolean}
-     * @private
-     */
-    dragging_: false,
-
-    /**
-     * The webkitTransform applied to the element when it first started being
-     * dragged.
-     * @type {string|undefined}
-     * @private
-     */
-    baseTransform_: undefined,
-
-    /**
-     * The element for which a DRAG_ENTER event was last fired
-     * @type {Element|undefined}
-     * @private
-     */
-    lastEnter_: undefined
-  };
-
-  return Grabber;
-})();