Merge pull request #397 from chriskrycho/programmatic-observation

Allow programmatic control of observation

Author: elwayman02

addon/modifiers/did-intersect.js

@@ -77,7 +77,14 @@ export default class DidIntersectModifier extends Modifier {
       return;
     }
 
-    let { onEnter, onExit, maxEnter, maxExit, options } = this.args.named;
+    let {
+      onEnter,
+      onExit,
+      maxEnter,
+      maxExit,
+      options,
+      isObserving = true,
+    } = this.args.named;
 
     assert('onEnter or/and onExit is required', onEnter || onExit);
 
@@ -161,7 +168,11 @@ export default class DidIntersectModifier extends Modifier {
       this._options = options;
     }
 
-    this.observe();
+    if (isObserving) {
+      this.observe();
+    } else {
+      this.unobserve();
+    }
   }
 
   // Move to willDestroy when we want to drop support for versions below ember-modifier 2.x

tests/dummy/app/controllers/index.js

@@ -11,6 +11,12 @@ export default class IndexController extends Controller {
 
   maxIntersections = 5;
 
+  @tracked
+  isObserving = true;
+
+  @tracked
+  numIntersectionsWithIsObserving = 0;
+
   @tracked
   shouldScrollIntoView = false;
 
@@ -24,6 +30,16 @@ export default class IndexController extends Controller {
     this.numIntersectionsWithMaxEnter++;
   }
 
+  @action
+  toggleIsObserving() {
+    this.isObserving = !this.isObserving;
+  }
+
+  @action
+  onEnteringWithIsObserving() {
+    this.numIntersectionsWithIsObserving++;
+  }
+
   @action
   onScrollIntoViewTrigger() {
     this.shouldScrollIntoView = true;

tests/dummy/app/styles/app.scss

@@ -9,17 +9,17 @@
   }
 }
 
+.action-button {
+  border-radius: 4px;
+  padding: 0.5em;
+  background-color: orangered;
+  color: white;
+}
+
 .scroll-into-view {
   border: 1px dotted black;
   padding: 50px 16px;
   text-align: center;
-
-  button {
-    border-radius: 4px;
-    padding: .5em;
-    background-color: orangered;
-    color: white;
-  }
 }
 
 // prevent copy button from overlapping code

tests/dummy/app/templates/index.hbs

@@ -24,12 +24,31 @@
     </demo.example>
     {{demo.snippet "did-intersect-with-max-enter.hbs" label="example with max enter.hbs"}}
 
+    <demo.example @name="did-intersect-with-is-observing.hbs">
+      <div
+        class="intersection-box"
+        {{did-intersect
+          isObserving=this.isObserving
+          onEnter=this.onEnteringWithIsObserving
+        }}
+      >
+        <p>Number of times this box has intersected the screen: {{this.numIntersectionsWithIsObserving}}</p>
+
+        <p>isObserving: {{this.isObserving}}</p>
+
+        <button type='button' class="action-button" {{on "click" this.toggleIsObserving}}>
+          {{if this.isObserving "Stop" "Start"}} observing
+        </button>
+      </div>
+    </demo.example>
+    {{demo.snippet "did-intersect-with-is-observing.hbs" label="example with isObserving.hbs"}}
+
     <demo.example @name="scroll-into-view.hbs">
       <div
         class="scroll-into-view"
         {{scroll-into-view shouldScroll=this.shouldScrollIntoView}}
       >
-        <button type="button" class="scroll-into-view__button" {{on "click" this.onScrollIntoViewTrigger}}>
+        <button type="button" class="action-button" {{on "click" this.onScrollIntoViewTrigger}}>
           Trigger Scroll-into-view on click
         </button>
       </div>

tests/integration/modifiers/did-intersect-test.js

@@ -16,13 +16,21 @@ module('Integration | Modifier | did-intersect', function (hooks) {
         this._admin = {};
       }
 
-      observe = sinon.stub();
-      unobserve = sinon.stub();
+      observe = sinon.stub().callsFake(() => {
+        this.isObserving = true;
+      });
+      unobserve = sinon.stub().callsFake(() => {
+        this.isObserving = false;
+      });
       addEnterCallback = sinon.stub().callsFake((element, callback) => {
-        this.onEnterCallback = sinon.spy(callback);
+        this.onEnterCallback = sinon.spy(() => {
+          if (this.isObserving) callback();
+        });
       });
       addExitCallback = sinon.stub().callsFake((element, callback) => {
-        this.onExitCallback = sinon.spy(callback);
+        this.onExitCallback = sinon.spy(() => {
+          if (this.isObserving) callback();
+        });
       });
     }
 
@@ -344,4 +352,46 @@ module('Integration | Modifier | did-intersect', function (hooks) {
 
     assert.equal(this.newExitStub.callCount, 1, 'new exit callback is called');
   });
+
+  module('modifier accepts `isObserving` argument', function () {
+    test('with a truth(y) value', async function (assert) {
+      assert.expect(2);
+
+      await render(hbs`
+        <div
+          {{did-intersect
+            isObserving=true
+            onEnter=this.enterStub
+            onExit=this.exitStub
+          }}
+        ></div>
+      `);
+
+      this.observerManagerMock.onEnterCallback();
+      this.observerManagerMock.onExitCallback();
+
+      assert.ok(this.enterStub.calledOnce, 'the enter callback is invoked');
+      assert.ok(this.exitStub.calledOnce, 'the onExit callback is invoked');
+    });
+
+    test('with a false(y) value', async function (assert) {
+      assert.expect(2);
+
+      await render(hbs`
+        <div
+          {{did-intersect
+            isObserving=false
+            onEnter=this.enterStub
+            onExit=this.exitStub
+          }}
+        ></div>
+      `);
+
+      this.observerManagerMock.onEnterCallback();
+      this.observerManagerMock.onExitCallback();
+
+      assert.ok(this.enterStub.notCalled, 'the enter callback is not invoked');
+      assert.ok(this.exitStub.notCalled, 'the onExit callback is not invoked');
+    });
+  });
 });