[FEATURE] minResizeWidth + Event bubbling fix (#244)

adopted-ember-addons · Oct 29, 2016 · bc82287 · bc82287
1 parent 6a376ee
commit bc82287
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 18 deletions.
diff --git a/addon/classes/Column.js b/addon/classes/Column.js
@@ -77,6 +77,14 @@ export default class Column extends Ember.Object.extend({
    */
   align: 'left',
 
+  /**
+   * The minimum width (in px) that this column can be resized to.
+   * @property minResizeWidth
+   * @type {Number}
+   * @default 0
+   */
+  minResizeWidth: 0,
+
   /**
    * An array of sub columns to be grouped together
    * @property subColumns

diff --git a/addon/components/columns/base.js b/addon/components/columns/base.js
@@ -23,13 +23,14 @@ const Column = Component.extend({
   tagName: 'th',
   classNames: ['lt-column'],
   attributeBindings: ['style', 'colspan', 'rowspan'],
-  classNameBindings: ['align', 'isGroupColumn:lt-group-column', 'isHideable', 'isSortable', 'isSorted', 'isResizable', 'column.classNames'],
+  classNameBindings: ['align', 'isGroupColumn:lt-group-column', 'isHideable', 'isSortable', 'isSorted', 'isResizable', 'isResizing', 'column.classNames'],
 
   isGroupColumn: computed.readOnly('column.isGroupColumn'),
   isSortable: computed.readOnly('column.sortable'),
   isSorted: computed.readOnly('column.sorted'),
   isHideable: computed.readOnly('column.hideable'),
   isResizable: computed.readOnly('column.resizable'),
+  isResizing: false,
 
   style: computed('column.width', function() {
     return cssStyleify(this.get('column').getProperties(['width']));

diff --git a/addon/components/lt-column-resizer.js b/addon/components/lt-column-resizer.js
@@ -2,7 +2,8 @@ import Ember from 'ember';
 import layout from '../templates/components/lt-column-resizer';
 
 const {
-  $
+  $,
+  computed
 } = Ember;
 
 export default Ember.Component.extend({
@@ -15,6 +16,10 @@ export default Ember.Component.extend({
   startWidth: null,
   startX: null,
 
+  $column: computed(function() {
+    return $(this.get('element')).parent('th');
+  }).volatile().readOnly(),
+
   didInsertElement() {
     this._super(...arguments);
 
@@ -41,28 +46,33 @@ export default Ember.Component.extend({
   },
 
   mouseDown(e) {
-    let $column = this._getColumn();
+    let $column = this.get('$column');
 
     e.preventDefault();
     e.stopPropagation();
 
     this.setProperties({
       isResizing: true,
-      startWidth: $column.width(),
+      startWidth: $column.outerWidth(),
       startX: e.pageX
     });
+
+    this.$().closest('.ember-light-table').addClass('is-resizing');
   },
 
   _mouseUp(e) {
     if (this.get('isResizing')) {
       e.preventDefault();
       e.stopPropagation();
 
-      let $column = this._getColumn();
+      let $column = this.get('$column');
+      let width = `${$column.outerWidth()}px`;
 
       this.set('isResizing', false);
-      this.set('column.width', `${$column.width()}px`);
-      this.sendAction('columnResized', this.get('column.width'));
+      this.set('column.width', width);
+
+      this.sendAction('columnResized', width);
+      this.$().closest('.ember-light-table').removeClass('is-resizing');
     }
   },
 
@@ -72,19 +82,16 @@ export default Ember.Component.extend({
       e.stopPropagation();
 
       let resizeOnDrag = this.get('resizeOnDrag');
-      let $column = this._getColumn();
+      let $column = this.get('$column');
+      let minResizeWidth = this.get('column.minResizeWidth');
       let { startX, startWidth } = this.getProperties(['startX', 'startWidth']);
-      let width = startWidth + (e.pageX - startX);
+      let width = Math.max(startWidth + (e.pageX - startX), minResizeWidth);
 
       if (resizeOnDrag) {
         this.set('column.width', `${width}px`);
       } else {
-        $column.width(`${width}px`);
+        $column.outerWidth(`${width}px`);
       }
     }
-  },
-
-  _getColumn() {
-    return $(this.get('element')).parent('th');
   }
 });
diff --git a/addon/styles/addon.css b/addon/styles/addon.css
@@ -87,6 +87,14 @@
           user-select: none;
 }
 
+.ember-light-table .lt-column.is-resizing {
+  pointer-events: none;
+}
+
+.ember-light-table.is-resizing {
+  cursor: col-resize;
+}
+
 .ember-light-table .lt-column .lt-column-resizer {
   width: 5px;
   cursor: col-resize;

diff --git a/addon/templates/components/columns/base.hbs b/addon/templates/components/columns/base.hbs
@@ -8,5 +8,5 @@
 {{/if}}
 
 {{#if isResizable}}
-  {{lt-column-resizer column=column resizeOnDrag=resizeOnDrag columnResized=(action 'columnResized')}}
+  {{lt-column-resizer column=column resizeOnDrag=resizeOnDrag isResizing=(mut isResizing) columnResized=(action 'columnResized')}}
 {{/if}}
diff --git a/tests/dummy/app/controllers/resizable.js b/tests/dummy/app/controllers/resizable.js
@@ -17,24 +17,29 @@ export default TableController.extend({
       label: 'First Name',
       valuePath: 'firstName',
       resizable: true,
+      minResizeWidth: 50,
       width: '150px'
     }, {
       label: 'Last Name',
       valuePath: 'lastName',
       resizable: true,
+      minResizeWidth: 50,
       width: '150px'
     }, {
       label: 'Address',
       valuePath: 'address',
-      resizable: true
+      resizable: true,
+      minResizeWidth: 100
     }, {
       label: 'State',
       valuePath: 'state',
-      resizable: true
+      resizable: true,
+      minResizeWidth: 100
     }, {
       label: 'Country',
       valuePath: 'country',
-      resizable: true
+      resizable: true,
+      minResizeWidth: 100
     }];
   })
 });