foundation.util.motion.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. (function webpackUniversalModuleDefinition(root, factory) {
  2. if(typeof exports === 'object' && typeof module === 'object')
  3. module.exports = factory(require("./foundation.core"), require("jquery"));
  4. else if(typeof define === 'function' && define.amd)
  5. define(["./foundation.core", "jquery"], factory);
  6. else if(typeof exports === 'object')
  7. exports["foundation.util.motion"] = factory(require("./foundation.core"), require("jquery"));
  8. else
  9. root["__FOUNDATION_EXTERNAL__"] = root["__FOUNDATION_EXTERNAL__"] || {}, root["__FOUNDATION_EXTERNAL__"]["foundation.util.motion"] = factory(root["__FOUNDATION_EXTERNAL__"]["foundation.core"], root["jQuery"]);
  10. })(window, function(__WEBPACK_EXTERNAL_MODULE__foundation_core__, __WEBPACK_EXTERNAL_MODULE_jquery__) {
  11. return /******/ (function(modules) { // webpackBootstrap
  12. /******/ // The module cache
  13. /******/ var installedModules = {};
  14. /******/
  15. /******/ // The require function
  16. /******/ function __webpack_require__(moduleId) {
  17. /******/
  18. /******/ // Check if module is in cache
  19. /******/ if(installedModules[moduleId]) {
  20. /******/ return installedModules[moduleId].exports;
  21. /******/ }
  22. /******/ // Create a new module (and put it into the cache)
  23. /******/ var module = installedModules[moduleId] = {
  24. /******/ i: moduleId,
  25. /******/ l: false,
  26. /******/ exports: {}
  27. /******/ };
  28. /******/
  29. /******/ // Execute the module function
  30. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  31. /******/
  32. /******/ // Flag the module as loaded
  33. /******/ module.l = true;
  34. /******/
  35. /******/ // Return the exports of the module
  36. /******/ return module.exports;
  37. /******/ }
  38. /******/
  39. /******/
  40. /******/ // expose the modules object (__webpack_modules__)
  41. /******/ __webpack_require__.m = modules;
  42. /******/
  43. /******/ // expose the module cache
  44. /******/ __webpack_require__.c = installedModules;
  45. /******/
  46. /******/ // define getter function for harmony exports
  47. /******/ __webpack_require__.d = function(exports, name, getter) {
  48. /******/ if(!__webpack_require__.o(exports, name)) {
  49. /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
  50. /******/ }
  51. /******/ };
  52. /******/
  53. /******/ // define __esModule on exports
  54. /******/ __webpack_require__.r = function(exports) {
  55. /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  56. /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  57. /******/ }
  58. /******/ Object.defineProperty(exports, '__esModule', { value: true });
  59. /******/ };
  60. /******/
  61. /******/ // create a fake namespace object
  62. /******/ // mode & 1: value is a module id, require it
  63. /******/ // mode & 2: merge all properties of value into the ns
  64. /******/ // mode & 4: return value when already ns object
  65. /******/ // mode & 8|1: behave like require
  66. /******/ __webpack_require__.t = function(value, mode) {
  67. /******/ if(mode & 1) value = __webpack_require__(value);
  68. /******/ if(mode & 8) return value;
  69. /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  70. /******/ var ns = Object.create(null);
  71. /******/ __webpack_require__.r(ns);
  72. /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  73. /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  74. /******/ return ns;
  75. /******/ };
  76. /******/
  77. /******/ // getDefaultExport function for compatibility with non-harmony modules
  78. /******/ __webpack_require__.n = function(module) {
  79. /******/ var getter = module && module.__esModule ?
  80. /******/ function getDefault() { return module['default']; } :
  81. /******/ function getModuleExports() { return module; };
  82. /******/ __webpack_require__.d(getter, 'a', getter);
  83. /******/ return getter;
  84. /******/ };
  85. /******/
  86. /******/ // Object.prototype.hasOwnProperty.call
  87. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  88. /******/
  89. /******/ // __webpack_public_path__
  90. /******/ __webpack_require__.p = "";
  91. /******/
  92. /******/
  93. /******/ // Load entry module and return exports
  94. /******/ return __webpack_require__(__webpack_require__.s = 25);
  95. /******/ })
  96. /************************************************************************/
  97. /******/ ({
  98. /***/ "./foundation.core":
  99. /*!****************************************************************************************************************************************************************!*\
  100. !*** external {"root":["__FOUNDATION_EXTERNAL__","foundation.core"],"amd":"./foundation.core","commonjs":"./foundation.core","commonjs2":"./foundation.core"} ***!
  101. \****************************************************************************************************************************************************************/
  102. /*! no static exports found */
  103. /***/ (function(module, exports) {
  104. module.exports = __WEBPACK_EXTERNAL_MODULE__foundation_core__;
  105. /***/ }),
  106. /***/ "./js/entries/plugins/foundation.util.motion.js":
  107. /*!******************************************************!*\
  108. !*** ./js/entries/plugins/foundation.util.motion.js ***!
  109. \******************************************************/
  110. /*! exports provided: Foundation, Motion, Move */
  111. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  112. "use strict";
  113. __webpack_require__.r(__webpack_exports__);
  114. /* harmony import */ var _foundation_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./foundation.core */ "./foundation.core");
  115. /* harmony import */ var _foundation_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_foundation_core__WEBPACK_IMPORTED_MODULE_0__);
  116. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Foundation", function() { return _foundation_core__WEBPACK_IMPORTED_MODULE_0__["Foundation"]; });
  117. /* harmony import */ var _foundation_util_motion__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../foundation.util.motion */ "./js/foundation.util.motion.js");
  118. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Motion", function() { return _foundation_util_motion__WEBPACK_IMPORTED_MODULE_1__["Motion"]; });
  119. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Move", function() { return _foundation_util_motion__WEBPACK_IMPORTED_MODULE_1__["Move"]; });
  120. _foundation_core__WEBPACK_IMPORTED_MODULE_0__["Foundation"].Motion = _foundation_util_motion__WEBPACK_IMPORTED_MODULE_1__["Motion"];
  121. _foundation_core__WEBPACK_IMPORTED_MODULE_0__["Foundation"].Move = _foundation_util_motion__WEBPACK_IMPORTED_MODULE_1__["Move"];
  122. /***/ }),
  123. /***/ "./js/foundation.util.motion.js":
  124. /*!**************************************!*\
  125. !*** ./js/foundation.util.motion.js ***!
  126. \**************************************/
  127. /*! exports provided: Move, Motion */
  128. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  129. "use strict";
  130. __webpack_require__.r(__webpack_exports__);
  131. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Move", function() { return Move; });
  132. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Motion", function() { return Motion; });
  133. /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ "jquery");
  134. /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);
  135. /* harmony import */ var _foundation_core_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./foundation.core.utils */ "./foundation.core");
  136. /* harmony import */ var _foundation_core_utils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_foundation_core_utils__WEBPACK_IMPORTED_MODULE_1__);
  137. /**
  138. * Motion module.
  139. * @module foundation.motion
  140. */
  141. var initClasses = ['mui-enter', 'mui-leave'];
  142. var activeClasses = ['mui-enter-active', 'mui-leave-active'];
  143. var Motion = {
  144. animateIn: function animateIn(element, animation, cb) {
  145. animate(true, element, animation, cb);
  146. },
  147. animateOut: function animateOut(element, animation, cb) {
  148. animate(false, element, animation, cb);
  149. }
  150. };
  151. function Move(duration, elem, fn) {
  152. var anim,
  153. prog,
  154. start = null; // console.log('called');
  155. if (duration === 0) {
  156. fn.apply(elem);
  157. elem.trigger('finished.zf.animate', [elem]).triggerHandler('finished.zf.animate', [elem]);
  158. return;
  159. }
  160. function move(ts) {
  161. if (!start) start = ts; // console.log(start, ts);
  162. prog = ts - start;
  163. fn.apply(elem);
  164. if (prog < duration) {
  165. anim = window.requestAnimationFrame(move, elem);
  166. } else {
  167. window.cancelAnimationFrame(anim);
  168. elem.trigger('finished.zf.animate', [elem]).triggerHandler('finished.zf.animate', [elem]);
  169. }
  170. }
  171. anim = window.requestAnimationFrame(move);
  172. }
  173. /**
  174. * Animates an element in or out using a CSS transition class.
  175. * @function
  176. * @private
  177. * @param {Boolean} isIn - Defines if the animation is in or out.
  178. * @param {Object} element - jQuery or HTML object to animate.
  179. * @param {String} animation - CSS class to use.
  180. * @param {Function} cb - Callback to run when animation is finished.
  181. */
  182. function animate(isIn, element, animation, cb) {
  183. element = jquery__WEBPACK_IMPORTED_MODULE_0___default()(element).eq(0);
  184. if (!element.length) return;
  185. var initClass = isIn ? initClasses[0] : initClasses[1];
  186. var activeClass = isIn ? activeClasses[0] : activeClasses[1]; // Set up the animation
  187. reset();
  188. element.addClass(animation).css('transition', 'none');
  189. requestAnimationFrame(function () {
  190. element.addClass(initClass);
  191. if (isIn) element.show();
  192. }); // Start the animation
  193. requestAnimationFrame(function () {
  194. // will trigger the browser to synchronously calculate the style and layout
  195. // also called reflow or layout thrashing
  196. // see https://gist.github.com/paulirish/5d52fb081b3570c81e3a
  197. element[0].offsetWidth;
  198. element.css('transition', '').addClass(activeClass);
  199. }); // Clean up the animation when it finishes
  200. element.one(Object(_foundation_core_utils__WEBPACK_IMPORTED_MODULE_1__["transitionend"])(element), finish); // Hides the element (for out animations), resets the element, and runs a callback
  201. function finish() {
  202. if (!isIn) element.hide();
  203. reset();
  204. if (cb) cb.apply(element);
  205. } // Resets transitions and removes motion-specific classes
  206. function reset() {
  207. element[0].style.transitionDuration = 0;
  208. element.removeClass("".concat(initClass, " ").concat(activeClass, " ").concat(animation));
  209. }
  210. }
  211. /***/ }),
  212. /***/ 25:
  213. /*!************************************************************!*\
  214. !*** multi ./js/entries/plugins/foundation.util.motion.js ***!
  215. \************************************************************/
  216. /*! no static exports found */
  217. /***/ (function(module, exports, __webpack_require__) {
  218. module.exports = __webpack_require__(/*! /Users/joeworkman/Development/foundation-sites/js/entries/plugins/foundation.util.motion.js */"./js/entries/plugins/foundation.util.motion.js");
  219. /***/ }),
  220. /***/ "jquery":
  221. /*!********************************************************************************************!*\
  222. !*** external {"root":["jQuery"],"amd":"jquery","commonjs":"jquery","commonjs2":"jquery"} ***!
  223. \********************************************************************************************/
  224. /*! no static exports found */
  225. /***/ (function(module, exports) {
  226. module.exports = __WEBPACK_EXTERNAL_MODULE_jquery__;
  227. /***/ })
  228. /******/ });
  229. });
  230. //# sourceMappingURL=foundation.util.motion.js.map