Support infinite scroll

Author: allenz-crypto

Diff for: addon/components/ember-scrollable.js

@@ -369,7 +369,12 @@ export default Component.extend(InboundActionsMixin, DomMixin, {
   },
 
   resizeScrollbar() {
-    this.createScrollbarAndShowIfNecessary();
+    if (this.get('horizontalScrollbar')) {
+      this.updateScrollbarAndSetupProperties(this.get('scrollToX'), 'horizontal');
+    }
+    if (this.get('verticalScrollbar')) {
+      this.updateScrollbarAndSetupProperties(this.get('scrollToY'), 'vertical');
+    }
   },
 
   showScrollbar() {

Diff for: package.json

@@ -44,6 +44,7 @@
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^2.0.0",
     "ember-code-snippet": "2.0.0",
+    "ember-composable-helpers": "^2.1.0",
     "ember-disable-prototype-extensions": "^1.1.2",
     "ember-drag-drop": "0.4.6",
     "ember-export-application-global": "^2.0.0",

Diff for: tests/acceptance/index-test.js

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
-import { visit, currentURL } from '@ember/test-helpers';
+import { visit, currentURL, triggerEvent as triggerEventTestHelper, settled } from '@ember/test-helpers';
 import { click, fillIn, find, triggerEvent } from 'ember-native-dom-helpers';
 import { timeout } from 'ember-scrollable/util/timeout';
 import { THROTTLE_TIME_LESS_THAN_60_FPS_IN_MS } from 'ember-scrollable/components/ember-scrollable';
@@ -75,4 +75,25 @@ module('Acceptance | ember-scrollbar', function(hooks) {
     assert.equal(elementHeight(scrollArea), 18);
     assert.ok(find('.no-scrollbar-demo .ember-scrollable .drag-handle:not(.visible)'), 'handle goes away when overflow is gone');
   });
+
+  test('Scrollbar is resized and correctly positioned during infinite scroll', async function(assert) {
+    await visit('/');
+
+    let dragHandle = await find('.infinite-scroll-demo .drag-handle');
+    const dragHandleHeightBeforeScroll = parseInt(dragHandle.style.height);
+
+    const scrollContent = await find('.infinite-scroll-demo .tse-scroll-content');
+    // Move scrollbar to bottom
+    scrollContent.scrollTop =
+      scrollContent.scrollHeight - scrollContent.offsetHeight;
+    await triggerEventTestHelper('.tse-scroll-content', 'scroll');
+    // Wait for scroll event handler adds more scroll content
+    await settled();
+
+    dragHandle = await find('.infinite-scroll-demo .drag-handle');
+    // Drag handle size should be shorter than before since there is now more scroll content
+    assert.ok(parseInt(dragHandle.style.height) < dragHandleHeightBeforeScroll);
+    // Drag handle should not be reset back to the top
+    assert.ok(parseInt(dragHandle.style.top) !== 0);
+  });
 });

Diff for: tests/dummy/app/controllers/index.js

@@ -4,12 +4,20 @@ import Controller from '@ember/controller';
 
 export default Controller.extend({
   isShort: true,
+  infiniteScrollItems: 20,
+  infiniteScrollPage: 1,
+
   actions: {
     log(message) {
       console.log(message);
     },
     toggleHeight() {
       this.toggleProperty('isShort');
+    },
+    loadMore() {
+      const items = ++this.infiniteScrollPage * 20;
+      console.log(`Load up to ${items} items`);
+      this.set('infiniteScrollItems', items);
     }
   }
 });

Diff for: tests/dummy/app/templates/index.hbs

@@ -256,3 +256,23 @@
     {{code-snippet name="event-and-setter.hbs"}}
   </div>
 </section>
+
+<section class="infinite-scroll-demo">
+  <h1>Infinite Scroll</h1>
+
+  <div class="output">
+    {{!-- BEGIN-SNIPPET infinite-scroll --}}
+    <div style="height: 400px;">
+      {{#ember-scrollable onScrolledToBottom=(action 'loadMore') as |scrollable|}}
+        {{#each (repeat (compute scrollable.update infiniteScrollItems)) as |empty|}}
+          <p>Some Content</p>
+        {{/each}}
+      {{/ember-scrollable}}
+    </div>
+    {{!-- END-SNIPPET --}}
+  </div>
+
+  <div class="code">
+    {{code-snippet name="infinite-scroll.hbs"}}
+  </div>
+</section>