Upgrade to 3.0 and remove jquery usage (#121)

DockYard · Feb 24, 2018 · 4319f8a · 4319f8a
1 parent 8a3f263
commit 4319f8a
Show file tree

Hide file tree

Showing 32 changed files with 3,342 additions and 1,761 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,10 +4,45 @@ module.exports = {
     ecmaVersion: 2017,
     sourceType: 'module'
   },
-  extends: 'eslint:recommended',
+  plugins: [
+    'ember'
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:ember/recommended'
+  ],
   env: {
     browser: true
   },
   rules: {
-  }
+  },
+  overrides: [
+    // node files
+    {
+      files: [
+        'index.js',
+        'testem.js',
+        'ember-cli-build.js',
+        'config/**/*.js',
+        'tests/dummy/config/**/*.js'
+      ],
+      excludedFiles: [
+        'app/**',
+        'addon/**',
+        'tests/dummy/app/**'
+      ],
+      parserOptions: {
+        sourceType: 'script',
+        ecmaVersion: 2015
+      },
+      env: {
+        browser: false,
+        node: true
+      },
+      plugins: ['node'],
+      rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
+        // add your custom rules and overrides for node files here
+      })
+    }
+  ]
 };
diff --git a/.npmignore b/.npmignore
@@ -7,8 +7,8 @@
 .bowerrc
 .editorconfig
 .ember-cli
-.gitignore
 .eslintrc.js
+.gitignore
 .watchmanconfig
 .travis.yml
 bower.json

diff --git a/.travis.yml b/.travis.yml
@@ -3,7 +3,7 @@ language: node_js
 node_js:
   # we recommend testing addons with the same minimum supported node version as Ember CLI
   # so that your addon works for all apps
-  - "4"
+  - "8"
 
 sudo: required
 dist: trusty
@@ -22,9 +22,9 @@ env:
   matrix:
     # we recommend new addons test the current and previous LTS
     # as well as latest stable release (bonus points to beta/canary)
-    - EMBER_TRY_SCENARIO=ember-lts-2.8
     - EMBER_TRY_SCENARIO=ember-lts-2.12
     - EMBER_TRY_SCENARIO=ember-lts-2.16
+    - EMBER_TRY_SCENARIO=ember-lts-2.18
     - EMBER_TRY_SCENARIO=ember-release
     - EMBER_TRY_SCENARIO=ember-beta
     - EMBER_TRY_SCENARIO=ember-canary
@@ -37,7 +37,7 @@ matrix:
 
 before_install:
   - npm config set spin false
-  - npm install -g npm@4
+  - npm install -g npm@5
   - npm --version
 
 script:

