Allow programmatic control of observation

Add a named new argument, `isObserving`, with a default value of
`true`, which users can pass to explicitly opt into or out of observing
an element at a given time. This allows for a declarative invocation of
the modifier itself based on tracked state, rather than having to handle
it in the callback(s) passed to the modifier.

Users can work around this today by only passing the `onEnter` or
`onExit` callbacks conditionally:

    <div
      {{did-intersect
        onEnter=(if this.shouldDoSomething this.doSomething no-op)
        onExist=(if this.shouldDoSomething this.doSomethingElse no-op)
      }}
    >

However, as this example shows, this is repetive (and potentially
error- prone). The new functionality allows a less error-prone, less
repetitive, more expressive approach:

    <div
      {{did-intersect
      	isObserving=this.shouldDoSomething
        onEnter=this.doSomething
        onExit=this.doSomethingElse
      }}
    >

Resolves #396

Author: chriskrycho

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/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');
+    });
+  });
 });