diff --git a/addon/components/sortable-group.js b/addon/components/sortable-group.js index f3ad3de3..61032c9b 100644 --- a/addon/components/sortable-group.js +++ b/addon/components/sortable-group.js @@ -1,6 +1,6 @@ import Ember from 'ember'; import layout from '../templates/components/sortable-group'; -import computed from 'ember-new-computed'; +import { computed } from '@ember/object'; const { A, Component, get, set, run } = Ember; const a = A; const NO_MODEL = {}; diff --git a/addon/mixins/sortable-item.js b/addon/mixins/sortable-item.js index 4b6e1fe7..bc5eb1ef 100644 --- a/addon/mixins/sortable-item.js +++ b/addon/mixins/sortable-item.js @@ -1,5 +1,5 @@ import Ember from 'ember'; -import computed from 'ember-new-computed'; +import { computed } from '@ember/object'; const { Mixin, $, run } = Ember; const { Promise } = Ember.RSVP; @@ -103,6 +103,7 @@ export default Mixin.create({ */ isAnimated: computed(function() { let el = this.$(); + if (el === undefined || el === null) return false; let property = el.css('transition-property'); return /all|transform/.test(property); @@ -115,6 +116,7 @@ export default Mixin.create({ */ transitionDuration: computed(function() { let el = this.$(); + if (el === undefined || el === null) return 0; let rule = el.css('transition-duration'); let match = rule.match(/([\d\.]+)([ms]*)/); @@ -140,7 +142,9 @@ export default Mixin.create({ x: computed({ get() { if (this._x === undefined) { - let marginLeft = parseFloat(this.$().css('margin-left')); + let el = this.$() + if (el === undefined || el === null) return 0; + let marginLeft = parseFloat(el.css('margin-left')); this._x = this.element.scrollLeft + this.element.offsetLeft - marginLeft; } @@ -182,6 +186,7 @@ export default Mixin.create({ */ width: computed(function() { let el = this.$(); + if (el === undefined || el === null) return 0; let width = el.outerWidth(true); width += getBorderSpacing(el).horizontal; @@ -196,6 +201,7 @@ export default Mixin.create({ */ height: computed(function() { let el = this.$(); + if (el === undefined || el === null) return 0; let height = el.outerHeight(); let marginBottom = parseFloat(el.css('margin-bottom')); @@ -401,7 +407,9 @@ export default Mixin.create({ if (groupDirection === 'x') { let x = this.get('x'); - let dx = x - this.element.offsetLeft + parseFloat(this.$().css('margin-left')); + let el = this.$() + if (el === undefined || el === null) return 0; + let dx = x - this.element.offsetLeft + parseFloat(el.css('margin-left')); this.$().css({ transform: `translateX(${dx}px)` @@ -410,8 +418,9 @@ export default Mixin.create({ if (groupDirection === 'y') { let y = this.get('y'); let dy = y - this.element.offsetTop; - - this.$().css({ + let el = this.$() + if (el === undefined || el === null) return 0; + el.css({ transform: `translateY(${dy}px)` }); } @@ -485,6 +494,7 @@ export default Mixin.create({ @private */ _complete() { + if (this.isDestroyed || this.isDestroying) return; this.sendAction('onDragStop', this.get('model')); this.set('isDropping', false); this.set('wasDropped', true); @@ -539,9 +549,10 @@ function getX(event) { */ function getBorderSpacing(el) { el = $(el); - + if (el === undefined || el === null) return 0; let css = el.css('border-spacing'); // '0px 0px' - let [horizontal, vertical] = css.split(' '); + const [horizontal, initialVertical] = css.split(" "); + const vertical = initialVertical === undefined ? horizontal : initialVertical; return { horizontal: parseFloat(horizontal), diff --git a/addon/utils/arrangement.js b/addon/utils/arrangement.js index 41573da9..2ee814cf 100644 --- a/addon/utils/arrangement.js +++ b/addon/utils/arrangement.js @@ -98,7 +98,7 @@ export default class Arrangement { } walkTree(func) { - walk(this.root, func); + walk(this.root, func, [0]); } walkPath(path, func) { @@ -131,7 +131,7 @@ export default class Arrangement { } } -function walk(slot, func, path = [0]) { +function walk(slot, func, path) { func(slot, path); slot.children.forEach((child, index) => { diff --git a/addon/utils/gesture.js b/addon/utils/gesture.js index 4c07c3a7..b1b658bb 100644 --- a/addon/utils/gesture.js +++ b/addon/utils/gesture.js @@ -45,6 +45,7 @@ export default class Gesture { this.clientY = 0; this.listeners = []; this.isDestroyed = false; + this.isInAnimationFrame = false; } /** @@ -194,7 +195,14 @@ export default class Gesture { this.dx = this.x - this.ox; this.dy = this.y - this.oy; - this.onUpdate(this); + if (this.isInAnimationFrame === false){ + this.isInAnimationFrame = true; + window.requestAnimationFrame(() => { + if (this.onUpdate) this.onUpdate(this); + this.isInAnimationFrame = false; + }); + }; + } /** @@ -211,6 +219,7 @@ export default class Gesture { } } + /** @method waitingStop */ diff --git a/addon/utils/slot.js b/addon/utils/slot.js index 42a44e8e..19657346 100644 --- a/addon/utils/slot.js +++ b/addon/utils/slot.js @@ -153,7 +153,7 @@ export default class Slot { if (node.isDestroyed || node.isDestroying) { return; } - node.$().css({ width: '', height: '', transform: '' }).height(); + node.$().css({ width: '', height: '', transform: '' }); } /** @@ -164,7 +164,7 @@ export default class Slot { if (node.isDestroyed || node.isDestroying) { return; } - node.$().css('transition', 'none').height(); + node.$().css('transition', 'none'); } thaw() { @@ -172,7 +172,7 @@ export default class Slot { if (node.isDestroyed || node.isDestroying) { return; } - node.$().css('transition', '').height(); + node.$().css('transition', ''); } /** diff --git a/addon/utils/transition-duration.js b/addon/utils/transition-duration.js index 30716c09..23112ec3 100644 --- a/addon/utils/transition-duration.js +++ b/addon/utils/transition-duration.js @@ -11,6 +11,7 @@ export default function transitionDuration(el) { $(el).height(); // force re-flow let value = $(el).css('transition'); + if (value === null || value === undefined) return 0; let match = value.match(/(all|transform) ([\d\.]+)([ms]*)/); if (match) { diff --git a/addon/utils/transitionend.js b/addon/utils/transitionend.js index 60d21d60..ef6232ae 100644 --- a/addon/utils/transitionend.js +++ b/addon/utils/transitionend.js @@ -1,6 +1,9 @@ // Thanks to http://davidwalsh.name/css-animation-callback function whichTransitionEvent() { + if (typeof document === "undefined") { + return ""; + }; var t; var el = document.createElement('fake-element'); var transitions = { diff --git a/package.json b/package.json index bd91f524..90815ca9 100644 --- a/package.json +++ b/package.json @@ -43,9 +43,8 @@ "sortable" ], "dependencies": { - "ember-cli-babel": "^5.1.5", - "ember-cli-htmlbars": "^1.0.1", - "ember-new-computed": "^1.0.2" + "ember-cli-babel": "^6.6.0", + "ember-cli-htmlbars": "^1.0.1" }, "ember-addon": { "configPath": "tests/dummy/config",