Merge pull request #593 from donaldwasserman/feat/remove-jquery

Remove jQuery usage
adopted-ember-addons · Oct 29, 2018 · 9ca4931 · 9ca4931
2 parents fd18f5b + 3035c09
commit 9ca4931
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 24 deletions.
diff --git a/addon/components/lt-column-resizer.js b/addon/components/lt-column-resizer.js
@@ -1,7 +1,7 @@
-import $ from 'jquery';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import layout from '../templates/components/lt-column-resizer';
+import closest from '../utils/closest';
 
 const TOP_LEVEL_CLASS = '.ember-light-table';
 
@@ -15,8 +15,8 @@ export default Component.extend({
   startWidth: null,
   startX: null,
 
-  $column: computed(function() {
-    return $(this.get('element')).parent('th');
+  colElement: computed(function() {
+    return this.get('element').parentNode;
   }).volatile().readOnly(),
 
   didInsertElement() {
@@ -25,15 +25,14 @@ export default Component.extend({
     this.__mouseMove = this._mouseMove.bind(this);
     this.__mouseUp = this._mouseUp.bind(this);
 
-    $(document).on('mousemove', this.__mouseMove);
-    $(document).on('mouseup', this.__mouseUp);
+    document.addEventListener('mousemove', this.__mouseMove);
+    document.addEventListener('mouseup', this.__mouseUp);
   },
 
   willDestroyElement() {
     this._super(...arguments);
-
-    $(document).off('mousemove', this.__mouseMove);
-    $(document).off('mouseup', this.__mouseUp);
+    document.removeEventListener('mousemove', this.__mouseMove);
+    document.removeEventListener('mouseip', this.__mouseUp);
   },
 
   click(e) {
@@ -45,33 +44,35 @@ export default Component.extend({
   },
 
   mouseDown(e) {
-    let $column = this.get('$column');
+    let column = this.get('colElement');
 
     e.preventDefault();
     e.stopPropagation();
 
     this.setProperties({
       isResizing: true,
-      startWidth: $column.outerWidth(),
+      startWidth: column.offsetWidth,
       startX: e.pageX
     });
 
-    this.$().closest(TOP_LEVEL_CLASS).addClass('is-resizing');
+    let topLevel = closest(this.get('element'), TOP_LEVEL_CLASS);
+    topLevel.classList.add('is-resizing');
   },
 
   _mouseUp(e) {
     if (this.get('isResizing')) {
       e.preventDefault();
       e.stopPropagation();
 
-      let $column = this.get('$column');
-      let width = `${$column.outerWidth()}px`;
+      let column = this.get('colElement');
+      let width = `${column.offsetWidth}px`;
 
       this.set('isResizing', false);
       this.set('column.width', width);
 
+      let topLevel = closest(this.get('element'), TOP_LEVEL_CLASS);
+      topLevel.classList.remove('is-resizing');
       this.onColumnResized(width);
-      this.$().closest(TOP_LEVEL_CLASS).removeClass('is-resizing');
     }
   },
 
@@ -85,16 +86,18 @@ export default Component.extend({
       let { startX, startWidth } = this.getProperties(['startX', 'startWidth']);
       let width = `${Math.max(startWidth + (e.pageX - startX), minResizeWidth)}px`;
 
-      let $column = this.get('$column');
-      let $index = this.get('table.visibleColumns').indexOf(this.get('column')) + 1;
-      let $table = this.$().closest(TOP_LEVEL_CLASS);
-
-      $column.outerWidth(width);
-      $(`thead td.lt-scaffolding:nth-child(${$index})`, $table).outerWidth(width);
-      $(`tfoot td.lt-scaffolding:nth-child(${$index})`, $table).outerWidth(width);
+      let column = this.get('colElement');
+      let index = this.get('table.visibleColumns').indexOf(this.get('column')) + 1;
+      let table = closest(this.get('element'), TOP_LEVEL_CLASS);
 
+      column.width = width;
+      table.querySelector(`thead td.lt-scaffolding:nth-child(${index})`).style.width = width;
+      table.querySelector(`tfoot td.lt-scaffolding:nth-child(${index})`).style.width = width;
       if (resizeOnDrag) {
-        $(`tbody td:nth-child(${$index})`, $table).outerWidth(width);
+        let cols = table.querySelectorAll(`tbody td:nth-child(${index})`);
+        cols.forEach((col) => {
+          col.style.width = width;
+        });
       }
     }
   },

diff --git a/addon/components/lt-infinity.js b/addon/components/lt-infinity.js
@@ -16,7 +16,7 @@ export default Component.extend(InViewportMixin, {
     this._super(...arguments);
 
     let scrollBuffer = this.get('scrollBuffer');
-    let width = this.$().width();
+    let width = this.element.offsetWidth;
     let scrollableContent = this.get('scrollableContent');
 
     this.setProperties({

diff --git a/addon/utils/closest.js b/addon/utils/closest.js
@@ -0,0 +1,20 @@
+
+/**
+ * A polyfill for jQuery .closest() method
+ * @param  { Object } el     Dom element to start from
+ * @param  { String } selector Selector to match
+ * @return { Object }          The closest matching node or null
+ */
+const closest = (el, selector) => {
+  let parent;
+  while (el) {
+    parent = el.parentElement;
+    if (parent && parent.matches(selector)) {
+      return parent;
+    }
+    el = parent;
+  }
+  return null;
+};
+
+export default closest;
diff --git a/tests/helpers/table-columns.js b/tests/helpers/table-columns.js
@@ -57,3 +57,50 @@ export const GroupedColumns = [{
     valuePath: 'country'
   }]
 }];
+
+export const ResizableColumns = [{
+  label: 'User Details',
+  sortable: false,
+  align: 'center',
+
+  subColumns: [{
+    label: 'Avatar',
+    valuePath: 'avatar',
+    width: '60px',
+    sortable: false,
+    cellComponent: 'user-avatar'
+  }, {
+    label: 'First',
+    resizable: true,
+    valuePath: 'firstName',
+    width: '150px',
+    minResizeWidth: 75
+  }, {
+    label: 'Last',
+    resizable: true,
+    valuePath: 'lastName',
+    width: '150px',
+    minResizeWidth: 75
+  }]
+}, {
+  label: 'Contact Information',
+  sortable: false,
+  align: 'center',
+
+  subColumns: [{
+    label: 'Address',
+    resizable: true,
+    valuePath: 'address',
+    minResizeWidth: 100
+  }, {
+    label: 'State',
+    resizable: true,
+    valuePath: 'state',
+    minResizeWidth: 100
+  }, {
+    label: 'Country',
+    resizable: true,
+    valuePath: 'country',
+    minResizeWidth: 100
+  }]
+}];
diff --git a/tests/integration/components/light-table-test.js b/tests/integration/components/light-table-test.js
@@ -5,7 +5,7 @@ import { module, test } from 'qunit';
 import hbs from 'htmlbars-inline-precompile';
 import setupMirageTest from 'ember-cli-mirage/test-support/setup-mirage';
 import Table from 'ember-light-table';
-import Columns from '../../helpers/table-columns';
+import Columns, { ResizableColumns } from '../../helpers/table-columns';
 import hasClass from '../../helpers/has-class';
 import RowComponent from 'ember-light-table/components/lt-row';
 import Component from '@ember/component';
@@ -260,4 +260,17 @@ module('Integration | Component | light table', function(hooks) {
       await click(element);
     }
   });
+
+  test('dragging resizes columns', async function(assert) {
+    let table = new Table(ResizableColumns, this.server.createList('user', 10));
+    this.setProperties({ table });
+    await render(hbs `
+      {{#light-table table height='40vh' as |t|}}
+        {{t.head fixed=true}}
+        {{t.body}}
+      {{/light-table}}
+    `);
+    let ths = this.element.querySelectorAll('th.is-resizable');
+    assert.equal(ths.length, 5);
+  });
 });