NTP5: Fine tuning of Apps implementation.

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
+   * 100% opaque.
+   * @type {number}
+   * @const
+   */
+  var MAX_SCROLL_SHADOW_GAP = 16;
+
+  /**
+   * @type {number}
+   * @const
+   */
+  var TILE_ROW_HEIGHT = 92;
+
+  /**
+   * @type {number}
+   * @const
+   */
+  var SCROLL_BAR_WIDTH = 12;
+
   //----------------------------------------------------------------------------
   // Tile
   //----------------------------------------------------------------------------
 
   /**
    * A virtual Tile class. Each TilePage subclass should have its own Tile
    * subclass implemented too (e.g. MostVisitedPage contains MostVisited
    * tiles, and MostVisited is a Tile subclass).
    * @constructor
    * @param {Object} config TilePage configuration object.
@@ skipping 172 matching lines @@
 
   /**
    * Creates a new TilePage object. This object contains tiles and controls
    * their layout.
    * @constructor
    * @extends {HTMLDivElement}
    */
   function TilePage() {
     var el = cr.doc.createElement('div');
     el.__proto__ = TilePage.prototype;
-    el.initialize();
 
     return el;
   }
 
   TilePage.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /**
      * Reference to the Tile subclass that will be used to create the tiles.
      * @constructor
      * @extends {Tile}
      */
     TileClass: Tile,
 
     // The config object should be defined by a TilePage subclass if it
     // wants the non-default behavior.
     config: {
       // The width of a cell.
       cellWidth: 110,
       // The start margin of a cell (left or right according to text direction).
       cellMarginStart: 12,
       // The maximum number of Tiles to be displayed.
-      maxTileCount: 6
+      maxTileCount: 6,
+      // Whether the TilePage content will be scrollable.
+      scrollable: false,
     },
 
     /**
      * Initializes a TilePage.
      */
     initialize: function() {
       this.className = 'tile-page';
 
-      // The content defines the actual space a page has to display tiles.
+      // The div that wraps the scrollable element.
+      this.frame_ = this.ownerDocument.createElement('div');
+      this.frame_.className = 'tile-page-frame';
+      this.appendChild(this.frame_);
+
+      // The content/scrollable element.
       this.content_ = this.ownerDocument.createElement('div');
       this.content_.className = 'tile-page-content';
-      this.appendChild(this.content_);
+      this.frame_.appendChild(this.content_);
+
+      if (this.config.scrollable) {
+        this.content_.classList.add('scrollable');
+
+        // The scrollable shadow top.
+        this.shadowTop_ = this.ownerDocument.createElement('div');
+        this.shadowTop_.className = 'shadow-top';
+        this.content_.appendChild(this.shadowTop_);
+
+        // The scrollable shadow bottom.
+        this.shadowBottom_ = this.ownerDocument.createElement('div');
+        this.shadowBottom_.className = 'shadow-bottom';
+        this.content_.appendChild(this.shadowBottom_);
+      }
 
       // The div that defines the tile grid viewport.
       this.tileGrid_ = this.ownerDocument.createElement('div');
       this.tileGrid_.className = 'tile-grid';
       this.content_.appendChild(this.tileGrid_);
 
       // The tile grid contents, which can be scrolled.
       this.tileGridContent_ = this.ownerDocument.createElement('div');
       this.tileGridContent_.className = 'tile-grid-content';
       this.tileGrid_.appendChild(this.tileGridContent_);
 
       // The list of Tile elements which is used to fill the TileGrid cells.
       this.tiles_ = [];
 
       // TODO(pedrosimonetti): Check duplication of these methods.
       this.addEventListener('cardselected', this.handleCardSelection_);
       this.addEventListener('carddeselected', this.handleCardDeselection_);
 
       this.tileGrid_.addEventListener('webkitTransitionEnd',
           this.onTileGridTransitionEnd_.bind(this));
+
+      this.content_.addEventListener('scroll', this.onScroll.bind(this));
     },
 
     /**
      * The list of Tile elements.
      * @type {Array<Tile>}
      */
     get tiles() {
       return this.tiles_;
     },
 
