[NTP4] Make TilePage and CardSlider evented to simplify code and fix page switcher bug

chrome/browser/resources/ntp4/tile_page.js

 // Copyright (c) 2012 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 182 matching lines @@
           this.finalizeDrag_();
         } else {
           // The CSS3 transitions spec intentionally leaves it up to individual
           // user agents to determine when styles should be applied. On some
           // platforms (at the moment, Windows), when you apply both classes
           // immediately a transition may not occur correctly. That's why we're
           // using a setTimeout here to queue adding the class until the
           // previous class (currently: .placing) sets up a transition.
           // http://dev.w3.org/csswg/css3-transitions/#starting
           window.setTimeout(function() {
-            this.dragClone.classList.add('dropped-on-other-page');
+            if (this.dragClone)
+              this.dragClone.classList.add('dropped-on-other-page');
           }.bind(this), 0);
         }
       }
 
       delete this.lastDropEffect;
       this.landedOnTrash = false;
     },
 
     /**
      * Creates a clone of this node offset by the coordinates. Used for the
@@ skipping 70 matching lines @@
     onDragCloneTransitionEnd_: function(e) {
       if (this.classList.contains('dragging') &&
           (e.propertyName == 'left' || e.propertyName == 'top' ||
            e.propertyName == '-webkit-transform')) {
         this.finalizeDrag_();
       }
     },
 
     /**
      * Called when an app is removed from Chrome. Animates its disappearance.
+     * @param {boolean=} opt_animate Whether the animation should be animated.
      */
