collide updates

ionic/collide/animation-percent.js

@@ -0,0 +1,58 @@
+/* Forked from Collide.js, MIT License. Julian Shapiro http://twitter.com/shapiro */
+
+import {Collide} from './collide'
+
+
+export function animationPercent(percent, elements, options, propertiesMap) {
+
+  if (!elements || !elements.length) {
+    return;
+  }
+
+  /* The length of the element set (in the form of a nodeList or an array of elements) is defaulted to 1 in case a
+     single raw DOM element is passed in (which doesn't contain a length property). */
+  var elementsLength = elements.length;
+  var elementsIndex = 0;
+  var eleData;
+
+
+  /**********************************
+      Animation Call-Wide Variables
+  **********************************/
+
+  /* A container for CSS unit conversion ratios (e.g. %, rem, and em ==> px) that is used to cache ratios across all elements
+     being animated in a single Collide call. Calculating unit ratios necessitates DOM querying and updating, and is therefore
+     avoided (via caching) wherever possible. This container is call-wide instead of page-wide to avoid the risk of using stale
+     conversion metrics across Collide animations that are not immediately consecutively chained. */
+  var callUnitConversionData = {
+        lastParent: null,
+        lastPosition: null,
+        lastFontSize: null,
+        lastPercentToPxWidth: null,
+        lastPercentToPxHeight: null,
+        lastEmToPx: null,
+        remToPx: null,
+        vwToPx: null,
+        vhToPx: null
+      };
+
+  /* A container for all the ensuing tween data and metadata associated with this call. This container gets pushed to the page-wide
+     Collide.State.calls array that is processed during animation ticking. */
+  var call = [];
+
+
+  /**************************
+     Element Set Iteration
+  **************************/
+
+  if (elements && elements.length) {
+    for (var i = 0, l = elements.length; i < l; i++) {
+      if (elements[i] && elements[i].parentElement) {
+
+        //animationProcess('percent', elements, i, options, propertiesMap, callUnitConversionData, call)
+
+      }
+    }
+  }
+
+};

ionic/collide/animation-process.js

@@ -635,8 +635,6 @@ export function animationProcess(action, elements, elementsIndex, options, prope
             parsePropertyValue(), calculateUnitRatios(), Element-Specific Units
           **********************************************************************/
 
-          /* Note: IE8 rounds to the nearest pixel when returning CSS values, thus we perform conversions using a measurement
-             of 100 (instead of 1) to give our ratios a precision of at least 2 decimal values. */
           var measurement = 100,
               unitRatios = {};
 

ionic/collide/animation.js

@@ -1,24 +1,23 @@
 import {Collide} from './collide'
 import {animationStart} from './animation-start'
 import {animationStop} from './animation-stop'
+import {animationPercent} from './animation-percent'
 import {startTick} from './tick'
 
 
 export class Animation {
   constructor() {
-    this._elements = null
+    this._elements = null;
 
-    this._options = {}
+    this._options = {};
-    this._properties = {}
+    this._properties = {};
-
-    this.isRunning = false
   }
 
   elements(ele) {
     if (!ele) {
-      this._elements = null
+      this._elements = null;
     } else {
-      this._elements = !ele.length ? [ele] : ele
+      this._elements = !ele.length ? [ele] : ele;
     }
   }
 
@@ -28,17 +27,21 @@ export class Animation {
   *************/
 
   start() {
-    let promise = animationStart(this._elements, this._options, this._properties)
+    let promise = animationStart(this._elements, this._options, this._properties);
 
     startTick();
 
-    return promise
+    return promise;
   }
 
   stop() {
-    let promise = animationStop(this._elements, this._options, this._properties)
+    let promise = animationStop(this._elements, this._options, this._properties);
 
-    return promise
+    return promise;
+  }
+
+  percent(ratio) {
+    animationPercent(ratio, this._elements, this._options, this._properties);
   }
 
 
@@ -46,23 +49,23 @@ export class Animation {
      Options
   ***********************/
   options(val) {
-    this._options = val || {}
+    this._options = val || {};
   }
 
   option(key, val) {
-    this._options[key] = val
+    this._options[key] = val;
   }
 
   removeOption(key) {
-    delete this._options[key]
+    delete this._options[key];
   }
 
   duration(val) {
-    this._options.duration = val
+    this._options.duration = val;
   }
 
   easing(val) {
-    this._options.easing = val
+    this._options.easing = val;
   }
 
 
@@ -71,15 +74,24 @@ export class Animation {
   **************************/
 
   properties(val) {
-    this._properties = val || {}
+    this._properties = val || {};
   }
 
   property(key, val) {
-    this._properties[key] = val
+    this._properties[key] = val;
   }
 
   removeProperty(key) {
-    delete this._properties[key]
+    delete this._properties[key];
+  }
+
+
+  /**************************
+     Misc
+  **************************/
+
+  debug(val) {
+    Collide.debug = !!val;
   }
 
 }

ionic/components/app/test/animations/main.html

@@ -12,6 +12,9 @@
 
   </div>
 
+  <p>
+    <input type="range" (input)="percent($event)" value="0" min="0" max="100" style="width:180px">
+  </p>
 
   <p>
     <button class="button button-primary" (click)="start($event)">Collide Start</button>
@@ -22,7 +25,7 @@
     <button class="button button-primary" (click)="velocityStart($event)">Velocity Start</button>
   </p>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>
 
 </body>
 </html>

ionic/components/app/test/animations/main.js

@@ -28,8 +28,13 @@ class IonicApp {
     q.then(()=> {
       console.log('animation complete')
     });
+  }
 
+  percent(ev) {
+    let ratio = parseFloat(ev.srcElement.value) / 100;
+    console.log('percent ratio', ratio)
 
+    this.animation.percent(ratio)
   }
 
   stop() {