NTP5: Reuse insertion/removal animations for Apps.

chrome/browser/resources/ntp_search/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('ntp', function() {
   'use strict';
 
   /**
    * The maximum gap from the edge of the scrolling area which will display
    * the shadow with transparency. After this point the shadow will become
@@ skipping 311 matching lines @@
       // |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.parentNode.removeChild(this);
     },
 
     /**
      * Notify interested subscribers that a tile has been removed from this
-     * page. TODO(pedrosimonetti): Do we really need to fire this event?
-     * @param {TileCell} tile The newly added tile.
+     * 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.
      */
     fireAddedEvent: function(tile, index, wasAnimated) {
       var e = document.createEvent('Event');
       e.initEvent('tilePage:tile_added', true, true);
       e.addedIndex = index;
       e.addedTile = tile;
       e.wasAnimated = wasAnimated;
       this.dispatchEvent(e);
@@ skipping 91 matching lines @@
     },
 
     /**
      * Adds the given element to the tile grid.
      * @param {Tile} tile The tile to be added.
      * @param {number} index The location in the tile grid to insert it at.
      * @protected
      */
     addTileAt: function(tile, index) {
       this.tiles_.splice(index, 0, tile);
-      this.fireAddedEvent(tile, index);
+      this.fireAddedEvent(tile, index, false);
+      this.renderGrid_();
     },
 
     /**
      * Create a blank tile.
      * @protected
      */
     createTile_: function() {
       return new this.TileClass(this.config);
     },
 
     /**
      * Create blank tiles.
      * @param {number} count The desired number of Tiles to be created. If this
      *   value the maximum value defined in |config.maxTileCount|, the maximum
      *   value will be used instead.
      * @protected
      */
     createTiles_: function(count) {
       count = Math.min(count, this.config.maxTileCount);
       for (var i = 0; i < count; i++) {
         this.appendTile(this.createTile_());
       }
     },
 
     /**
+     * This method will create/remove necessary/unnecessary tiles, render the
+     * grid when the number of tiles has changed, and finally will call
+     * |updateTiles_| which will in turn render the individual tiles.
+     * @protected

[Dan Beam, 2012/12/08 05:26:19]

nit: updateGride_ -> updateGrid (_ is only for @private)

[pedro (no code reviews), 2012/12/10 20:14:09]

Done.

+     */
+    updateGrid_: function() {
+      var dataListLength = this.dataList_.length;
+      var tileCount = this.tileCount;
+      // Create or remove tiles if necessary.
+      if (tileCount < dataListLength) {
+        this.createTiles_(dataListLength - tileCount);
+      } else if (tileCount > dataListLength) {
+        var tiles = this.tiles_;
+        while (tiles.length > dataListLength) {
+          var previousLength = tiles.length;
+          // It doesn't matter which tiles are being removed here because
+          // they're going to be reconstructed below when calling updateTiles_
+          // method, so the first tiles are being removed here.
+          this.removeTile(tiles[0]);
+          assert(tiles.length < previousLength);
+        }
+      }
+
+      this.updateTiles_();
+    },
+
+    /**
      * Update the tiles after a change to |dataList_|.
      */
     updateTiles_: function() {
       var maxTileCount = this.config.maxTileCount;
       var dataList = this.dataList_;
       var tiles = this.tiles;
       for (var i = 0; i < maxTileCount; i++) {
         var data = dataList[i];
         var tile = tiles[i];
 
         // TODO(pedrosimonetti): What do we do when there's no tile here?
         if (!tile)
           return;
 
         if (i >= dataList.length)
           tile.reset();
         else
           tile.data = data;
       }
     },
 
     /**
-     * Sets the dataList that will be used to create Tiles. This method will
-     * create/remove necessary/unnecessary tiles, render the grid when the
-     * number of tiles has changed, and finally will call |updateTiles_| which
-     * will in turn render the individual tiles.
-     * @param {Array} dataList The array of data.
+     * Sets the dataList that will be used to create Tiles.
+     * TODO(pedrosimonetti): Use setters and getters instead.
      */
-    setDataList: function(dataList) {
+    setDataList: function(dataList, opt_create) {
       this.dataList_ = dataList.slice(0, this.config.maxTileCount);
-
-      var dataListLength = this.dataList_.length;
-      var tileCount = this.tileCount;
-      // Create or remove tiles if necessary.
-      if (tileCount < dataListLength) {
-        this.createTiles_(dataListLength - tileCount);
-      } else if (tileCount > dataListLength) {
-        var tiles = this.tiles_;
-        while (tiles.length > dataListLength) {
-          var previousLength = tiles.length;
-          // It doesn't matter which tiles are being removed here because
-          // they're going to be reconstructed below when calling updateTiles_
-          // method, so the first tiles are being removed here.
-          this.removeTile(tiles[0]);
-          assert(tiles.length < previousLength);
-        }
-      }
-
-      if (dataListLength != tileCount)
-        this.renderGrid_();
-
-      this.updateTiles_();
     },
 
     // internal helpers
     // -------------------------------------------------------------------------
 
     /**
      * Gets the required width for a Tile.
      * @private
      */
     getTileRequiredWidth_: function() {
@@ skipping 53 matching lines @@
      * Renders the tile grid, and the individual tiles. Rendering the grid
      * consists of adding/removing tile rows and tile cells according to the
      * specified size (defined by the number of columns in the grid). While
      * rendering the grid, the tiles are rendered in order in their respective
      * cells and tile fillers are rendered when needed. This method sets the
      * private properties colCount_ and rowCount_.
      *
      * This method should be called every time the contents of the grid changes,
      * that is, when the number, contents or order of the tiles has changed.
      * @param {number=} opt_colCount The number of columns.
-     * @private
+     * @protected

[Dan Beam, 2012/12/08 05:26:19]

same nit

[pedro (no code reviews), 2012/12/10 20:14:09]

Done.

      */
     renderGrid_: function(opt_colCount) {
       var colCount = opt_colCount || this.colCount_;
 
       var tileGridContent = this.tileGridContent_;
       var tiles = this.tiles_;
       var tileCount = tiles.length;
 
       var rowCount = Math.ceil(tileCount / colCount);
       var tileRows = tileGridContent.getElementsByClassName('tile-row');
@@ skipping 212 matching lines @@
             repositioningStartIndex, repositioningEndIndex, true);
 
         this.removeTile(tileBeingRemoved);
 
         // If the extra tile is a real one (not a filler), then it needs to be
         // added to the tile list. The tile has been placed in the right spot
         // but the tile page still doesn't know about this new tile.
         if (extraTileData)
           this.appendTile(extraTile);
 
-        this.renderGrid_();
       }.bind(this);
 
       // Listens to the animation end.
       var lastAnimatingTile = extraTile;
       lastAnimatingTile.addEventListener('webkitTransitionEnd',
           onPositioningTransitionEnd);
     },
 
     /**
      * Animates a tile restoration.
@@ skipping 11 matching lines @@
 
       var repositioningStartIndex = index;
       var repositioningEndIndex = tileCount - (extraTileData ? 1 : 0);
 
       this.initializeRepositioningAnimation_(index, repositioningEndIndex);
 
       var restoredData = newDataList[index];
       var tileBeingRestored = createTile(this, restoredData);
       tileCells[index].appendChild(tileBeingRestored);
 
-      var extraTile = extraCell.tile;
+      if (this.config.scrollable)
+        this.content_.scrollTop = tileCells[index].offsetTop;
+
+      var extraTile;
+      if (extraCell)
+        extraTile = extraCell.tile;
 
       this.executeRepositioningAnimation_(tileBeingRestored, extraTile,
           repositioningStartIndex, repositioningEndIndex, false);
 
       // Cleans up the animation.
       var onPositioningTransitionEnd = function(e) {
         var propertyName = e.propertyName;
         if (!(propertyName == '-webkit-transform' ||
               propertyName == 'opacity')) {
           return;
         }
 
         lastAnimatingTile.removeEventListener('webkitTransitionEnd',
             onPositioningTransitionEnd);
 
         // When there's an extra data, it means the tile is a real one (not a
         // filler), and therefore it needs to be removed from the tile list.
         if (extraTileData)
           this.removeTile(extraTile);
 
         this.finalizeRepositioningAnimation_(tileBeingRestored,
             repositioningStartIndex, repositioningEndIndex, false);
 
         this.addTileAt(tileBeingRestored, index);
 
-        this.renderGrid_();
       }.bind(this);
 
       // Listens to the animation end.
       var lastAnimatingTile = tileBeingRestored;
       lastAnimatingTile.addEventListener('webkitTransitionEnd',
           onPositioningTransitionEnd);
     },
 
     // animation helpers
     // -------------------------------------------------------------------------
@@ skipping 54 matching lines @@
      * @param {number} endIndex Index of the last tile to be repositioned.
      * @param {boolean} isRemoving Whether the tile is being removed.
      * @private
      */
     executeRepositioningAnimation_: function(targetTile, extraTile, startIndex,
         endIndex, isRemoving) {
       targetTile.classList.add('target-tile');
 
       // Alternate the visualization of the target and extra tiles.
       fadeTile(targetTile, !isRemoving);
-      fadeTile(extraTile, isRemoving);
+      if (extraTile)
+        fadeTile(extraTile, isRemoving);
 
       // Move tiles to the new position.
       var tiles = this.tiles_;
       var positionDiff = isRemoving ? -1 : 1;
       for (var i = startIndex; i < endIndex; i++) {
         var position = this.getTilePosition_(i + positionDiff);
         this.moveTileTo_(tiles[i], position.left, position.top);
       }
     },
 
@@ skipping 14 matching lines @@
       targetTile.classList.remove('target-tile');
 
       // Move tiles back to relative position.
       var tiles = this.tiles_;
       var tileCells = this.querySelectorAll('.tile-cell');
       var positionDiff = isRemoving ? -1 : 1;
       for (var i = startIndex; i < endIndex; i++) {
         var tile = tiles[i];
         this.resetTilePosition_(tile);
         tile.style.zIndex = '';
-        tileCells[i + positionDiff].assign(tile);
+        var tileCell = tileCells[i + positionDiff];
+        if (tileCell)
+          tileCell.assign(tile);
       }
     },
 
     /**
      * Animates the display of columns.
      * @param {number} col The column number.
      * @param {boolean} show Whether or not to show the row.
      */
     showTileCols_: function(col, show) {
       var prop = show ? 'remove' : 'add';
@@ skipping 91 matching lines @@
       tile.scrollTop;
       tile.classList.remove(className);
     }
   }
 
   return {
     Tile: Tile,
     TilePage: TilePage,
   };
 });