collide updates

ionic/collide/animation.js

@@ -3,6 +3,7 @@ import {Collide} from './collide'
 import {processElement} from './process-element'
 import {animationStop} from './animation-stop'
 import {startTick} from './tick'
+import {dom} from 'ionic/util'
 
 const data = Collide.data;
 
@@ -12,6 +13,8 @@ export class Animation {
     this._elements = null;
     this._options = {};
     this._properties = {};
+    this._resolve = null;
+    this._call = null;
   }
 
   elements(ele) {
@@ -22,7 +25,25 @@ export class Animation {
     }
   }
 
-  _setupElements(clearCache) {
+  _setupElements(clearCache, onNextFrame) {
+
+    // ensure another animation wasnt about to start
+    if (this._nextAF) {
+      dom.rafCancel(this._nextAF);
+    }
+
+    if (this.isAnimating()) {
+      this.stop();
+    }
+
+    this._promise = new Promise(res => {
+      this._resolve = res;
+    });
+
+    this._call = null;
+
+    // in the next frame, do all the DOM GETs to load element info
+    this._nextAF = dom.raf(() => {
       /**********************************
          Animation Call-Wide Variables
       **********************************/
@@ -47,15 +68,26 @@ export class Animation {
 
       this._options = util.extend({}, Collide.defaults, this._options);
 
+      // get the elements ready
       for (var i = 0, ii = this._elements.length; i < ii; i++) {
         processElement('start', this, i, clearCache);
       }
+
+      onNextFrame();
+    });
+
   }
 
   _queueAnimation() {
     /* Switch on the element's animating flag. */
+    if (this._call === null) return;
+
+    var eleData;
     for (var i = 0, ii = this._elements.length, element; i < ii && (element = this._elements[i]); i++) {
-      data(element).isAnimating = true;
+      eleData = data(element);
+      if (eleData) {
+        eleData.isAnimating = true;
+      }
 
       /*********************
           Auto-Dequeuing
@@ -87,25 +119,35 @@ export class Animation {
   }
 
   start() {
-    // get the elements ready
-    if (this.isAnimating()) {
-      this.stop();
-      if (this._resolve) {
-        this._resolve();
-      }
-    }
+    var clearCache = (this._aniType !== 'start');
 
-    this._resolve;
-    this._promise = new Promise(res => {
-      this._resolve = res;
+    this._setupElements(clearCache, () => {
+      this._aniType = 'start';
+      this._queueAnimation();
     });
 
-    this._setupElements(this._lastType !== 'start');
+    return this._promise;
+  }
 
-    this._lastType = 'start';
+  ready() {
+    var clearCache = (this._aniType !== 'percent');
+
+    this._setupElements(clearCache, () => {
+      this._aniType = 'percent';
+    });
+
+    return this._promise;
+  }
+
+  percent(percentComplete) {
+    // go to and stop at a specific point in the animation
+    if (this._aniType = 'percent') {
+      this._options.percentComplete = percentComplete;
 
       this._queueAnimation();
-    return this._promise;
+
+      startTick();
+    }
   }
 
   stop() {
@@ -118,37 +160,6 @@ export class Animation {
     animationStop(this._elements, 'finish');
   }
 
-  ready() {
-    // get the elements ready
-    if (this.isAnimating()) {
-      this.stop();
-      if (this._resolve) {
-        this._resolve();
-      }
-    }
-
-    this._resolve;
-    this._promise = new Promise(res => {
-      this._resolve = res;
-    });
-
-    this._setupElements(this._lastType !== 'percent');
-
-    this._lastType = 'percent';
-
-    return this._promise;
-  }
-
-  percent(percentComplete) {
-    // go to and stop at a specific point in the animation
-    // must call ready() first
-    this._options.percentComplete = parseFloat(percentComplete);
-
-    this._queueAnimation();
-
-    startTick();
-  }
-
   isAnimating() {
     var eleData;
     if (this._elements) {

ionic/collide/complete-call.js

@@ -155,7 +155,7 @@ export function completeCall(callIndex, isStopped) {
   /* Iterate through the calls array to determine if this was the final in-progress animation.
      If so, set a flag to end ticking and clear the calls array. */
   for (var j = 0, jj = Collide.State.calls.length; j < jj; j++) {
-    if (Collide.State.calls[j] !== false) {
+    if (Collide.State.calls[j] !== false && Collide.State.calls[j][0]) {
       remainingCallsExist = true;
       break;
     }

ionic/collide/process-element.js

@@ -613,8 +613,6 @@ export function processElement(action, animation, elementIndex, clearCache) {
         };
 
         if (Collide.debug) console.log('tweensContainer (' + property + '): ' + JSON.stringify(tweensContainer[property]), element);
-
-        console.log('processElement parsePropertyValue: startValue', startValue, 'currentValue', currentValue, 'endValue',  endValue);
       }
 
       /* Along with its property data, store a reference to the element itself onto tweensContainer. */

ionic/collide/tick.js

@@ -65,6 +65,10 @@ function tick(timestamp) {
           firstTick = !!timeStart,
           tweenDummyValue = null;
 
+      if (!call) {
+        continue;
+      }
+
       /* If timeStart is undefined, then this is the first time that this call has been processed by tick().
          We assign timeStart now so that its value is as close to the real animation start time as possible.
          (Conversely, had timeStart been defined when this call was added to Collide.State.calls, the delay
@@ -79,7 +83,7 @@ function tick(timestamp) {
 
       var percentComplete;
       if (opts.percentComplete !== undefined) {
-        percentComplete = Math.max(Math.min(opts.percentComplete, 1), 0);
+        percentComplete = Math.max(Math.min(parseFloat(opts.percentComplete), 1), 0);
 
       } else {
         /* The tween's completion percentage is relative to the tween's start time, not the tween's start value