Merge pull request #2 from greis/scrollable

Add option to specify scrollable element
adopted-ember-addons · Mar 25, 2015 · e0ae3fc · e0ae3fc
2 parents 06cead8 + e58c5c4
commit e0ae3fc
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 5 deletions.
diff --git a/addon/components/infinity-loader.js b/addon/components/infinity-loader.js
@@ -12,8 +12,10 @@ export default Ember.Component.extend({
   loadedText: 'Infinite Model Entirely Loaded.',
   destroyOnInfinity: false,
   developmentMode: false,
+  scrollable: null,
 
   didInsertElement: function() {
+    this._setupScrollable();
     this.set('guid', Ember.guidFor(this));
     this._bindScroll();
     this._checkIfInView();
@@ -25,26 +27,43 @@ export default Ember.Component.extend({
 
   _bindScroll: function() {
     var _this = this;
-    Ember.$(window).on("scroll."+this.get('guid'), function() {
+    this.get("scrollable").on("scroll."+this.get('guid'), function() {
       Ember.run.debounce(_this, _this._checkIfInView, _this.get('scrollDebounce'));
     });
   },
 
   _unbindScroll: function() {
-    Ember.$(window).off("scroll."+this.get('guid'));
+    this.get("scrollable").off("scroll."+this.get('guid'));
   },
 
   _checkIfInView: function() {
-    var selfOffset   = this.$().offset().top;
-    var windowBottom = Ember.$(window).height() + Ember.$(window).scrollTop();
+    var selfOffset       = this.$().offset().top;
+    var scrollable       = this.get("scrollable");
+    var scrollableBottom = scrollable.height() + scrollable.scrollTop();
 
-    var inView = selfOffset < windowBottom ? true : false;
+    var inView = selfOffset < scrollableBottom ? true : false;
 
     if (inView && !this.get('developmentMode')) {
       this.sendAction('loadMoreAction');
     }
   },
 
+  _setupScrollable: function() {
+    var scrollable = this.get('scrollable');
+    if (Ember.$.type(scrollable) === 'string') {
+      var items = Ember.$(scrollable);
+      if (items.length === 1) {
+        this.set('scrollable', items.eq(0));
+      } else if (items.length > 1) {
+        throw new Error("Multiple scrollable elements found for: " + scrollable);
+      } else {
+        throw new Error("No scrollable element found for: " + scrollable);
+      }
+    } else {
+      this.set('scrollable', Ember.$(window));
+    }
+  },
+
   loadedStatusDidChange: Ember.observer('infinityModel.reachedInfinity', 'destroyOnInfinity', function() {
     if (this.get('infinityModel.reachedInfinity') && this.get('destroyOnInfinity')) { this.destroy(); }
   })

diff --git a/tests/unit/components/infinity-loader-test.js b/tests/unit/components/infinity-loader-test.js
@@ -68,3 +68,36 @@ test('it changes text property', function(assert) {
   assert.equal(componentText, "Infinite Model Entirely Loaded.");
 });
 
+test('it uses the window as the scrollable element', function(assert) {
+  assert.expect(1);
+  var component = this.subject();
+  this.render();
+  var scrollable = component.get("scrollable");
+  assert.equal(scrollable[0], window);
+});
+
+test('it uses the provided scrollable element', function(assert) {
+  assert.expect(1);
+  $(document.body).append("<div id='content'/>");
+  var component = this.subject({scrollable: "#content"});
+  this.render();
+  var scrollable = component.get("scrollable");
+  assert.equal(scrollable[0], $("#content")[0]);
+});
+
+test('it throws error when scrollable element is not found', function(assert) {
+  assert.expect(1);
+  var component = this.subject({scrollable: "#notfound"});
+  assert.throws(function() {
+    this.render();
+  }, Error, "Should raise error");
+});
+
+test('it throws error when multiple scrollable elements are found', function(assert) {
+  assert.expect(1);
+  $(document.body).append("<div/><div/>");
+  var component = this.subject({scrollable: "div"});
+  assert.throws(function() {
+    this.render();
+  }, Error, "Should raise error");
+});