UNPKG

43 kBJavaScriptView Raw
1(function webpackUniversalModuleDefinition(root, factory) {
2 if(typeof exports === 'object' && typeof module === 'object')
3 module.exports = factory(require("./foundation.core"), require("./foundation.util.mediaQuery"), require("./foundation.util.motion"), require("jquery"));
4 else if(typeof define === 'function' && define.amd)
5 define(["./foundation.core", "./foundation.util.mediaQuery", "./foundation.util.motion", "jquery"], factory);
6 else if(typeof exports === 'object')
7 exports["foundation.sticky"] = factory(require("./foundation.core"), require("./foundation.util.mediaQuery"), require("./foundation.util.motion"), require("jquery"));
8 else
9 root["__FOUNDATION_EXTERNAL__"] = root["__FOUNDATION_EXTERNAL__"] || {}, root["__FOUNDATION_EXTERNAL__"]["foundation.sticky"] = factory(root["__FOUNDATION_EXTERNAL__"]["foundation.core"], 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_mediaQuery__, __WEBPACK_EXTERNAL_MODULE__foundation_util_motion__, __WEBPACK_EXTERNAL_MODULE_jquery__) {
11return /******/ (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 = 17);
95/******/ })
96/************************************************************************/
97/******/ ({
98
99/***/ "./foundation.core":
100/*!****************************************************************************************************************************************************************!*\
101 !*** external {"root":["__FOUNDATION_EXTERNAL__","foundation.core"],"amd":"./foundation.core","commonjs":"./foundation.core","commonjs2":"./foundation.core"} ***!
102 \****************************************************************************************************************************************************************/
103/*! no static exports found */
104/***/ (function(module, exports) {
105
106module.exports = __WEBPACK_EXTERNAL_MODULE__foundation_core__;
107
108/***/ }),
109
110/***/ "./foundation.util.mediaQuery":
111/*!************************************************************************************************************************************************************************************************************!*\
112 !*** external {"root":["__FOUNDATION_EXTERNAL__","foundation.util.mediaQuery"],"amd":"./foundation.util.mediaQuery","commonjs":"./foundation.util.mediaQuery","commonjs2":"./foundation.util.mediaQuery"} ***!
113 \************************************************************************************************************************************************************************************************************/
114/*! no static exports found */
115/***/ (function(module, exports) {
116
117module.exports = __WEBPACK_EXTERNAL_MODULE__foundation_util_mediaQuery__;
118
119/***/ }),
120
121/***/ "./foundation.util.motion":
122/*!********************************************************************************************************************************************************************************************!*\
123 !*** external {"root":["__FOUNDATION_EXTERNAL__","foundation.util.motion"],"amd":"./foundation.util.motion","commonjs":"./foundation.util.motion","commonjs2":"./foundation.util.motion"} ***!
124 \********************************************************************************************************************************************************************************************/
125/*! no static exports found */
126/***/ (function(module, exports) {
127
128module.exports = __WEBPACK_EXTERNAL_MODULE__foundation_util_motion__;
129
130/***/ }),
131
132/***/ "./js/entries/plugins/foundation.sticky.js":
133/*!*************************************************!*\
134 !*** ./js/entries/plugins/foundation.sticky.js ***!
135 \*************************************************/
136/*! exports provided: Foundation, Sticky */
137/***/ (function(module, __webpack_exports__, __webpack_require__) {
138
139"use strict";
140__webpack_require__.r(__webpack_exports__);
141/* harmony import */ var _foundation_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./foundation.core */ "./foundation.core");
142/* harmony import */ var _foundation_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_foundation_core__WEBPACK_IMPORTED_MODULE_0__);
143/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Foundation", function() { return _foundation_core__WEBPACK_IMPORTED_MODULE_0__["Foundation"]; });
144
145/* harmony import */ var _foundation_sticky__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../foundation.sticky */ "./js/foundation.sticky.js");
146/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Sticky", function() { return _foundation_sticky__WEBPACK_IMPORTED_MODULE_1__["Sticky"]; });
147
148
149
150_foundation_core__WEBPACK_IMPORTED_MODULE_0__["Foundation"].plugin(_foundation_sticky__WEBPACK_IMPORTED_MODULE_1__["Sticky"], 'Sticky');
151
152
153/***/ }),
154
155/***/ "./js/foundation.sticky.js":
156/*!*********************************!*\
157 !*** ./js/foundation.sticky.js ***!
158 \*********************************/
159/*! exports provided: Sticky */
160/***/ (function(module, __webpack_exports__, __webpack_require__) {
161
162"use strict";
163__webpack_require__.r(__webpack_exports__);
164/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Sticky", function() { return Sticky; });
165/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ "jquery");
166/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);
167/* harmony import */ var _foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./foundation.core.plugin */ "./foundation.core");
168/* harmony import */ var _foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1__);
169/* harmony import */ var _foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./foundation.util.mediaQuery */ "./foundation.util.mediaQuery");
170/* harmony import */ var _foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_2__);
171/* harmony import */ var _foundation_util_triggers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./foundation.util.triggers */ "./js/foundation.util.triggers.js");
172
173
174function _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); }
175
176function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
177
178function _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); } }
179
180function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
181
182function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
183
184function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
185
186function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
187
188function _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); }
189
190function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
191
192
193
194
195
196
197/**
198 * Sticky module.
199 * @module foundation.sticky
200 * @requires foundation.util.triggers
201 * @requires foundation.util.mediaQuery
202 */
203
204var Sticky =
205/*#__PURE__*/
206function (_Plugin) {
207 _inherits(Sticky, _Plugin);
208
209 function Sticky() {
210 _classCallCheck(this, Sticky);
211
212 return _possibleConstructorReturn(this, _getPrototypeOf(Sticky).apply(this, arguments));
213 }
214
215 _createClass(Sticky, [{
216 key: "_setup",
217
218 /**
219 * Creates a new instance of a sticky thing.
220 * @class
221 * @name Sticky
222 * @param {jQuery} element - jQuery object to make sticky.
223 * @param {Object} options - options object passed when creating the element programmatically.
224 */
225 value: function _setup(element, options) {
226 this.$element = element;
227 this.options = jquery__WEBPACK_IMPORTED_MODULE_0___default.a.extend({}, Sticky.defaults, this.$element.data(), options);
228 this.className = 'Sticky'; // ie9 back compat
229 // Triggers init is idempotent, just need to make sure it is initialized
230
231 _foundation_util_triggers__WEBPACK_IMPORTED_MODULE_3__["Triggers"].init(jquery__WEBPACK_IMPORTED_MODULE_0___default.a);
232
233 this._init();
234 }
235 /**
236 * Initializes the sticky element by adding classes, getting/setting dimensions, breakpoints and attributes
237 * @function
238 * @private
239 */
240
241 }, {
242 key: "_init",
243 value: function _init() {
244 _foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_2__["MediaQuery"]._init();
245
246 var $parent = this.$element.parent('[data-sticky-container]'),
247 id = this.$element[0].id || Object(_foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1__["GetYoDigits"])(6, 'sticky'),
248 _this = this;
249
250 if ($parent.length) {
251 this.$container = $parent;
252 } else {
253 this.wasWrapped = true;
254 this.$element.wrap(this.options.container);
255 this.$container = this.$element.parent();
256 }
257
258 this.$container.addClass(this.options.containerClass);
259 this.$element.addClass(this.options.stickyClass).attr({
260 'data-resize': id,
261 'data-mutate': id
262 });
263
264 if (this.options.anchor !== '') {
265 jquery__WEBPACK_IMPORTED_MODULE_0___default()('#' + _this.options.anchor).attr({
266 'data-mutate': id
267 });
268 }
269
270 this.scrollCount = this.options.checkEvery;
271 this.isStuck = false;
272 this.onLoadListener = Object(_foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1__["onLoad"])(jquery__WEBPACK_IMPORTED_MODULE_0___default()(window), function () {
273 //We calculate the container height to have correct values for anchor points offset calculation.
274 _this.containerHeight = _this.$element.css("display") == "none" ? 0 : _this.$element[0].getBoundingClientRect().height;
275
276 _this.$container.css('height', _this.containerHeight);
277
278 _this.elemHeight = _this.containerHeight;
279
280 if (_this.options.anchor !== '') {
281 _this.$anchor = jquery__WEBPACK_IMPORTED_MODULE_0___default()('#' + _this.options.anchor);
282 } else {
283 _this._parsePoints();
284 }
285
286 _this._setSizes(function () {
287 var scroll = window.pageYOffset;
288
289 _this._calc(false, scroll); //Unstick the element will ensure that proper classes are set.
290
291
292 if (!_this.isStuck) {
293 _this._removeSticky(scroll >= _this.topPoint ? false : true);
294 }
295 });
296
297 _this._events(id.split('-').reverse().join('-'));
298 });
299 }
300 /**
301 * If using multiple elements as anchors, calculates the top and bottom pixel values the sticky thing should stick and unstick on.
302 * @function
303 * @private
304 */
305
306 }, {
307 key: "_parsePoints",
308 value: function _parsePoints() {
309 var top = this.options.topAnchor == "" ? 1 : this.options.topAnchor,
310 btm = this.options.btmAnchor == "" ? document.documentElement.scrollHeight : this.options.btmAnchor,
311 pts = [top, btm],
312 breaks = {};
313
314 for (var i = 0, len = pts.length; i < len && pts[i]; i++) {
315 var pt;
316
317 if (typeof pts[i] === 'number') {
318 pt = pts[i];
319 } else {
320 var place = pts[i].split(':'),
321 anchor = jquery__WEBPACK_IMPORTED_MODULE_0___default()("#".concat(place[0]));
322 pt = anchor.offset().top;
323
324 if (place[1] && place[1].toLowerCase() === 'bottom') {
325 pt += anchor[0].getBoundingClientRect().height;
326 }
327 }
328
329 breaks[i] = pt;
330 }
331
332 this.points = breaks;
333 return;
334 }
335 /**
336 * Adds event handlers for the scrolling element.
337 * @private
338 * @param {String} id - pseudo-random id for unique scroll event listener.
339 */
340
341 }, {
342 key: "_events",
343 value: function _events(id) {
344 var _this = this,
345 scrollListener = this.scrollListener = "scroll.zf.".concat(id);
346
347 if (this.isOn) {
348 return;
349 }
350
351 if (this.canStick) {
352 this.isOn = true;
353 jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).off(scrollListener).on(scrollListener, function (e) {
354 if (_this.scrollCount === 0) {
355 _this.scrollCount = _this.options.checkEvery;
356
357 _this._setSizes(function () {
358 _this._calc(false, window.pageYOffset);
359 });
360 } else {
361 _this.scrollCount--;
362
363 _this._calc(false, window.pageYOffset);
364 }
365 });
366 }
367
368 this.$element.off('resizeme.zf.trigger').on('resizeme.zf.trigger', function (e, el) {
369 _this._eventsHandler(id);
370 });
371 this.$element.on('mutateme.zf.trigger', function (e, el) {
372 _this._eventsHandler(id);
373 });
374
375 if (this.$anchor) {
376 this.$anchor.on('mutateme.zf.trigger', function (e, el) {
377 _this._eventsHandler(id);
378 });
379 }
380 }
381 /**
382 * Handler for events.
383 * @private
384 * @param {String} id - pseudo-random id for unique scroll event listener.
385 */
386
387 }, {
388 key: "_eventsHandler",
389 value: function _eventsHandler(id) {
390 var _this = this,
391 scrollListener = this.scrollListener = "scroll.zf.".concat(id);
392
393 _this._setSizes(function () {
394 _this._calc(false);
395
396 if (_this.canStick) {
397 if (!_this.isOn) {
398 _this._events(id);
399 }
400 } else if (_this.isOn) {
401 _this._pauseListeners(scrollListener);
402 }
403 });
404 }
405 /**
406 * Removes event handlers for scroll and change events on anchor.
407 * @fires Sticky#pause
408 * @param {String} scrollListener - unique, namespaced scroll listener attached to `window`
409 */
410
411 }, {
412 key: "_pauseListeners",
413 value: function _pauseListeners(scrollListener) {
414 this.isOn = false;
415 jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).off(scrollListener);
416 /**
417 * Fires when the plugin is paused due to resize event shrinking the view.
418 * @event Sticky#pause
419 * @private
420 */
421
422 this.$element.trigger('pause.zf.sticky');
423 }
424 /**
425 * Called on every `scroll` event and on `_init`
426 * fires functions based on booleans and cached values
427 * @param {Boolean} checkSizes - true if plugin should recalculate sizes and breakpoints.
428 * @param {Number} scroll - current scroll position passed from scroll event cb function. If not passed, defaults to `window.pageYOffset`.
429 */
430
431 }, {
432 key: "_calc",
433 value: function _calc(checkSizes, scroll) {
434 if (checkSizes) {
435 this._setSizes();
436 }
437
438 if (!this.canStick) {
439 if (this.isStuck) {
440 this._removeSticky(true);
441 }
442
443 return false;
444 }
445
446 if (!scroll) {
447 scroll = window.pageYOffset;
448 }
449
450 if (scroll >= this.topPoint) {
451 if (scroll <= this.bottomPoint) {
452 if (!this.isStuck) {
453 this._setSticky();
454 }
455 } else {
456 if (this.isStuck) {
457 this._removeSticky(false);
458 }
459 }
460 } else {
461 if (this.isStuck) {
462 this._removeSticky(true);
463 }
464 }
465 }
466 /**
467 * Causes the $element to become stuck.
468 * Adds `position: fixed;`, and helper classes.
469 * @fires Sticky#stuckto
470 * @function
471 * @private
472 */
473
474 }, {
475 key: "_setSticky",
476 value: function _setSticky() {
477 var _this = this,
478 stickTo = this.options.stickTo,
479 mrgn = stickTo === 'top' ? 'marginTop' : 'marginBottom',
480 notStuckTo = stickTo === 'top' ? 'bottom' : 'top',
481 css = {};
482
483 css[mrgn] = "".concat(this.options[mrgn], "em");
484 css[stickTo] = 0;
485 css[notStuckTo] = 'auto';
486 this.isStuck = true;
487 this.$element.removeClass("is-anchored is-at-".concat(notStuckTo)).addClass("is-stuck is-at-".concat(stickTo)).css(css)
488 /**
489 * Fires when the $element has become `position: fixed;`
490 * Namespaced to `top` or `bottom`, e.g. `sticky.zf.stuckto:top`
491 * @event Sticky#stuckto
492 */
493 .trigger("sticky.zf.stuckto:".concat(stickTo));
494 this.$element.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {
495 _this._setSizes();
496 });
497 }
498 /**
499 * Causes the $element to become unstuck.
500 * Removes `position: fixed;`, and helper classes.
501 * Adds other helper classes.
502 * @param {Boolean} isTop - tells the function if the $element should anchor to the top or bottom of its $anchor element.
503 * @fires Sticky#unstuckfrom
504 * @private
505 */
506
507 }, {
508 key: "_removeSticky",
509 value: function _removeSticky(isTop) {
510 var stickTo = this.options.stickTo,
511 stickToTop = stickTo === 'top',
512 css = {},
513 anchorPt = (this.points ? this.points[1] - this.points[0] : this.anchorHeight) - this.elemHeight,
514 mrgn = stickToTop ? 'marginTop' : 'marginBottom',
515 topOrBottom = isTop ? 'top' : 'bottom';
516 css[mrgn] = 0;
517 css['bottom'] = 'auto';
518
519 if (isTop) {
520 css['top'] = 0;
521 } else {
522 css['top'] = anchorPt;
523 }
524
525 this.isStuck = false;
526 this.$element.removeClass("is-stuck is-at-".concat(stickTo)).addClass("is-anchored is-at-".concat(topOrBottom)).css(css)
527 /**
528 * Fires when the $element has become anchored.
529 * Namespaced to `top` or `bottom`, e.g. `sticky.zf.unstuckfrom:bottom`
530 * @event Sticky#unstuckfrom
531 */
532 .trigger("sticky.zf.unstuckfrom:".concat(topOrBottom));
533 }
534 /**
535 * Sets the $element and $container sizes for plugin.
536 * Calls `_setBreakPoints`.
537 * @param {Function} cb - optional callback function to fire on completion of `_setBreakPoints`.
538 * @private
539 */
540
541 }, {
542 key: "_setSizes",
543 value: function _setSizes(cb) {
544 this.canStick = _foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_2__["MediaQuery"].is(this.options.stickyOn);
545
546 if (!this.canStick) {
547 if (cb && typeof cb === 'function') {
548 cb();
549 }
550 }
551
552 var _this = this,
553 newElemWidth = this.$container[0].getBoundingClientRect().width,
554 comp = window.getComputedStyle(this.$container[0]),
555 pdngl = parseInt(comp['padding-left'], 10),
556 pdngr = parseInt(comp['padding-right'], 10);
557
558 if (this.$anchor && this.$anchor.length) {
559 this.anchorHeight = this.$anchor[0].getBoundingClientRect().height;
560 } else {
561 this._parsePoints();
562 }
563
564 this.$element.css({
565 'max-width': "".concat(newElemWidth - pdngl - pdngr, "px")
566 }); // Recalculate the height only if it is "dynamic"
567
568 if (this.options.dynamicHeight || !this.containerHeight) {
569 // Get the sticked element height and apply it to the container to "hold the place"
570 var newContainerHeight = this.$element[0].getBoundingClientRect().height || this.containerHeight;
571 newContainerHeight = this.$element.css("display") == "none" ? 0 : newContainerHeight;
572 this.$container.css('height', newContainerHeight);
573 this.containerHeight = newContainerHeight;
574 }
575
576 this.elemHeight = this.containerHeight;
577
578 if (!this.isStuck) {
579 if (this.$element.hasClass('is-at-bottom')) {
580 var anchorPt = (this.points ? this.points[1] - this.$container.offset().top : this.anchorHeight) - this.elemHeight;
581 this.$element.css('top', anchorPt);
582 }
583 }
584
585 this._setBreakPoints(this.containerHeight, function () {
586 if (cb && typeof cb === 'function') {
587 cb();
588 }
589 });
590 }
591 /**
592 * Sets the upper and lower breakpoints for the element to become sticky/unsticky.
593 * @param {Number} elemHeight - px value for sticky.$element height, calculated by `_setSizes`.
594 * @param {Function} cb - optional callback function to be called on completion.
595 * @private
596 */
597
598 }, {
599 key: "_setBreakPoints",
600 value: function _setBreakPoints(elemHeight, cb) {
601 if (!this.canStick) {
602 if (cb && typeof cb === 'function') {
603 cb();
604 } else {
605 return false;
606 }
607 }
608
609 var mTop = emCalc(this.options.marginTop),
610 mBtm = emCalc(this.options.marginBottom),
611 topPoint = this.points ? this.points[0] : this.$anchor.offset().top,
612 bottomPoint = this.points ? this.points[1] : topPoint + this.anchorHeight,
613 // topPoint = this.$anchor.offset().top || this.points[0],
614 // bottomPoint = topPoint + this.anchorHeight || this.points[1],
615 winHeight = window.innerHeight;
616
617 if (this.options.stickTo === 'top') {
618 topPoint -= mTop;
619 bottomPoint -= elemHeight + mTop;
620 } else if (this.options.stickTo === 'bottom') {
621 topPoint -= winHeight - (elemHeight + mBtm);
622 bottomPoint -= winHeight - mBtm;
623 } else {//this would be the stickTo: both option... tricky
624 }
625
626 this.topPoint = topPoint;
627 this.bottomPoint = bottomPoint;
628
629 if (cb && typeof cb === 'function') {
630 cb();
631 }
632 }
633 /**
634 * Destroys the current sticky element.
635 * Resets the element to the top position first.
636 * Removes event listeners, JS-added css properties and classes, and unwraps the $element if the JS added the $container.
637 * @function
638 */
639
640 }, {
641 key: "_destroy",
642 value: function _destroy() {
643 this._removeSticky(true);
644
645 this.$element.removeClass("".concat(this.options.stickyClass, " is-anchored is-at-top")).css({
646 height: '',
647 top: '',
648 bottom: '',
649 'max-width': ''
650 }).off('resizeme.zf.trigger').off('mutateme.zf.trigger');
651
652 if (this.$anchor && this.$anchor.length) {
653 this.$anchor.off('change.zf.sticky');
654 }
655
656 if (this.scrollListener) jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).off(this.scrollListener);
657 if (this.onLoadListener) jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).off(this.onLoadListener);
658
659 if (this.wasWrapped) {
660 this.$element.unwrap();
661 } else {
662 this.$container.removeClass(this.options.containerClass).css({
663 height: ''
664 });
665 }
666 }
667 }]);
668
669 return Sticky;
670}(_foundation_core_plugin__WEBPACK_IMPORTED_MODULE_1__["Plugin"]);
671
672Sticky.defaults = {
673 /**
674 * Customizable container template. Add your own classes for styling and sizing.
675 * @option
676 * @type {string}
677 * @default '&lt;div data-sticky-container&gt;&lt;/div&gt;'
678 */
679 container: '<div data-sticky-container></div>',
680
681 /**
682 * Location in the view the element sticks to. Can be `'top'` or `'bottom'`.
683 * @option
684 * @type {string}
685 * @default 'top'
686 */
687 stickTo: 'top',
688
689 /**
690 * If anchored to a single element, the id of that element.
691 * @option
692 * @type {string}
693 * @default ''
694 */
695 anchor: '',
696
697 /**
698 * If using more than one element as anchor points, the id of the top anchor.
699 * @option
700 * @type {string}
701 * @default ''
702 */
703 topAnchor: '',
704
705 /**
706 * If using more than one element as anchor points, the id of the bottom anchor.
707 * @option
708 * @type {string}
709 * @default ''
710 */
711 btmAnchor: '',
712
713 /**
714 * Margin, in `em`'s to apply to the top of the element when it becomes sticky.
715 * @option
716 * @type {number}
717 * @default 1
718 */
719 marginTop: 1,
720
721 /**
722 * Margin, in `em`'s to apply to the bottom of the element when it becomes sticky.
723 * @option
724 * @type {number}
725 * @default 1
726 */
727 marginBottom: 1,
728
729 /**
730 * Breakpoint string that is the minimum screen size an element should become sticky.
731 * @option
732 * @type {string}
733 * @default 'medium'
734 */
735 stickyOn: 'medium',
736
737 /**
738 * Class applied to sticky element, and removed on destruction. Foundation defaults to `sticky`.
739 * @option
740 * @type {string}
741 * @default 'sticky'
742 */
743 stickyClass: 'sticky',
744
745 /**
746 * Class applied to sticky container. Foundation defaults to `sticky-container`.
747 * @option
748 * @type {string}
749 * @default 'sticky-container'
750 */
751 containerClass: 'sticky-container',
752
753 /**
754 * If true (by default), keep the sticky container the same height as the element. Otherwise, the container height is set once and does not change.
755 * @option
756 * @type {boolean}
757 * @default true
758 */
759 dynamicHeight: true,
760
761 /**
762 * Number of scroll events between the plugin's recalculating sticky points. Setting it to `0` will cause it to recalc every scroll event, setting it to `-1` will prevent recalc on scroll.
763 * @option
764 * @type {number}
765 * @default -1
766 */
767 checkEvery: -1
768};
769/**
770 * Helper function to calculate em values
771 * @param Number {em} - number of em's to calculate into pixels
772 */
773
774function emCalc(em) {
775 return parseInt(window.getComputedStyle(document.body, null).fontSize, 10) * em;
776}
777
778
779
780/***/ }),
781
782/***/ "./js/foundation.util.triggers.js":
783/*!****************************************!*\
784 !*** ./js/foundation.util.triggers.js ***!
785 \****************************************/
786/*! exports provided: Triggers */
787/***/ (function(module, __webpack_exports__, __webpack_require__) {
788
789"use strict";
790__webpack_require__.r(__webpack_exports__);
791/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Triggers", function() { return Triggers; });
792/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ "jquery");
793/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);
794/* harmony import */ var _foundation_core_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./foundation.core.utils */ "./foundation.core");
795/* harmony import */ var _foundation_core_utils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_foundation_core_utils__WEBPACK_IMPORTED_MODULE_1__);
796/* harmony import */ var _foundation_util_motion__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./foundation.util.motion */ "./foundation.util.motion");
797/* harmony import */ var _foundation_util_motion__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_foundation_util_motion__WEBPACK_IMPORTED_MODULE_2__);
798
799
800function _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); }
801
802
803
804
805
806var MutationObserver = function () {
807 var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''];
808
809 for (var i = 0; i < prefixes.length; i++) {
810 if ("".concat(prefixes[i], "MutationObserver") in window) {
811 return window["".concat(prefixes[i], "MutationObserver")];
812 }
813 }
814
815 return false;
816}();
817
818var triggers = function triggers(el, type) {
819 el.data(type).split(' ').forEach(function (id) {
820 jquery__WEBPACK_IMPORTED_MODULE_0___default()("#".concat(id))[type === 'close' ? 'trigger' : 'triggerHandler']("".concat(type, ".zf.trigger"), [el]);
821 });
822};
823
824var Triggers = {
825 Listeners: {
826 Basic: {},
827 Global: {}
828 },
829 Initializers: {}
830};
831Triggers.Listeners.Basic = {
832 openListener: function openListener() {
833 triggers(jquery__WEBPACK_IMPORTED_MODULE_0___default()(this), 'open');
834 },
835 closeListener: function closeListener() {
836 var id = jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).data('close');
837
838 if (id) {
839 triggers(jquery__WEBPACK_IMPORTED_MODULE_0___default()(this), 'close');
840 } else {
841 jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).trigger('close.zf.trigger');
842 }
843 },
844 toggleListener: function toggleListener() {
845 var id = jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).data('toggle');
846
847 if (id) {
848 triggers(jquery__WEBPACK_IMPORTED_MODULE_0___default()(this), 'toggle');
849 } else {
850 jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).trigger('toggle.zf.trigger');
851 }
852 },
853 closeableListener: function closeableListener(e) {
854 var animation = jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).data('closable'); // Only close the first closable element. See https://git.io/zf-7833
855
856 e.stopPropagation();
857
858 if (animation !== '') {
859 _foundation_util_motion__WEBPACK_IMPORTED_MODULE_2__["Motion"].animateOut(jquery__WEBPACK_IMPORTED_MODULE_0___default()(this), animation, function () {
860 jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).trigger('closed.zf');
861 });
862 } else {
863 jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).fadeOut().trigger('closed.zf');
864 }
865 },
866 toggleFocusListener: function toggleFocusListener() {
867 var id = jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).data('toggle-focus');
868 jquery__WEBPACK_IMPORTED_MODULE_0___default()("#".concat(id)).triggerHandler('toggle.zf.trigger', [jquery__WEBPACK_IMPORTED_MODULE_0___default()(this)]);
869 }
870}; // Elements with [data-open] will reveal a plugin that supports it when clicked.
871
872Triggers.Initializers.addOpenListener = function ($elem) {
873 $elem.off('click.zf.trigger', Triggers.Listeners.Basic.openListener);
874 $elem.on('click.zf.trigger', '[data-open]', Triggers.Listeners.Basic.openListener);
875}; // Elements with [data-close] will close a plugin that supports it when clicked.
876// If used without a value on [data-close], the event will bubble, allowing it to close a parent component.
877
878
879Triggers.Initializers.addCloseListener = function ($elem) {
880 $elem.off('click.zf.trigger', Triggers.Listeners.Basic.closeListener);
881 $elem.on('click.zf.trigger', '[data-close]', Triggers.Listeners.Basic.closeListener);
882}; // Elements with [data-toggle] will toggle a plugin that supports it when clicked.
883
884
885Triggers.Initializers.addToggleListener = function ($elem) {
886 $elem.off('click.zf.trigger', Triggers.Listeners.Basic.toggleListener);
887 $elem.on('click.zf.trigger', '[data-toggle]', Triggers.Listeners.Basic.toggleListener);
888}; // Elements with [data-closable] will respond to close.zf.trigger events.
889
890
891Triggers.Initializers.addCloseableListener = function ($elem) {
892 $elem.off('close.zf.trigger', Triggers.Listeners.Basic.closeableListener);
893 $elem.on('close.zf.trigger', '[data-closeable], [data-closable]', Triggers.Listeners.Basic.closeableListener);
894}; // Elements with [data-toggle-focus] will respond to coming in and out of focus
895
896
897Triggers.Initializers.addToggleFocusListener = function ($elem) {
898 $elem.off('focus.zf.trigger blur.zf.trigger', Triggers.Listeners.Basic.toggleFocusListener);
899 $elem.on('focus.zf.trigger blur.zf.trigger', '[data-toggle-focus]', Triggers.Listeners.Basic.toggleFocusListener);
900}; // More Global/complex listeners and triggers
901
902
903Triggers.Listeners.Global = {
904 resizeListener: function resizeListener($nodes) {
905 if (!MutationObserver) {
906 //fallback for IE 9
907 $nodes.each(function () {
908 jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).triggerHandler('resizeme.zf.trigger');
909 });
910 } //trigger all listening elements and signal a resize event
911
912
913 $nodes.attr('data-events', "resize");
914 },
915 scrollListener: function scrollListener($nodes) {
916 if (!MutationObserver) {
917 //fallback for IE 9
918 $nodes.each(function () {
919 jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).triggerHandler('scrollme.zf.trigger');
920 });
921 } //trigger all listening elements and signal a scroll event
922
923
924 $nodes.attr('data-events', "scroll");
925 },
926 closeMeListener: function closeMeListener(e, pluginId) {
927 var plugin = e.namespace.split('.')[0];
928 var plugins = jquery__WEBPACK_IMPORTED_MODULE_0___default()("[data-".concat(plugin, "]")).not("[data-yeti-box=\"".concat(pluginId, "\"]"));
929 plugins.each(function () {
930 var _this = jquery__WEBPACK_IMPORTED_MODULE_0___default()(this);
931
932 _this.triggerHandler('close.zf.trigger', [_this]);
933 });
934 } // Global, parses whole document.
935
936};
937
938Triggers.Initializers.addClosemeListener = function (pluginName) {
939 var yetiBoxes = jquery__WEBPACK_IMPORTED_MODULE_0___default()('[data-yeti-box]'),
940 plugNames = ['dropdown', 'tooltip', 'reveal'];
941
942 if (pluginName) {
943 if (typeof pluginName === 'string') {
944 plugNames.push(pluginName);
945 } else if (_typeof(pluginName) === 'object' && typeof pluginName[0] === 'string') {
946 plugNames = plugNames.concat(pluginName);
947 } else {
948 console.error('Plugin names must be strings');
949 }
950 }
951
952 if (yetiBoxes.length) {
953 var listeners = plugNames.map(function (name) {
954 return "closeme.zf.".concat(name);
955 }).join(' ');
956 jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).off(listeners).on(listeners, Triggers.Listeners.Global.closeMeListener);
957 }
958};
959
960function debounceGlobalListener(debounce, trigger, listener) {
961 var timer,
962 args = Array.prototype.slice.call(arguments, 3);
963 jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).off(trigger).on(trigger, function (e) {
964 if (timer) {
965 clearTimeout(timer);
966 }
967
968 timer = setTimeout(function () {
969 listener.apply(null, args);
970 }, debounce || 10); //default time to emit scroll event
971 });
972}
973
974Triggers.Initializers.addResizeListener = function (debounce) {
975 var $nodes = jquery__WEBPACK_IMPORTED_MODULE_0___default()('[data-resize]');
976
977 if ($nodes.length) {
978 debounceGlobalListener(debounce, 'resize.zf.trigger', Triggers.Listeners.Global.resizeListener, $nodes);
979 }
980};
981
982Triggers.Initializers.addScrollListener = function (debounce) {
983 var $nodes = jquery__WEBPACK_IMPORTED_MODULE_0___default()('[data-scroll]');
984
985 if ($nodes.length) {
986 debounceGlobalListener(debounce, 'scroll.zf.trigger', Triggers.Listeners.Global.scrollListener, $nodes);
987 }
988};
989
990Triggers.Initializers.addMutationEventsListener = function ($elem) {
991 if (!MutationObserver) {
992 return false;
993 }
994
995 var $nodes = $elem.find('[data-resize], [data-scroll], [data-mutate]'); //element callback
996
997 var listeningElementsMutation = function listeningElementsMutation(mutationRecordsList) {
998 var $target = jquery__WEBPACK_IMPORTED_MODULE_0___default()(mutationRecordsList[0].target); //trigger the event handler for the element depending on type
999
1000 switch (mutationRecordsList[0].type) {
1001 case "attributes":
1002 if ($target.attr("data-events") === "scroll" && mutationRecordsList[0].attributeName === "data-events") {
1003 $target.triggerHandler('scrollme.zf.trigger', [$target, window.pageYOffset]);
1004 }
1005
1006 if ($target.attr("data-events") === "resize" && mutationRecordsList[0].attributeName === "data-events") {
1007 $target.triggerHandler('resizeme.zf.trigger', [$target]);
1008 }
1009
1010 if (mutationRecordsList[0].attributeName === "style") {
1011 $target.closest("[data-mutate]").attr("data-events", "mutate");
1012 $target.closest("[data-mutate]").triggerHandler('mutateme.zf.trigger', [$target.closest("[data-mutate]")]);
1013 }
1014
1015 break;
1016
1017 case "childList":
1018 $target.closest("[data-mutate]").attr("data-events", "mutate");
1019 $target.closest("[data-mutate]").triggerHandler('mutateme.zf.trigger', [$target.closest("[data-mutate]")]);
1020 break;
1021
1022 default:
1023 return false;
1024 //nothing
1025 }
1026 };
1027
1028 if ($nodes.length) {
1029 //for each element that needs to listen for resizing, scrolling, or mutation add a single observer
1030 for (var i = 0; i <= $nodes.length - 1; i++) {
1031 var elementObserver = new MutationObserver(listeningElementsMutation);
1032 elementObserver.observe($nodes[i], {
1033 attributes: true,
1034 childList: true,
1035 characterData: false,
1036 subtree: true,
1037 attributeFilter: ["data-events", "style"]
1038 });
1039 }
1040 }
1041};
1042
1043Triggers.Initializers.addSimpleListeners = function () {
1044 var $document = jquery__WEBPACK_IMPORTED_MODULE_0___default()(document);
1045 Triggers.Initializers.addOpenListener($document);
1046 Triggers.Initializers.addCloseListener($document);
1047 Triggers.Initializers.addToggleListener($document);
1048 Triggers.Initializers.addCloseableListener($document);
1049 Triggers.Initializers.addToggleFocusListener($document);
1050};
1051
1052Triggers.Initializers.addGlobalListeners = function () {
1053 var $document = jquery__WEBPACK_IMPORTED_MODULE_0___default()(document);
1054 Triggers.Initializers.addMutationEventsListener($document);
1055 Triggers.Initializers.addResizeListener();
1056 Triggers.Initializers.addScrollListener();
1057 Triggers.Initializers.addClosemeListener();
1058};
1059
1060Triggers.init = function ($, Foundation) {
1061 Object(_foundation_core_utils__WEBPACK_IMPORTED_MODULE_1__["onLoad"])($(window), function () {
1062 if ($.triggersInitialized !== true) {
1063 Triggers.Initializers.addSimpleListeners();
1064 Triggers.Initializers.addGlobalListeners();
1065 $.triggersInitialized = true;
1066 }
1067 });
1068
1069 if (Foundation) {
1070 Foundation.Triggers = Triggers; // Legacy included to be backwards compatible for now.
1071
1072 Foundation.IHearYou = Triggers.Initializers.addGlobalListeners;
1073 }
1074};
1075
1076
1077
1078/***/ }),
1079
1080/***/ 17:
1081/*!*******************************************************!*\
1082 !*** multi ./js/entries/plugins/foundation.sticky.js ***!
1083 \*******************************************************/
1084/*! no static exports found */
1085/***/ (function(module, exports, __webpack_require__) {
1086
1087module.exports = __webpack_require__(/*! /Users/joeworkman/Development/foundation-sites/js/entries/plugins/foundation.sticky.js */"./js/entries/plugins/foundation.sticky.js");
1088
1089
1090/***/ }),
1091
1092/***/ "jquery":
1093/*!********************************************************************************************!*\
1094 !*** external {"root":["jQuery"],"amd":"jquery","commonjs":"jquery","commonjs2":"jquery"} ***!
1095 \********************************************************************************************/
1096/*! no static exports found */
1097/***/ (function(module, exports) {
1098
1099module.exports = __WEBPACK_EXTERNAL_MODULE_jquery__;
1100
1101/***/ })
1102
1103/******/ });
1104});
1105//# sourceMappingURL=foundation.sticky.js.map
\No newline at end of file