fix(gridlist): Adds grid height calculation

angular · Feb 13, 2015 · 0196014 · 0196014
1 parent c1d59ab
commit 0196014
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 16 deletions.
diff --git a/src/components/gridList/demoResponsiveUsage/style.scss b/src/components/gridList/demoResponsiveUsage/style.scss
@@ -1 +0,0 @@
-md-content { height: 400px; }

diff --git a/src/components/gridList/gridList.js b/src/components/gridList/gridList.js
@@ -164,15 +164,20 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia, $
           gutter = getGutter(),
           performance =
               $mdGridLayout(colCount, getTileSpans(), getTileElements())
-                  .map(function(ps, rowCount, i) {
-                    var element = angular.element(tiles[i]);
-                    element.scope().$mdGridPosition = ps; // for debugging
-
+                  .map(function(tilePositions, rowCount) {
                     return {
-                      element: element,
-                      styles: getStyles(ps.position, ps.spans,
-                          colCount, rowCount,
-                          gutter, rowMode, rowHeight)
+                      grid: {
+                        element: element,
+                        style: getGridStyle(colCount, rowCount, gutter, rowMode, rowHeight)
+                      },
+                      tiles: tilePositions.map(function(ps, i) {
+                        return {
+                          element: angular.element(tiles[i]),
+                          styles: getTileStyle(ps.position, ps.spans,
+                              colCount, rowCount,
+                              gutter, rowMode, rowHeight)
+                        }
+                      })
                     }
                   })
                   .reflow()
@@ -194,7 +199,7 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia, $
         "calc(({{ unit }}) * {{ span }} + ({{ span }} - 1) * {{ gutter }})");
 
     // TODO(shyndman): Replace args with a ctx object.
-    function getStyles(position, spans, colCount, rowCount, gutter, rowMode, rowHeight) {
+    function getTileStyle(position, spans, colCount, rowCount, gutter, rowMode, rowHeight) {
       // TODO(shyndman): There are style caching opportunities here.
       var hShare = (1 / colCount) * 100,
           hGutterShare = colCount === 1 ? 0 : (colCount - 1) / colCount,
@@ -213,7 +218,7 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia, $
       switch (rowMode) {
         case 'fixed':
           style.top = POSITION({ unit: rowHeight, offset: position.row, gutter: gutter });
-          style.height = DIMENSION({ unit: rowHeight, span: spans.row, gutter: '0px' });
+          style.height = DIMENSION({ unit: rowHeight, span: spans.row, gutter: gutter });
           break;
 
         case 'ratio':
@@ -238,6 +243,35 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia, $
       return style;
     }
 
+    function getGridStyle(colCount, rowCount, gutter, rowMode, rowHeight) {
+      var style = {
+        height: '',
+        paddingBottom: ''
+      };
+
+      switch(rowMode) {
+        case 'fixed':
+          style.height = DIMENSION({ unit: rowHeight, span: rowCount, gutter: gutter });
+          break;
+
+        case 'ratio':
+          // rowHeight is width / height
+          var hGutterShare = colCount === 1 ? 0 : (colCount - 1) / colCount,
+              hShare = (1 / colCount) * 100,
+              vShare = hShare * (1 / rowHeight),
+              vUnit = UNIT({ share: vShare, gutterShare: hGutterShare, gutter: gutter });
+
+          style.paddingBottom = DIMENSION({ unit: vUnit, span: rowCount, gutter: gutter});
+          break;
+
+        case 'fit':
+          // noop, as the height is user set
+          break;
+      }
+
+      return style;
+    }
+
     function getTileElements() {
       // element[0].querySelectorAll(':scope > md-grid-tile') would be
       // preferred, but is not yet widely supported.
@@ -341,7 +375,7 @@ GridListController.prototype = {
 
 function GridLayoutFactory($mdUtil) {
   return function(colCount, tileSpans) {
-    var self, layoutInfo, tiles, layoutTime, mapTime, reflowTime, layoutInfo;
+    var self, layoutInfo, gridStyles, layoutTime, mapTime, reflowTime, layoutInfo;
     layoutTime = $mdUtil.time(function() {
       layoutInfo = calculateGridFor(colCount, tileSpans);
     });
@@ -360,9 +394,8 @@ function GridLayoutFactory($mdUtil) {
        */
       map: function(updateFn) {
         mapTime = $mdUtil.time(function() {
-          tiles = layoutInfo.positioning.map(function(ps, i) {
-            return updateFn(ps, self.layoutInfo().rowCount, i);
-          });
+          var info = self.layoutInfo();
+          gridStyles = updateFn(info.positioning, info.rowCount);
         });
         return self;
       },
@@ -375,7 +408,8 @@ function GridLayoutFactory($mdUtil) {
       reflow: function(customAnimatorFn) {
         reflowTime = $mdUtil.time(function() {
           var animator = customAnimatorFn || defaultAnimator;
-          tiles.forEach(function(it) {
+          animator(gridStyles.grid.element, gridStyles.grid.style);
+          gridStyles.tiles.forEach(function(it) {
             animator(it.element, it.styles);
           });
         });