Merge pull request #248 from DockYard/sn/bug-once

[BUG]: Unable to use multiple {{in-viewport}} modifiers

README.md

@@ -62,7 +62,7 @@ export default class MyClass extends Component {
   @service inViewport
 
   @action
-  didInsertNode() {
+  setupInViewport() {
     const loader = document.getElementById('loader');
     const viewportTolerance = { bottom: 200 };
     const { onEnter, _onExit } = this.inViewport.watchElement(loader, { viewportTolerance });
@@ -312,7 +312,7 @@ import InViewportMixin from 'ember-in-viewport';
 
 export default class Infinity extends Component.extend(InViewportMixin) {
   @action
-  didInsertNode(element) {
+  setupInViewport(element) {
     set(this, 'viewportSpy', true);
     set(this, 'viewportTolerance', {
       bottom: 300
@@ -329,7 +329,7 @@ export default class Infinity extends Component.extend(InViewportMixin) {
 ```
 
 ```hbs
-<div {{did-insert this.didInsertNode}}>
+<div {{did-insert this.setupInViewport}}>
   {{yield}}
 </div>
 ```
@@ -347,7 +347,7 @@ export default class MyClass extends Component {
   @service inViewport
 
   @action
-  didInsertNode() {
+  setupInViewport() {
     const loader = document.getElementById('loader');
     const viewportTolerance = { bottom: 200 };
     const { onEnter, _onExit } = this.inViewport.watchElement(loader, { viewportTolerance });
@@ -380,7 +380,7 @@ export default class MyClass extends Component {
   @service inViewport
 
   @action
-  didInsertNode(element) {
+  setupInViewport(element) {
     const viewportTolerance = { bottom: 200 };
     const { onEnter, onExit } = this.inViewport.watchElement(element, { viewportTolerance });
     onEnter(this.didEnterViewport.bind(instance));
@@ -401,7 +401,7 @@ export default class MyClass extends Component {
 ```
 
 ```hbs
-<div {{did-insert this.didInsertNode}}>
+<div {{did-insert this.setupInViewport}}>
   {{yield}}
 </div>
 ```

addon/services/in-viewport.js

@@ -3,7 +3,7 @@ import { set, setProperties } from '@ember/object';
 import { assign } from '@ember/polyfills';
 import { getOwner } from '@ember/application';
 import { warn } from '@ember/debug';
-import { scheduleOnce } from '@ember/runloop';
+import { schedule } from '@ember/runloop';
 import isInViewport from 'ember-in-viewport/utils/is-in-viewport';
 import canUseRAF from 'ember-in-viewport/utils/can-use-raf';
 import canUseIntersectionObserver from 'ember-in-viewport/utils/can-use-intersection-observer';
@@ -63,12 +63,12 @@ export default class InViewport extends Service {
       }
       const observerOptions = this.buildObserverOptions(configOptions);
 
-      scheduleOnce('afterRender', this, this.setupIntersectionObserver, element, observerOptions, enterCallback, exitCallback);
+      schedule('afterRender', this, this.setupIntersectionObserver, element, observerOptions, enterCallback, exitCallback);
     } else {
       if (!this.rafAdmin) {
         this.startRAF();
       }
-      scheduleOnce('afterRender', this, this._startRaf, element, configOptions, enterCallback, exitCallback);
+      schedule('afterRender', this, this._startRaf, element, configOptions, enterCallback, exitCallback);
     }
 
     return {
@@ -105,7 +105,7 @@ export default class InViewport extends Service {
 
   /**
    * In order to track elements and the state that comes with them, we need to keep track
-   * of them in order to get at them at a later time
+   * of elements in order to get at them at a later time, specifically to unobserve
    *
    * @method addToRegistry
    * @void

tests/acceptance/infinity-test.js

@@ -39,6 +39,7 @@ module('Acceptance | infinity-scrollable', function(hooks) {
     await settled();
 
     assert.equal(findAll('.infinity-item').length, 20, 'after infinity has more items');
+    assert.equal(find('h1').textContent.trim(), '{{in-viewport}} modifier', 'has title');
   });
 
   test('works with in-viewport modifier (rAF)', async function(assert) {

tests/dummy/app/components/dummy-artwork.js

@@ -421,7 +421,7 @@ export default class DummyArtwork extends Component {
         this.guid = guidFor(this);
     }
 
-    didInsertNode(element, [instance]) {
+    setupInViewport(element, [instance]) {
         if (instance.lazyLoad) {
             // find distance of top left corner of artwork to bottom of screen. Shave off 50px so user has to scroll slightly to trigger load
             window.requestAnimationFrame(() => {

tests/dummy/app/components/my-modifier.js

@@ -7,7 +7,7 @@ export default Component.extend(InViewportMixin, {
 
   // if you do have a tagName ^^, then you can use `didInsertElement` or no-op it
   // didInsertElement() {},
-  didInsertNode(element, [instance]) {
+  setupInViewport(element, [instance]) {
     instance.watchElement(element);
   },
 

tests/dummy/app/controllers/infinity-built-in-modifiers.js

@@ -24,6 +24,11 @@ export default class BuiltIn extends Controller {
     });
   }
 
+  @action
+  setTitle(element) {
+    element.textContent = '{{in-viewport}} modifier';
+  }
+
   @action
   didEnterViewport(/*artwork, i, element*/) {
     const arr = Array.apply(null, Array(10));

tests/dummy/app/templates/components/dummy-artwork.hbs

@@ -1,5 +1,5 @@
 <div
-  {{did-insert this.didInsertNode this}}
+  {{did-insert this.setupInViewport this}}
   class={{concat "dummy-artwork " this.artworkClasses}}
   id={{this.guid}}
   data-aspect-ratio={{this.aspectRatio}}

tests/dummy/app/templates/components/my-modifier.hbs

@@ -1,3 +1,3 @@
-<div {{did-insert this.didInsertNode this}}>
+<div {{did-insert this.setupInViewport this}}>
   {{yield}}
 </div>

tests/dummy/app/templates/infinity-built-in-modifiers.hbs

@@ -4,6 +4,7 @@
   {{link-to "enter" (query-params direction="enter")}}
   {{link-to "exit" (query-params direction="exit")}}
 </nav>
+<h1 {{in-viewport onEnter=(action "setTitle") viewportTolerance=this.other}}></h1>
 {{#if (eq this.direction "both")}}
   <ul class="infinity-container">
     {{#each this.models as |artwork i|}}