Merge pull request #22 from fsmanuel/in-viewport

replace in-viewport mixin with ember-in-viewport

README.md

@@ -41,12 +41,6 @@ You can customize `error` text by passing it as an parameter:
 {{lazy-image url='http://my-not-valid-url.com/foo.jpg' errorText='Something went wrong.'}}
 ```
 
-It is also possible to define threshold (in pixels) for the image so it is preloaded when user is scrolling to it:
-
-```hbs
-{{lazy-image url='http://my-valid-url.com/foo.jpg' threshold=100}}`
-```
-
 ### `width`, `height` and `data-*` attributes
 
 Lazy Image supports `width`, `height` and `data-*` attribute bindings.
@@ -64,6 +58,37 @@ You can also pass class names for the image element.
 {{lazy-image url='http://my-valid-url.com/foo.jpg' class='foo-bar baz-bar'}}
 ```
 
+### ember-in-viewport options
+
+Lazy Image uses [ember-in-viewport](https://github.com/dockyard/ember-in-viewport/) for viewport detection. Due to the way listeners and `requestAnimationFrame` is setup, you'll have to override the `ember-in-viewport` options by creating `app/components/lazy-image.js`:
+
+```js
+// app/components/lazy-image.js
+
+import Ember from 'ember';
+import LazyImage from 'ember-lazy-image/components/lazy-image';
+
+export default LazyImage.extend({
+  viewportOptionsOverride: Ember.on('didInsertElement', function() {
+    Ember.setProperties(this, {
+      viewportUseRAF      : true,
+      viewportSpy         : false,
+      viewportRefreshRate : 150,
+      viewportTolerance: {
+        top    : 50,
+        bottom : 50,
+        left   : 20,
+        right  : 20
+      }
+    });
+  })
+});
+```
+
+See [Advanced usage (options)](https://github.com/dockyard/ember-in-viewport/tree/1.0.0#advanced-usage-options) for more in detail `ember-in-viewport` options.
+
+The use of `threshold` is deprecated in favor of `viewportTolerance`.
+
 ## Installation
 
 * `git clone` this repository

addon/components/lazy-image.js

@@ -1,7 +1,7 @@
 import Cache           from '../lib/cache';
 import Ember           from 'ember';
 import ImageLoadMixin  from '../mixins/image-load';
-import InViewportMixin from '../mixins/in-viewport';
+import InViewportMixin from 'ember-in-viewport';
 
 var on        = Ember.on;
 var get       = Ember.get;
@@ -40,18 +40,18 @@ export default Component.extend(InViewportMixin, ImageLoadMixin, {
     });
   }),
 
-  setImageUrl: on('didInsertElement', (observer('enteredViewport', function() {
+  setImageUrl: on('didInsertElement', (observer('viewportEntered', function() {
     var url             = get(this, 'url');
     var cache           = get(this, '_cache');
     var lazyUrl         = get(this, 'lazyUrl');
     var cacheKey        = get(this, '_cacheKey');
-    var enteredViewport = get(this, 'enteredViewport');
+    var viewportEntered = get(this, 'viewportEntered');
 
     if (cacheKey && get(cache, cacheKey)) {
       set(this, 'lazyUrl', url);
     }
 
-    if (enteredViewport && lazyUrl === "//:0") {
+    if (viewportEntered && lazyUrl === "//:0") {
       set(this, 'lazyUrl', url);
 
       if (cacheKey) {

package.json

@@ -33,8 +33,9 @@
     "ember-try": "0.0.4"
   },
   "dependencies": {
-    "ember-local-storage": "0.0.2",
-    "ember-cli-babel": "^5.0.0"
+    "ember-cli-babel": "^5.0.0",
+    "ember-in-viewport": "1.0.0",
+    "ember-local-storage": "0.0.3"
   },
   "keywords": [
     "ember-addon",

tests/dummy/app/routes/index.js

@@ -2,7 +2,7 @@ import Ember from "ember";
 
 export default Ember.Route.extend({
   model: function() {
-    return [{
+    return Ember.A([{
       text: 'Yehuda Katz',
       url:  'http://emberjs.com/images/team/ykatz.jpg'
     }, {
@@ -35,6 +35,6 @@ export default Ember.Route.extend({
     }, {
       text: 'Igor Terzic',
       url:  'http://emberjs.com/images/team/iterzic.jpeg'
-    }];
+    }]);
   }
 });

tests/dummy/config/environment.js

@@ -36,6 +36,8 @@ module.exports = function(environment) {
     ENV.baseURL = '/';
     ENV.locationType = 'none';
 
+    ENV.EmberENV.RAISE_ON_DEPRECATION = true;
+
     // keep test console output quieter
     ENV.APP.LOG_ACTIVE_GENERATION = false;
     ENV.APP.LOG_VIEW_LOOKUPS = false;

tests/unit/components/lazy-image-test.js

@@ -68,7 +68,7 @@ test('it leverages cache', function(assert) {
   this.render();
 
   run(function() {
-    component.set('enteredViewport', true);
+    component.set('viewportEntered', true);
   });
 
   var lazyImages = window.sessionStorage['ember-lazy-images'];
@@ -129,4 +129,4 @@ test('passing class names for the <img> element', function(assert) {
 
   var expected = 'lazy-image img-responsive image-thumbnail';
   assert.equal(component.$('img').attr('class'), expected);
-});
+});