Bug: stop watching unless viewportSpy=true is passed to modifier

DockYard · Apr 12, 2021 · e1f67da · e1f67da
1 parent 183e5d0
commit e1f67da
Showing 4 changed files with 65 additions and 40 deletions.
diff --git a/addon/modifiers/in-viewport.js b/addon/modifiers/in-viewport.js
@@ -48,6 +48,10 @@ export default class InViewportModifier extends Modifier {
     if (this.args.named.onExit) {
       this.args.named.onExit.call(null, this.element);
     }
+
+    if (!this.options.viewportSpy) {
+      this.inViewport.stopWatching(this.element);
+    }
   }
 
   setupWatcher() {

diff --git a/tests/dummy/app/components/my-class.js b/tests/dummy/app/components/my-class.js
@@ -16,7 +16,9 @@ export default class MyClass extends Component {
     this.infinityLoad();
   }
 
-  willDestroyElement() {
+  willDestroy() {
+    super.willDestroy(...arguments);
+
     const loader = document.getElementById('loader');
     this.inViewport.stopWatching(loader);
   }

diff --git a/tests/dummy/app/controllers/infinity-built-in-modifiers.js b/tests/dummy/app/controllers/infinity-built-in-modifiers.js
@@ -29,6 +29,20 @@ export default class InfinityBuiltInModifiers extends Controller {
     element.textContent = '{{in-viewport}} modifier';
   }
 
+  @action
+  setTitleGreen() {
+    setTimeout(() => {
+      document.querySelector('h1#green-target').style = 'color: green';
+    }, 500);
+  }
+
+  @action
+  removeTitleGreen() {
+    setTimeout(() => {
+      document.querySelector('h1#green-target').style = '';
+    }, 500);
+  }
+
   @action
   didEnterViewport(/*artwork, i, element*/) {
     const arr = Array.apply(null, Array(10));

diff --git a/tests/dummy/app/templates/infinity-built-in-modifiers.hbs b/tests/dummy/app/templates/infinity-built-in-modifiers.hbs
@@ -4,42 +4,47 @@
   <LinkTo @route="infinity-built-in-modifiers" @query={{hash direction="enter"}}>enter</LinkTo>
   <LinkTo @route="infinity-built-in-modifiers" @query={{hash direction="exit"}}>exit</LinkTo>
 </nav>
-<h1 {{in-viewport onEnter=this.setTitle viewportTolerance=this.other}}></h1>
-{{#if (eq this.direction "both")}}
-  <ul class="infinity-container">
-    {{#each this.models as |artwork i|}}
-      <li
-        class="infinity-item infinity-item-{{i}}"
-      >
-        <DummyArtwork @artwork={{artwork}} @artworkProfile="dummy" />
-      </li>
-    {{/each}}
-    <div
-      class="sentinel"
-      {{in-viewport
-        onEnter=this.didEnterViewport
-        onExit=this.didExitViewport
-        viewportTolerance=this.viewportTolerance
-        scrollableArea=".infinity-container"
-      }}
-    ></div>
-  </ul>
-{{else if (eq this.direction "enter")}}
-  <ul>
-    {{#each this.models as |artwork|}}
-      <li>
-        <DummyArtwork @artwork={{artwork}} @artworkProfile="dummy" />
-      </li>
-    {{/each}}
-    <div class="sentinel" {{in-viewport onEnter=this.didEnterViewport}}></div>
-  </ul>
-{{else if (eq this.direction "exit")}}
-  <ul>
-    {{#each this.models as |artwork|}}
-      <li>
-        <DummyArtwork @artwork={{artwork}} @artworkProfile="dummy" />
-      </li>
-    {{/each}}
-    <div class="sentinel" {{in-viewport onExit=this.didExitViewport}}></div>
-  </ul>
-{{/if}}
+<div style="height: 2500px;">
+  <h1 id="green-target" {{in-viewport onEnter=this.setTitle viewportTolerance=this.other}}></h1>
+
+  {{#if (eq this.direction "both")}}
+    <ul class="infinity-container">
+      {{#each this.models as |artwork i|}}
+        <li
+          class="infinity-item infinity-item-{{i}}"
+        >
+          <DummyArtwork @artwork={{artwork}} @artworkProfile="dummy" />
+        </li>
+      {{/each}}
+      <div
+        class="sentinel"
+        {{in-viewport
+          onEnter=this.didEnterViewport
+          onExit=this.didExitViewport
+          viewportTolerance=this.viewportTolerance
+          scrollableArea=".infinity-container"
+        }}
+      ></div>
+    </ul>
+  {{else if (eq this.direction "enter")}}
+    <ul>
+      {{#each this.models as |artwork|}}
+        <li>
+          <DummyArtwork @artwork={{artwork}} @artworkProfile="dummy" />
+        </li>
+      {{/each}}
+      <div class="sentinel" {{in-viewport onEnter=this.didEnterViewport}}></div>
+    </ul>
+  {{else if (eq this.direction "exit")}}
+    <ul>
+      {{#each this.models as |artwork|}}
+        <li>
+          <DummyArtwork @artwork={{artwork}} @artworkProfile="dummy" />
+        </li>
+      {{/each}}
+      <div class="sentinel" {{in-viewport onExit=this.didExitViewport}}></div>
+    </ul>
+  {{/if}}
+
+  <div {{in-viewport onEnter=this.setTitleGreen onExit=this.removeTitleGreen viewportSpy=true}}></div>
+</div>