diff --git a/addon/components/sortable-group.js b/addon/components/sortable-group.js index 15937b41..b881a7f2 100644 --- a/addon/components/sortable-group.js +++ b/addon/components/sortable-group.js @@ -37,24 +37,27 @@ export default Component.extend({ @property itemPosition @type Number */ - itemPosition: computed(function() { - let direction = this.get('direction'); - - return this.get(`sortedItems.firstObject.${direction}`) - this.get('sortedItems.firstObject.spacing'); - }).volatile(), - itemPositionX: computed('sortedItems', function () { - return 0 - this.get('sortedItems.firstObject.spacing'); - }).volatile(), - itemPositionY: computed('sortedItems', function () { - return 0 - this.get('sortedItems.firstObject.spacing'); - }).volatile(), + get itemPosition() { + let direction = get(this, 'direction'); + + return get(this, `sortedItems.firstObject.${direction}`) - get(this, 'sortedItems.firstObject.spacing'); + }, + + get itemPositionX() { + return 0 - get(this, 'sortedItems.firstObject.spacing'); + }, + + get itemPositionY() { + return 0 - get(this, 'sortedItems.firstObject.spacing'); + }, + /** @property sortedItems @type Array */ - sortedItems: computed('items', function() { - const items = a(this.get('items')); - const direction = this.get('direction'); + get sortedItems() { + const items = a(get(this, 'items')); + const direction = get(this, 'direction'); if (direction.length === 2) { const [first, second] = direction.split(''); @@ -62,7 +65,7 @@ export default Component.extend({ } else { return items.sortBy(direction); } - }).volatile(), + }, /** Register an item with this group. @@ -70,7 +73,7 @@ export default Component.extend({ @param {SortableItem} [item] */ registerItem(item) { - this.get('items').addObject(item); + get(this, 'items').addObject(item); }, /** @@ -79,7 +82,7 @@ export default Component.extend({ @param {SortableItem} [item] */ deregisterItem(item) { - this.get('items').removeObject(item); + get(this, 'items').removeObject(item); }, /** @@ -89,9 +92,9 @@ export default Component.extend({ @method prepare */ prepare() { - this._itemPosition = this.get('itemPosition'); - this._itemPositionX = this.get('itemPositionX'); - this._itemPositionY = this.get('itemPositionY'); + this._itemPosition = get(this, 'itemPosition'); + this._itemPositionX = get(this, 'itemPositionX'); + this._itemPositionY = get(this, 'itemPositionY'); }, /** @@ -99,7 +102,7 @@ export default Component.extend({ @method update */ update() { - let sortedItems = this.get('sortedItems'); + let sortedItems = get(this, 'sortedItems'); // Position of the first element let position = this._itemPosition; let positionX = this._itemPositionX; @@ -107,13 +110,13 @@ export default Component.extend({ // Just in case we haven’t called prepare first. if (position === undefined) { - position = this.get('itemPosition'); + position = get(this, 'itemPosition'); } if (positionX === undefined) { - positionX = this.get('itemPositionX'); + positionX = get(this, 'itemPositionX'); } if (positionY === undefined) { - positionY = this.get('itemPositionY'); + positionY = get(this, 'itemPositionY'); } let startX = positionX; @@ -125,7 +128,7 @@ export default Component.extend({ return !item.isDragging; }).uniqBy('x').length; sortedItems.forEach((item, index) => { - let direction = this.get('direction'); + let direction = get(this, 'direction'); if (get(this, 'direction').length > 1) { if (!get(item, 'isDragging')) { if (this._hasX(direction)) { @@ -184,8 +187,8 @@ export default Component.extend({ @method commit */ commit() { - let items = this.get('sortedItems'); - let groupModel = this.get('model'); + let items = get(this, 'sortedItems'); + let groupModel = get(this, 'model'); let itemModels = items.mapBy('model'); let draggedItem = items.findBy('wasDropped', true); let draggedModel; @@ -214,9 +217,13 @@ export default Component.extend({ }); if (groupModel !== NO_MODEL) { - this.sendAction('onChange', groupModel, itemModels, draggedModel); + if (typeof this['onChange'] === 'function') { + this['onChange'](groupModel, itemModels, draggedModel); + } } else { - this.sendAction('onChange', itemModels, draggedModel); + if (typeof this['onChange'] === 'function') { + this['onChange'](itemModels, draggedModel); + } } }, diff --git a/addon/mixins/sortable-item.js b/addon/mixins/sortable-item.js index 3963a737..40a10b85 100644 --- a/addon/mixins/sortable-item.js +++ b/addon/mixins/sortable-item.js @@ -125,21 +125,21 @@ export default Mixin.create({ @property isAnimated @type Boolean */ - isAnimated: computed(function() { + get isAnimated() { if (!this.element) { return; } let el = this.element; let property = getComputedStyle(el).transitionProperty; return /all|transform/.test(property); - }).volatile(), + }, /** The current transition duration in milliseconds. @property transitionDuration @type Number */ - transitionDuration: computed(function() { + get transitionDuration() { let el = this.element; let rule = getComputedStyle(el).transitionDuration; let match = rule.match(/([\d.]+)([ms]*)/); @@ -156,57 +156,55 @@ export default Mixin.create({ } return 0; - }).volatile(), + }, /** Horizontal position of the item. @property x @type Number */ - x: computed({ - get() { - if (this._x === undefined) { - let marginLeft = parseFloat(getComputedStyle(this.element).marginLeft); - this._x = this.element.scrollLeft + this.element.offsetLeft - marginLeft; - } + get x() { + if (this._x === undefined) { + let marginLeft = parseFloat(getComputedStyle(this.element).marginLeft); + this._x = this.element.scrollLeft + this.element.offsetLeft - marginLeft; + } - return this._x; - }, - set(_, value) { - if (value !== this._x) { - this._x = value; - this._scheduleApplyPosition(); - } - }, - }).volatile(), + return this._x; + }, + + set x(value) { + if (value !== this._x) { + this._x = value; + this._scheduleApplyPosition(); + } + }, /** Vertical position of the item relative to its offset parent. @property y @type Number */ - y: computed({ - get() { - if (this._y === undefined) { - this._y = this.element.offsetTop; - } + get y() { + if (this._y === undefined) { + this._y = this.element.offsetTop; + } - return this._y; - }, - set(key, value) { - if (value !== this._y) { - this._y = value; - this._scheduleApplyPosition(); - } + return this._y; + }, + + set y(value) { + if (value !== this._y) { + this._y = value; + this._scheduleApplyPosition(); } - }).volatile(), + }, /** Width of the item. @property height @type Number */ - width: computed(function() { + get width() { let el = this.element; let width = el.offsetWidth; let elStyles = getComputedStyle(el); @@ -217,14 +215,14 @@ export default Mixin.create({ width += getBorderSpacing(el).horizontal; return width; - }).volatile(), + }, /** Height of the item including margins. @property height @type Number */ - height: computed(function() { + get height() { let el = this.element; let height = el.offsetHeight; @@ -234,7 +232,7 @@ export default Mixin.create({ height += getBorderSpacing(el).vertical; return height; - }).volatile(), + }, /** @private @@ -405,7 +403,9 @@ export default Mixin.create({ this._tellGroup('prepare'); this.set('isDragging', true); - this.sendAction('onDragStart', this.get('model')); + if (typeof this['onDragStart'] === 'function') { + this['onDragStart'](this.get('model')); + } this._scrollOnEdges(drag); }, @@ -705,7 +705,7 @@ export default Mixin.create({ if (this.get('isAnimated')) { duration = this.get('transitionDuration'); } - + run.later(this, resolve, duration); }) }); @@ -716,7 +716,9 @@ export default Mixin.create({ @private */ _complete() { - this.sendAction('onDragStop', this.get('model')); + if (typeof this['onDragStop'] === 'function') { + this['onDragStop'](this.get('model')); + } this.set('isDropping', false); this.set('wasDropped', true); this._tellGroup('commit');