Merge branch 'release/0.2.0'

DockYard · Apr 16, 2015 · 335a412 · 335a412
2 parents 7cb3616 + 99f8747
commit 335a412
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -34,7 +34,25 @@ export default Ember.Component.extend(InViewportMixin, {
 This hook fires whenever the `Component` leaves the viewport.
 
 ### Advanced usage (options)
-The mixin comes with some options:
+The mixin comes with some options. Due to the way listeners and `requestAnimationFrame` is setup, you'll have to override the options this way:
+
+```js
+export default Ember.Component.extend(InViewportMixin, {
+  viewportOptionsOverride: Ember.on('didInsertElement', function() {
+    Ember.setProperties(this, {
+      viewportUseRAF      : true,
+      viewportSpy         : false,
+      viewportRefreshRate : 150,
+      viewportTolerance: {
+        top    : 50,
+        bottom : 50,
+        left   : 20,
+        right  : 20
+      }
+    });
+  })
+});
+```
 
 - `viewportSpy: boolean`
 

diff --git a/addon/mixins/in-viewport.js b/addon/mixins/in-viewport.js
@@ -57,10 +57,9 @@ export default Ember.Mixin.create({
 
     this._setInitialViewport(window);
     this._addObserverIfNotSpying();
+    this._setViewportEntered(window);
 
-    if (viewportUseRAF) {
-      return this._setViewportEntered(window);
-    } else {
+    if (!viewportUseRAF) {
       forEach(listeners, (listener) => {
         const { context, event } = listener;
         this._bindListeners(context, event);
@@ -84,6 +83,11 @@ export default Ember.Mixin.create({
     Ember.assert('You must pass a valid context to _setViewportEntered', context);
 
     const $viewportCachedEl = get(this, '$viewportCachedEl');
+    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;
 
     let boundingClientRect;
 
@@ -93,11 +97,6 @@ export default Ember.Mixin.create({
       boundingClientRect = set(this, '$viewportCachedEl', this.$())[0].getBoundingClientRect();
     }
 
-    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);
@@ -122,7 +121,7 @@ export default Ember.Mixin.create({
   _setInitialViewport(context=null) {
     Ember.assert('You must pass a valid context to _setInitialViewport', context);
 
-    return scheduleOnce('afterRender', this, function() {
+    return scheduleOnce('afterRender', this, () => {
       this._setViewportEntered(context);
     });
   },
@@ -131,6 +130,7 @@ export default Ember.Mixin.create({
     Ember.assert('You must pass a valid context to _scrollHandler', context);
 
     const viewportRefreshRate = get(this, 'viewportRefreshRate');
+
     debounce(this, function() {
       this._setViewportEntered(context);
     }, viewportRefreshRate);
@@ -145,7 +145,7 @@ export default Ember.Mixin.create({
     Ember.warn('No elementId was found on this Object, `viewportSpy` will' +
       'not work as expected', elementId);
 
-    $(context).on(event + elementId, () => {
+    $(context).on(`${event}#${elementId}`, () => {
       this._scrollHandler(context);
     });
   },
@@ -166,7 +166,7 @@ export default Ember.Mixin.create({
 
     forEach(listeners, (listener) => {
       const { context, event } = listener;
-      $(context).off(event + elementId);
+      $(context).off(`${event}#${elementId}`);
     });
   }
 });
diff --git a/addon/utils/can-use-raf.js b/addon/utils/can-use-raf.js
@@ -1,3 +1,11 @@
+// Adapted from Paul Irish's rAF polyfill
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+
+// MIT license
+
 import canUseDOM from 'ember-in-viewport/utils/can-use-dom';
 
 function checkRAF(window, rAF, cAF) {

diff --git a/app/mixins/in-viewport.js b/app/mixins/in-viewport.js
diff --git a/app/utils/can-use-dom.js b/app/utils/can-use-dom.js
diff --git a/app/utils/can-use-raf.js b/app/utils/can-use-raf.js
diff --git a/app/utils/is-in-viewport.js b/app/utils/is-in-viewport.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ember-in-viewport",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Detect if an Ember View or Component is in the viewport @ 60FPS",
   "directories": {
     "doc": "doc",
@@ -34,8 +34,11 @@
   },
   "keywords": [
     "ember-addon",
+    "ember",
+    "ember-cli",
     "viewport",
     "in viewport",
+    "is on screen",
     "scrollspy"
   ],
   "dependencies": {

diff --git a/tests/unit/mixins/in-viewport-test.js b/tests/unit/mixins/in-viewport-test.js
@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import InViewportMixin from '../../../mixins/in-viewport';
+import InViewportMixin from 'ember-in-viewport/mixins/in-viewport';
 import { module, test } from 'qunit';
 
 module('InViewportMixin');

diff --git a/tests/unit/utils/is-in-viewport-test.js b/tests/unit/utils/is-in-viewport-test.js
@@ -1,4 +1,4 @@
-import isInViewport from '../../../utils/is-in-viewport';
+import isInViewport from 'ember-in-viewport/utils/is-in-viewport';
 import { module, test } from 'qunit';
 
 let fakeRectNotInViewport, fakeRectInViewport, fakeWindow, fakeNoTolerance, fakeTolerance;