fix(gridlist): Now supports custom interpolation symbols

fix(gridlist): Couple of demo fixes
fix(gridlist): Tiles can now be rearranged using ngRepeat
fix(gridlist): Reduces the number of layouts

Fixes #1874, Fixes #1859, Fixes #1824, Fixes #1663, Fixes #1671, Closes #2168

src/components/gridList/demoBasicUsage/index.html

@@ -5,7 +5,7 @@
         md-gutter="12px" md-gutter-gt-sm="8px" >
 
     <md-grid-tile class="gray"
-        md-rowspan="3" md-colspan="2">
+        md-rowspan="3" md-colspan="2" md-colspan-sm="1">
       <md-grid-tile-footer>
         <h3>#1: (3r x 2c)</h3>
       </md-grid-tile-footer>
@@ -31,7 +31,7 @@ <h3>#4: (2r x 1c)</h3>
     </md-grid-tile>
 
     <md-grid-tile class="red"
-        md-rowspan="2" md-colspan="2">
+        md-rowspan="2" md-colspan="2" md-colspan-sm="1">
       <md-grid-tile-footer>
         <h3>#5: (2r x 2c)</h3>
       </md-grid-tile-footer>

src/components/gridList/demoDynamicTiles/index.html

@@ -1,18 +1,17 @@
 <div ng-app="gridListDemo" ng-controller="gridListDemoCtrl as vm" flex>
+  <md-button ng-click="vm.rotate()">Rotate</md-button>
+  <md-grid-list
+        md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
+        md-row-height-gt-md="1:1" md-row-height="4:3"
+        md-gutter="8px" md-gutter-gt-sm="4px" >
 
-    <md-grid-list
-          md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
-          md-row-height-gt-md="1:1" md-row-height="4:3"
-          md-gutter="8px" md-gutter-gt-sm="4px" >
-
-        <md-grid-tile ng-repeat="tile in vm.tiles"
-                      md-rowspan="{{tile.span.row}}"
-                      md-colspan="{{tile.span.col}}"
-                      ng-class="tile.background" >
-            <md-icon md-svg-icon="{{tile.icon}}"></md-icon>
-            <md-grid-tile-footer><h3>{{tile.title}}</h3></md-grid-tile-footer>
-        </md-grid-tile>
-
-      </md-grid-list>
-
+    <md-grid-tile ng-repeat="tile in vm.tiles"
+                  md-rowspan="{{tile.span.row}}"
+                  md-colspan="{{tile.span.col}}"
+                  md-colspan-sm="1"
+                  ng-class="tile.background" >
+      <md-icon md-svg-icon="{{tile.icon}}"></md-icon>
+      <md-grid-tile-footer><h3>{{tile.title}}</h3></md-grid-tile-footer>
+    </md-grid-tile>
+  </md-grid-list>
 </div>

src/components/gridList/demoDynamicTiles/script.js

@@ -9,6 +9,10 @@ angular
             background: ""
           });
 
+    this.rotate = function() {
+      this.tiles.unshift(this.tiles.pop());
+    };
+
     function buildGridModel(tileTmpl){
       var it, results = [ ];
 
@@ -17,7 +21,7 @@ angular
         it = angular.extend({},tileTmpl);
         it.icon  = it.icon + (j+1);
         it.title = it.title + (j+1);
-        it.span  = { row : "1", col : "1" };
+        it.span  = { row : 1, col : 1 };
 
         switch(j+1) {
           case 1:

src/components/gridList/gridList.js

@@ -152,67 +152,86 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) {
       }
     }
 
