ntp4: most visited dragging onto apps page

chrome/browser/resources/ntp4/tile_page.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.
 
 cr.define('ntp4', function() {
   'use strict';
 
   // We can't pass the currently dragging tile via dataTransfer because of
   // http://crbug.com/31037
   var currentlyDraggingTile = null;
@@ skipping 72 matching lines @@
       this.style.right = x + 'px';
       this.style.top = y + 'px';
     },
 
     /**
      * The handler for dragstart events fired on |this|.
      * @param {Event} e The event for the drag.
      * @private
      */
     onDragStart_: function(e) {
-      // TODO(estade): most visited dragging is disabled for now, remove this
-      // when it does something useful.
-      if (this.querySelector('.most-visited')) {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-      }
-
       // The user may start dragging again during a previous drag's finishing
       // animation.
       if (this.classList.contains('dragging'))
         this.finalizeDrag_();
 
       setCurrentlyDraggingTile(this);
 
       e.dataTransfer.effectAllowed = 'copyMove';
       // TODO(estade): fill this in.
       e.dataTransfer.setData('text/plain', 'foo');
@@ skipping 43 matching lines @@
      * @param {Event} e The event for the drag.
      * @private
      */
     onDragEnd_: function(e) {
       // The drag clone can still be hidden from the last drag move event.
       this.dragClone.classList.remove('hidden');
       this.dragClone.classList.add('placing');
 
       setCurrentlyDraggingTile(null);
 
-      if (!this.tilePage) {
-        this.dragClone.firstChild.classList.add('deleting');
-        return;
+      // tilePage will be null if we've already been removed.
+      if (this.tilePage)
+        this.tilePage.positionTile_(this.index);
+
+      // Take an appropriate action with the drag clone.
+      if (this.landedOnTrash) {
+        this.dragClone.classList.add('deleting');
+      } else if (this.tilePage) {
+        if (this.tilePage.selected) {
+          // The tile's contents may have moved following the respositioning;
+          // adjust for that.
+          var contentDiffX = this.dragClone.firstChild.offsetLeft -
+              this.firstChild.offsetLeft;
+          var contentDiffY = this.dragClone.firstChild.offsetTop -
+              this.firstChild.offsetTop;
+          this.dragClone.style.left = (this.gridX + this.parentNode.offsetLeft -
+              contentDiffX) + 'px';
+          this.dragClone.style.top =
+              (this.gridY + this.parentNode.getBoundingClientRect().top -
+              contentDiffY) + 'px';
+        } else {
+          this.dragClone.classList.add('dropped-on-other-page');
+        }
       }
 
-      this.tilePage.positionTile_(this.index);
-
-      if (this.tilePage.selected) {
-        // The tile's contents may have moved following the respositioning;
-        // adjust for that.
-        var contentDiffX = this.dragClone.firstChild.offsetLeft -
-            this.firstChild.offsetLeft;
-        var contentDiffY = this.dragClone.firstChild.offsetTop -
-            this.firstChild.offsetTop;
-        this.dragClone.style.left = (this.gridX + this.parentNode.offsetLeft -
-            contentDiffX) + 'px';
-        this.dragClone.style.top =
-            (this.gridY + this.parentNode.getBoundingClientRect().top -
-            contentDiffY) + 'px';
-      } else {
-        // When we're showing another page and a drag fails or gets cancelled,
-        // the tile shrinks to a dot.
-        this.dragClone.firstChild.style.webkitTransform = 'scale(0)';
-      }
+      this.landedOnTrash = false;
     },
 
     /**
      * Creates a clone of this node offset by the coordinates. Used for the
      * dragging effect where a tile appears to float off one side of the grid
      * and re-appear on the other.
      * @param {number} x x-axis offset, in pixels.
      * @param {number} y y-axis offset, in pixels.
      */
     showDoppleganger: function(x, y) {
@@ skipping 45 matching lines @@
      */
     finalizeDrag_: function() {
       assert(this.classList.contains('dragging'));
 
       var clone = this.dragClone;
       this.dragClone = null;
 
       clone.parentNode.removeChild(clone);
       this.eventTracker.remove(clone, 'webkitTransitionEnd');
       this.classList.remove('dragging');
+      if (this.firstChild.finalizeDrag)
+        this.firstChild.finalizeDrag();
     },
 
     /**
      * Called when the drag representation node is done migrating to its final
      * resting spot.
      * @param {Event} e The transition end event.
      */
     onDragCloneTransitionEnd_: function(e) {
       if (this.classList.contains('dragging') &&
           (e.propertyName == 'left' || e.propertyName == 'top' ||
@@ skipping 625 matching lines @@
      * @private
      */
     doDrop: function(e) {
       e.stopPropagation();
 
       var index = this.currentDropIndex_;
       // Only change data if this was not a 'null drag'.
       if (!((index == this.dragItemIndex_) && this.withinPageDrag_)) {
         var adjustedIndex = this.currentDropIndex_ +
             (index > this.dragItemIndex_ ? 1 : 0);
-        if (currentlyDraggingTile) {
-          var originalPage = currentlyDraggingTile.tilePage;
+        if (this.withinPageDrag_) {
           this.tileGrid_.insertBefore(
               currentlyDraggingTile,
               this.tileElements_[adjustedIndex]);
+          this.tileMoved(currentlyDraggingTile);
+        } else {
+          this.addDragData(e.dataTransfer, adjustedIndex);
+          currentlyDraggingTile.tilePage.cleanupDrag();
+        }
 
-          if (originalPage != this)
-            originalPage.cleanupDrag();
-          this.tileMoved(currentlyDraggingTile);
-
-          // Dropping the icon may cause topMargin to change, but changing it
-          // now would cause everything to move (annoying), so we leave it
-          // alone. The top margin will be re-calculated next time the window is
-          // resized or the page is selected.
-        } else {
-          this.addOutsideData(e.dataTransfer, adjustedIndex);
-        }
+        // Dropping the icon may cause topMargin to change, but changing it
+        // now would cause everything to move (annoying), so we leave it
+        // alone. The top margin will be re-calculated next time the window is
+        // resized or the page is selected.
       }
 
       this.classList.remove('animating-tile-page');
       this.cleanupDrag();
     },
 
     /**
      * Appends the currently dragged tile to the end of the page. Called
      * from outside the page, e.g. when dropping on a nav dot.
      */
     appendDraggingTile: function() {
       var originalPage = currentlyDraggingTile.tilePage;
       if (originalPage == this)
         return;
 
-      this.tileGrid_.appendChild(currentlyDraggingTile);
+      this.addDragData(null, this.tileElements_.length - 1);

[Rick Byers, 2011/08/08 18:37:03]

Seems a little ugly that you have to pass null as the dataTransfer here.  You
could fix this by having two public methods (addDragData just for the case of a
currentlyDraggingTile, and addOutsideData for the other case).  Or you could
just add a comment to the addDragData function definition below saying that
dataTransfer is permitted to be null ONLY WHEN currentlyDraggingTile is set.

[Evan Stade, 2011/08/08 20:42:55]

Done.

       originalPage.cleanupDrag();
-      this.tileMoved(currentlyDraggingTile);
     },
 
     /**
      * Makes sure all the tiles are in the right place after a drag is over.
      * @private
      */
     cleanupDrag: function() {
       for (var i = 0; i < this.tileElements_.length; i++) {
         // The current drag tile will be positioned in its dragend handler.
         if (this.tileElements_[i] == currentlyDraggingTile)
@@ skipping 35 matching lines @@
      * Checks if a page can accept a drag with the given data.
      * @param {Event} e The drag event if the drag object. Implementations will
      *     likely want to check |e.dataTransfer|.
      * @return {boolean} True if this page can handle the drag.
      */
     shouldAcceptDrag: function(e) {
       return false;
     },
 
     /**
-     * Called to accept a drag drop.
+     * Called to accept a drag drop. Will not be called for in-page drops.
      * @param {Object} dataTransfer The data transfer object that holds the drop
      *     data.
      * @param {number} index The tile index at which the drop occurred.
      */
-    addOutsideData: function(dataTransfer, index) {
-      // This should not get called unless there is a non-default
-      // implementation.
+    addDragData: function(dataTransfer, index) {
       assert(false);
     },
 
     /**
      * Called when a tile has been moved (via dragging). Override this to make
      * backend updates.
      * @param {Node} draggedTile The tile that was dropped.
      */
     tileMoved: function(draggedTile) {
     },
   };
 
   return {
     getCurrentlyDraggingTile: getCurrentlyDraggingTile,
     TilePage: TilePage,
   };
 });