| Index: chrome/browser/resources/touch_ntp/grabber.js
|
| diff --git a/chrome/browser/resources/touch_ntp/grabber.js b/chrome/browser/resources/touch_ntp/grabber.js
|
| deleted file mode 100644
|
| index ffca317d3638d0c532e327ffed7c8ff996ce9121..0000000000000000000000000000000000000000
|
| --- a/chrome/browser/resources/touch_ntp/grabber.js
|
| +++ /dev/null
|
| @@ -1,383 +0,0 @@
|
| -// 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;
|
| -})();
|
|
|