foundation.offcanvas.js 53 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318
  1. (function webpackUniversalModuleDefinition(root, factory) {
  2. if(typeof exports === 'object' && typeof module === 'object')
  3. module.exports = factory(require("./foundation.core"), require("./foundation.util.keyboard"), require("./foundation.util.mediaQuery"), require("./foundation.util.motion"), require("jquery"));
  4. else if(typeof define === 'function' && define.amd)
  5. define(["./foundation.core", "./foundation.util.keyboard", "./foundation.util.mediaQuery", "./foundation.util.motion", "jquery"], factory);
  6. else if(typeof exports === 'object')
  7. exports["foundation.offcanvas"] = factory(require("./foundation.core"), require("./foundation.util.keyboard"), require("./foundation.util.mediaQuery"), require("./foundation.util.motion"), require("jquery"));
  8. else
  9. root["__FOUNDATION_EXTERNAL__"] = root["__FOUNDATION_EXTERNAL__"] || {}, root["__FOUNDATION_EXTERNAL__"]["foundation.offcanvas"] = factory(root["__FOUNDATION_EXTERNAL__"]["foundation.core"], root["__FOUNDATION_EXTERNAL__"]["foundation.util.keyboard"], root["__FOUNDATION_EXTERNAL__"]["foundation.util.mediaQuery"], root["__FOUNDATION_EXTERNAL__"]["foundation.util.motion"], root["jQuery"]);
  10. })(window, function(__WEBPACK_EXTERNAL_MODULE__foundation_core__, __WEBPACK_EXTERNAL_MODULE__foundation_util_keyboard__, __WEBPACK_EXTERNAL_MODULE__foundation_util_mediaQuery__, __WEBPACK_EXTERNAL_MODULE__foundation_util_motion__, __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 = 9);
  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. /***/ "./foundation.util.keyboard":
  107. /*!****************************************************************************************************************************************************************************************************!*\
  108. !*** external {"root":["__FOUNDATION_EXTERNAL__","foundation.util.keyboard"],"amd":"./foundation.util.keyboard","commonjs":"./foundation.util.keyboard","commonjs2":"./foundation.util.keyboard"} ***!
  109. \****************************************************************************************************************************************************************************************************/
  110. /*! no static exports found */
  111. /***/ (function(module, exports) {
  112. module.exports = __WEBPACK_EXTERNAL_MODULE__foundation_util_keyboard__;
  113. /***/ }),
  114. /***/ "./foundation.util.mediaQuery":
  115. /*!************************************************************************************************************************************************************************************************************!*\
  116. !*** external {"root":["__FOUNDATION_EXTERNAL__","foundation.util.mediaQuery"],"amd":"./foundation.util.mediaQuery","commonjs":"./foundation.util.mediaQuery","commonjs2":"./foundation.util.mediaQuery"} ***!
  117. \************************************************************************************************************************************************************************************************************/
  118. /*! no static exports found */
  119. /***/ (function(module, exports) {
  120. module.exports = __WEBPACK_EXTERNAL_MODULE__foundation_util_mediaQuery__;
  121. /***/ }),
  122. /***/ "./foundation.util.motion":
  123. /*!********************************************************************************************************************************************************************************************!*\
  124. !*** external {"root":["__FOUNDATION_EXTERNAL__","foundation.util.motion"],"amd":"./foundation.util.motion","commonjs":"./foundation.util.motion","commonjs2":"./foundation.util.motion"} ***!
  125. \********************************************************************************************************************************************************************************************/
  126. /*! no static exports found */
  127. /***/ (function(module, exports) {
  128. module.exports = __WEBPACK_EXTERNAL_MODULE__foundation_util_motion__;
  129. /***/ }),
  130. /***/ "./js/entries/plugins/foundation.offcanvas.js":
  131. /*!****************************************************!*\
  132. !*** ./js/entries/plugins/foundation.offcanvas.js ***!
  133. \****************************************************/
  134. /*! exports provided: Foundation, OffCanvas */
  135. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  136. "use strict";
  137. __webpack_require__.r(__webpack_exports__);
  138. /* harmony import */ var _foundation_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./foundation.core */ "./foundation.core");
  139. /* harmony import */ var _foundation_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_foundation_core__WEBPACK_IMPORTED_MODULE_0__);
  140. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Foundation", function() { return _foundation_core__WEBPACK_IMPORTED_MODULE_0__["Foundation"]; });
  141. /* harmony import */ var _foundation_offcanvas__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../foundation.offcanvas */ "./js/foundation.offcanvas.js");
  142. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "OffCanvas", function() { return _foundation_offcanvas__WEBPACK_IMPORTED_MODULE_1__["OffCanvas"]; });
  143. _foundation_core__WEBPACK_IMPORTED_MODULE_0__["Foundation"].plugin(_foundation_offcanvas__WEBPACK_IMPORTED_MODULE_1__["OffCanvas"], 'OffCanvas');
  144. /***/ }),
  145. /***/ "./js/foundation.offcanvas.js":
  146. /*!************************************!*\
  147. !*** ./js/foundation.offcanvas.js ***!
  148. \************************************/
  149. /*! exports provided: OffCanvas */
  150. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  151. "use strict";
  152. __webpack_require__.r(__webpack_exports__);
  153. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "OffCanvas", function() { return OffCanvas; });
  154. /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ "jquery");
  155. /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);
  156. /* harmony import */ var _foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./foundation.core.plugin */ "./foundation.core");
  157. /* harmony import */ var _foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1__);
  158. /* harmony import */ var _foundation_util_keyboard__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./foundation.util.keyboard */ "./foundation.util.keyboard");
  159. /* harmony import */ var _foundation_util_keyboard__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_foundation_util_keyboard__WEBPACK_IMPORTED_MODULE_2__);
  160. /* harmony import */ var _foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./foundation.util.mediaQuery */ "./foundation.util.mediaQuery");
  161. /* harmony import */ var _foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_3__);
  162. /* harmony import */ var _foundation_util_triggers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./foundation.util.triggers */ "./js/foundation.util.triggers.js");
  163. function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
  164. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  165. function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
  166. function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
  167. function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
  168. function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
  169. function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
  170. function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
  171. function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
  172. /**
  173. * OffCanvas module.
  174. * @module foundation.offCanvas
  175. * @requires foundation.util.keyboard
  176. * @requires foundation.util.mediaQuery
  177. * @requires foundation.util.triggers
  178. */
  179. var OffCanvas =
  180. /*#__PURE__*/
  181. function (_Plugin) {
  182. _inherits(OffCanvas, _Plugin);
  183. function OffCanvas() {
  184. _classCallCheck(this, OffCanvas);
  185. return _possibleConstructorReturn(this, _getPrototypeOf(OffCanvas).apply(this, arguments));
  186. }
  187. _createClass(OffCanvas, [{
  188. key: "_setup",
  189. /**
  190. * Creates a new instance of an off-canvas wrapper.
  191. * @class
  192. * @name OffCanvas
  193. * @fires OffCanvas#init
  194. * @param {Object} element - jQuery object to initialize.
  195. * @param {Object} options - Overrides to the default plugin settings.
  196. */
  197. value: function _setup(element, options) {
  198. var _this2 = this;
  199. this.className = 'OffCanvas'; // ie9 back compat
  200. this.$element = element;
  201. this.options = jquery__WEBPACK_IMPORTED_MODULE_0___default.a.extend({}, OffCanvas.defaults, this.$element.data(), options);
  202. this.contentClasses = {
  203. base: [],
  204. reveal: []
  205. };
  206. this.$lastTrigger = jquery__WEBPACK_IMPORTED_MODULE_0___default()();
  207. this.$triggers = jquery__WEBPACK_IMPORTED_MODULE_0___default()();
  208. this.position = 'left';
  209. this.$content = jquery__WEBPACK_IMPORTED_MODULE_0___default()();
  210. this.nested = !!this.options.nested;
  211. this.$sticky = jquery__WEBPACK_IMPORTED_MODULE_0___default()();
  212. this.isInCanvas = false; // Defines the CSS transition/position classes of the off-canvas content container.
  213. jquery__WEBPACK_IMPORTED_MODULE_0___default()(['push', 'overlap']).each(function (index, val) {
  214. _this2.contentClasses.base.push('has-transition-' + val);
  215. });
  216. jquery__WEBPACK_IMPORTED_MODULE_0___default()(['left', 'right', 'top', 'bottom']).each(function (index, val) {
  217. _this2.contentClasses.base.push('has-position-' + val);
  218. _this2.contentClasses.reveal.push('has-reveal-' + val);
  219. }); // Triggers init is idempotent, just need to make sure it is initialized
  220. _foundation_util_triggers__WEBPACK_IMPORTED_MODULE_4__["Triggers"].init(jquery__WEBPACK_IMPORTED_MODULE_0___default.a);
  221. _foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_3__["MediaQuery"]._init();
  222. this._init();
  223. this._events();
  224. _foundation_util_keyboard__WEBPACK_IMPORTED_MODULE_2__["Keyboard"].register('OffCanvas', {
  225. 'ESCAPE': 'close'
  226. });
  227. }
  228. /**
  229. * Initializes the off-canvas wrapper by adding the exit overlay (if needed).
  230. * @function
  231. * @private
  232. */
  233. }, {
  234. key: "_init",
  235. value: function _init() {
  236. var id = this.$element.attr('id');
  237. this.$element.attr('aria-hidden', 'true'); // Find off-canvas content, either by ID (if specified), by siblings or by closest selector (fallback)
  238. if (this.options.contentId) {
  239. this.$content = jquery__WEBPACK_IMPORTED_MODULE_0___default()('#' + this.options.contentId);
  240. } else if (this.$element.siblings('[data-off-canvas-content]').length) {
  241. this.$content = this.$element.siblings('[data-off-canvas-content]').first();
  242. } else {
  243. this.$content = this.$element.closest('[data-off-canvas-content]').first();
  244. }
  245. if (!this.options.contentId) {
  246. // Assume that the off-canvas element is nested if it isn't a sibling of the content
  247. this.nested = this.$element.siblings('[data-off-canvas-content]').length === 0;
  248. } else if (this.options.contentId && this.options.nested === null) {
  249. // Warning if using content ID without setting the nested option
  250. // Once the element is nested it is required to work properly in this case
  251. console.warn('Remember to use the nested option if using the content ID option!');
  252. }
  253. if (this.nested === true) {
  254. // Force transition overlap if nested
  255. this.options.transition = 'overlap'; // Remove appropriate classes if already assigned in markup
  256. this.$element.removeClass('is-transition-push');
  257. }
  258. this.$element.addClass("is-transition-".concat(this.options.transition, " is-closed")); // Find triggers that affect this element and add aria-expanded to them
  259. this.$triggers = jquery__WEBPACK_IMPORTED_MODULE_0___default()(document).find('[data-open="' + id + '"], [data-close="' + id + '"], [data-toggle="' + id + '"]').attr('aria-expanded', 'false').attr('aria-controls', id); // Get position by checking for related CSS class
  260. this.position = this.$element.is('.position-left, .position-top, .position-right, .position-bottom') ? this.$element.attr('class').match(/position\-(left|top|right|bottom)/)[1] : this.position; // Add an overlay over the content if necessary
  261. if (this.options.contentOverlay === true) {
  262. var overlay = document.createElement('div');
  263. var overlayPosition = jquery__WEBPACK_IMPORTED_MODULE_0___default()(this.$element).css("position") === 'fixed' ? 'is-overlay-fixed' : 'is-overlay-absolute';
  264. overlay.setAttribute('class', 'js-off-canvas-overlay ' + overlayPosition);
  265. this.$overlay = jquery__WEBPACK_IMPORTED_MODULE_0___default()(overlay);
  266. if (overlayPosition === 'is-overlay-fixed') {
  267. jquery__WEBPACK_IMPORTED_MODULE_0___default()(this.$overlay).insertAfter(this.$element);
  268. } else {
  269. this.$content.append(this.$overlay);
  270. }
  271. } // Get the revealOn option from the class.
  272. var revealOnRegExp = new RegExp(Object(_foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1__["RegExpEscape"])(this.options.revealClass) + '([^\\s]+)', 'g');
  273. var revealOnClass = revealOnRegExp.exec(this.$element[0].className);
  274. if (revealOnClass) {
  275. this.options.isRevealed = true;
  276. this.options.revealOn = this.options.revealOn || revealOnClass[1];
  277. } // Ensure the `reveal-on-*` class is set.
  278. if (this.options.isRevealed === true && this.options.revealOn) {
  279. this.$element.first().addClass("".concat(this.options.revealClass).concat(this.options.revealOn));
  280. this._setMQChecker();
  281. }
  282. if (this.options.transitionTime) {
  283. this.$element.css('transition-duration', this.options.transitionTime);
  284. } // Find fixed elements that should stay fixed while off-canvas is opened
  285. this.$sticky = this.$content.find('[data-off-canvas-sticky]');
  286. if (this.$sticky.length > 0 && this.options.transition === 'push') {
  287. // If there's at least one match force contentScroll:false because the absolute top value doesn't get recalculated on scroll
  288. // Limit to push transition since there's no transform scope for overlap
  289. this.options.contentScroll = false;
  290. }
  291. var inCanvasFor = this.$element.attr('class').match(/\bin-canvas-for-(\w+)/);
  292. if (inCanvasFor && inCanvasFor.length === 2) {
  293. // Set `inCanvasOn` option if found in-canvas-for-[BREAKPONT] CSS class
  294. this.options.inCanvasOn = inCanvasFor[1];
  295. } else if (this.options.inCanvasOn) {
  296. // Ensure the CSS class is set
  297. this.$element.addClass("in-canvas-for-".concat(this.options.inCanvasOn));
  298. }
  299. if (this.options.inCanvasOn) {
  300. this._checkInCanvas();
  301. } // Initally remove all transition/position CSS classes from off-canvas content container.
  302. this._removeContentClasses();
  303. }
  304. /**
  305. * Adds event handlers to the off-canvas wrapper and the exit overlay.
  306. * @function
  307. * @private
  308. */
  309. }, {
  310. key: "_events",
  311. value: function _events() {
  312. var _this3 = this;
  313. this.$element.off('.zf.trigger .zf.offCanvas').on({
  314. 'open.zf.trigger': this.open.bind(this),
  315. 'close.zf.trigger': this.close.bind(this),
  316. 'toggle.zf.trigger': this.toggle.bind(this),
  317. 'keydown.zf.offCanvas': this._handleKeyboard.bind(this)
  318. });
  319. if (this.options.closeOnClick === true) {
  320. var $target = this.options.contentOverlay ? this.$overlay : this.$content;
  321. $target.on({
  322. 'click.zf.offCanvas': this.close.bind(this)
  323. });
  324. }
  325. if (this.options.inCanvasOn) {
  326. jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).on('changed.zf.mediaquery', function () {
  327. _this3._checkInCanvas();
  328. });
  329. }
  330. }
  331. /**
  332. * Applies event listener for elements that will reveal at certain breakpoints.
  333. * @private
  334. */
  335. }, {
  336. key: "_setMQChecker",
  337. value: function _setMQChecker() {
  338. var _this = this;
  339. this.onLoadListener = Object(_foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1__["onLoad"])(jquery__WEBPACK_IMPORTED_MODULE_0___default()(window), function () {
  340. if (_foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_3__["MediaQuery"].atLeast(_this.options.revealOn)) {
  341. _this.reveal(true);
  342. }
  343. });
  344. jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).on('changed.zf.mediaquery', function () {
  345. if (_foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_3__["MediaQuery"].atLeast(_this.options.revealOn)) {
  346. _this.reveal(true);
  347. } else {
  348. _this.reveal(false);
  349. }
  350. });
  351. }
  352. /**
  353. * Checks if InCanvas on current breakpoint and adjust off-canvas accordingly
  354. * @private
  355. */
  356. }, {
  357. key: "_checkInCanvas",
  358. value: function _checkInCanvas() {
  359. this.isInCanvas = _foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_3__["MediaQuery"].atLeast(this.options.inCanvasOn);
  360. if (this.isInCanvas === true) {
  361. this.close();
  362. }
  363. }
  364. /**
  365. * Removes the CSS transition/position classes of the off-canvas content container.
  366. * Removing the classes is important when another off-canvas gets opened that uses the same content container.
  367. * @param {Boolean} hasReveal - true if related off-canvas element is revealed.
  368. * @private
  369. */
  370. }, {
  371. key: "_removeContentClasses",
  372. value: function _removeContentClasses(hasReveal) {
  373. if (typeof hasReveal !== 'boolean') {
  374. this.$content.removeClass(this.contentClasses.base.join(' '));
  375. } else if (hasReveal === false) {
  376. this.$content.removeClass("has-reveal-".concat(this.position));
  377. }
  378. }
  379. /**
  380. * Adds the CSS transition/position classes of the off-canvas content container, based on the opening off-canvas element.
  381. * Beforehand any transition/position class gets removed.
  382. * @param {Boolean} hasReveal - true if related off-canvas element is revealed.
  383. * @private
  384. */
  385. }, {
  386. key: "_addContentClasses",
  387. value: function _addContentClasses(hasReveal) {
  388. this._removeContentClasses(hasReveal);
  389. if (typeof hasReveal !== 'boolean') {
  390. this.$content.addClass("has-transition-".concat(this.options.transition, " has-position-").concat(this.position));
  391. } else if (hasReveal === true) {
  392. this.$content.addClass("has-reveal-".concat(this.position));
  393. }
  394. }
  395. /**
  396. * Preserves the fixed behavior of sticky elements on opening an off-canvas with push transition.
  397. * Since the off-canvas container has got a transform scope in such a case, it is done by calculating position absolute values.
  398. * @private
  399. */
  400. }, {
  401. key: "_fixStickyElements",
  402. value: function _fixStickyElements() {
  403. this.$sticky.each(function (_, el) {
  404. var $el = jquery__WEBPACK_IMPORTED_MODULE_0___default()(el); // If sticky element is currently fixed, adjust its top value to match absolute position due to transform scope
  405. // Limit to push transition because postion:fixed works without problems for overlap (no transform scope)
  406. if ($el.css('position') === 'fixed') {
  407. // Save current inline styling to restore it if undoing the absolute fixing
  408. var topVal = parseInt($el.css('top'), 10);
  409. $el.data('offCanvasSticky', {
  410. top: topVal
  411. });
  412. var absoluteTopVal = jquery__WEBPACK_IMPORTED_MODULE_0___default()(document).scrollTop() + topVal;
  413. $el.css({
  414. top: "".concat(absoluteTopVal, "px"),
  415. width: '100%',
  416. transition: 'none'
  417. });
  418. }
  419. });
  420. }
  421. /**
  422. * Restores the original fixed styling of sticky elements after having closed an off-canvas that got pseudo fixed beforehand.
  423. * This reverts the changes of _fixStickyElements()
  424. * @private
  425. */
  426. }, {
  427. key: "_unfixStickyElements",
  428. value: function _unfixStickyElements() {
  429. this.$sticky.each(function (_, el) {
  430. var $el = jquery__WEBPACK_IMPORTED_MODULE_0___default()(el);
  431. var stickyData = $el.data('offCanvasSticky'); // If sticky element has got data object with prior values (meaning it was originally fixed) restore these values once off-canvas is closed
  432. if (_typeof(stickyData) === 'object') {
  433. $el.css({
  434. top: "".concat(stickyData.top, "px"),
  435. width: '',
  436. transition: ''
  437. });
  438. $el.data('offCanvasSticky', '');
  439. }
  440. });
  441. }
  442. /**
  443. * Handles the revealing/hiding the off-canvas at breakpoints, not the same as open.
  444. * @param {Boolean} isRevealed - true if element should be revealed.
  445. * @function
  446. */
  447. }, {
  448. key: "reveal",
  449. value: function reveal(isRevealed) {
  450. if (isRevealed) {
  451. this.close();
  452. this.isRevealed = true;
  453. this.$element.attr('aria-hidden', 'false');
  454. this.$element.off('open.zf.trigger toggle.zf.trigger');
  455. this.$element.removeClass('is-closed');
  456. } else {
  457. this.isRevealed = false;
  458. this.$element.attr('aria-hidden', 'true');
  459. this.$element.off('open.zf.trigger toggle.zf.trigger').on({
  460. 'open.zf.trigger': this.open.bind(this),
  461. 'toggle.zf.trigger': this.toggle.bind(this)
  462. });
  463. this.$element.addClass('is-closed');
  464. }
  465. this._addContentClasses(isRevealed);
  466. }
  467. /**
  468. * Stops scrolling of the body when OffCanvas is open on mobile Safari and other troublesome browsers.
  469. * @function
  470. * @private
  471. */
  472. }, {
  473. key: "_stopScrolling",
  474. value: function _stopScrolling(event) {
  475. return false;
  476. }
  477. /**
  478. * Tag the element given as context whether it can be scrolled up and down.
  479. * Used to allow or prevent it to scroll. See `_stopScrollPropagation`.
  480. *
  481. * Taken and adapted from http://stackoverflow.com/questions/16889447/prevent-full-page-scrolling-ios
  482. * Only really works for y, not sure how to extend to x or if we need to.
  483. *
  484. * @function
  485. * @private
  486. */
  487. }, {
  488. key: "_recordScrollable",
  489. value: function _recordScrollable(event) {
  490. var elem = this; // called from event handler context with this as elem
  491. // If the element is scrollable (content overflows), then...
  492. if (elem.scrollHeight !== elem.clientHeight) {
  493. // If we're at the top, scroll down one pixel to allow scrolling up
  494. if (elem.scrollTop === 0) {
  495. elem.scrollTop = 1;
  496. } // If we're at the bottom, scroll up one pixel to allow scrolling down
  497. if (elem.scrollTop === elem.scrollHeight - elem.clientHeight) {
  498. elem.scrollTop = elem.scrollHeight - elem.clientHeight - 1;
  499. }
  500. }
  501. elem.allowUp = elem.scrollTop > 0;
  502. elem.allowDown = elem.scrollTop < elem.scrollHeight - elem.clientHeight;
  503. elem.lastY = event.originalEvent.pageY;
  504. }
  505. /**
  506. * Prevent the given event propagation if the element given as context can scroll.
  507. * Used to preserve the element scrolling on mobile (`touchmove`) when the document
  508. * scrolling is prevented. See https://git.io/zf-9707.
  509. * @function
  510. * @private
  511. */
  512. }, {
  513. key: "_stopScrollPropagation",
  514. value: function _stopScrollPropagation(event) {
  515. var elem = this; // called from event handler context with this as elem
  516. var parent; // off-canvas elem if called from inner scrollbox
  517. var up = event.pageY < elem.lastY;
  518. var down = !up;
  519. elem.lastY = event.pageY;
  520. if (up && elem.allowUp || down && elem.allowDown) {
  521. // It is not recommended to stop event propagation (the user cannot watch it),
  522. // but in this case this is the only solution we have.
  523. event.stopPropagation(); // If elem is inner scrollbox we are scrolling the outer off-canvas down/up once the box end has been reached
  524. // This lets the user continue to touch move the off-canvas without the need to place the finger outside the scrollbox
  525. if (elem.hasAttribute('data-off-canvas-scrollbox')) {
  526. parent = elem.closest('[data-off-canvas], [data-off-canvas-scrollbox-outer]');
  527. if (elem.scrollTop <= 1 && parent.scrollTop > 0) {
  528. parent.scrollTop--;
  529. } else if (elem.scrollTop >= elem.scrollHeight - elem.clientHeight - 1 && parent.scrollTop < parent.scrollHeight - parent.clientHeight) {
  530. parent.scrollTop++;
  531. }
  532. }
  533. } else {
  534. event.preventDefault();
  535. }
  536. }
  537. /**
  538. * Opens the off-canvas menu.
  539. * @function
  540. * @param {Object} event - Event object passed from listener.
  541. * @param {jQuery} trigger - element that triggered the off-canvas to open.
  542. * @fires OffCanvas#opened
  543. * @todo also trigger 'open' event?
  544. */
  545. }, {
  546. key: "open",
  547. value: function open(event, trigger) {
  548. var _this4 = this;
  549. if (this.$element.hasClass('is-open') || this.isRevealed || this.isInCanvas) {
  550. return;
  551. }
  552. var _this = this;
  553. if (trigger) {
  554. this.$lastTrigger = trigger;
  555. }
  556. if (this.options.forceTo === 'top') {
  557. window.scrollTo(0, 0);
  558. } else if (this.options.forceTo === 'bottom') {
  559. window.scrollTo(0, document.body.scrollHeight);
  560. }
  561. if (this.options.transitionTime && this.options.transition !== 'overlap') {
  562. this.$element.siblings('[data-off-canvas-content]').css('transition-duration', this.options.transitionTime);
  563. } else {
  564. this.$element.siblings('[data-off-canvas-content]').css('transition-duration', '');
  565. }
  566. this.$element.addClass('is-open').removeClass('is-closed');
  567. this.$triggers.attr('aria-expanded', 'true');
  568. this.$element.attr('aria-hidden', 'false');
  569. this.$content.addClass('is-open-' + this.position); // If `contentScroll` is set to false, add class and disable scrolling on touch devices.
  570. if (this.options.contentScroll === false) {
  571. jquery__WEBPACK_IMPORTED_MODULE_0___default()('body').addClass('is-off-canvas-open').on('touchmove', this._stopScrolling);
  572. this.$element.on('touchstart', this._recordScrollable);
  573. this.$element.on('touchmove', this._stopScrollPropagation);
  574. this.$element.on('touchstart', '[data-off-canvas-scrollbox]', this._recordScrollable);
  575. this.$element.on('touchmove', '[data-off-canvas-scrollbox]', this._stopScrollPropagation);
  576. }
  577. if (this.options.contentOverlay === true) {
  578. this.$overlay.addClass('is-visible');
  579. }
  580. if (this.options.closeOnClick === true && this.options.contentOverlay === true) {
  581. this.$overlay.addClass('is-closable');
  582. }
  583. if (this.options.autoFocus === true) {
  584. this.$element.one(Object(_foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1__["transitionend"])(this.$element), function () {
  585. if (!_this.$element.hasClass('is-open')) {
  586. return; // exit if prematurely closed
  587. }
  588. var canvasFocus = _this.$element.find('[data-autofocus]');
  589. if (canvasFocus.length) {
  590. canvasFocus.eq(0).focus();
  591. } else {
  592. _this.$element.find('a, button').eq(0).focus();
  593. }
  594. });
  595. }
  596. if (this.options.trapFocus === true) {
  597. this.$content.attr('tabindex', '-1');
  598. _foundation_util_keyboard__WEBPACK_IMPORTED_MODULE_2__["Keyboard"].trapFocus(this.$element);
  599. }
  600. if (this.options.transition === 'push') {
  601. this._fixStickyElements();
  602. }
  603. this._addContentClasses();
  604. /**
  605. * Fires when the off-canvas menu opens.
  606. * @event OffCanvas#opened
  607. */
  608. this.$element.trigger('opened.zf.offCanvas');
  609. /**
  610. * Fires when the off-canvas menu open transition is done.
  611. * @event OffCanvas#openedEnd
  612. */
  613. this.$element.one(Object(_foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1__["transitionend"])(this.$element), function () {
  614. _this4.$element.trigger('openedEnd.zf.offCanvas');
  615. });
  616. }
  617. /**
  618. * Closes the off-canvas menu.
  619. * @function
  620. * @param {Function} cb - optional cb to fire after closure.
  621. * @fires OffCanvas#close
  622. * @fires OffCanvas#closed
  623. */
  624. }, {
  625. key: "close",
  626. value: function close(cb) {
  627. var _this5 = this;
  628. if (!this.$element.hasClass('is-open') || this.isRevealed) {
  629. return;
  630. }
  631. /**
  632. * Fires when the off-canvas menu closes.
  633. * @event OffCanvas#close
  634. */
  635. this.$element.trigger('close.zf.offCanvas');
  636. var _this = this;
  637. this.$element.removeClass('is-open');
  638. this.$element.attr('aria-hidden', 'true');
  639. this.$content.removeClass('is-open-left is-open-top is-open-right is-open-bottom');
  640. if (this.options.contentOverlay === true) {
  641. this.$overlay.removeClass('is-visible');
  642. }
  643. if (this.options.closeOnClick === true && this.options.contentOverlay === true) {
  644. this.$overlay.removeClass('is-closable');
  645. }
  646. this.$triggers.attr('aria-expanded', 'false'); // Listen to transitionEnd: add class, re-enable scrolling and release focus when done.
  647. this.$element.one(Object(_foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1__["transitionend"])(this.$element), function (e) {
  648. _this5.$element.addClass('is-closed');
  649. _this5._removeContentClasses();
  650. if (_this5.options.transition === 'push') {
  651. _this5._unfixStickyElements();
  652. } // If `contentScroll` is set to false, remove class and re-enable scrolling on touch devices.
  653. if (_this5.options.contentScroll === false) {
  654. jquery__WEBPACK_IMPORTED_MODULE_0___default()('body').removeClass('is-off-canvas-open').off('touchmove', _this5._stopScrolling);
  655. _this5.$element.off('touchstart', _this5._recordScrollable);
  656. _this5.$element.off('touchmove', _this5._stopScrollPropagation);
  657. _this5.$element.off('touchstart', '[data-off-canvas-scrollbox]', _this5._recordScrollable);
  658. _this5.$element.off('touchmove', '[data-off-canvas-scrollbox]', _this5._stopScrollPropagation);
  659. }
  660. if (_this5.options.trapFocus === true) {
  661. _this5.$content.removeAttr('tabindex');
  662. _foundation_util_keyboard__WEBPACK_IMPORTED_MODULE_2__["Keyboard"].releaseFocus(_this5.$element);
  663. }
  664. /**
  665. * Fires when the off-canvas menu close transition is done.
  666. * @event OffCanvas#closed
  667. */
  668. _this5.$element.trigger('closed.zf.offCanvas');
  669. });
  670. }
  671. /**
  672. * Toggles the off-canvas menu open or closed.
  673. * @function
  674. * @param {Object} event - Event object passed from listener.
  675. * @param {jQuery} trigger - element that triggered the off-canvas to open.
  676. */
  677. }, {
  678. key: "toggle",
  679. value: function toggle(event, trigger) {
  680. if (this.$element.hasClass('is-open')) {
  681. this.close(event, trigger);
  682. } else {
  683. this.open(event, trigger);
  684. }
  685. }
  686. /**
  687. * Handles keyboard input when detected. When the escape key is pressed, the off-canvas menu closes, and focus is restored to the element that opened the menu.
  688. * @function
  689. * @private
  690. */
  691. }, {
  692. key: "_handleKeyboard",
  693. value: function _handleKeyboard(e) {
  694. var _this6 = this;
  695. _foundation_util_keyboard__WEBPACK_IMPORTED_MODULE_2__["Keyboard"].handleKey(e, 'OffCanvas', {
  696. close: function close() {
  697. _this6.close();
  698. _this6.$lastTrigger.focus();
  699. return true;
  700. },
  701. handled: function handled() {
  702. e.preventDefault();
  703. }
  704. });
  705. }
  706. /**
  707. * Destroys the OffCanvas plugin.
  708. * @function
  709. */
  710. }, {
  711. key: "_destroy",
  712. value: function _destroy() {
  713. this.close();
  714. this.$element.off('.zf.trigger .zf.offCanvas');
  715. this.$overlay.off('.zf.offCanvas');
  716. if (this.onLoadListener) jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).off(this.onLoadListener);
  717. }
  718. }]);
  719. return OffCanvas;
  720. }(_foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1__["Plugin"]);
  721. OffCanvas.defaults = {
  722. /**
  723. * Allow the user to click outside of the menu to close it.
  724. * @option
  725. * @type {boolean}
  726. * @default true
  727. */
  728. closeOnClick: true,
  729. /**
  730. * Adds an overlay on top of `[data-off-canvas-content]`.
  731. * @option
  732. * @type {boolean}
  733. * @default true
  734. */
  735. contentOverlay: true,
  736. /**
  737. * Target an off-canvas content container by ID that may be placed anywhere. If null the closest content container will be taken.
  738. * @option
  739. * @type {?string}
  740. * @default null
  741. */
  742. contentId: null,
  743. /**
  744. * Define the off-canvas element is nested in an off-canvas content. This is required when using the contentId option for a nested element.
  745. * @option
  746. * @type {boolean}
  747. * @default null
  748. */
  749. nested: null,
  750. /**
  751. * Enable/disable scrolling of the main content when an off canvas panel is open.
  752. * @option
  753. * @type {boolean}
  754. * @default true
  755. */
  756. contentScroll: true,
  757. /**
  758. * Amount of time the open and close transition requires, including the appropriate milliseconds (`ms`) or seconds (`s`) unit (e.g. `500ms`, `.75s`) If none selected, pulls from body style.
  759. * @option
  760. * @type {string}
  761. * @default null
  762. */
  763. transitionTime: null,
  764. /**
  765. * Type of transition for the OffCanvas menu. Options are 'push', 'detached' or 'slide'.
  766. * @option
  767. * @type {string}
  768. * @default push
  769. */
  770. transition: 'push',
  771. /**
  772. * Force the page to scroll to top or bottom on open.
  773. * @option
  774. * @type {?string}
  775. * @default null
  776. */
  777. forceTo: null,
  778. /**
  779. * Allow the OffCanvas to remain open for certain breakpoints.
  780. * @option
  781. * @type {boolean}
  782. * @default false
  783. */
  784. isRevealed: false,
  785. /**
  786. * Breakpoint at which to reveal. JS will use a RegExp to target standard classes, if changing classnames, pass your class with the `revealClass` option.
  787. * @option
  788. * @type {?string}
  789. * @default null
  790. */
  791. revealOn: null,
  792. /**
  793. * Breakpoint at which the off-canvas gets moved into canvas content and acts as regular page element.
  794. * @option
  795. * @type {?string}
  796. * @default null
  797. */
  798. inCanvasOn: null,
  799. /**
  800. * Force focus to the offcanvas on open. If true, will focus the opening trigger on close.
  801. * @option
  802. * @type {boolean}
  803. * @default true
  804. */
  805. autoFocus: true,
  806. /**
  807. * Class used to force an OffCanvas to remain open. Foundation defaults for this are `reveal-for-large` & `reveal-for-medium`.
  808. * @option
  809. * @type {string}
  810. * @default reveal-for-
  811. * @todo improve the regex testing for this.
  812. */
  813. revealClass: 'reveal-for-',
  814. /**
  815. * Triggers optional focus trapping when opening an OffCanvas. Sets tabindex of [data-off-canvas-content] to -1 for accessibility purposes.
  816. * @option
  817. * @type {boolean}
  818. * @default false
  819. */
  820. trapFocus: false
  821. };
  822. /***/ }),
  823. /***/ "./js/foundation.util.triggers.js":
  824. /*!****************************************!*\
  825. !*** ./js/foundation.util.triggers.js ***!
  826. \****************************************/
  827. /*! exports provided: Triggers */
  828. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  829. "use strict";
  830. __webpack_require__.r(__webpack_exports__);
  831. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Triggers", function() { return Triggers; });
  832. /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ "jquery");
  833. /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);
  834. /* harmony import */ var _foundation_core_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./foundation.core.utils */ "./foundation.core");
  835. /* harmony import */ var _foundation_core_utils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_foundation_core_utils__WEBPACK_IMPORTED_MODULE_1__);
  836. /* harmony import */ var _foundation_util_motion__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./foundation.util.motion */ "./foundation.util.motion");
  837. /* harmony import */ var _foundation_util_motion__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_foundation_util_motion__WEBPACK_IMPORTED_MODULE_2__);
  838. function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
  839. var MutationObserver = function () {
  840. var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''];
  841. for (var i = 0; i < prefixes.length; i++) {
  842. if ("".concat(prefixes[i], "MutationObserver") in window) {
  843. return window["".concat(prefixes[i], "MutationObserver")];
  844. }
  845. }
  846. return false;
  847. }();
  848. var triggers = function triggers(el, type) {
  849. el.data(type).split(' ').forEach(function (id) {
  850. jquery__WEBPACK_IMPORTED_MODULE_0___default()("#".concat(id))[type === 'close' ? 'trigger' : 'triggerHandler']("".concat(type, ".zf.trigger"), [el]);
  851. });
  852. };
  853. var Triggers = {
  854. Listeners: {
  855. Basic: {},
  856. Global: {}
  857. },
  858. Initializers: {}
  859. };
  860. Triggers.Listeners.Basic = {
  861. openListener: function openListener() {
  862. triggers(jquery__WEBPACK_IMPORTED_MODULE_0___default()(this), 'open');
  863. },
  864. closeListener: function closeListener() {
  865. var id = jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).data('close');
  866. if (id) {
  867. triggers(jquery__WEBPACK_IMPORTED_MODULE_0___default()(this), 'close');
  868. } else {
  869. jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).trigger('close.zf.trigger');
  870. }
  871. },
  872. toggleListener: function toggleListener() {
  873. var id = jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).data('toggle');
  874. if (id) {
  875. triggers(jquery__WEBPACK_IMPORTED_MODULE_0___default()(this), 'toggle');
  876. } else {
  877. jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).trigger('toggle.zf.trigger');
  878. }
  879. },
  880. closeableListener: function closeableListener(e) {
  881. var animation = jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).data('closable'); // Only close the first closable element. See https://git.io/zf-7833
  882. e.stopPropagation();
  883. if (animation !== '') {
  884. _foundation_util_motion__WEBPACK_IMPORTED_MODULE_2__["Motion"].animateOut(jquery__WEBPACK_IMPORTED_MODULE_0___default()(this), animation, function () {
  885. jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).trigger('closed.zf');
  886. });
  887. } else {
  888. jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).fadeOut().trigger('closed.zf');
  889. }
  890. },
  891. toggleFocusListener: function toggleFocusListener() {
  892. var id = jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).data('toggle-focus');
  893. jquery__WEBPACK_IMPORTED_MODULE_0___default()("#".concat(id)).triggerHandler('toggle.zf.trigger', [jquery__WEBPACK_IMPORTED_MODULE_0___default()(this)]);
  894. }
  895. }; // Elements with [data-open] will reveal a plugin that supports it when clicked.
  896. Triggers.Initializers.addOpenListener = function ($elem) {
  897. $elem.off('click.zf.trigger', Triggers.Listeners.Basic.openListener);
  898. $elem.on('click.zf.trigger', '[data-open]', Triggers.Listeners.Basic.openListener);
  899. }; // Elements with [data-close] will close a plugin that supports it when clicked.
  900. // If used without a value on [data-close], the event will bubble, allowing it to close a parent component.
  901. Triggers.Initializers.addCloseListener = function ($elem) {
  902. $elem.off('click.zf.trigger', Triggers.Listeners.Basic.closeListener);
  903. $elem.on('click.zf.trigger', '[data-close]', Triggers.Listeners.Basic.closeListener);
  904. }; // Elements with [data-toggle] will toggle a plugin that supports it when clicked.
  905. Triggers.Initializers.addToggleListener = function ($elem) {
  906. $elem.off('click.zf.trigger', Triggers.Listeners.Basic.toggleListener);
  907. $elem.on('click.zf.trigger', '[data-toggle]', Triggers.Listeners.Basic.toggleListener);
  908. }; // Elements with [data-closable] will respond to close.zf.trigger events.
  909. Triggers.Initializers.addCloseableListener = function ($elem) {
  910. $elem.off('close.zf.trigger', Triggers.Listeners.Basic.closeableListener);
  911. $elem.on('close.zf.trigger', '[data-closeable], [data-closable]', Triggers.Listeners.Basic.closeableListener);
  912. }; // Elements with [data-toggle-focus] will respond to coming in and out of focus
  913. Triggers.Initializers.addToggleFocusListener = function ($elem) {
  914. $elem.off('focus.zf.trigger blur.zf.trigger', Triggers.Listeners.Basic.toggleFocusListener);
  915. $elem.on('focus.zf.trigger blur.zf.trigger', '[data-toggle-focus]', Triggers.Listeners.Basic.toggleFocusListener);
  916. }; // More Global/complex listeners and triggers
  917. Triggers.Listeners.Global = {
  918. resizeListener: function resizeListener($nodes) {
  919. if (!MutationObserver) {
  920. //fallback for IE 9
  921. $nodes.each(function () {
  922. jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).triggerHandler('resizeme.zf.trigger');
  923. });
  924. } //trigger all listening elements and signal a resize event
  925. $nodes.attr('data-events', "resize");
  926. },
  927. scrollListener: function scrollListener($nodes) {
  928. if (!MutationObserver) {
  929. //fallback for IE 9
  930. $nodes.each(function () {
  931. jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).triggerHandler('scrollme.zf.trigger');
  932. });
  933. } //trigger all listening elements and signal a scroll event
  934. $nodes.attr('data-events', "scroll");
  935. },
  936. closeMeListener: function closeMeListener(e, pluginId) {
  937. var plugin = e.namespace.split('.')[0];
  938. var plugins = jquery__WEBPACK_IMPORTED_MODULE_0___default()("[data-".concat(plugin, "]")).not("[data-yeti-box=\"".concat(pluginId, "\"]"));
  939. plugins.each(function () {
  940. var _this = jquery__WEBPACK_IMPORTED_MODULE_0___default()(this);
  941. _this.triggerHandler('close.zf.trigger', [_this]);
  942. });
  943. } // Global, parses whole document.
  944. };
  945. Triggers.Initializers.addClosemeListener = function (pluginName) {
  946. var yetiBoxes = jquery__WEBPACK_IMPORTED_MODULE_0___default()('[data-yeti-box]'),
  947. plugNames = ['dropdown', 'tooltip', 'reveal'];
  948. if (pluginName) {
  949. if (typeof pluginName === 'string') {
  950. plugNames.push(pluginName);
  951. } else if (_typeof(pluginName) === 'object' && typeof pluginName[0] === 'string') {
  952. plugNames = plugNames.concat(pluginName);
  953. } else {
  954. console.error('Plugin names must be strings');
  955. }
  956. }
  957. if (yetiBoxes.length) {
  958. var listeners = plugNames.map(function (name) {
  959. return "closeme.zf.".concat(name);
  960. }).join(' ');
  961. jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).off(listeners).on(listeners, Triggers.Listeners.Global.closeMeListener);
  962. }
  963. };
  964. function debounceGlobalListener(debounce, trigger, listener) {
  965. var timer,
  966. args = Array.prototype.slice.call(arguments, 3);
  967. jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).off(trigger).on(trigger, function (e) {
  968. if (timer) {
  969. clearTimeout(timer);
  970. }
  971. timer = setTimeout(function () {
  972. listener.apply(null, args);
  973. }, debounce || 10); //default time to emit scroll event
  974. });
  975. }
  976. Triggers.Initializers.addResizeListener = function (debounce) {
  977. var $nodes = jquery__WEBPACK_IMPORTED_MODULE_0___default()('[data-resize]');
  978. if ($nodes.length) {
  979. debounceGlobalListener(debounce, 'resize.zf.trigger', Triggers.Listeners.Global.resizeListener, $nodes);
  980. }
  981. };
  982. Triggers.Initializers.addScrollListener = function (debounce) {
  983. var $nodes = jquery__WEBPACK_IMPORTED_MODULE_0___default()('[data-scroll]');
  984. if ($nodes.length) {
  985. debounceGlobalListener(debounce, 'scroll.zf.trigger', Triggers.Listeners.Global.scrollListener, $nodes);
  986. }
  987. };
  988. Triggers.Initializers.addMutationEventsListener = function ($elem) {
  989. if (!MutationObserver) {
  990. return false;
  991. }
  992. var $nodes = $elem.find('[data-resize], [data-scroll], [data-mutate]'); //element callback
  993. var listeningElementsMutation = function listeningElementsMutation(mutationRecordsList) {
  994. var $target = jquery__WEBPACK_IMPORTED_MODULE_0___default()(mutationRecordsList[0].target); //trigger the event handler for the element depending on type
  995. switch (mutationRecordsList[0].type) {
  996. case "attributes":
  997. if ($target.attr("data-events") === "scroll" && mutationRecordsList[0].attributeName === "data-events") {
  998. $target.triggerHandler('scrollme.zf.trigger', [$target, window.pageYOffset]);
  999. }
  1000. if ($target.attr("data-events") === "resize" && mutationRecordsList[0].attributeName === "data-events") {
  1001. $target.triggerHandler('resizeme.zf.trigger', [$target]);
  1002. }
  1003. if (mutationRecordsList[0].attributeName === "style") {
  1004. $target.closest("[data-mutate]").attr("data-events", "mutate");
  1005. $target.closest("[data-mutate]").triggerHandler('mutateme.zf.trigger', [$target.closest("[data-mutate]")]);
  1006. }
  1007. break;
  1008. case "childList":
  1009. $target.closest("[data-mutate]").attr("data-events", "mutate");
  1010. $target.closest("[data-mutate]").triggerHandler('mutateme.zf.trigger', [$target.closest("[data-mutate]")]);
  1011. break;
  1012. default:
  1013. return false;
  1014. //nothing
  1015. }
  1016. };
  1017. if ($nodes.length) {
  1018. //for each element that needs to listen for resizing, scrolling, or mutation add a single observer
  1019. for (var i = 0; i <= $nodes.length - 1; i++) {
  1020. var elementObserver = new MutationObserver(listeningElementsMutation);
  1021. elementObserver.observe($nodes[i], {
  1022. attributes: true,
  1023. childList: true,
  1024. characterData: false,
  1025. subtree: true,
  1026. attributeFilter: ["data-events", "style"]
  1027. });
  1028. }
  1029. }
  1030. };
  1031. Triggers.Initializers.addSimpleListeners = function () {
  1032. var $document = jquery__WEBPACK_IMPORTED_MODULE_0___default()(document);
  1033. Triggers.Initializers.addOpenListener($document);
  1034. Triggers.Initializers.addCloseListener($document);
  1035. Triggers.Initializers.addToggleListener($document);
  1036. Triggers.Initializers.addCloseableListener($document);
  1037. Triggers.Initializers.addToggleFocusListener($document);
  1038. };
  1039. Triggers.Initializers.addGlobalListeners = function () {
  1040. var $document = jquery__WEBPACK_IMPORTED_MODULE_0___default()(document);
  1041. Triggers.Initializers.addMutationEventsListener($document);
  1042. Triggers.Initializers.addResizeListener();
  1043. Triggers.Initializers.addScrollListener();
  1044. Triggers.Initializers.addClosemeListener();
  1045. };
  1046. Triggers.init = function ($, Foundation) {
  1047. Object(_foundation_core_utils__WEBPACK_IMPORTED_MODULE_1__["onLoad"])($(window), function () {
  1048. if ($.triggersInitialized !== true) {
  1049. Triggers.Initializers.addSimpleListeners();
  1050. Triggers.Initializers.addGlobalListeners();
  1051. $.triggersInitialized = true;
  1052. }
  1053. });
  1054. if (Foundation) {
  1055. Foundation.Triggers = Triggers; // Legacy included to be backwards compatible for now.
  1056. Foundation.IHearYou = Triggers.Initializers.addGlobalListeners;
  1057. }
  1058. };
  1059. /***/ }),
  1060. /***/ 9:
  1061. /*!**********************************************************!*\
  1062. !*** multi ./js/entries/plugins/foundation.offcanvas.js ***!
  1063. \**********************************************************/
  1064. /*! no static exports found */
  1065. /***/ (function(module, exports, __webpack_require__) {
  1066. module.exports = __webpack_require__(/*! /Users/joeworkman/Development/foundation-sites/js/entries/plugins/foundation.offcanvas.js */"./js/entries/plugins/foundation.offcanvas.js");
  1067. /***/ }),
  1068. /***/ "jquery":
  1069. /*!********************************************************************************************!*\
  1070. !*** external {"root":["jQuery"],"amd":"jquery","commonjs":"jquery","commonjs2":"jquery"} ***!
  1071. \********************************************************************************************/
  1072. /*! no static exports found */
  1073. /***/ (function(module, exports) {
  1074. module.exports = __WEBPACK_EXTERNAL_MODULE_jquery__;
  1075. /***/ })
  1076. /******/ });
  1077. });
  1078. //# sourceMappingURL=foundation.offcanvas.js.map