(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(require("./foundation.core"), require("jquery")); else if(typeof define === 'function' && define.amd) define(["./foundation.core", "jquery"], factory); else if(typeof exports === 'object') exports["__FOUNDATION_EXTERNAL__"] = factory(require("./foundation.core"), require("jquery")); else root["__FOUNDATION_EXTERNAL__"] = root["__FOUNDATION_EXTERNAL__"] || {}, root["__FOUNDATION_EXTERNAL__"]["foundation.util.mediaQuery"] = factory(root["__FOUNDATION_EXTERNAL__"]["foundation.core"], root["jQuery"]); })(self, function(__WEBPACK_EXTERNAL_MODULE__foundation_core__, __WEBPACK_EXTERNAL_MODULE_jquery__) { return /******/ (function() { // webpackBootstrap /******/ "use strict"; /******/ var __webpack_modules__ = ({ /***/ "./js/foundation.util.mediaQuery.js": /*!******************************************!*\ !*** ./js/foundation.util.mediaQuery.js ***! \******************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ MediaQuery: function() { return /* binding */ MediaQuery; } /* harmony export */ }); /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ "jquery"); /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__); function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } } function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } } function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // Default set of media queries // const defaultQueries = { // 'default' : 'only screen', // landscape : 'only screen and (orientation: landscape)', // portrait : 'only screen and (orientation: portrait)', // retina : 'only screen and (-webkit-min-device-pixel-ratio: 2),' + // 'only screen and (min--moz-device-pixel-ratio: 2),' + // 'only screen and (-o-min-device-pixel-ratio: 2/1),' + // 'only screen and (min-device-pixel-ratio: 2),' + // 'only screen and (min-resolution: 192dpi),' + // 'only screen and (min-resolution: 2dppx)' // }; // matchMedia() polyfill - Test a CSS media type/query in JS. // Authors & copyright © 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. MIT license /* eslint-disable */ window.matchMedia || (window.matchMedia = function () { "use strict"; // For browsers that support matchMedium api such as IE 9 and webkit var styleMedia = window.styleMedia || window.media; // For those that don't support matchMedium if (!styleMedia) { var style = document.createElement('style'), script = document.getElementsByTagName('script')[0], info = null; style.type = 'text/css'; style.id = 'matchmediajs-test'; if (!script) { document.head.appendChild(style); } else { script.parentNode.insertBefore(style, script); } // 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers info = 'getComputedStyle' in window && window.getComputedStyle(style, null) || style.currentStyle; styleMedia = { matchMedium: function matchMedium(media) { var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }'; // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers if (style.styleSheet) { style.styleSheet.cssText = text; } else { style.textContent = text; } // Test if media query is true or false return info.width === '1px'; } }; } return function (media) { return { matches: styleMedia.matchMedium(media || 'all'), media: media || 'all' }; }; }()); /* eslint-enable */ var MediaQuery = { queries: [], current: '', /** * Initializes the media query helper, by extracting the breakpoint list from the CSS and activating the breakpoint watcher. * @function * @private */ _init: function _init() { // make sure the initialization is only done once when calling _init() several times if (this.isInitialized === true) { return this; } else { this.isInitialized = true; } var self = this; var $meta = jquery__WEBPACK_IMPORTED_MODULE_0___default()('meta.foundation-mq'); if (!$meta.length) { jquery__WEBPACK_IMPORTED_MODULE_0___default()('').appendTo(document.head); } var extractedStyles = jquery__WEBPACK_IMPORTED_MODULE_0___default()('.foundation-mq').css('font-family'); var namedQueries; namedQueries = parseStyleToObject(extractedStyles); self.queries = []; // reset for (var key in namedQueries) { if (namedQueries.hasOwnProperty(key)) { self.queries.push({ name: key, value: "only screen and (min-width: ".concat(namedQueries[key], ")") }); } } this.current = this._getCurrentSize(); this._watcher(); }, /** * Reinitializes the media query helper. * Useful if your CSS breakpoint configuration has just been loaded or has changed since the initialization. * @function * @private */ _reInit: function _reInit() { this.isInitialized = false; this._init(); }, /** * Checks if the screen is at least as wide as a breakpoint. * @function * @param {String} size - Name of the breakpoint to check. * @returns {Boolean} `true` if the breakpoint matches, `false` if it's smaller. */ atLeast: function atLeast(size) { var query = this.get(size); if (query) { return window.matchMedia(query).matches; } return false; }, /** * Checks if the screen is within the given breakpoint. * If smaller than the breakpoint of larger than its upper limit it returns false. * @function * @param {String} size - Name of the breakpoint to check. * @returns {Boolean} `true` if the breakpoint matches, `false` otherwise. */ only: function only(size) { return size === this._getCurrentSize(); }, /** * Checks if the screen is within a breakpoint or smaller. * @function * @param {String} size - Name of the breakpoint to check. * @returns {Boolean} `true` if the breakpoint matches, `false` if it's larger. */ upTo: function upTo(size) { var nextSize = this.next(size); // If the next breakpoint does not match, the screen is smaller than // the upper limit of this breakpoint. if (nextSize) { return !this.atLeast(nextSize); } // If there is no next breakpoint, the "size" breakpoint does not have // an upper limit and the screen will always be within it or smaller. return true; }, /** * Checks if the screen matches to a breakpoint. * @function * @param {String} size - Name of the breakpoint to check, either 'small only' or 'small'. Omitting 'only' falls back to using atLeast() method. * @returns {Boolean} `true` if the breakpoint matches, `false` if it does not. */ is: function is(size) { var parts = size.trim().split(' ').filter(function (p) { return !!p.length; }); var _parts = _slicedToArray(parts, 2), bpSize = _parts[0], _parts$ = _parts[1], bpModifier = _parts$ === void 0 ? '' : _parts$; // Only the breakpont if (bpModifier === 'only') { return this.only(bpSize); } // At least the breakpoint (included) if (!bpModifier || bpModifier === 'up') { return this.atLeast(bpSize); } // Up to the breakpoint (included) if (bpModifier === 'down') { return this.upTo(bpSize); } throw new Error("\n Invalid breakpoint passed to MediaQuery.is().\n Expected a breakpoint name formatted like \" \", got \"".concat(size, "\".\n ")); }, /** * Gets the media query of a breakpoint. * @function * @param {String} size - Name of the breakpoint to get. * @returns {String|null} - The media query of the breakpoint, or `null` if the breakpoint doesn't exist. */ get: function get(size) { for (var i in this.queries) { if (this.queries.hasOwnProperty(i)) { var query = this.queries[i]; if (size === query.name) return query.value; } } return null; }, /** * Get the breakpoint following the given breakpoint. * @function * @param {String} size - Name of the breakpoint. * @returns {String|null} - The name of the following breakpoint, or `null` if the passed breakpoint was the last one. */ next: function next(size) { var _this = this; var queryIndex = this.queries.findIndex(function (q) { return _this._getQueryName(q) === size; }); if (queryIndex === -1) { throw new Error("\n Unknown breakpoint \"".concat(size, "\" passed to MediaQuery.next().\n Ensure it is present in your Sass \"$breakpoints\" setting.\n ")); } var nextQuery = this.queries[queryIndex + 1]; return nextQuery ? nextQuery.name : null; }, /** * Returns the name of the breakpoint related to the given value. * @function * @private * @param {String|Object} value - Breakpoint name or query object. * @returns {String} Name of the breakpoint. */ _getQueryName: function _getQueryName(value) { if (typeof value === 'string') return value; if (_typeof(value) === 'object') return value.name; throw new TypeError("\n Invalid value passed to MediaQuery._getQueryName().\n Expected a breakpoint name (String) or a breakpoint query (Object), got \"".concat(value, "\" (").concat(_typeof(value), ")\n ")); }, /** * Gets the current breakpoint name by testing every breakpoint and returning the last one to match (the biggest one). * @function * @private * @returns {String} Name of the current breakpoint. */ _getCurrentSize: function _getCurrentSize() { var matched; for (var i = 0; i < this.queries.length; i++) { var query = this.queries[i]; if (window.matchMedia(query.value).matches) { matched = query; } } return matched && this._getQueryName(matched); }, /** * Activates the breakpoint watcher, which fires an event on the window whenever the breakpoint changes. * @function * @private */ _watcher: function _watcher() { var _this2 = this; jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).on('resize.zf.trigger', function () { var newSize = _this2._getCurrentSize(), currentSize = _this2.current; if (newSize !== currentSize) { // Change the current media query _this2.current = newSize; // Broadcast the media query change on the window jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).trigger('changed.zf.mediaquery', [newSize, currentSize]); } }); } }; // Thank you: https://github.com/sindresorhus/query-string function parseStyleToObject(str) { var styleObject = {}; if (typeof str !== 'string') { return styleObject; } str = str.trim().slice(1, -1); // browsers re-quote string style values if (!str) { return styleObject; } styleObject = str.split('&').reduce(function (ret, param) { var parts = param.replace(/\+/g, ' ').split('='); var key = parts[0]; var val = parts[1]; key = decodeURIComponent(key); // missing `=` should be `null`: // http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters val = typeof val === 'undefined' ? null : decodeURIComponent(val); if (!ret.hasOwnProperty(key)) { ret[key] = val; } else if (Array.isArray(ret[key])) { ret[key].push(val); } else { ret[key] = [ret[key], val]; } return ret; }, {}); return styleObject; } /***/ }), /***/ "./foundation.core": /*!****************************************************************************************************************************************************************!*\ !*** external {"root":["__FOUNDATION_EXTERNAL__","foundation.core"],"amd":"./foundation.core","commonjs":"./foundation.core","commonjs2":"./foundation.core"} ***! \****************************************************************************************************************************************************************/ /***/ (function(module) { module.exports = __WEBPACK_EXTERNAL_MODULE__foundation_core__; /***/ }), /***/ "jquery": /*!********************************************************************************************!*\ !*** external {"root":["jQuery"],"amd":"jquery","commonjs":"jquery","commonjs2":"jquery"} ***! \********************************************************************************************/ /***/ (function(module) { module.exports = __WEBPACK_EXTERNAL_MODULE_jquery__; /***/ }) /******/ }); /************************************************************************/ /******/ // The module cache /******/ var __webpack_module_cache__ = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ var cachedModule = __webpack_module_cache__[moduleId]; /******/ if (cachedModule !== undefined) { /******/ return cachedModule.exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = __webpack_module_cache__[moduleId] = { /******/ // no module.id needed /******/ // no module.loaded needed /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /************************************************************************/ /******/ /* webpack/runtime/compat get default export */ /******/ !function() { /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function() { return module['default']; } : /******/ function() { return module; }; /******/ __webpack_require__.d(getter, { a: getter }); /******/ return getter; /******/ }; /******/ }(); /******/ /******/ /* webpack/runtime/define property getters */ /******/ !function() { /******/ // define getter functions for harmony exports /******/ __webpack_require__.d = function(exports, definition) { /******/ for(var key in definition) { /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); /******/ } /******/ } /******/ }; /******/ }(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ /******/ !function() { /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); } /******/ }(); /******/ /******/ /* webpack/runtime/make namespace object */ /******/ !function() { /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ }(); /******/ /************************************************************************/ var __webpack_exports__ = {}; // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk. !function() { /*!**********************************************************!*\ !*** ./js/entries/plugins/foundation.util.mediaQuery.js ***! \**********************************************************/ __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ Foundation: function() { return /* reexport safe */ _foundation_core__WEBPACK_IMPORTED_MODULE_0__.Foundation; }, /* harmony export */ MediaQuery: function() { return /* reexport safe */ _foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_1__.MediaQuery; } /* harmony export */ }); /* harmony import */ var _foundation_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./foundation.core */ "./foundation.core"); /* harmony import */ var _foundation_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_foundation_core__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../foundation.util.mediaQuery */ "./js/foundation.util.mediaQuery.js"); _foundation_core__WEBPACK_IMPORTED_MODULE_0__.Foundation.MediaQuery = _foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_1__.MediaQuery; _foundation_core__WEBPACK_IMPORTED_MODULE_0__.Foundation.MediaQuery._init(); }(); /******/ return __webpack_exports__; /******/ })() ; }); //# sourceMappingURL=foundation.util.mediaQuery.js.map