Merge branch 'release/0.1.2'

README.md

@@ -36,7 +36,7 @@ This hook fires whenever the `Component` leaves the viewport.
 ### Advanced usage (options)
 The mixin comes with some options:
 
-- `viewportSpy: boolean` (Only works when not in `rAF` mode: See [issues](#issues))
+- `viewportSpy: boolean`
 
   Default: `false`
 
@@ -54,14 +54,6 @@ The mixin comes with some options:
 
   This option determines how accurately the `Component` needs to be within the viewport for it to be considered as entered. 
 
-## Issues
-The main issue at the moment is with unbinding listeners and clearing the `requestAnimationFrame` recursive cycle. This is preventing work on the `viewportSpy` option, which clears all listeners after a `Component` has entered the viewport at least once. 
-
-- [ ] `_unbindListeners()` should clear the instance of the `requestAnimationFrame` recursion (per Object), but still remain performant
-  - Currently, this method does not clear the `requestAnimationFrame` recursion when it is called. `cancelAnimationFrame` requires the `id` returned by the `requestAnimationFrame` method, but storing it in the Ember.Object causes severe memory issues (as it is being updated at 60FPS, or about every 16ms)
-- [x] `_unbindListeners()` should clear the instance of the event listeners per element
-  - This method clears all event listeners on the `window` and `document` (in reality, this mixin has only 3 listeners regardless of the number of `Components`, because of the way Ember registers event listeners globally), which means if you have >1 `Component` to watch, after one enters the viewport, it unbinds listeners for all other `Components`, whether or not they have entered the viewport.
-
 ## Installation
 
 * `git clone` this repository

addon/mixins/in-viewport.js

@@ -16,7 +16,8 @@ const {
 const {
   scheduleOnce,
   debounce,
-  bind
+  bind,
+  next
 } = run;
 
 const { not }     = computed;
@@ -28,6 +29,8 @@ const listeners = [
   { context: document, event: 'touchmove.scrollable' }
 ];
 
+let rAFIDS = {};
+
 export default Ember.Mixin.create({
   viewportExited: not('viewportEntered').readOnly(),
 
@@ -90,16 +93,17 @@ export default Ember.Mixin.create({
       boundingClientRect = set(this, '$viewportCachedEl', this.$())[0].getBoundingClientRect();
     }
 
-    const viewportUseRAF    = get(this, 'viewportUseRAF');
-    const tolerance         = get(this, 'viewportTolerance');
-    const height            = $(context) ? $(context).height() : 0;
-    const width             = $(context) ? $(context).width()  : 0;
-    const viewportEntered   = isInViewport(boundingClientRect, height, width, tolerance);
+    const viewportUseRAF  = get(this, 'viewportUseRAF');
+    const elementId       = get(this, 'elementId');
+    const tolerance       = get(this, 'viewportTolerance');
+    const height          = $(context) ? $(context).height() : 0;
+    const width           = $(context) ? $(context).width()  : 0;
+    const viewportEntered = isInViewport(boundingClientRect, height, width, tolerance);
 
     set(this, 'viewportEntered', viewportEntered);
 
     if ($viewportCachedEl && viewportUseRAF) {
-      window.requestAnimationFrame(
+      rAFIDS[elementId] = window.requestAnimationFrame(
         bind(this, this._setViewportEntered, context)
       );
     }
@@ -137,18 +141,28 @@ export default Ember.Mixin.create({
     Ember.assert('You must pass a valid event to _bindListeners', event);
 
     const elementId = get(this, 'elementId');
-    Ember.warn('No elementId was registered on this Object, viewportSpy will' +
-      'most likely not work as expected', elementId);
+
+    Ember.warn('No elementId was found on this Object, `viewportSpy` will' +
+      'not work as expected', elementId);
 
     $(context).on(event + elementId, () => {
       this._scrollHandler(context);
     });
   },
 
   _unbindListeners() {
-    const elementId = get(this, 'elementId');
-    Ember.warn('No elementId was registered on this Object, viewportSpy will' +
-      'most likely not work as expected', elementId);
+    const elementId      = get(this, 'elementId');
+    const viewportUseRAF = get(this, 'viewportUseRAF');
+
+    Ember.warn('No elementId was found on this Object, `viewportSpy` will' +
+      'not work as expected', elementId);
+
+    if (viewportUseRAF) {
+      next(this, () => {
+        window.cancelAnimationFrame(rAFIDS[elementId]);
+        rAFIDS[elementId] = null;
+      });
+    }
 
     forEach(listeners, (listener) => {
       const { context, event } = listener;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-in-viewport",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Detect if an Ember View or Component is in the viewport @ 60FPS",
   "directories": {
     "doc": "doc",