refactor(addon/components/paper-grid-list): refactors to use notifier…

… pattern when children need to update.

addon/components/paper-grid-list.hbs

@@ -1,5 +1,8 @@
-<md-grid-list class={{@class}} {{did-insert this.didInsertNode}} {{did-update this.didUpdateNode @cols @gutter @rowHeight}} ...attributes>
-  {{yield (hash
-    tile=(component "paper-grid-tile" parent=this)
-  )}}
+<md-grid-list
+  class={{@class}}
+  {{did-insert this.didInsertNode}}
+  {{did-update this.didUpdateNode @cols @gutter @rowHeight}}
+  ...attributes
+>
+  {{yield (hash tile=(component 'paper-grid-tile' parent=this))}}
 </md-grid-list>

addon/components/paper-grid-list.js

@@ -55,6 +55,11 @@ export default class PaperGridList extends Component {
    * @type {Set<PaperGridTile>}
    */
   @tracked children;
+  /**
+   * Set of callbacks to notify children when they need to update their position.
+   * @type {Set<callback>}
+   */
+  @tracked childrenNotifyUpdate;
   /**
    * Reference to the component's DOM element
    * @type {HTMLElement}
@@ -90,6 +95,7 @@ export default class PaperGridList extends Component {
     super(...arguments);
 
     this.children = new Set();
+    this.childrenNotifyUpdate = new Set();
   }
 
   @action didInsertNode(element) {
@@ -109,18 +115,22 @@ export default class PaperGridList extends Component {
   /**
    * Registers a child tile component
    * @param {PaperGridTile} tile - The tile component to register
+   * @param {callback} notifyUpdate - A callback to notify children on when they should update.
    */
-  @action registerChild(tile) {
+  @action registerChild(tile, notifyUpdate) {
     this.children.add(tile);
+    this.childrenNotifyUpdate.add(notifyUpdate);
     this.updateGrid();
   }
 
   /**
    * Unregisters a child tile component
    * @param {PaperGridTile} tile - The tile component to unregister
+   * @param {callback} notifyUpdate - The notify callback to remove.
    */
-  @action unregisterChild(tile) {
+  @action unregisterChild(tile, notifyUpdate) {
     this.children.delete(tile);
+    this.childrenNotifyUpdate.delete(notifyUpdate);
     this.updateGrid();
   }
 
@@ -167,7 +177,7 @@ export default class PaperGridList extends Component {
     // Debounce until the next frame
     const updateGrid = () => {
       applyStyles(this.element, this._gridStyle());
-      this.children.forEach((tile) => tile.updateTile());
+      this.childrenNotifyUpdate.forEach((notify) => notify());
       if (this.args.onUpdate) {
         this.args.onUpdate();
       }

addon/components/paper-grid-tile.hbs

@@ -1,7 +1,10 @@
-<md-grid-tile class={{@class}} {{did-insert this.didInsertNode}} {{did-update this.didUpdateNode @colspan @rowspan}} ...attributes>
+<md-grid-tile
+  class={{@class}}
+  {{did-insert this.didInsertNode}}
+  {{did-update this.didUpdateNode @colspan @rowspan}}
+  ...attributes
+>
   <figure>
-    {{yield (hash
-      footer=(component "paper-grid-tile-footer")
-    )}}
+    {{yield (hash footer=(component 'paper-grid-tile-footer'))}}
   </figure>
 </md-grid-tile>

addon/components/paper-grid-tile.js

@@ -84,7 +84,7 @@ export default class PaperGridTile extends Component {
   @action didInsertNode(element) {
     this.element = element;
 
-    this.args.parent.registerChild(this);
+    this.args.parent.registerChild(this, this.updateTile);
   }
 
   @action didUpdateNode() {
@@ -94,7 +94,7 @@ export default class PaperGridTile extends Component {
   willDestroy() {
     super.willDestroy(...arguments);
 
-    this.args.parent.unregisterChild(this);
+    this.args.parent.unregisterChild(this, this.updateTile);
   }
 
   /**