Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1930)

Unified Diff: chrome/browser/resources/touch_ntp/grabber.js

Issue 8689013: Remove TOUCH_UI specific new tab page. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Merge with trunk Created 9 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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;
-})();

Powered by Google App Engine
This is Rietveld 408576698