diff --git a/README.md b/README.md
@@ -76,7 +76,9 @@ The mixin comes with some options. Due to the way listeners and `IntersectionObs
 
 ```js
 export default Ember.Component.extend(InViewportMixin, {
-  viewportOptionsOverride: Ember.on('didInsertElement', function() {
+  init() {
+    this._super(...arguments);
+
     Ember.setProperties(this, {
       viewportEnabled                 : true,
       viewportUseRAF                  : true,
@@ -93,7 +95,7 @@ export default Ember.Component.extend(InViewportMixin, {
         right  : 20
       }
     });
-  })
+  }
 });
 ```
 

diff --git a/addon/initializers/viewport-config.js b/addon/initializers/viewport-config.js
@@ -7,8 +7,8 @@ const defaultConfig = {
   viewportScrollSensitivity: 1,
   viewportRefreshRate: 100,
   viewportListeners: [
-    { context: window, event: 'scroll.scrollable' },
-    { context: window, event: 'resize.resizable' }
+    { context: window, event: 'scroll' },
+    { context: window, event: 'resize' }
   ],
   viewportTolerance: {
     top: 0,
@@ -23,7 +23,7 @@ const defaultConfig = {
 if (canUseDOM) {
   defaultConfig.viewportListeners.push({
     context: document,
-    event: 'touchmove.scrollable'
+    event: 'touchmove'
   });
 }
 

diff --git a/addon/mixins/in-viewport.js b/addon/mixins/in-viewport.js
@@ -2,13 +2,13 @@ import { assign } from '@ember/polyfills';
 import Mixin from '@ember/object/mixin';
 import { typeOf } from '@ember/utils';
 import { assert } from '@ember/debug';
-import $ from 'jquery';
 import { set, get, setProperties } from '@ember/object';
 import { next, bind, debounce, scheduleOnce } from '@ember/runloop';
 import { not } from '@ember/object/computed';
 import { getOwner } from '@ember/application';
 import canUseDOM from 'ember-in-viewport/utils/can-use-dom';
 import canUseRAF from 'ember-in-viewport/utils/can-use-raf';
+import findElem from 'ember-in-viewport/utils/find-elem';
 import canUseIntersectionObserver from 'ember-in-viewport/utils/can-use-intersection-observer';
 import isInViewport from 'ember-in-viewport/utils/is-in-viewport';
 import checkScrollDirection from 'ember-in-viewport/utils/check-scroll-direction';
@@ -98,6 +98,8 @@ export default Mixin.create({
     }
 
     if (get(this, 'viewportUseIntersectionObserver')) {
+      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+      // IntersectionObserver takes either a Document Element or null for `root`
       const { top = 0, left = 0, bottom = 0, right = 0 } = this.viewportTolerance;
       const options = {
         root: scrollableArea,
@@ -108,15 +110,16 @@ export default Mixin.create({
       this.intersectionObserver = new IntersectionObserver(bind(this, this._onIntersection), options);
       this.intersectionObserver.observe(element);
     } else {
-      const $contextEl = scrollableArea ? $(scrollableArea) : $(window);
+      const height = scrollableArea ? scrollableArea.offsetHeight : window.innerHeight;
+      const width = scrollableArea ? scrollableArea.offsetWidth : window.innerWidth;
       const boundingClientRect = element.getBoundingClientRect();
 
       if (boundingClientRect) {
         this._triggerDidAccessViewport(
           isInViewport(
             boundingClientRect,
-            $contextEl.innerHeight(),
-            $contextEl.innerWidth(),
+            height,
+            width,
             get(this, 'viewportTolerance')
           )
         );
@@ -136,6 +139,10 @@ export default Mixin.create({
    * @param {Array} - entries
    */
   _onIntersection(entries) {
+    if (this.isDestroyed || this.isDestroying) {
+      return;
+    }
+
     const entry = entries[0];
 
     if (entry.isIntersecting) {
@@ -147,16 +154,16 @@ export default Mixin.create({
     }
   },
 
-  _triggerDidScrollDirection($contextEl = null, sensitivity = 1) {
-    assert('You must pass a valid context element to _triggerDidScrollDirection', $contextEl);
+  _triggerDidScrollDirection(contextEl = null, sensitivity = 1) {
+    assert('You must pass a valid context element to _triggerDidScrollDirection', contextEl);
     assert('sensitivity cannot be 0', sensitivity);
 
     const elementId = get(this, 'elementId');
     const lastDirectionForEl = lastDirection[elementId];
     const lastPositionForEl = lastPosition[elementId];
     const newPosition = {
-      top: $contextEl.scrollTop(),
-      left: $contextEl.scrollLeft()
+      top: contextEl.scrollTop,
+      left: contextEl.scrollLeft
     };
 
     const scrollDirection = checkScrollDirection(lastPositionForEl, newPosition, sensitivity);
@@ -215,19 +222,22 @@ export default Mixin.create({
   _bindScrollDirectionListener(sensitivity = 1) {
     assert('sensitivity cannot be 0', sensitivity);
 
-    const $contextEl = get(this, 'scrollableArea') ? $(get(this, 'scrollableArea')) : $(window);
+    const contextEl = get(this, 'scrollableArea') || window;
+    const elem = findElem(contextEl);
 
-    $contextEl.on(`scroll.directional#${get(this, 'elementId')}`, () => {
-      this._debouncedEventHandler('_triggerDidScrollDirection', $contextEl, sensitivity);
+    elem.addEventListener('scroll', () => {
+      this._debouncedEventHandler('_triggerDidScrollDirection', elem, sensitivity);
     });
   },
 
   _unbindScrollDirectionListener() {
     const elementId = get(this, 'elementId');
-
     const context = get(this, 'scrollableArea') || window;
+    const elem = findElem(context);
 
-    $(context).off(`scroll.directional#${elementId}`);
+    elem.removeEventListener('scroll', () => {
+      this._debouncedEventHandler('_triggerDidScrollDirection', elem, get(this, 'viewportScrollSensitivity'));
+    });
     delete lastPosition[elementId];
     delete lastDirection[elementId];
   },
@@ -236,8 +246,10 @@ export default Mixin.create({
     assert('You must pass a valid context to _bindListeners', context);
     assert('You must pass a valid event to _bindListeners', event);
 
-    $(context).on(`${event}.${get(this, 'elementId')}`, () => {
-      this._debouncedEventHandler('_setViewportEntered', context);
+    let elem = findElem(context);
+
+    elem.addEventListener(event, () => {
+      this._debouncedEventHandler('_setViewportEntered');
     });
   },
 
@@ -253,10 +265,14 @@ export default Mixin.create({
 
     get(this, 'viewportListeners').forEach((listener) => {
       let { context, event } = listener;
-      context = get(this, 'scrollableArea') ? get(this, 'scrollableArea') : context;
-      $(context).off(`${event}.${elementId}`);
+      context = get(this, 'scrollableArea') || context;
+      let elem = findElem(context);
+
+      elem.removeEventListener(event, () => {
+        this._debouncedEventHandler('_setViewportEntered');
+      });
     });
 
     this._unbindScrollDirectionListener();
-  }
+  },
 });
diff --git a/addon/utils/find-elem.js b/addon/utils/find-elem.js
@@ -0,0 +1,14 @@
+export default function(context) {
+  let elem;
+  if (
+    context.nodeType === Node.ELEMENT_NODE ||
+    context.nodeType === Node.DOCUMENT_NODE ||
+    context instanceof Window
+  ) {
+    elem = context
+  } else {
+    elem = document.querySelector(context);
+  }
+
+  return elem;
+}
diff --git a/app/initializers/viewport-config.js b/app/initializers/viewport-config.js
@@ -1,2 +1 @@
 export { default, initialize } from 'ember-in-viewport/initializers/viewport-config';
-
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export { default, initialize } from 'ember-in-viewport/initializers/viewport-config';