Merge pull request adopted-ember-addons#18 from jgwhite/wait-on-run-loop

Use run loop to schedule _complete
commoncurriculum · May 3, 2015 · 34ca866 · 34ca866
2 parents 3f8182f + 205c610
commit 34ca866
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 14 deletions.
diff --git a/addon/mixins/sortable-item.js b/addon/mixins/sortable-item.js
@@ -1,6 +1,6 @@
 import Ember from 'ember';
-import transitionend from '../utils/transitionend';
 const { Mixin, $, computed, run } = Ember;
+const { Promise } = Ember.RSVP;
 
 export default Mixin.create({
   classNames: ['sortable-item'],
@@ -77,10 +77,33 @@ export default Mixin.create({
   isAnimated: computed(function() {
     let el = this.$();
     let property = el.css('transition-property');
-    let duration = parseFloat(el.css('transition-duration'));
-    let result = property.match(/all|transform/) && duration > 0;
 
-    return !!result;
+    return /all|transform/.test(property);
+  }).volatile(),
+
+  /**
+    The current transition duration in milliseconds.
+
+    @property transitionDuration
+    @type Number
+  */
+  transitionDuration: computed(function() {
+    let el = this.$();
+    let rule = el.css('transition-duration');
+    let match = rule.match(/([\d\.]+)([ms]*)/);
+
+    if (match) {
+      let value = parseFloat(match[1]);
+      let unit = match[2];
+
+      if (unit === 's') {
+        value = value * 1000;
+      }
+
+      return value;
+    }
+
+    return 0;
   }).volatile(),
 
   /**
@@ -243,12 +266,26 @@ export default Mixin.create({
 
     this._tellGroup('update');
 
-    run.next(() => {
-      if (this.get('isAnimated')) {
-        this.$().one(transitionend, run.bind(this, '_complete'));
-      } else {
-        this._complete();
-      }
+    this._waitForTransition()
+      .then(run.bind(this, '_complete'));
+  },
+
+  /**
+    @method _waitForTransition
+    @private
+    @return Promise
+  */
+  _waitForTransition() {
+    return new Promise(resolve => {
+      run.next(() => {
+        let duration = 0;
+
+        if (this.get('isAnimated')) {
+          duration = this.get('transitionDuration');
+        }
+
+        run.later(this, resolve, duration);
+      });
     });
   },
 

diff --git a/tests/unit/mixins/sortable-item-test.js b/tests/unit/mixins/sortable-item-test.js
@@ -38,19 +38,36 @@ module('mixin:sortable-item', {
 });
 
 test('isAnimated', function(assert) {
-  subject.$().css({ transition: 'all .25s' });
+  subject.$().css({ transition: 'all' });
   assert.equal(subject.get('isAnimated'), true);
 
-  subject.$().css({ transition: 'all 0s' });
-  assert.equal(subject.get('isAnimated'), false);
+  subject.$().css({ transition: 'transform' });
+  assert.equal(subject.get('isAnimated'), true);
 
-  subject.$().css({ transition: 'color .25s' });
+  subject.$().css({ transition: 'color' });
   assert.equal(subject.get('isAnimated'), false);
 
   subject.$().css({ transition: 'none' });
   assert.equal(subject.get('isAnimated'), false);
 });
 
+test('transitionDuration', function(assert) {
+  subject.$().css({ transition: 'all .25s' });
+  assert.equal(subject.get('transitionDuration'), 250);
+
+  subject.$().css({ transition: 'all 250ms' });
+  assert.equal(subject.get('transitionDuration'), 250);
+
+  subject.$().css({ transition: 'all 0s' });
+  assert.equal(subject.get('transitionDuration'), 0);
+
+  subject.$().css({ transition: 'all 0ms' });
+  assert.equal(subject.get('transitionDuration'), 0);
+
+  subject.$().css({ transition: 'none' });
+  assert.equal(subject.get('transitionDuration'), 0);
+});
+
 test('get y', function(assert) {
   assert.equal(subject.get('y'), subject.element.offsetTop,
     'expected y to be element.offsetTop');