Update ember-in-viewport, ember-wormhole, move ember-composable-helpe…

…rs to devDependencies (#693)

* move ember composable helpers to dev dependencies and bump version  see #524

* bump ember wormhole

* add ember lts 3.8 to travis

* remove ember-native-dom-helpers testing add-on

* update multiple table test from 1-x branch to remove native-dom-helpers add-on

* [breaking] rename inViewport closure action to enterViewport

paving the way to update ember-in-viewport dependency

* fixes infinite loop on onScrolledToBottom

* remove unused rows property from lt-infinity

* bump ember-in-viewport version and refactor lt-infinity component not to use mixin

* make lt-body.inViewport event deprecated in favour of enterViewport and test

.travis.yml

@@ -27,6 +27,7 @@ env:
     - EMBER_TRY_SCENARIO=ember-lts-2.16
     - EMBER_TRY_SCENARIO=ember-lts-2.18
     - EMBER_TRY_SCENARIO=ember-lts-3.4
+    - EMBER_TRY_SCENARIO=ember-lts-3.8
     - EMBER_TRY_SCENARIO=ember-release
     - EMBER_TRY_SCENARIO=ember-beta
     - EMBER_TRY_SCENARIO=ember-canary

addon/components/lt-body.js

@@ -1,4 +1,5 @@
 import Component from '@ember/component';
+import { deprecate } from '@ember/application/deprecations';
 import { computed, observer } from '@ember/object';
 import layout from 'ember-light-table/templates/components/lt-body';
 import { run } from '@ember/runloop';
@@ -186,7 +187,7 @@ export default Component.extend({
   enableScaffolding: false,
 
   /**
-   * ID of main table component. Used to generate divs for ember-wormhole
+   * ID of main table component. Used to generate divs for ember-wormhole and set scope for scroll observers
    *
    * @property tableId
    * @type {String}
@@ -320,7 +321,7 @@ export default Component.extend({
    * fills the screen with row items until lt-infinity component has exited the viewport
    * @property scheduleScrolledToBottom
    */
-  scheduleScrolledToBottom: observer('rows.[]', 'isInViewport', function() {
+  scheduleScrolledToBottom: observer('isInViewport', function() {
     if (this.get('isInViewport')) {
       /*
        Continue scheduling onScrolledToBottom until no longer in viewport
@@ -528,11 +529,27 @@ export default Component.extend({
     },
 
     /**
-     * lt-infinity action to determine if component is still in viewport
+     * lt-infinity action to determine if component is still in viewport. Deprecated - please use enterViewport
      * @event inViewport
+     * @deprecated Use `enterViewport` instead.
+     */
+    inViewport: null,
+
+    /**
+     * lt-infinity action to determine if component is still in viewport
+     * @event enterViewport
      */
-    inViewport() {
-      this.set('isInViewport', true);
+    enterViewport() {
+      const inViewport = this.get('inViewport');
+      if (inViewport) {
+        deprecate('lt-infinity inViewport event is deprecated please use enterViewport instead', false, {
+          id: 'ember-light-table.inViewport',
+          until: '2.0.0'
+        });
+        inViewport();
+      } else {
+        this.set('isInViewport', true);
+      }
     },
     /**
      * lt-infinity action to determine if component has exited the viewport

addon/components/lt-infinity.js

@@ -1,38 +1,39 @@
 import Component from '@ember/component';
 import layout from '../templates/components/lt-infinity';
-import InViewportMixin from 'ember-in-viewport';
 import { get } from '@ember/object';
+import { inject as service } from '@ember/service';
 
-export default Component.extend(InViewportMixin, {
-  classNames: ['lt-infinity'],
-  classNameBindings: ['viewportEntered:in-viewport'],
+export default Component.extend({
   layout,
 
-  rows: null,
+  inViewport: service(),
+
+  classNames: ['lt-infinity'],
   scrollableContent: null,
   scrollBuffer: 50,
 
   didInsertElement() {
     this._super(...arguments);
 
-    let scrollBuffer = this.get('scrollBuffer');
-    let width = this.element.offsetWidth;
-    let scrollableContent = this.get('scrollableContent');
-
-    this.setProperties({
+    const options = {
       viewportSpy: true,
       viewportTolerance: {
-        left: width,
-        right: width,
-        bottom: scrollBuffer,
-        top: 0
+        bottom: this.get('scrollBuffer')
       },
-      scrollableArea: scrollableContent
-    });
+      scrollableArea: this.get('scrollableContent')
+    };
+
+    const { onEnter, onExit } = this.get('inViewport').watchElement(get(this, 'element'), options);
+    onEnter(this.didEnterViewport.bind(this));
+    onExit(this.didExitViewport.bind(this));
+  },
+
+  willDestroyElement() {
+    this.get('inViewport').stopWatching(this.get('element'));
   },
 
   didEnterViewport() {
-    get(this, 'inViewport')();
+    get(this, 'enterViewport')();
   },
 
   didExitViewport() {

addon/templates/components/lt-body.hbs

@@ -58,8 +58,7 @@
 
       {{#if onScrolledToBottom}}
         {{lt.infinity
-          rows=rows
-          inViewport=(action "inViewport")
+          enterViewport=(action "enterViewport")
           exitViewport=(action "exitViewport")
           scrollableContent=(concat "#" tableId " .lt-scrollable")}}
       {{/if}}

config/ember-try.js

@@ -43,6 +43,14 @@ module.exports = function() {
             }
           }
         },
+        {
+          name: 'ember-lts-3.8',
+          npm: {
+            devDependencies: {
+              'ember-source': '~3.8.0'
+            }
+          }
+        },
         {
           name: 'ember-release',
           npm: {

package.json

@@ -29,12 +29,11 @@
     "ember-cli-babel": "^6.11.0",
     "ember-cli-htmlbars": "^2.0.3",
     "ember-cli-string-helpers": "^1.8.1",
-    "ember-composable-helpers": "^2.1.0",
     "ember-get-config": "^0.2.4",
-    "ember-in-viewport": "~3.0.3",
+    "ember-in-viewport": "^3.5.8",
     "ember-scrollable": "^0.5.2",
     "ember-truth-helpers": "^2.0.0",
-    "ember-wormhole": "^0.5.4"
+    "ember-wormhole": "^0.5.5"
   },
   "devDependencies": {
     "broccoli-asset-rev": "^2.7.0",
@@ -58,14 +57,14 @@
     "ember-cli-update": "^0.21.4",
     "ember-cli-yuidoc": "0.8.8",
     "ember-code-snippet": "^2.2.0",
+    "ember-composable-helpers": "^2.3.1",
     "ember-concurrency": "^0.8.14",
     "ember-data": "^3.1.1",
     "ember-disable-prototype-extensions": "^1.1.2",
     "ember-export-application-global": "^2.0.0",
     "ember-font-awesome": "^4.0.0-rc.4",
     "ember-load-initializers": "^1.0.0",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-native-dom-helpers": "^0.6.2",
     "ember-notify-property-change-polyfill": "^0.0.2",
     "ember-one-way-controls": "^3.0.1",
     "ember-qunit": "^4.0.0",

tests/integration/components/light-table-occlusion-test.js

@@ -1,6 +1,5 @@
-import { scrollTo } from 'ember-native-dom-helpers';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, findAll, find, click } from '@ember/test-helpers';
+import { render, findAll, find, click, triggerEvent } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import hbs from 'htmlbars-inline-precompile';
 import setupMirageTest from 'ember-cli-mirage/test-support/setup-mirage';
@@ -48,13 +47,13 @@ module('Integration | Component | light table | occlusion', function(hooks) {
 
     assert.ok(findAll('.vertical-collection tbody.lt-body tr.lt-row').length < 30, 'only some rows are rendered');
 
-    let scrollContainer = '.lt-scrollable.tse-scrollable.vertical-collection';
-    let { scrollHeight } = find(scrollContainer);
-
-    assert.ok(findAll(scrollContainer).length > 0, 'scroll container was rendered');
+    let scrollContainer = find('.lt-scrollable.tse-scrollable.vertical-collection');
+    assert.ok(scrollContainer, 'scroll container was rendered');
+    let { scrollHeight } = scrollContainer;
     assert.ok(scrollHeight > 1500, 'scroll height is 50 rows * 30 px per row + header size');
+    scrollContainer.scrollTop = scrollHeight;
 
-    await scrollTo(scrollContainer, 0, scrollHeight);
+    await triggerEvent(scrollContainer, 'scroll');
   });
 
   test('fixed header', async function(assert) {

tests/integration/components/light-table-test.js

@@ -1,6 +1,5 @@
-import { scrollTo } from 'ember-native-dom-helpers';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, findAll, find, click } from '@ember/test-helpers';
+import { render, findAll, find, click, triggerEvent } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import hbs from 'htmlbars-inline-precompile';
 import setupMirageTest from 'ember-cli-mirage/test-support/setup-mirage';
@@ -45,13 +44,13 @@ module('Integration | Component | light table', function(hooks) {
 
     assert.equal(findAll('tbody > tr').length, 50, '50 rows are rendered');
 
-    let scrollContainer = '.tse-scroll-content';
-    let { scrollHeight } = find(scrollContainer);
+    let scrollContainer = find('.tse-scroll-content');
+    assert.ok(scrollContainer, 'scroll container was rendered');
+    let expectedScroll = 2501;
+    assert.equal(scrollContainer.scrollHeight, expectedScroll, 'scroll height is 2500 + 1px for height of lt-infinity');
 
-    assert.ok(findAll(scrollContainer).length > 0, 'scroll container was rendered');
-    assert.equal(scrollHeight, 2501, 'scroll height is 2500 + 1px for height of lt-infinity');
-
-    await scrollTo(scrollContainer, 0, scrollHeight);
+    scrollContainer.scrollTop = expectedScroll;
+    await triggerEvent(scrollContainer, 'scroll');
   });
 
   test('scrolled to bottom (multiple tables)', async function(assert) {
@@ -81,13 +80,36 @@ module('Integration | Component | light table', function(hooks) {
 
     assert.equal(findAll('#table-2 tbody > tr').length, 50, '50 rows are rendered');
 
-    let scrollContainer = '#table-2 .tse-scroll-content';
-    let { scrollHeight } = find(scrollContainer);
+    let scrollContainer = find('#table-2 .tse-scroll-content');
+    assert.ok(scrollContainer, 'scroll container was rendered');
+    let expectedScroll = 2501;
+    assert.equal(scrollContainer.scrollHeight, expectedScroll, 'scroll height is 2500 + 1px for height of lt-infinity');
+
+    scrollContainer.scrollTop = expectedScroll;
+    await triggerEvent(scrollContainer, 'scroll');
+  });
 
-    assert.ok(findAll(scrollContainer).length > 0, 'scroll container was rendered');
-    assert.equal(scrollHeight, 2501, 'scroll height is 2500 + 1px for height of lt-infinity');
+  test('lt-body inViewport event deprecated', async function(assert) {
+    assert.expect(2);
+    this.set('table', new Table(Columns, this.server.createList('user', 5)));
+    this.set('isInViewport', false);
+    this.set('inViewport', () => {
+      assert.ok(true);
+      this.set('isInViewport', true);
+    });
+    this.set('onScrolledToBottom', () => {
+      assert.ok(true);
+    });
 
-    await scrollTo(scrollContainer, 0, scrollHeight);
+    await render(hbs `
+      {{#light-table table height='40vh' id="table" as |t|}}
+        {{t.head fixed=true}}
+        {{t.body isInViewport=isInViewport inViewport=(action inViewport) onScrolledToBottom=(action onScrolledToBottom)}}
+      {{/light-table}}
+    `);
+    let scrollContainer = find('#table .tse-scroll-content');
+    scrollContainer.scrollTop = 2501;
+    await triggerEvent(scrollContainer, 'scroll');
   });
 
   test('fixed header', async function(assert) {
@@ -252,7 +274,9 @@ module('Integration | Component | light table', function(hooks) {
       {{/light-table}}
     `);
 
-    await scrollTo('.tse-scroll-content', 0, expectedScroll);
+    let scrollContainer = find('.tse-scroll-content');
+    scrollContainer.scrollTop = expectedScroll;
+    await triggerEvent(scrollContainer, 'scroll');
   });
 
   test('extra data and tableActions', async function(assert) {

tests/integration/components/lt-infinity-test.js

@@ -7,9 +7,9 @@ module('Integration | Component | lt infinity', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    this.inViewport = () => {};
+    this.enterViewport = () => {};
     this.exitViewport = () => {};
-    await render(hbs`{{lt-infinity inViewport=inViewport exitViewport=exitViewport}}`);
+    await render(hbs`{{lt-infinity enterViewport=enterViewport exitViewport=exitViewport}}`);
     assert.equal(find('*').textContent.trim(), '');
   });
 });