Remove jQuery, refactor tests to new style, various upgrades (#98)

addon/classes/scrollable.js

@@ -1,4 +1,7 @@
-import { camelize } from '@ember/string';
+import { capitalize } from '@ember/string';
+import { getHeight, getWidth } from '../util/measurements';
+
+const DynamicMethods = { getHeight, getWidth };
 
 export default class Scrollable {
   constructor(options) {
@@ -12,11 +15,11 @@ export default class Scrollable {
 
 
   scrollbarSize() {
-    return this.scrollbarElement[this.sizeAttr]();
+    return this.scrollbarElement[`client${capitalize(this.sizeAttr)}`];
   }
 
   contentOuterSize() {
-    return this.contentElement[camelize(`outer-${this.sizeAttr}`)]();
+    return DynamicMethods[`get${capitalize(this.sizeAttr)}`](this.contentElement);
   }
 
   getHandlePositionAndSize(scrollOffset) {
@@ -68,4 +71,3 @@ export class Horizontal extends Scrollable {
     this.sizeAttr = 'width';
   }
 }
-

addon/components/ember-scrollable.js

@@ -9,6 +9,7 @@ import InboundActionsMixin from 'ember-component-inbound-actions/inbound-actions
 import DomMixin from 'ember-lifeline/mixins/dom';
 import layout from '../templates/components/ember-scrollable';
 import { Horizontal, Vertical } from '../classes/scrollable';
+import { getHeight, getWidth } from '../util/measurements';
 
 const hideDelay = Ember.testing ? 16 : 1000;
 const PAGE_JUMP_MULTIPLE = 7 / 8;
@@ -143,8 +144,7 @@ export default Component.extend(InboundActionsMixin, DomMixin, {
 
   willDestroyElement() {
     this._super(...arguments);
-
-    this.$().off('transitionend webkitTransitionEnd', this._resizeHandler);
+    this.element.removeEventListener('transitionend webkitTransitionEnd', this._resizeHandler)
   },
 
 
@@ -198,11 +198,16 @@ export default Component.extend(InboundActionsMixin, DomMixin, {
   dragOffset: 0,
 
   contentSize(sizeAttr) {
-    return this._contentElement[sizeAttr]();
+
+    let getters = {
+      'height': getHeight,
+      'width': getWidth
+    }
+    return getters[sizeAttr](this._contentElement);
   },
 
   setupElements() {
-    this._contentElement = this.$(`${contentSelector}:first`);
+    this._contentElement = this.get('element').querySelector(`${contentSelector}`);
   },
 
   /**
@@ -228,8 +233,8 @@ export default Component.extend(InboundActionsMixin, DomMixin, {
   },
 
   resizeScrollContent() {
-    const width = this.$().width();
-    const height = this.$().height();
+    const width = getWidth(this.element);
+    const height = getHeight(this.element);
     const scrollbarThickness = this.get('scrollbarThickness.thickness');
 
     const hasHorizontal = this.get('horizontal');
@@ -241,7 +246,7 @@ export default Component.extend(InboundActionsMixin, DomMixin, {
     } else if (hasHorizontal) {
       this.set('scrollContentWidth', width);
       this.set('scrollContentHeight', height + scrollbarThickness);
-      this._contentElement.height(height);
+      this._contentElement.height = height;
     } else {
       this.set('scrollContentWidth', width + scrollbarThickness);
       this.set('scrollContentHeight', height);
@@ -264,7 +269,7 @@ export default Component.extend(InboundActionsMixin, DomMixin, {
 
     if (this.get('vertical')) {
       const verticalScrollbar = new Vertical({
-        scrollbarElement: this.$(`${scrollbarSelector}.vertical`),
+        scrollbarElement: this.element.querySelector(`${scrollbarSelector}.vertical`),
         contentElement: this._contentElement
       });
       this.set('verticalScrollbar', verticalScrollbar);
@@ -273,7 +278,7 @@ export default Component.extend(InboundActionsMixin, DomMixin, {
     }
     if (this.get('horizontal')) {
       const horizontalScrollbar = new Horizontal({
-        scrollbarElement: this.$(`${scrollbarSelector}.horizontal`),
+        scrollbarElement: this.element.querySelector(`${scrollbarSelector}.horizontal`),
         contentElement: this._contentElement
       });
       this.set('horizontalScrollbar', horizontalScrollbar);

addon/components/ember-scrollbar.js

@@ -6,6 +6,7 @@ import DomMixin from 'ember-lifeline/mixins/dom';
 import layout from '../templates/components/ember-scrollbar';
 import { styleify } from '../util/css';
 import { THROTTLE_TIME_LESS_THAN_60_FPS_IN_MS } from './ember-scrollable';
+import { capitalize } from '@ember/string';
 
 const handleSelector = '.drag-handle';
 
@@ -117,7 +118,7 @@ export default Component.extend(DomMixin, {
    */
   jumpScroll(e) {
     // If the drag handle element was pressed, don't do anything here.
-    if (e.target === this.$(handleSelector)[0]) {
+    if (e.target === this.get('element').querySelector(handleSelector)) {
       return;
     }
     this._jumpScroll(e);
@@ -166,16 +167,22 @@ export default Component.extend(DomMixin, {
 
 
   _handleOffset() {
-    return this.$(handleSelector).offset()[this.get('offsetAttr')];
+    return this.get('element').querySelector(handleSelector).getBoundingClientRect()[this.get('offsetAttr')];
   },
 
 
   _handlePositionOffset() {
-    return this.$(handleSelector).position()[this.get('offsetAttr')];
+    let el = this.get('element').querySelector(handleSelector);
+    let position = {
+        left: el.offsetLeft,
+        top: el.offsetTop
+    }
+
+    return position[this.get('offsetAttr')];
   },
 
   _scrollbarOffset() {
-    return this.$().offset()[this.get('offsetAttr')];
+    return this.get('element').getBoundingClientRect()[this.get('offsetAttr')];
   },
 
   /**
@@ -194,7 +201,7 @@ export default Component.extend(DomMixin, {
 
 
   _scrollbarSize() {
-    return this.$()[this.get('sizeAttr')]();
+    return this.get('element')[`offset${capitalize(this.get('sizeAttr'))}`];
   },
 
   actions: {

addon/components/scroll-content-element.js

@@ -154,8 +154,8 @@ export default Component.extend(DomMixin, {
     if (Number.isNaN(offset)) {
       return;
     }
-    const scrollOffsetAttr = direction === 'X' ? 'scrollLeft' : 'scrollTop';
-    this.$()[scrollOffsetAttr](offset);
+    let scrollOffsetAttr = direction === 'X' ? 'scrollLeft' : 'scrollTop';
+    this.get('element')[scrollOffsetAttr] = offset
   },
 
   configureInitialScrollPosition() {
@@ -183,4 +183,3 @@ export default Component.extend(DomMixin, {
   }
 
 });
-

addon/services/scrollbar-thickness.js

@@ -1,20 +1,17 @@
 import { computed } from '@ember/object';
 import Service from '@ember/service';
-import $ from 'jquery';
+import { getWidth } from '../util/measurements';
 
 export default Service.extend({
   thickness: computed(() => {
-    const tempEl = $(`
-      <div class="scrollbar-width-tester" style="width: 50px; position: absolute; left: -100px;">
-        <div style="overflow: scroll;">
-          <div class="scrollbar-width-tester__inner"></div>
-        </div>
-      </div>
-    `);
-    $('body').append(tempEl);
-    const width = $(tempEl).width();
-    const widthMinusScrollbars = $('.scrollbar-width-tester__inner', tempEl).width();
-    tempEl.remove();
+    let tempEl = document.createElement('div');
+    tempEl.setAttribute('style', 'width: 50px; position: "absolute"; left: -100px;');
+    tempEl.classList.add('scrollbar-width-tester')
+    tempEl.innerHTML = `<div style="overflow: scroll;"><div class="scrollbar-width-tester__inner"></div></div>`;
+    document.body.appendChild(tempEl);
+
+    let width = getWidth(tempEl)
+    let widthMinusScrollbars = getWidth(tempEl.querySelector('.scrollbar-width-tester__inner'));
 
     return (width - widthMinusScrollbars);
   })

addon/util/measurements.js

@@ -0,0 +1,27 @@
+
+/**
+ * Replacement for jQuery $.height()
+ * Borrowed with thanks from https://github.com/nefe/You-Dont-Need-jQuery#2.2
+ */
+export function getHeight(el) {
+  let styles = window.getComputedStyle(el);
+  let height = el.offsetHeight;
+  let borderTopWidth = parseFloat(styles.borderTopWidth);
+  let borderBottomWidth = parseFloat(styles.borderBottomWidth);
+  let paddingTop = parseFloat(styles.paddingTop);
+  let paddingBottom = parseFloat(styles.paddingBottom);
+  return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
+}
+/**
+ * Replacement function for jQuery $.width()
+ * Borrowed with thanks from https://github.com/nefe/You-Dont-Need-jQuery#2.2
+ */
+export function getWidth(el) {
+  let styles = window.getComputedStyle(el);
+  let width = el.offsetWidth;
+  let borderLeftWidth = parseFloat(styles.borderLeftWidth);
+  let borderRightWidth = parseFloat(styles.borderRightWidth);
+  let paddingLeft = parseFloat(styles.paddingLeft);
+  let paddingRight = parseFloat(styles.paddingRight);
+  return width - borderLeftWidth - borderRightWidth - paddingRight - paddingLeft;
+} 

package.json

@@ -25,7 +25,7 @@
     "ember-cli-htmlbars": "^2.0.1",
     "ember-component-inbound-actions": "^1.3.0",
     "ember-element-resize-detector": "~0.4.0",
-    "ember-lifeline": "^3.0.1"
+    "ember-lifeline": "^4.1.5"
   },
   "devDependencies": {
     "@ember/optional-features": "^1.0.0",
@@ -47,7 +47,7 @@
     "ember-cli-uglify": "^2.0.0",
     "ember-code-snippet": "2.0.0",
     "ember-disable-prototype-extensions": "^1.1.2",
-    "ember-drag-drop": "0.4.6",
+    "ember-drag-drop": "0.7.0",
     "ember-export-application-global": "^2.0.0",
     "ember-load-initializers": "^1.1.0",
     "ember-maybe-import-regenerator": "^0.1.6",
@@ -62,7 +62,7 @@
     "qunit-dom": "^0.6.2"
   },
   "engines": {
-    "node": "6.* || 8.* || >= 10.*"
+    "node": ">= 10.*"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config"

tests/integration/components/ember-scrollbar-test.js

@@ -3,6 +3,8 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import { click, find, triggerEvent } from 'ember-native-dom-helpers';
+import jQuery from 'jquery';
+
 
 module('Integration | Component | ember scrollbar', function(hooks) {
   setupRenderingTest(hooks);
@@ -24,7 +26,7 @@ module('Integration | Component | ember scrollbar', function(hooks) {
   }
 
   test('Horizontal: offset and size get routed properly', async function(assert) {
-    assert.expect(2);
+    assert.expect(4);
 
     this.setProperties({
       size: 40,
@@ -43,13 +45,14 @@ module('Integration | Component | ember scrollbar', function(hooks) {
 
       </div>
     </div>`);
-
-    assert.equal(this.$(handleClass).position().left, this.get('offset'));
-    assert.equal(Number.parseInt(this.$(handleClass).css('width')), this.get('size'));
+    assert.equal(jQuery(handleClass).position().left, this.get('offset'));
+    assert.equal(Number.parseInt(jQuery(handleClass).css('width')), this.get('size'));
+    assert.equal(this.get('element').querySelector(handleClass).offsetLeft, this.get('offset'));
+    assert.equal(Number.parseInt(this.get('element').querySelector(handleClass).style.width), this.get('size'));
   });
 
   test('Vertical: offset and size get routed properly', async function(assert) {
-    assert.expect(2);
+    assert.expect(4);
 
     this.setProperties({
       size: 40,
@@ -69,8 +72,10 @@ module('Integration | Component | ember scrollbar', function(hooks) {
       </div>
     </div>`);
 
-    assert.equal(this.$(handleClass).position().top, this.get('offset'));
-    assert.equal(Number.parseInt(this.$(handleClass).css('height')), this.get('size'));
+    assert.equal(jQuery(handleClass).position().top, this.get('offset'));
+    assert.equal(Number.parseInt(jQuery(handleClass).css('height')), this.get('size'));
+    assert.equal(jQuery(handleClass).position().top, this.get('offset'));
+    assert.equal(Number.parseInt(jQuery(handleClass).css('height')), this.get('size'));
   });
 
 
@@ -81,9 +86,11 @@ module('Integration | Component | ember scrollbar', function(hooks) {
       size: 40,
       offset: 10
     });
+
     this.actions.onDragStart = function() {
       assert.ok(true);
     };
+
     this.actions.onJumpTo = function() {
       assert.ok(false);
     };