diff --git a/addon/components/cells/base.js b/addon/components/cells/base.js index 82a24cf2..02d0908a 100644 --- a/addon/components/cells/base.js +++ b/addon/components/cells/base.js @@ -1,5 +1,6 @@ import Ember from 'ember'; import layout from 'ember-light-table/templates/components/cells/base'; +import cssStyleify from 'ember-light-table/utils/css-styleify'; const { Component, @@ -20,16 +21,25 @@ const Cell = Component.extend({ layout, tagName: 'td', classNames: ['lt-cell'], - attributeBindings: ['width'], + attributeBindings: ['style'], classNameBindings: ['align', 'isSorted', 'column.cellClassNames'], - width: computed.readOnly('column.width'), isSorted: computed.readOnly('column.sorted'), + style: computed('column.width', function() { + return cssStyleify(this.get('column').getProperties(['width'])); + }), + align: computed('column.align', function() { return `align-${this.get('column.align')}`; }).readOnly(), + /** + * @property table + * @type {Table} + */ + table: null, + /** * @property column * @type {Column} @@ -65,7 +75,7 @@ const Cell = Component.extend({ return format.call(this, rawValue); } return rawValue; - }).readOnly() + }) }); Cell.reopenClass({ diff --git a/addon/components/columns/base.js b/addon/components/columns/base.js index 085b16d8..d6b846b8 100644 --- a/addon/components/columns/base.js +++ b/addon/components/columns/base.js @@ -1,5 +1,6 @@ import Ember from 'ember'; import layout from 'ember-light-table/templates/components/columns/base'; +import cssStyleify from 'ember-light-table/utils/css-styleify'; const { Component, @@ -21,20 +22,29 @@ const Column = Component.extend({ layout, tagName: 'th', classNames: ['lt-column'], - attributeBindings: ['width', 'colspan', 'rowspan'], + attributeBindings: ['style', 'colspan', 'rowspan'], classNameBindings: ['align', 'isGroupColumn:lt-group-column', 'isHideable', 'isSortable', 'isSorted', 'isResizable', 'column.classNames'], - width: computed.readOnly('column.width'), 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'), + style: computed('column.width', function() { + return cssStyleify(this.get('column').getProperties(['width'])); + }), + align: computed('column.align', function () { return `align-${this.get('column.align')}`; }).readOnly(), + /** + * @property table + * @type {Table} + */ + table: null, + /** * @property column * @type {Column} diff --git a/addon/components/light-table.js b/addon/components/light-table.js index 3c096187..407b49d4 100644 --- a/addon/components/light-table.js +++ b/addon/components/light-table.js @@ -1,12 +1,12 @@ import Ember from 'ember'; import layout from 'ember-light-table/templates/components/light-table'; import Table from 'ember-light-table/classes/Table'; +import cssStyleify from 'ember-light-table/utils/css-styleify'; const { assert, Component, - computed, - String:{htmlSafe} + computed } = Ember; /** @@ -102,10 +102,7 @@ const LightTable = Component.extend({ }).readOnly(), style: computed('height', function () { - let height = this.get('height'); - if (height) { - return htmlSafe(`height:${this.get('height')};`); - } + return cssStyleify(this.getProperties(['height'])); }), init() { diff --git a/addon/components/lt-column-resizer.js b/addon/components/lt-column-resizer.js index 820f936c..9983abff 100644 --- a/addon/components/lt-column-resizer.js +++ b/addon/components/lt-column-resizer.js @@ -9,8 +9,8 @@ export default Ember.Component.extend({ layout, classNameBindings: [':lt-column-resizer', 'isResizing'], column: null, - isResizing: false, + isResizing: false, startWidth: null, startX: null, @@ -31,8 +31,16 @@ export default Ember.Component.extend({ $(document).off('mouseup', this.__mouseUp); }, + click(e) { + /* + Prevent click events from propagating (i.e. onColumnClick) + */ + e.preventDefault(); + e.stopPropagation(); + }, + mouseDown(e) { - const $column = $(this.get('element')).parent('th'); + const $column = this._getColumn(); e.preventDefault(); e.stopPropagation(); @@ -49,7 +57,10 @@ export default Ember.Component.extend({ e.preventDefault(); e.stopPropagation(); + const $column = this._getColumn(); + this.set('isResizing', false); + this.set('column.width', `${$column.width()}px`); this.sendAction('columnResized', this.get('column.width')); } }, @@ -59,10 +70,15 @@ export default Ember.Component.extend({ e.preventDefault(); e.stopPropagation(); + const $column = this._getColumn(); const { startX, startWidth } = this.getProperties(['startX', 'startWidth']); const width = startWidth + (e.pageX - startX); - this.set('column.width', `${width}px`); + $column.width(`${width}px`); } + }, + + _getColumn() { + return $(this.get('element')).parent('th'); } }); diff --git a/addon/styles/addon.css b/addon/styles/addon.css index 72121db6..03809468 100644 --- a/addon/styles/addon.css +++ b/addon/styles/addon.css @@ -1,8 +1,13 @@ .ember-light-table { height: inherit; overflow: auto; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } .ember-light-table table { @@ -29,13 +34,22 @@ .ember-light-table .lt-head-wrap, .ember-light-table .lt-foot-wrap { - flex: 0 1 auto; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; } .ember-light-table .lt-body-wrap { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - flex: 1 0 auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; } .ember-light-table .lt-column { @@ -44,7 +58,9 @@ .ember-light-table .lt-scrollable { width: 100%; - flex: 1 0 auto; + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; } .ember-light-table .align-left { @@ -65,7 +81,10 @@ .ember-light-table .lt-column.is-sortable { cursor: pointer; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .ember-light-table .lt-column .lt-column-resizer { diff --git a/addon/templates/components/cells/base.hbs b/addon/templates/components/cells/base.hbs index 518efb4e..fb9a3167 100644 --- a/addon/templates/components/cells/base.hbs +++ b/addon/templates/components/cells/base.hbs @@ -1,5 +1,5 @@ {{#if column.cellComponent}} - {{component column.cellComponent tableActions=tableActions column=column row=row value=value}} + {{component column.cellComponent tableActions=tableActions table=table column=column row=row value=value rawValue=rawValue}} {{else}} {{value}} {{/if}} diff --git a/addon/templates/components/lt-body.hbs b/addon/templates/components/lt-body.hbs index 64414259..4e4d1f19 100644 --- a/addon/templates/components/lt-body.hbs +++ b/addon/templates/components/lt-body.hbs @@ -12,6 +12,7 @@ {{else}} {{#each rows as |row|}} {{lt-row row columns + table=table tableActions=tableActions canExpand=canExpand canSelect=canSelect diff --git a/addon/templates/components/lt-row.hbs b/addon/templates/components/lt-row.hbs index 249b954d..c2266435 100644 --- a/addon/templates/components/lt-row.hbs +++ b/addon/templates/components/lt-row.hbs @@ -1,5 +1,6 @@ {{#each columns as |column|}} {{component (concat 'light-table/cells/' column.cellType) column row + table=table rawValue=(get row column.valuePath) tableActions=tableActions}} {{/each}} diff --git a/addon/utils/css-styleify.js b/addon/utils/css-styleify.js new file mode 100644 index 00000000..24797a4b --- /dev/null +++ b/addon/utils/css-styleify.js @@ -0,0 +1,20 @@ +import Ember from 'ember'; + +const { + isPresent, + String: { dasherize, htmlSafe } +} = Ember; + +export default function cssStyleify(hash = {}) { + let styles = []; + + Object.keys(hash).forEach(key => { + let value = hash[key]; + + if(isPresent(value)) { + styles.push(`${dasherize(key)}: ${value}`); + } + }); + + return htmlSafe(styles.join('; ')); +} diff --git a/ember-cli-build.js b/ember-cli-build.js index 9d34f512..d515b4cf 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -4,8 +4,12 @@ var EmberAddon = require('ember-cli/lib/broccoli/ember-addon'); module.exports = function(defaults) { var app = new EmberAddon(defaults, { - snippetSearchPaths: ['addon','tests/dummy/app'], - snippetPaths: ['snippets','tests/dummy/snippets'] + snippetSearchPaths: ['addon', 'tests/dummy/app'], + snippetPaths: ['snippets', 'tests/dummy/snippets'], + autoprefixer: { + browsers: ['last 2 versions'], + cascade: false + } }); return app.toTree(); diff --git a/package.json b/package.json index c1b3daee..896be0b8 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "ember-ajax": "2.5.1", "ember-cli": "2.6.3", "ember-cli-app-version": "^2.0.0", + "ember-cli-autoprefixer": "0.6.0", "ember-cli-blanket": "0.9.9", "ember-cli-changelog": "0.3.4", "ember-cli-dependency-checker": "^1.2.0", diff --git a/tests/integration/components/light-table/cells/base-test.js b/tests/integration/components/light-table/cells/base-test.js index 82d7fadd..42757fdc 100644 --- a/tests/integration/components/light-table/cells/base-test.js +++ b/tests/integration/components/light-table/cells/base-test.js @@ -1,14 +1,15 @@ import Ember from 'ember'; import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -import { Row, Column} from 'ember-light-table'; +import { Row, Column } from 'ember-light-table'; moduleForComponent('light-table/cells/base', 'Integration | Component | Cells | base', { integration: true }); test('it renders', function(assert) { - this.render(hbs`{{light-table/cells/base}}`); + this.set('column', new Column()); + this.render(hbs`{{light-table/cells/base column=column}}`); assert.equal(this.$().text().trim(), ''); }); diff --git a/tests/integration/components/light-table/columns/base-test.js b/tests/integration/components/light-table/columns/base-test.js index c3ea0cc5..0020468a 100644 --- a/tests/integration/components/light-table/columns/base-test.js +++ b/tests/integration/components/light-table/columns/base-test.js @@ -1,5 +1,6 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; +import { Column } from 'ember-light-table'; moduleForComponent('light-table/columns/base', 'Integration | Component | Columns | base', { integration: true @@ -8,7 +9,7 @@ moduleForComponent('light-table/columns/base', 'Integration | Component | Column test('it renders', function(assert) { // Set any properties with this.set('myProperty', 'value'); // Handle any actions with this.on('myAction', function(val) { ... });" - - this.render(hbs`{{light-table/columns/base}}`); + this.set('column', new Column()); + this.render(hbs`{{light-table/columns/base column=column}}`); assert.equal(this.$().text().trim(), ''); });