Demo the isObserving functionality

Author: chriskrycho

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>