Update grid list

addon/components/paper-grid-list.js

@@ -2,9 +2,11 @@
  * @module ember-paper
  */
 import Ember from 'ember';
+import layout from '../templates/components/paper-grid-list';
+import { ParentMixin } from 'ember-composability-tools';
 import gridLayout from '../utils/grid-layout';
 
-const { Component, inject, computed, A, run, get, isEqual } = Ember;
+const { Component, inject, computed, run, get, isEqual } = Ember;
 
 const unitCSS = (units) => {
   return `${units.share}% - (${units.gutter} * ${units.gutterShare})`;
@@ -26,17 +28,16 @@ const media = (mediaName) => {
  * @class PaperGridList
  * @extends Ember.Component
  */
-export default Component.extend({
+export default Component.extend(ParentMixin, {
+  layout,
   tagName: 'md-grid-list',
 
   constants: inject.service(),
 
   layoutInvalidated: false,
   tilesInvalidated: false,
   lastLayoutProps: {},
-  tiles: computed(function() {
-    return A();
-  }),
+  tiles: computed.alias('childComponents'),
 
   _invalidateLayoutListener: computed(function() {
     return run.bind(this, () => {
@@ -47,7 +48,7 @@ export default Component.extend({
   didInsertElement() {
     this._super(...arguments);
     this._watchMedia();
-    this._watchResponsiveAttributes(['md-cols', 'md-row-height', 'md-gutter'], run.bind(this, this.layoutIfMediaMatch));
+    this._watchResponsiveAttributes(['cols', 'rowHeight', 'gutter'], run.bind(this, this.layoutIfMediaMatch));
 
   },
 
@@ -56,10 +57,6 @@ export default Component.extend({
     this._unwatchMedia();
   },
 
-  registerGridTile(gridTile) {
-    this.get('tiles').addObject(gridTile);
-  },
-
   doLayout() {
     if (this.isDestroyed) {
       return;
@@ -192,7 +189,7 @@ export default Component.extend({
         // Base veritcal size of a row.
         vUnit = unitCSS({ share: vShare, gutterShare: hGutterShare, gutter });
 
-        // padidngTop and marginTop are used to maintain the given aspect ratio, as
+        // 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 });
@@ -251,26 +248,26 @@ export default Component.extend({
   _getTileSpans(tileElements) {
     return [].map.call(tileElements, (ele) => {
       return {
-        row: parseInt(this._getResponsiveAttribute(ele, 'md-rowspan'), 10) || 1,
-        col: parseInt(this._getResponsiveAttribute(ele, 'md-colspan'), 10) || 1
+        row: parseInt(this._getResponsiveAttribute(ele, 'rowspan'), 10) || 1,
+        col: parseInt(this._getResponsiveAttribute(ele, 'colspan'), 10) || 1
       };
     });
   },
 
   _getColumnCount() {
-    let colCount = parseInt(this._getResponsiveAttribute(this, 'md-cols'), 10);
+    let colCount = parseInt(this._getResponsiveAttribute(this, 'cols'), 10);
     if (isNaN(colCount)) {
-      throw 'md-grid-list: md-cols attribute was not found, or contained a non-numeric value';
+      throw 'md-grid-list: cols attribute was not found, or contained a non-numeric value';
     }
     return colCount;
   },
 
   _getGutter() {
-    return this._applyDefaultUnit(this._getResponsiveAttribute(this, 'md-gutter') || 1);
+    return this._applyDefaultUnit(this._getResponsiveAttribute(this, 'gutter') || 1);
   },
 
   _getRowHeight() {
-    let rowHeight = this._getResponsiveAttribute(this, 'md-row-height');
+    let rowHeight = this._getResponsiveAttribute(this, 'rowHeight');
     switch (this._getRowMode()) {
       case 'fixed': {
         return this._applyDefaultUnit(rowHeight);
@@ -286,7 +283,7 @@ export default Component.extend({
   },
 
   _getRowMode() {
-    let rowHeight = this._getResponsiveAttribute(this, 'md-row-height');
+    let rowHeight = this._getResponsiveAttribute(this, 'rowHeight');
     if (rowHeight === 'fit') {
       return 'fit';
     } else if (rowHeight.indexOf(':') !== -1) {

addon/components/paper-grid-tile.js

@@ -3,15 +3,15 @@
  */
 import Ember from 'ember';
 import layout from '../templates/components/paper-grid-tile';
-import PaperGridList from './paper-grid-list';
+import { ChildMixin } from 'ember-composability-tools';
 
 const { Component, computed, inject, get } = Ember;
 
 /**
  * @class PaperGridTile
  * @extends Ember.Component
  */
-export default Component.extend({
+export default Component.extend(ChildMixin, {
   layout,
   tagName: 'md-grid-tile',
 
@@ -20,10 +20,9 @@ export default Component.extend({
   didInsertElement() {
     this._super(...arguments);
 
-    this.get('gridList').registerGridTile(this);
     this.get('gridList').send('invalidateTiles');
 
-    this._watchResponsiveAttributes(['md-colspan', 'md-rowspan'], (mediaName) => {
+    this._watchResponsiveAttributes(['colspan', 'rowspan'], (mediaName) => {
       this.get('gridList').send('invalidateLayout', mediaName);
     });
   },
@@ -34,9 +33,7 @@ export default Component.extend({
     this.get('gridList').send('invalidateLayout');
   },
 
-  gridList: computed(function() {
-    return this.nearestOfType(PaperGridList);
-  }),
+  gridList: computed.alias('parentComponent'),
 
   _watchResponsiveAttributes(attrNames, watchFn) {
 

addon/templates/components/paper-grid-list.hbs

@@ -0,0 +1,3 @@
+{{yield (hash
+  tile=(component 'paper-grid-tile')
+)}}

addon/templates/components/paper-grid-tile.hbs

@@ -1,3 +1,5 @@
 <figure>
-  {{yield}}
+  {{yield (hash
+    footer=(component 'paper-grid-tile-footer')
+  )}}
 </figure>

tests/dummy/app/templates/application.hbs

@@ -24,7 +24,7 @@
             {{#submenu-item active=(is-active "demo.chips" currentRouteName) onClick=(transition-to "demo.chips")}}Chips{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.dialog" currentRouteName) onClick=(transition-to "demo.dialog")}}Dialog{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.divider" currentRouteName) onClick=(transition-to "demo.divider")}}Divider{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.grid-list" currentRouteName) onClick=(transition-to "demo.grid-list")}}Grid List {{paper-icon "warning" title="Not updated yet."}}{{/submenu-item}}
+            {{#submenu-item active=(is-active "demo.grid-list" currentRouteName) onClick=(transition-to "demo.grid-list")}}Grid List{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.icons" currentRouteName) onClick=(transition-to "demo.icons")}}Icons{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.input" currentRouteName) onClick=(transition-to "demo.input")}}Input{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.list" currentRouteName) onClick=(transition-to "demo.list")}}List{{/submenu-item}}

tests/dummy/app/templates/demo/grid-list.hbs

@@ -1,49 +1,50 @@
-{{page-toolbar pageTitle="Grid List" isDemo=true isWIP=true}}
+{{page-toolbar pageTitle="Grid List" isDemo=true}}
 
 {{#doc-content}}
   <h2>Basic Usage</h2>
   {{! BEGIN-SNIPPET grid-list.basic-usage }}
   {{#paper-content class="md-whiteframe-z1 grid-list-demo1"}}
 
-    {{#paper-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="2:2"
-    md-gutter="12px" md-gutter-gt-sm="8px"}}
-
-      {{#paper-grid-tile class="gray" md-rowspan="3" md-colspan="2" md-colspan-sm="1"}}
-        {{#paper-grid-tile-footer}}
-            <h3>#1: (3r x 2c)</h3>
-        {{/paper-grid-tile-footer}}
-      {{/paper-grid-tile}}
-
-      {{#paper-grid-tile class="green"}}
-        {{#paper-grid-tile-footer}}
-            <h3>#2: (1r x 1c)</h3>
-        {{/paper-grid-tile-footer}}
-      {{/paper-grid-tile}}
-
-      {{#paper-grid-tile class="yellow"}}
-        {{#paper-grid-tile-footer}}
-            <h3>#3: (1r x 1c)</h3>
-        {{/paper-grid-tile-footer}}
-      {{/paper-grid-tile}}
-
-      {{#paper-grid-tile class="blue" md-rowspan="2"}}
-        {{#paper-grid-tile-footer}}
+    {{#paper-grid-list
+      cols-sm="1" cols-md="2" cols-gt-md="6"
+      rowHeight-gt-md="1:1" rowHeight="2:2"
+      gutter="12px" gutter-gt-sm="8px" as |grid|}}
+
+      {{#grid.tile class="gray" rowspan="3" colspan="2" colspan-sm="1" as |tile|}}
+        {{#tile.footer}}
+          <h3>#1: (3r x 2c)</h3>
+        {{/tile.footer}}
+      {{/grid.tile}}
+
+      {{#grid.tile class="green" as |tile|}}
+        {{#tile.footer}}
+          <h3>#2: (1r x 1c)</h3>
+        {{/tile.footer}}
+      {{/grid.tile}}
+
+      {{#grid.tile class="yellow" as |tile|}}
+        {{#tile.footer}}
+          <h3>#3: (1r x 1c)</h3>
+        {{/tile.footer}}
+      {{/grid.tile}}
+
+      {{#grid.tile class="blue" rowspan="2" as |tile|}}
+        {{#tile.footer}}
             <h3>#4: (2r x 1c)</h3>
-        {{/paper-grid-tile-footer}}
-      {{/paper-grid-tile}}
+        {{/tile.footer}}
+      {{/grid.tile}}
 
-      {{#paper-grid-tile class="red" md-rowspan="2" md-colspan="2" md-colspan-sm="1"}}
-        {{#paper-grid-tile-footer}}
-            <h3>#5: (2r x 2c)</h3>
-        {{/paper-grid-tile-footer}}
-      {{/paper-grid-tile}}
+      {{#grid.tile class="red" rowspan="2" colspan="2" colspan-sm="1" as |tile|}}
+        {{#tile.footer}}
+          <h3>#5: (2r x 2c)</h3>
+        {{/tile.footer}}
+      {{/grid.tile}}
 
-      {{#paper-grid-tile class="green" md-rowspan="2"}}
-        {{#paper-grid-tile-footer}}
-            <h3>#6: (2r x 1c)</h3>
-        {{/paper-grid-tile-footer}}
-      {{/paper-grid-tile}}
+      {{#grid.tile class="green" rowspan="2" as |tile|}}
+        {{#tile.footer}}
+          <h3>#6: (2r x 1c)</h3>
+        {{/tile.footer}}
+      {{/grid.tile}}
 
     {{/paper-grid-list}}
 
@@ -56,17 +57,18 @@
   <h2>Dynamic Tiles</h2>
   {{! BEGIN-SNIPPET grid-list.dynamic-tiles }}
   {{#paper-content class="md-whiteframe-z1 grid-list-demo-dynamicTiles"}}
-    {{#paper-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"}}
+    {{#paper-grid-list
+      cols-sm="1" cols-md="2" cols-gt-md="6"
+      rowHeight-gt-md="1:1" rowHeight="4:3"
+      mdGutter="8px" gutter-gt-sm="4px" as |grid|}}
 
-      {{#each tiles as |tile|}}
-        {{#paper-grid-tile md-rowspan=tile.span.row md-colspan=tile.span.col md-colspan-sm="1" class=tile.background}}
+      {{#each tiles as |dynamicTile|}}
+        {{#grid.tile rowspan=dynamicTile.span.row colspan=dynamicTile.span.col colspan-sm="1" class=dynamicTile.background as |tile|}}
           <md-icon></md-icon>
-          {{#paper-grid-tile-footer}}
-              <h3>{{tile.title}}</h3>
-          {{/paper-grid-tile-footer}}
-        {{/paper-grid-tile}}
+          {{#tile.footer}}
+            <h3>{{dynamicTile.title}}</h3>
+          {{/tile.footer}}
+        {{/grid.tile}}
       {{/each}}
 
     {{/paper-grid-list}}
@@ -80,14 +82,15 @@
   {{! BEGIN-SNIPPET grid-list.responsive }}
   {{#paper-content class="md-whiteframe-z1 grid-list-demo-responsiveTiles" layout-padding=''}}
 
-    {{#paper-grid-list md-cols-gt-md="12" md-cols-sm="3" md-cols-md="8"
-      md-row-height-gt-md="1:1" md-row-height="4:3"
-      md-gutter-gt-md="16px" md-gutter-gt-sm="8px" md-gutter="4px"}}
+    {{#paper-grid-list
+      cols-gt-md="12" cols-sm="3" cols-md="8"
+      rowHeight-gt-md="1:1" rowHeight="4:3"
+      gutter-gt-md="16px" gutter-gt-sm="8px" gutter="4px" as |grid|}}
 
       {{#each colorTiles as |tile|}}
 
-        {{#paper-grid-tile md-colspan-gt-sm=tile.colspan md-rowspan-gt-sm=tile.rowspan class=tile.style}}
-        {{/paper-grid-tile}}
+        {{#grid.tile colspan-gt-sm=tile.colspan rowspan-gt-sm=tile.rowspan class=tile.style}}
+        {{/grid.tile}}
 
       {{/each}}
     {{/paper-grid-list}}

tests/integration/components/paper-grid-list-test.js

@@ -0,0 +1,34 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('paper-grid-list', 'Integration | Component | paper grid list', {
+  integration: true
+});
+
+test('it renders tiles with tag name', function(assert) {
+  assert.expect(1);
+
+  this.render(hbs`
+    {{#paper-grid-list cols="1" rowHeight="4:3" as |grid|}}
+      {{#grid.tile}}
+      {{/grid.tile}}
+    {{/paper-grid-list}}
+  `);
+
+  assert.equal(this.$('md-grid-tile').length, 1);
+});
+
+test('it renders tiles with footer', function(assert) {
+  assert.expect(1);
+
+  this.render(hbs`
+    {{#paper-grid-list cols="1" rowHeight="4:3" as |grid|}}
+      {{#grid.tile as |tile|}}
+        {{#tile.footer}}
+        {{/tile.footer}}
+      {{/grid.tile}}
+    {{/paper-grid-list}}
+  `);
+
+  assert.equal(this.$('md-grid-tile-footer').length, 1);
+});