+    var lastLayoutProps;
+
     /**
      * Invokes the layout engine, and uses its results to lay out our
      * tile elements.
      */
     function layoutDelegate() {
+      var props = {
+        tileSpans: getTileSpans(),
+        colCount: getColumnCount(),
+        rowMode: getRowMode(),
+        rowHeight: getRowHeight(),
+        gutter: getGutter()
+      };
+
+      if (angular.equals(props, lastLayoutProps)) {
+        return;
+      }
+
       var tiles = getTileElements(),
-          colCount = getColumnCount(),
-          rowMode = getRowMode(),
-          rowHeight = getRowHeight(),
-          gutter = getGutter(),
           performance =
-              $mdGridLayout(colCount, getTileSpans(), getTileElements())
-                  .map(function(tilePositions, rowCount) {
+            $mdGridLayout(props.colCount, props.tileSpans, tiles)
+              .map(function(tilePositions, rowCount) {
+                return {
+                  grid: {
+                    element: element,
+                    style: getGridStyle(props.colCount, rowCount,
+                        props.gutter, props.rowMode, props.rowHeight)
+                  },
+                  tiles: tilePositions.map(function(ps, i) {
                     return {
-                      grid: {
-                        element: element,
-                        style: getGridStyle(colCount, rowCount, gutter, rowMode, rowHeight)
-                      },
-                      tiles: tilePositions.map(function(ps, i) {
-                        return {
-                          element: angular.element(tiles[i]),
-                          style: getTileStyle(ps.position, ps.spans,
-                              colCount, rowCount,
-                              gutter, rowMode, rowHeight)
-                        }
-                      })
+                      element: angular.element(tiles[i]),
+                      style: getTileStyle(ps.position, ps.spans,
+                          props.colCount, props.rowCount,
+                          props.gutter, props.rowMode, props.rowHeight)
                     }
                   })
-                  .reflow()
-                  .performance();
+                }
+              })
+              .reflow()
+              .performance();
 
       // Report layout
       scope.mdOnLayout({
         $event: {
           performance: performance
         }
       });
+
+      lastLayoutProps = props;
     }
 
     // Use $interpolate to do some simple string interpolation as a convenience.
 
+    var startSymbol = $interpolate.startSymbol();
+    var endSymbol = $interpolate.endSymbol();
+
+    // Returns an expression wrapped in the interpolator's start and end symbols.
+    function expr(exprStr) {
+      return startSymbol + exprStr + endSymbol;
+    }
+
     // The amount of space a single 1x1 tile would take up (either width or height), used as
     // a basis for other calculations. This consists of taking the base size percent (as would be
     // if evenly dividing the size between cells), and then subtracting the size of one gutter.
     // However, since there are no gutters on the edges, each tile only uses a fration
     // (gutterShare = numGutters / numCells) of the gutter size. (Imagine having one gutter per
     // tile, and then breaking up the extra gutter on the edge evenly among the cells).
-    var UNIT = $interpolate('{{share}}% - ( {{gutter}} * {{gutterShare}} )');
+    var UNIT = $interpolate(expr('share') + '% - (' + expr('gutter') + ' * ' + expr('gutterShare') + ')');
 
     // The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.
     // The position comes the size of a 1x1 tile plus gutter for each previous tile in the
     // row/column (offset).
-    var POSITION  = $interpolate('calc( ( {{unit}} + {{gutter}} ) * {{offset}} )');
+    var POSITION  = $interpolate('calc((' + expr('unit') + ' + ' + expr('gutter') + ') * ' + expr('offset') + ')');
 
     // The actual size of a tile, e.g., width or height, taking rowSpan or colSpan into account.
     // This is computed by multiplying the base unit by the rowSpan/colSpan, and then adding back
     // in the space that the gutter would normally have used (which was already accounted for in
     // the base unit calculation).
-    var DIMENSION = $interpolate('calc(({{unit}}) * {{span}} + ({{span}} - 1) * {{gutter}})');
-
-    // TODO(shyndman): Replace args with a ctx object.
+    var DIMENSION = $interpolate('calc((' + expr('unit') + ') * ' + expr('span') + ' + (' + expr('span') + ' - 1) * ' + expr('gutter') + ')');
 
     /**
      * Gets the styles applied to a tile element described by the given parameters.
@@ -284,7 +303,7 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) {
           // Percent of the available vertical space that one row takes up.
           var vShare = (1 / rowCount) * 100;
 
-          // Base veritcal size of a row.
+          // Base vertical size of a row.
           var vUnit = UNIT({share: vShare, gutterShare: vGutterShare, gutter: gutter});
 
           style.top = POSITION({unit: vUnit, offset: position.row, gutter: gutter});
@@ -385,7 +404,7 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) {
   }
 }
 
-  /* @ngInject */
+/* @ngInject */
 function GridListController($timeout) {
   this.invalidated = false;
   this.$timeout_ = $timeout;
@@ -720,6 +739,14 @@ function GridTileDirective($mdMedia) {
       unwatchAttrs();
       gridCtrl.removeTile(element, attrs);
     });
+
+    if (angular.isDefined(scope.$parent.$index)) {
+      scope.$watch(function() { return scope.$parent.$index; },
+        function indexChanged(newIdx, oldIdx) {
+          gridCtrl.removeTile(element, attrs);
+          gridCtrl.addTile(element, attrs, newIdx);
+        });
+    }
   }
 }