Improve docs (#130)

README.md

@@ -145,6 +145,8 @@ export default Ember.Component.extend(InViewportMixin, {
 
   When `true`, the Mixin will continually watch the `Component` and re-fire hooks whenever it enters or leaves the viewport. Because this is expensive, this behaviour is opt-in. When false, the Mixin will only watch the `Component` until it enters the viewport once, and then it sets `viewportEntered` to `true` (permanently), and unbinds listeners. This reduces the load on the Ember run loop and your application.
 
+  NOTE: If using IntersectionObserver (default), viewportSpy should always be set to true.  However, browsers (Safari) that don't currently support IntersectionObserver, this addon will use rAF which, depending on your use case, the default of `false` may be acceptable.
+
 - `viewportScrollSensitivity: number`
 
   Default: `1`
@@ -163,7 +165,12 @@ export default Ember.Component.extend(InViewportMixin, {
 
   Default: `{ top: 0, left: 0, bottom: 0, right: 0 }`
 
-  This option determines how accurately the `Component` needs to be within the viewport for it to be considered as entered.
+  This option determines how accurately the `Component` needs to be within the viewport for it to be considered as entered.  Add bottom margin to preemptively trigger didEnterViewport.
+
+  For IntersectionObserver, this property interpolates to [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin).
+  For rAF, this property will use `bottom` tolerance and measure against the height of the container to determine when to trigger didEnterViewport.
+
+  Also, if your sentinel (component that uses this mixin) is a zero-height element, ensure that the sentinel actually is able to enter the viewport.
 
 ### Global options
 
@@ -193,11 +200,51 @@ module.exports = function(environment) {
   };
 };
 ```
-
-## Installation
-
-* `git clone` this repository
-* `npm install`
+## [**IntersectionObserver**'s Browser Support](https://platform-status.mozilla.org/)
+
+### Out of the box
+
+<table>
+    <tr>
+        <td>Chrome</td>
+        <td>51 <sup>[1]</sup></td>
+    </tr>
+    <tr>
+        <td>Firefox (Gecko)</td>
+        <td>55 <sup>[2]</sup></td>
+    </tr>
+    <tr>
+        <td>MS Edge</td>
+        <td>15</td>
+    </tr>
+    <tr>
+        <td>Internet Explorer</td>
+        <td>Not supported</td>
+    </tr>
+    <tr>
+        <td>Opera <sup>[1]</sup></td>
+        <td>38</td>
+    </tr>
+    <tr>
+        <td>Safari</td>
+        <td>Safari Technology Preview</td>
+    </tr>
+    <tr>
+        <td>Chrome for Android</td>
+        <td>59</td>
+    </tr>
+    <tr>
+        <td>Android Browser</td>
+        <td>56</td>
+    </tr>
+    <tr>
+        <td>Opera Mobile</td>
+        <td>37</td>
+    </tr>
+</table>
+
+* [1] [Reportedly available](https://www.chromestatus.com/features/5695342691483648), it didn't trigger the events on initial load and lacks `isIntersecting` until later versions.
+* [2] This feature was implemented in Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) behind the preference `dom.IntersectionObserver.enabled`.
 
 ## Running
 

addon/mixins/in-viewport.js

@@ -55,9 +55,6 @@ export default Mixin.create({
   willDestroyElement() {
     this._super(...arguments);
     this._unbindListeners();
-    if (this.intersectionObserver) {
-      this.intersectionObserver.unobserve(this.element);
-    }
   },
 
   _buildOptions(defaultOptions = {}) {
@@ -235,11 +232,13 @@ export default Mixin.create({
     const context = get(this, 'scrollableArea') || window;
     const elem = findElem(context);
 
-    elem.removeEventListener('scroll', () => {
-      this._debouncedEventHandler('_triggerDidScrollDirection', elem, get(this, 'viewportScrollSensitivity'));
-    });
-    delete lastPosition[elementId];
-    delete lastDirection[elementId];
+    if (elem) {
+      elem.removeEventListener('scroll', () => {
+        this._debouncedEventHandler('_triggerDidScrollDirection', elem, get(this, 'viewportScrollSensitivity'));
+      });
+      delete lastPosition[elementId];
+      delete lastDirection[elementId];
+    }
   },
 
   _bindListeners(context = null, event = null) {
@@ -254,13 +253,19 @@ export default Mixin.create({
   },
 
   _unbindListeners() {
-    const elementId = get(this, 'elementId');
+    if (this.intersectionObserver) {
+      this.intersectionObserver.unobserve(this.element);
+      return;
+    }
 
     if (get(this, 'viewportUseRAF')) {
+      const elementId = get(this, 'elementId');
+
       next(this, () => {
         window.cancelAnimationFrame(rAFIDS[elementId]);
         delete rAFIDS[elementId];
       });
+      return;
     }
 
     get(this, 'viewportListeners').forEach((listener) => {

tests/acceptance/integration-test.js

@@ -2,7 +2,7 @@ import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import { find, visit, waitFor } from '@ember/test-helpers';
 
-module('Acceptance | integration', function(hooks) {
+module('Acceptance | Intersection Observer', function(hooks) {
   setupApplicationTest(hooks);
 
   hooks.beforeEach(function() {

tests/dummy/app/controllers/infinity-scrollable-raf.js

@@ -1,4 +1,10 @@
 import ScrollableController from './infinity-scrollable';
 
 export default ScrollableController.extend({
+  init() {
+    this._super(...arguments);
+    this.viewportToleranceOverride = {
+      bottom: 200
+    }
+  },
 });

tests/dummy/app/controllers/infinity.js

@@ -7,6 +7,12 @@ const models = [...Array(10).fill().map(() => `https://s3.amazonaws.com/uifaces/
 
 export default Controller.extend({
   models,
+  init() {
+    this._super(...arguments);
+    this.viewportToleranceOverride = {
+      bottom: 300
+    }
+  },
 
   actions: {
     infinityLoad() {

tests/dummy/app/styles/app.css

@@ -1,3 +1,8 @@
+// BASE
+a.active {
+  color: magenta;
+}
+
 .my-component {
   display: inline-block;
   width: 300px;
@@ -29,3 +34,6 @@
   height: 500px;
   overflow: scroll;
 }
+.infinity-component, .infinity-scrollable {
+  height: 10px;
+}

tests/dummy/app/templates/application.hbs

@@ -1,3 +1,9 @@
-<h2 id="title">Welcome to Ember</h2>
+<h2 id="title">ember-in-viewport</h2>
+
+<ul>
+  <li>{{link-to "Infinity IntersectionObserver" "infinity"}}</li>
+  <li>{{link-to "Infinity Scrollable IntersectionObserver" "infinity-scrollable"}}</li>
+  <li>{{link-to "Infinity Scrollable rAF" "infinity-scrollable-raf"}}</li>
+</ul>
 
 {{outlet}}

tests/dummy/app/templates/index.hbs

@@ -1,17 +1,20 @@
 <div>
-  {{#my-component class="top start-enabled"}}
+  {{#my-component
+    viewportSpyOverride=true
+    class="top start-enabled"}}
     <p>Starts enabled</p>
   {{/my-component}}
 
-  {{#my-component class="top start-disabled"
+  {{#my-component
+    class="top start-disabled"
     viewportEnabledOverride=false
   }}
     <p>Starts disabled</p>
   {{/my-component}}
 </div>
 
 <div class="hide-me">
-  {{#my-component 
+  {{#my-component
     viewportSpyOverride=true
     viewportIntersectionObserverOverride=false
     class="bottom"

tests/dummy/app/templates/infinity-scrollable-raf.hbs

@@ -9,9 +9,10 @@
     {{/each}}
   </ul>
   {{my-component
-    class="infinity-scrollable-rAF"
+    class="infinity-scrollable-rAF infinity-scrollable"
     viewportSpyOverride=true
     viewportIntersectionObserverOverride=false
+    viewportToleranceOverride=viewportToleranceOverride
     scrollableAreaOverride=".list-rAF"
     infinityLoad=(action "infinityLoad")}}
 </div>

tests/dummy/app/templates/infinity-scrollable.hbs

@@ -11,6 +11,7 @@
   {{my-component
     class="infinity-scrollable"
     scrollableAreaOverride=".list"
+    viewportSpyOverride=true
     viewportToleranceOverride=viewportToleranceOverride
     infinityLoad=(action "infinityLoad")}}
 </div>

tests/dummy/app/templates/infinity.hbs

@@ -3,6 +3,8 @@
     <li><img src={{val}} /></li>
   {{/each}}
 </ul>
-{{my-component 
-  class="infinity-component" 
+{{my-component
+  class="infinity-component"
+  viewportSpyOverride=true
+  viewportToleranceOverride=viewportToleranceOverride
   infinityLoad=(action "infinityLoad")}}