NTP4: Add ability to drag links to the apps pages.

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';
 
   /**
    * Creates a new Tileobject. Tiles wrap content on a TilePage, providing
    * some styling and drag functionality.
@@ skipping 316 matching lines @@
                             this.onDragLeaveDot_.bind(this));
     },
     get navigationDot() {
       return this.navigationDot_;
     },
 
     /**
      * @protected
      */
     appendTile: function(tileElement) {
+      this.addTileAt(tileElement, this.tileElements_.length);
+    },
+
+    /**
+     * Adds the given element to the tile grid.
+     * @param {Node} tileElement The tile object/node to insert.
+     * @param {number} index The location in the tile grid to insert it at.
+     * @protected
+     */
+    addTileAt: function(tileElement, index) {
+      var wrapperDiv = new Tile(tileElement);
+      if (index == this.tileElements_.length) {
+        this.tileGrid_.appendChild(wrapperDiv);
+      } else {
+        this.tileGrid_.insertBefore(wrapperDiv,
+                                    this.tileElements_[index]);
+      }
       this.calculateLayoutValues_();
 
-      var wrapperDiv = new Tile(tileElement);
-      this.tileGrid_.appendChild(wrapperDiv);
-
-      this.positionTile_(this.tileElements_.length - 1);
+      this.positionTile_(index);
       this.classList.remove('animating-tile-page');
     },
 
     /**
      * Controls whether this page will accept drags that originate from outside
      * the page.
      * @return {boolean} True if this page accepts drags from outside sources.
      */
     acceptOutsideDrags: function() {
       return true;
@@ skipping 202 matching lines @@
     heightForWidth: function(width) {
       return width;
     },
 
     /** Dragging **/
 
     /**
      * The number of un-paired dragenter events that have fired on |this|. This
      * is incremented by |onDragEnter_| and decremented by |onDragLeave_|. This
      * is necessary because dragging over child widgets will fire additional
-     * enter and leave events on |this|.
+     * enter and leave events on |this|. A non-zero value does not necessarily
+     * indicate that |isCurrentDragTarget_| is true.
      * @type {number}
      * @private
      */
     dragEnters_: 0,
 
     /**
+     * Whether the tile page is currently being dragged over with data it can
+     * accept.
+     * @type {boolean}
+     * @private
+     */
+    isCurrentDragTarget_: false,
+
+    /**
      * Handler for dragenter events fired on |tileGrid_|.
      * @param {Event} e A MouseEvent for the drag.
      * @private
      */
     onDragEnter_: function(e) {
       if (++this.dragEnters_ > 1)
         return;
+      this.doDragEnter_(e);
+    },
 
-      // TODO(estade): for now we only allow tile drags.
-      if (!TilePage.currentlyDraggingTile)
+    /**
+     * Thunk for dragover events fired on |tileGrid_|.
+     * @param {Event} e A MouseEvent for the drag.
+     * @private
+     */
+    onDragOver_: function(e) {
+      if (!this.isCurrentDragTarget_)
         return;
+      this.doDragOver_(e);
+    },
+
+    /**
+     * Thunk for drop events fired on |tileGrid_|.
+     * @param {Event} e A MouseEvent for the drag.
+     * @private
+     */
+    onDrop_: function(e) {
+      this.dragEnters_ = 0;
+      if (!this.isCurrentDragTarget_)
+        return;
+      this.doDrop_(e);
+    },
+
+    /**
+     * Thunk for dragleave events fired on |tileGrid_|.
+     * @param {Event} e A MouseEvent for the drag.
+     * @private
+     */
+    onDragLeave_: function(e) {
+      if (--this.dragEnters_ > 0)
+        return;
+
+      this.isCurrentDragTarget_ = false;
+      this.cleanUpDrag_();
+    },
+
+    /**
+     * Performs all actions necessary when a drag enters the tile page.
+     * @param {Event} e A mouseover event for the drag enter.
+     * @private
+     */
+    doDragEnter_: function(e) {
+      if (!this.shouldAcceptDrag(TilePage.currentlyDraggingTile,
+                                 e.dataTransfer)) {
+        return;
+      }
+
+      this.isCurrentDragTarget_ = true;
 
       // Applies the mask so doppleganger tiles disappear into the fog.
       this.updateMask_();
 
       this.classList.add('animating-tile-page');
       this.withinPageDrag_ = this.contains(TilePage.currentlyDraggingTile);
       this.dragItemIndex_ = this.withinPageDrag_ ?
           TilePage.currentlyDraggingTile.index : this.tileElements_.length;
       this.currentDropIndex_ = this.dragItemIndex_;
     },
 
     /**
-     * Handler for dragover events fired on |tileGrid_|.
-     * @param {Event} e A MouseEvent for the drag.
+     * Performs all actions necessary when the user moves the cursor during
+     * a drag over the tile page.
+     * @param {Event} e A mouseover event for the drag over.
      * @private
      */
-    onDragOver_: function(e) {
-      e.dataTransfer.dropEffect = 'move';
-      var draggedTile = TilePage.currentlyDraggingTile;
-      if (!draggedTile)
-        return;
+    doDragOver_: function(e) {
+      e.preventDefault();
 
-      e.preventDefault();
+      if (TilePage.currentlyDraggingTile)
+        e.dataTransfer.dropEffect = 'move';
+      else
+        e.dataTransfer.dropEffect = 'copy';
 
       var newDragIndex = this.getWouldBeIndexForPoint_(e.clientX, e.clientY);
       if (newDragIndex < 0 || newDragIndex >= this.tileElements_.length)
         newDragIndex = this.dragItemIndex_;
       this.updateDropIndicator_(newDragIndex);
     },
 
     /**
-     * Handler for drop events fired on |tileGrid_|.
-     * @param {Event} e A MouseEvent for the drag.
+     * Performs all actions necessary when the user completes a drop.
+     * @param {Event} e A mouseover event for the drag drop.
      * @private
      */
-    onDrop_: function(e) {
-      this.dragEnters_ = 0;
+    doDrop_: function(e) {
       e.stopPropagation();
+      this.isCurrentDragTarget_ = false;
 
       var index = this.currentDropIndex_;
       if ((index == this.dragItemIndex_) && this.withinPageDrag_)
         return;
 
-      var adjustment = index > this.dragItemIndex_ ? 1 : 0;
-      this.tileGrid_.insertBefore(
-          TilePage.currentlyDraggingTile,
-          this.tileElements_[this.currentDropIndex_ + adjustment]);
+      var adjustedIndex = this.currentDropIndex_ +
+          (index > this.dragItemIndex_ ? 1 : 0);
+      if (TilePage.currentlyDraggingTile) {
+        this.tileGrid_.insertBefore(
+            TilePage.currentlyDraggingTile,
+            this.tileElements_[adjustedIndex]);
+      } else {
+        this.addOutsideData(e.dataTransfer, adjustedIndex);
+      }
+
+      this.classList.remove('animating-tile-page');
       this.cleanUpDrag_();
     },
 
-    /**
-     * Handler for dragleave events fired on |tileGrid_|.
-     * @param {Event} e A MouseEvent for the drag.
-     * @private
-     */
-    onDragLeave_: function(e) {
-      if (--this.dragEnters_ > 0)
-        return;
-
-      this.cleanUpDrag_();
-    },
-
     /**
      * Makes sure all the tiles are in the right place after a drag is over.
      * @private
      */
     cleanUpDrag_: function() {
-      this.classList.remove('animating-tile-page');
       for (var i = 0; i < this.tileElements_.length; i++) {
         // The current drag tile will be positioned in its dragend handler.
         if (this.tileElements_[i] == this.currentlyDraggingTile)
           continue;
         this.positionTile_(i);
       }
 
       // Remove the drag mask.
       this.updateMask_();
     },
@@ skipping 18 matching lines @@
           var adjustment = i <= newDragIndex ? -1 : 0;
         else
           var adjustment = i >= newDragIndex ? 1 : 0;
 
         this.positionTile_(i, adjustment);
       }
       this.currentDropIndex_ = newDragIndex;
     },
 
     /**
-      * This is equivalent to dragEnters_, but for drags over the navigation
-      * dot.
+      * These are equivalent to dragEnters_ and isCurrentDragTarget_, but for
+      * drags over the navigation dot.
+      * TODO(estade): thunkify the event handlers in the same manner as the
+      * tile grid drag handlers.
       */
     dotDragEnters_: 0,
+    dotIsCurrentDragTarget_: false,
 
     /**
      * A drag has entered the navigation dot. If the user hovers long enough,
      * we will navigate to the relevant page.
      * @param {Event} e The MouseOver event for the drag.
      */
     onDragEnterDot_: function(e) {
       if (++this.dotDragEnters_ > 1)
         return;
 
-      if (!TilePage.currentlyDraggingTile)
+      if (!this.shouldAcceptDrag(TilePage.currentlyDraggingTile,
+                                 e.dataTransfer)) {
         return;
-      if (!this.acceptOutsideDrags())
-        return;
+      }
+
+      this.dotIsCurrentDragTarget_ = true;
 
       var self = this;
       function navPageClearTimeout() {
         self.navigationDot.showPage();
         self.dotNavTimeout = null;
       }
       this.dotNavTimeout = window.setTimeout(navPageClearTimeout, 500);
     },
 
     /**
      * The drag has left the navigation dot.
      * @param {Event} e The MouseOver event for the drag.
      */
     onDragLeaveDot_: function(e) {
       if (--this.dotDragEnters_ > 0)
         return;
 
+      if (!this.dotIsCurrentDragTarget_)
+        return;
+      this.dotIsCurrentDragTarget_ = false;
+
       if (this.dotNavTimeout) {
         window.clearTimeout(this.dotNavTimeout);
         this.dotNavTimeout = null;
       }
     },
+
+    /**
+     * Checks if a page can accept a drag with the given data.
+     * @param {Object} tile The drag tile, if any.
+     * @param {Object} dataTransfer The dataTransfer object, if the drag object
+     *     is not a tile (e.g. it is a link).
+     * @return {boolean} True if this page can handle the drag.
+     */
+    shouldAcceptDrag: function(tile, dataTransfer) {
+      return false;
+    },
+
+    /**
+     * Called to accept a drag drop.
+     * @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.
+      assert(false);
+    },
   };
 
   return {
     TilePage: TilePage,
   };
 });