Remove redundant _updateCurrentMedia

adopted-ember-addons · Jul 8, 2017 · d4e324c · d4e324c
1 parent beb1fa5
commit d4e324c
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 62 deletions.
diff --git a/addon/components/paper-grid-list.js b/addon/components/paper-grid-list.js
@@ -42,7 +42,6 @@ export default Component.extend(ParentMixin, {
   didInsertElement() {
     this._super(...arguments);
     this._installMediaListener();
-    this._updateCurrentMedia();
   },
 
   didUpdateAttrs() {
@@ -65,9 +64,9 @@ export default Component.extend(ParentMixin, {
       // Sets mediaList to a property so removeListener can access it
       this.set(`${listenerName}List`, mediaList);
       // Creates a function based on mediaName so that removeListener can remove it.
-      this[listenerName] = run.bind(this, (result) => {
+      this.set(listenerName, run.bind(this, (result) => {
         this._mediaDidChange(mediaName, result.matches);
-      });
+      }));
 
       // Calls '_mediaDidChange' once
       this[listenerName](mediaList);
@@ -86,7 +85,7 @@ export default Component.extend(ParentMixin, {
 
   _mediaDidChange(mediaName, matches) {
     this.set(mediaName, matches);
-    run.debounce(this, this._updateCurrentMedia, 150);
+    run.debounce(this, this._updateCurrentMedia, 50);
   },
 
   _updateCurrentMedia() {
@@ -99,19 +98,21 @@ export default Component.extend(ParentMixin, {
   },
 
   updateGrid() {
-    this.$().css(this.get('gridStyle'));
+    this.$().css(this._gridStyle());
     this.get('tiles').forEach((tile) =>  {
-      tile.$().css(tile.get('tileStyle'));
+      tile.$().css(tile._tileStyle());
     });
   },
 
-  gridStyle: computed('currentCols', 'rowCount', 'currentGutter', 'currentRowMode', 'currentRowHeight', function() {
+  _gridStyle() {
+    this._setTileLayout();
+
     let style = {};
     let colCount = this.get('currentCols');
-    let rowCount = this.get('rowCount');
     let gutter = this.get('currentGutter');
     let rowHeight = this.get('currentRowHeight');
     let rowMode = this.get('currentRowMode');
+    let rowCount = this.get('rowCount');
 
     switch (rowMode) {
       case 'fixed': {
@@ -137,16 +138,19 @@ export default Component.extend(ParentMixin, {
     }
 
     return style;
-  }),
+  },
 
-  tileSpans: computed('tiles.[]', 'tiles.@each.{currentRowspan,currentColspan}', function() {
-    return this.get('tiles').map((tile) => {
-      return {
-        row: tile.get('currentRowspan'),
-        col: tile.get('currentColspan')
-      };
+  // Calculates tile positions
+  _setTileLayout() {
+    let tiles = this.get('tiles');
+    let layoutInfo = gridLayout(this.get('currentCols'), tiles);
+
+    tiles.forEach((tile, i) => {
+      tile.set('position', layoutInfo.positions[i]);
     });
-  }),
+
+    this.set('rowCount', layoutInfo.rowCount);
+  },
 
   // Parses attribute string and returns hash of media sizes
   _extractResponsiveSizes(string, regex = mediaRegex) {
@@ -227,22 +231,6 @@ export default Component.extend(ParentMixin, {
     }
   },
 
-  rowCount: computed.alias('gridLayoutInfo.rowCount'),
-
-  // Calculates tile positions
-  gridLayoutInfo: computed('tiles.[]', 'tileSpans', 'currentCols', function() {
-    let tiles = this.get('tiles');
-    let layoutInfo = gridLayout(this.get('currentCols'), this.get('tileSpans')).layoutInfo();
-
-    tiles.forEach((tile, i) => {
-      let positioning = layoutInfo.positioning[i];
-      tile.set('position', positioning.position);
-      tile.set('spans', positioning.spans);
-    });
-
-    return layoutInfo;
-  }),
-
   _applyDefaultUnit(val) {
     return /\D$/.test(val) ? val : `${val}px`;
   }

diff --git a/addon/components/paper-grid-tile.js b/addon/components/paper-grid-tile.js
@@ -36,7 +36,7 @@ export default Component.extend(ChildMixin, {
 
   updateTile() {
     let gridList = this.get('gridList');
-    run.debounce(gridList, gridList.updateGrid, 150);
+    run.debounce(gridList, gridList.updateGrid, 50);
   },
 
   colspanMedia: computed('colspan', function() {
@@ -57,9 +57,10 @@ export default Component.extend(ChildMixin, {
     return parseInt(rowspan, 10) || 1;
   }),
 
-  tileStyle: computed('position', 'spans', 'gridList.{rowCount,currentCols,currentGutter,currentRowMode,currentRowHeight}', function() {
+  _tileStyle() {
     let position = this.get('position');
-    let spans = this.get('spans');
+    let currentColspan = this.get('currentColspan');
+    let currentRowspan = this.get('currentRowspan');
     let rowCount = this.get('gridList.rowCount');
     let colCount = this.get('gridList.currentCols');
     let gutter = this.get('gridList.currentGutter');
@@ -79,7 +80,7 @@ export default Component.extend(ChildMixin, {
     // height and vertical position depends on the rowMode.
     let style = {
       left: positionCSS({ unit: hUnit, offset: position.col, gutter }),
-      width: dimensionCSS({ unit: hUnit, span: spans.col, gutter }),
+      width: dimensionCSS({ unit: hUnit, span: currentColspan, gutter }),
       // resets
       paddingTop: '',
       marginTop: '',
@@ -93,7 +94,7 @@ export default Component.extend(ChildMixin, {
       case 'fixed': {
         // In fixed mode, simply use the given rowHeight.
         style.top = positionCSS({ unit: rowHeight, offset: position.row, gutter });
-        style.height = dimensionCSS({ unit: rowHeight, span: spans.row, gutter });
+        style.height = dimensionCSS({ unit: rowHeight, span: currentRowspan, gutter });
         break;
       }
       case 'ratio': {
@@ -107,7 +108,7 @@ export default Component.extend(ChildMixin, {
         // paddingTop and marginTop are used to maintain the given aspect ratio, as
         // a percentage-based value for these properties is applied to the *width* of the
         // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
-        style.paddingTop = dimensionCSS({ unit: vUnit, span: spans.row, gutter });
+        style.paddingTop = dimensionCSS({ unit: vUnit, span: currentRowspan, gutter });
         style.marginTop = positionCSS({ unit: vUnit, offset: position.row, gutter });
         break;
       }
@@ -122,12 +123,12 @@ export default Component.extend(ChildMixin, {
         vUnit = unitCSS({ share: vShare, gutterShare: vGutterShare, gutter });
 
         style.top = positionCSS({ unit: vUnit, offset: position.row, gutter });
-        style.height = dimensionCSS({ unit: vUnit, span: spans.row, gutter });
+        style.height = dimensionCSS({ unit: vUnit, span: currentRowspan, gutter });
         break;
       }
     }
 
     return style;
-  })
+  }
 
 });
diff --git a/addon/utils/grid-layout.js b/addon/utils/grid-layout.js
@@ -5,16 +5,8 @@
 /**
  * Publish layout function
  */
-function GridLayout(colCount, tileSpans) {
-  let layoutInfo = calculateGridfor(colCount, tileSpans);
-  return {
-    /*
-     * An array of objects describing each tile's position in the grid.
-     */
-    layoutInfo() {
-      return layoutInfo;
-    }
-  };
+function GridLayout(colCount, tiles) {
+  return calculateGridfor(colCount, tiles);
 }
 
 /*
@@ -33,24 +25,23 @@ function GridLayout(colCount, tileSpans) {
  *    tile, spaceTracker's elements are each decremented by 1 to a minimum
  *    of 0. Rows are searched in this fashion until space is found.
  */
-function calculateGridfor(colCount, tileSpans) {
+function calculateGridfor(colCount, tiles) {
   let curCol = 0;
   let curRow = 0;
   let spaceTracker = newSpaceTracker();
 
   return {
-    positioning: tileSpans.map(function(spans, i) {
-      return {
-        spans,
-        position: reserveSpace(spans, i)
-      };
+    positions: tiles.map(function(tile, i) {
+      return reserveSpace(tile, i);
     }),
     rowCount: curRow + Math.max(...spaceTracker)
   };
 
-  function reserveSpace(spans, i) {
-    if (spans.col > colCount) {
-      throw new Error(`md-grid-list: Tile at position ${i} has a colspan (${spans.col}) that exceeds the column count (${colCount})`);
+  function reserveSpace(tile, i) {
+    let colspan = tile.get('currentColspan');
+    let rowspan = tile.get('currentRowspan');
+    if (colspan > colCount) {
+      throw new Error(`md-grid-list: Tile at position ${i} has a colspan (${colspan}) that exceeds the column count (${colCount})`);
     }
 
     let start = 0;
@@ -61,7 +52,7 @@ function calculateGridfor(colCount, tileSpans) {
     // this, recognize that you've iterated across an entire row looking for
     // space, and if so fast-forward by the minimum rowSpan count. Repeat
     // until the required space opens up.
-    while (end - start < spans.col) {
+    while (end - start < colspan) {
       if (curCol >= colCount) {
         nextRow();
         continue;
@@ -77,8 +68,8 @@ function calculateGridfor(colCount, tileSpans) {
       curCol = end + 1;
     }
 
-    adjustRow(start, spans.col, spans.row);
-    curCol = start + spans.col;
+    adjustRow(start, colspan, rowspan);
+    curCol = start + colspan;
 
     return {
       col: start,