@@ skipping 225 matching lines @@
       var config = this.config;
       return config.cellWidth + config.cellMarginStart;
     },
 
     /**
      * Gets the the maximum number of columns that can fit in a given width.
      * @param {number} width The width in pixels.
      * @private
      */
     getColCountForWidth_: function(width) {
-      var availableWidth = width + this.config.cellMarginStart;
+      var scrollBarIsVisible = this.config.scrollable &&
+          this.content_.scrollHeight > this.content_.clientHeight;
+      var scrollBarWidth = scrollBarIsVisible ? SCROLL_BAR_WIDTH : 0;
+      var availableWidth = width + this.config.cellMarginStart - scrollBarWidth;
+
       var requiredWidth = this.getTileRequiredWidth_();
       var colCount = Math.floor(availableWidth / requiredWidth);
       return colCount;
     },
 
     /**
      * Gets the width for a given number of columns.
      * @param {number} colCount The number of columns.
      * @private
      */
     getWidthForColCount_: function(colCount) {
       var requiredWidth = this.getTileRequiredWidth_();
       var width = colCount * requiredWidth - this.config.cellMarginStart;
       return width;
     },
 
     /**
      * Returns the position of the tile at |index|.
      * @param {number} index Tile index.
      * @private
      * @return {!{top: number, left: number}} Position.
      */
     getTilePosition_: function(index) {
       var colCount = this.colCount_;
+      var row = Math.floor(index / colCount);
       var col = index % colCount;
       if (isRTL())
         col = colCount - col - 1;
       var config = this.config;
+      var top = TILE_ROW_HEIGHT * row;
       var left = col * (config.cellWidth + config.cellMarginStart);
-      return {top: 0, left: left};
+      return {top: top, left: left};
     },
 
     // rendering
     // -------------------------------------------------------------------------
 
     /**
      * 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
@@ skipping 21 matching lines @@
       for (var tile = 0, row = 0; row < rowCount; row++) {
         var tileRow = tileRows[row];
 
         // Create tile row if there's no one yet.
         if (!tileRow) {
           tileRow = cr.doc.createElement('div');
           tileRow.className = 'tile-row';
           tileGridContent.appendChild(tileRow);
         }
 
-        // Adjust row visibility.
-        var rowVisible = row >= pageOffset &&
-            row <= (pageOffset + numOfVisibleRows - 1);
-        this.showTileRow_(tileRow, rowVisible);
-
         // The tiles inside the current row.
         var tileRowTiles = tileRow.childNodes;
 
         // Remove excessive columns from a particular tile row.
         var maxColCount = Math.min(colCount, tileCount - tile);
         maxColCount = Math.max(0, maxColCount);
         while (tileRowTiles.length > maxColCount) {
           tileRow.removeChild(tileRow.lastElementChild);
         }
 
@@ skipping 31 matching lines @@
         }
       }
 
       // Remove excessive tile rows from the tile grid.
       while (tileRows.length > rowCount) {
         tileGridContent.removeChild(tileGridContent.lastElementChild);
       }
 
       this.colCount_ = colCount;
       this.rowCount_ = rowCount;
+
+      if (this.onScroll)

[Dan Beam, 2012/11/30 23:41:45]

nit: same nit re: if (this.onScroll)

[pedro (no code reviews), 2012/12/01 00:02:29]

Done.

+        this.onScroll();
     },
 
     // layout
     // -------------------------------------------------------------------------
 
     /**
      * Calculates the layout of the tile page according to the current Bottom
      * Panel's size. This method will resize the containers of the tile page,
      * and re-render the grid when its dimension changes (number of columns or
      * visible rows changes). This method also sets the private properties
@@ skipping 35 matching lines @@
         // TODO(pedrosimonetti): move to handler below.
         var self = this;
         this.onTileGridTransitionEndHandler_ = function() {
           if (colCount < lastColCount)
             self.renderGrid_(colCount);
           else
             self.showTileCols_(0, true);
         };
       }
 
-      this.content_.style.width = contentWidth + 'px';
+      this.animatingColCount_ = colCount;
 
-      this.animatingColCount_ = colCount;
+      this.frame_.style.width = contentWidth + 'px';
+
+      this.onScroll();
     },
 
     // tile repositioning animation
     // -------------------------------------------------------------------------
 
     /**
      * Tile repositioning state.
      * @type {{index: number, isRemoving: number}}
      */
     tileRepositioningState_: null,
@@ skipping 248 matching lines @@
       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);
       }
     },
 
     /**
-     * Animates the display of a row. TODO(pedrosimonetti): Make it local?
-     * @param {HTMLElement} row The row element.
-     * @param {boolean} show Whether or not to show the row.
-     */
-    showTileRow_: function(row, show) {
-      row.classList[show ? 'remove' : 'add']('hide-row');
-    },
-
-    /**
-     * Animates the display of columns. TODO(pedrosimonetti): Make it local?
+     * 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';
       var max = 10;  // TODO(pedrosimonetti): Add const?
       var tileGridContent = this.tileGridContent_;
       for (var i = col; i < max; i++) {
         tileGridContent.classList[prop]('hide-col-' + i);
       }
     },
 
     // event handlers
     // -------------------------------------------------------------------------
 
     /**
+     * Handles the scroll event.
+     * @protected
+     */
+    onScroll: function() {
+      // If the TilePage is scrollable, then the opacity of shadow top and
+      // bottom must adjusted, indicating when there's an overflow content.
+      if (this.config.scrollable) {
+        var content = this.content_;
+        var topGap = Math.min(MAX_SCROLL_SHADOW_GAP, content.scrollTop);
+        var bottomGap = Math.min(MAX_SCROLL_SHADOW_GAP, content.scrollHeight -
+            content.scrollTop - content.clientHeight);
+
+        this.shadowTop_.style.opacity = topGap / MAX_SCROLL_SHADOW_GAP;
+        this.shadowBottom_.style.opacity = bottomGap / MAX_SCROLL_SHADOW_GAP;
+      }
+    },
+
+    /**
      * Handles the end of the horizontal tile grid transition.
      * @param {Event} e The tile grid webkitTransitionEnd event.
      */
     onTileGridTransitionEnd_: function(e) {
       if (!this.selected)
         return;
 
       // We should remove the classes that control transitions when the
       // transition ends so when the text is resized (Ctrl + '+'), no other
       // transition should happen except those defined in the specification.
@@ skipping 52 matching lines @@
       tile.scrollTop;
       tile.classList.remove(className);
     }
   }
 
   return {
     Tile: Tile,
     TilePage: TilePage,
   };
 });