-    doRemove: function() {
-      this.firstChild.classList.add('removing-tile-contents');
+    doRemove: function(opt_animate) {
+      if (opt_animate)
+        this.firstChild.classList.add('removing-tile-contents');
+      else
+        this.parentNode.removeChild(this);
     },
 
     /**
      * Callback for the webkitAnimationEnd event on the tile's contents.
      * @param {Event} e The event object.
      */
     onContentsAnimationEnd_: function(e) {
       if (this.firstChild.classList.contains('new-tile-contents'))
         this.firstChild.classList.remove('new-tile-contents');
       if (this.firstChild.classList.contains('removing-tile-contents'))
@@ skipping 49 matching lines @@
   function TilePage(gridValues) {
     var el = cr.doc.createElement('div');
     el.gridValues_ = gridValues;
     el.__proto__ = TilePage.prototype;
     el.initialize();
 
     return el;
   }
 
   /**
+   * The type of events TilePage dispatches.
+   * @public
+   * @static
+   * @memberOf TilePage
+   */
+  TilePage.EventType = {
+    TILE_ADDED: 'tilePage:tile_added',
+    TILE_REMOVED: 'tilePage:tile_removed',
+  };
+
+  /**
    * Takes a collection of grid layout pixel values and updates them with
    * additional tiling values that are calculated from TilePage constants.
    * @param {Object} grid The grid layout pixel values to update.
    */
   TilePage.initGridValues = function(grid) {
     // The amount of space we need to display a narrow grid (all narrow grids
     // are this size).
     grid.narrowWidth =
         grid.minTileWidth * tileWidthFraction(grid.minColCount,
                                               grid.tileSpacingFraction);
@@ skipping 115 matching lines @@
     /**
      * Returns any extra padding to insert to the bottom of a tile page.  By
      * default there is none, but subclasses can override.
      * @type {number}
      */
     get extraBottomPadding() {
       return 0;
     },
 
     /**
+     * Removes the tilePage from the DOM and cleans up event handlers.
+     */
+    remove: function() {
+      // This checks arguments.length as most remove functions have a boolean
+      // |opt_animate| argument, but that's not necesarilly applicable to
+      // removing a tilePage. Selecting a different card in an animated way and
+      // deleting the card afterward is probably a better choice.
+      assert(typeof arguments[0] != 'boolean',
+             'This function takes no |opt_animate| argument.');
+      this.tearDown_();
+      this.parentNode.removeChild(this);
+    },
+
+    /**
      * Cleans up resources that are no longer needed after this TilePage
      * instance is removed from the DOM.
+     * @private
      */
-    tearDown: function() {
+    tearDown_: function() {
       this.eventTracker.removeAll();
     },
 
     /**
      * Appends a tile to the end of the tile grid.
      * @param {HTMLElement} tileElement The contents of the tile.
      * @param {?boolean} animate If true, the append will be animated.
      * @protected
      */
     appendTile: function(tileElement, animate) {
       this.addTileAt(tileElement, this.tileElements_.length, animate);
     },
 
     /**
      * 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.
-     * @param {?boolean} animate If true, the tile in question will be animated
-     *     (other tiles, if they must reposition, do not animate).
+     * @param {boolean=} opt_animate If true, the tile in question will be
+     *     animated (other tiles, if they must reposition, do not animate).
      * @protected
      */
-    addTileAt: function(tileElement, index, animate) {
+    addTileAt: function(tileElement, index, opt_animate) {
       this.classList.remove('animating-tile-page');
-      if (animate)
+      if (opt_animate)
         tileElement.classList.add('new-tile-contents');
+
+      // Make sure the index is positive and either in the the bounds of
+      // this.tileElements_ or at the end (meaning append).
+      assert(index >= 0 && index <= this.tileElements_.length);
+
       var wrapperDiv = new Tile(tileElement);
-      if (index == this.tileElements_.length) {
-        this.tileGrid_.appendChild(wrapperDiv);
-      } else {
-        this.tileGrid_.insertBefore(wrapperDiv,
-                                    this.tileElements_[index]);
-      }
+      // If is out of the bounds of the tile element list, .insertBefore() will
+      // act just like appendChild().
+      this.tileGrid_.insertBefore(wrapperDiv, this.tileElements_[index]);
       this.calculateLayoutValues_();
       this.heightChanged_();
 
       this.positionTile_(index);
+      this.fireAddedEvent(wrapperDiv, index, !!opt_animate);
     },
 
     /**
-     * Removes the given tile and animates the respositioning of the other
-     * tiles.
-     * @param {HTMLElement} tile The tile to remove from |tileGrid_|.
-     * @param {?boolean} animate If true, remaining tiles will animate.
+     * Notify interested subscribers that a tile has been removed from this
+     * page.
+     * @param {Tile} tile The newly added tile.
+     * @param {number} index The index of the tile that was added.
+     * @param {boolean} wasAnimated Whether the removal was animated.
      */
-    removeTile: function(tile, animate) {
-      if (animate)
+    fireAddedEvent: function(tile, index, wasAnimated) {
+      var e = document.createEvent('Event');
+      e.initEvent(TilePage.EventType.TILE_ADDED, true, true);
+      e.addedIndex = index;
+      e.addedTile = tile;
+      e.tilePage = this;
+      e.wasAnimated = wasAnimated;
+      this.dispatchEvent(e);
+    },
+
+    /**
+     * Removes the given tile and animates the repositioning of the other tiles.
+     * @param {boolean=} opt_animate Whether the removal should be animated.
+     * @param {boolean=} opt_dontNotify Whether a page should be removed if the
+     *     last tile is removed from it.
+     */
+    removeTile: function(tile, opt_animate, opt_dontNotify) {
+      if (opt_animate)
         this.classList.add('animating-tile-page');
       var index = tile.index;
       tile.parentNode.removeChild(tile);
       this.calculateLayoutValues_();
       this.cleanupDrag();
+
+      if (!opt_dontNotify)
+        this.fireRemovedEvent(tile, index, !!opt_animate);
     },
 
     /**
+     * Notify interested subscribers that a tile has been removed from this
+     * page.
+     * @param {Tile} tile The tile that was removed.
+     * @param {number} index Where the tile was positioned before removal.
+     * @param {boolean} wasAnimated Whether the removal was animated.
+     */
+    fireRemovedEvent: function(tile, index, wasAnimated) {
+      var e = document.createEvent('Event');
+      e.initEvent(TilePage.EventType.TILE_REMOVED, true, true);
+      e.tilePage = this;
+      e.removedIndex = index;
+      e.removedTile = tile;
+      e.wasAnimated = wasAnimated;
+      this.dispatchEvent(e);
+    },
+
+    /**
      * Removes all tiles from the page.
      */
     removeAllTiles: function() {
       this.tileGrid_.innerHTML = '';
     },
 
     /**
      * Called when the page is selected (in the card selector).
      * @param {Event} e A custom cardselected event.
      * @private
@@ skipping 566 matching lines @@
     /**
      * 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.addDragData(null, this.tileElements_.length);
-      originalPage.cleanupDrag();
+      if (originalPage)
+        originalPage.cleanupDrag();
     },
 
     /**
      * Makes sure all the tiles are in the right place after a drag is over.
      */
     cleanupDrag: function() {
       this.repositionTiles_(currentlyDraggingTile);
       // Remove the drag mask.
       this.updateMask_();
     },
@@ skipping 74 matching lines @@
       assert(false);
     },
   };
 
   return {
     getCurrentlyDraggingTile: getCurrentlyDraggingTile,
     setCurrentDropEffect: setCurrentDropEffect,
     TilePage: TilePage,
   };
 });