Convert util.motion to ES6

diff --git a/js/foundation.util.motion.js b/js/foundation.util.motion.js
index f612b10fbb41e2d9374ea9de1a674417cf9c89f7..0243e97fb99a086c30073026ce079d6d32ec82dc 100644 (file)
--- a/js/foundation.util.motion.js
+++ b/js/foundation.util.motion.js
@@ -2,11 +2,48 @@
  * Motion module.
  * @module foundation.motion
  */
-!function($, Foundation) {
 
-var initClasses   = ['mui-enter', 'mui-leave'];
-var activeClasses = ['mui-enter-active', 'mui-leave-active'];
+const initClasses   = ['mui-enter', 'mui-leave'];
+const activeClasses = ['mui-enter-active', 'mui-leave-active'];
 
+export const Motion = {
+  animateIn: function(element, animation, cb) {
+    animate(true, element, animation, cb);
+  },
+
+  animateOut: function(element, animation, cb) {
+    animate(false, element, animation, cb);
+  }
+}
+
+export function Move(duration, elem, fn){
+  var anim, prog, start = null;
+  // console.log('called');
+
+  function move(ts){
+    if(!start) start = window.performance.now();
+    // console.log(start, ts);
+    prog = ts - start;
+    fn.apply(elem);
+
+    if(prog < duration){ anim = window.requestAnimationFrame(move, elem); }
+    else{
+      window.cancelAnimationFrame(anim);
+      elem.trigger('finished.zf.animate', [elem]).triggerHandler('finished.zf.animate', [elem]);
+    }
+  }
+  anim = window.requestAnimationFrame(move);
+}
+
+/**
+ * Animates an element in or out using a CSS transition class.
+ * @function
+ * @private
+ * @param {Boolean} isIn - Defines if the animation is in or out.
+ * @param {Object} element - jQuery or HTML object to animate.
+ * @param {String} animation - CSS class to use.
+ * @param {Function} cb - Callback to run when animation is finished.
+ */
 function animate(isIn, element, animation, cb) {
   element = $(element).eq(0);
 
@@ -17,28 +54,26 @@ function animate(isIn, element, animation, cb) {
 
   // Set up the animation
   reset();
-  element.addClass(animation)
-         .css('transition', 'none');
-        //  .addClass(initClass);
-  // if(isIn) element.show();
-  requestAnimationFrame(function() {
+
+  element
+    .addClass(animation)
+    .css('transition', 'none');
+
+  requestAnimationFrame(() => {
     element.addClass(initClass);
     if (isIn) element.show();
   });
+
   // Start the animation
-  requestAnimationFrame(function() {
+  requestAnimationFrame(() => {
     element[0].offsetWidth;
-    element.css('transition', '');
-    element.addClass(activeClass);
+    element
+      .css('transition', '')
+      .addClass(activeClass);
   });
-  // Move(500, element, function(){
-  //   // element[0].offsetWidth;
-  //   element.css('transition', '');
-  //   element.addClass(activeClass);
-  // });
 
   // Clean up the animation when it finishes
-  element.one(Foundation.transitionend(element), finish);//.one('finished.zf.animate', finish);
+  element.one(Foundation.transitionend(element), finish);
 
   // Hides the element (for out animations), resets the element, and runs a callback
   function finish() {
@@ -54,36 +89,7 @@ function animate(isIn, element, animation, cb) {
   }
 }
 
-var Motion = {
-  animateIn: function(element, animation, /*duration,*/ cb) {
-    animate(true, element, animation, cb);
-  },
-
-  animateOut: function(element, animation, /*duration,*/ cb) {
-    animate(false, element, animation, cb);
-  }
-};
-
-var Move = function(duration, elem, fn){
-  var anim, prog, start = null;
-  // console.log('called');
-
-  function move(ts){
-    if(!start) start = window.performance.now();
-    // console.log(start, ts);
-    prog = ts - start;
-    fn.apply(elem);
-
-    if(prog < duration){ anim = window.requestAnimationFrame(move, elem); }
-    else{
-      window.cancelAnimationFrame(anim);
-      elem.trigger('finished.zf.animate', [elem]).triggerHandler('finished.zf.animate', [elem]);
-    }
-  }
-  anim = window.requestAnimationFrame(move);
-};
-
-Foundation.Move = Move;
-Foundation.Motion = Motion;
-
-}(jQuery, Foundation);
+if (window.Foundation) {
+  window.Foundation.Move = Move;
+  window.Foundation.Motion = Motion;
+}