foundation.util.mediaQuery.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  1. (function webpackUniversalModuleDefinition(root, factory) {
  2. if(typeof exports === 'object' && typeof module === 'object')
  3. module.exports = factory(require("./foundation.core"), require("jquery"));
  4. else if(typeof define === 'function' && define.amd)
  5. define(["./foundation.core", "jquery"], factory);
  6. else if(typeof exports === 'object')
  7. exports["foundation.util.mediaQuery"] = factory(require("./foundation.core"), require("jquery"));
  8. else
  9. root["__FOUNDATION_EXTERNAL__"] = root["__FOUNDATION_EXTERNAL__"] || {}, root["__FOUNDATION_EXTERNAL__"]["foundation.util.mediaQuery"] = factory(root["__FOUNDATION_EXTERNAL__"]["foundation.core"], root["jQuery"]);
  10. })(window, function(__WEBPACK_EXTERNAL_MODULE__foundation_core__, __WEBPACK_EXTERNAL_MODULE_jquery__) {
  11. return /******/ (function(modules) { // webpackBootstrap
  12. /******/ // The module cache
  13. /******/ var installedModules = {};
  14. /******/
  15. /******/ // The require function
  16. /******/ function __webpack_require__(moduleId) {
  17. /******/
  18. /******/ // Check if module is in cache
  19. /******/ if(installedModules[moduleId]) {
  20. /******/ return installedModules[moduleId].exports;
  21. /******/ }
  22. /******/ // Create a new module (and put it into the cache)
  23. /******/ var module = installedModules[moduleId] = {
  24. /******/ i: moduleId,
  25. /******/ l: false,
  26. /******/ exports: {}
  27. /******/ };
  28. /******/
  29. /******/ // Execute the module function
  30. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  31. /******/
  32. /******/ // Flag the module as loaded
  33. /******/ module.l = true;
  34. /******/
  35. /******/ // Return the exports of the module
  36. /******/ return module.exports;
  37. /******/ }
  38. /******/
  39. /******/
  40. /******/ // expose the modules object (__webpack_modules__)
  41. /******/ __webpack_require__.m = modules;
  42. /******/
  43. /******/ // expose the module cache
  44. /******/ __webpack_require__.c = installedModules;
  45. /******/
  46. /******/ // define getter function for harmony exports
  47. /******/ __webpack_require__.d = function(exports, name, getter) {
  48. /******/ if(!__webpack_require__.o(exports, name)) {
  49. /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
  50. /******/ }
  51. /******/ };
  52. /******/
  53. /******/ // define __esModule on exports
  54. /******/ __webpack_require__.r = function(exports) {
  55. /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  56. /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  57. /******/ }
  58. /******/ Object.defineProperty(exports, '__esModule', { value: true });
  59. /******/ };
  60. /******/
  61. /******/ // create a fake namespace object
  62. /******/ // mode & 1: value is a module id, require it
  63. /******/ // mode & 2: merge all properties of value into the ns
  64. /******/ // mode & 4: return value when already ns object
  65. /******/ // mode & 8|1: behave like require
  66. /******/ __webpack_require__.t = function(value, mode) {
  67. /******/ if(mode & 1) value = __webpack_require__(value);
  68. /******/ if(mode & 8) return value;
  69. /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  70. /******/ var ns = Object.create(null);
  71. /******/ __webpack_require__.r(ns);
  72. /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  73. /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  74. /******/ return ns;
  75. /******/ };
  76. /******/
  77. /******/ // getDefaultExport function for compatibility with non-harmony modules
  78. /******/ __webpack_require__.n = function(module) {
  79. /******/ var getter = module && module.__esModule ?
  80. /******/ function getDefault() { return module['default']; } :
  81. /******/ function getModuleExports() { return module; };
  82. /******/ __webpack_require__.d(getter, 'a', getter);
  83. /******/ return getter;
  84. /******/ };
  85. /******/
  86. /******/ // Object.prototype.hasOwnProperty.call
  87. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  88. /******/
  89. /******/ // __webpack_public_path__
  90. /******/ __webpack_require__.p = "";
  91. /******/
  92. /******/
  93. /******/ // Load entry module and return exports
  94. /******/ return __webpack_require__(__webpack_require__.s = 24);
  95. /******/ })
  96. /************************************************************************/
  97. /******/ ({
  98. /***/ "./foundation.core":
  99. /*!****************************************************************************************************************************************************************!*\
  100. !*** external {"root":["__FOUNDATION_EXTERNAL__","foundation.core"],"amd":"./foundation.core","commonjs":"./foundation.core","commonjs2":"./foundation.core"} ***!
  101. \****************************************************************************************************************************************************************/
  102. /*! no static exports found */
  103. /***/ (function(module, exports) {
  104. module.exports = __WEBPACK_EXTERNAL_MODULE__foundation_core__;
  105. /***/ }),
  106. /***/ "./js/entries/plugins/foundation.util.mediaQuery.js":
  107. /*!**********************************************************!*\
  108. !*** ./js/entries/plugins/foundation.util.mediaQuery.js ***!
  109. \**********************************************************/
  110. /*! exports provided: Foundation, MediaQuery */
  111. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  112. "use strict";
  113. __webpack_require__.r(__webpack_exports__);
  114. /* harmony import */ var _foundation_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./foundation.core */ "./foundation.core");
  115. /* harmony import */ var _foundation_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_foundation_core__WEBPACK_IMPORTED_MODULE_0__);
  116. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Foundation", function() { return _foundation_core__WEBPACK_IMPORTED_MODULE_0__["Foundation"]; });
  117. /* harmony import */ var _foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../foundation.util.mediaQuery */ "./js/foundation.util.mediaQuery.js");
  118. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MediaQuery", function() { return _foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_1__["MediaQuery"]; });
  119. _foundation_core__WEBPACK_IMPORTED_MODULE_0__["Foundation"].MediaQuery = _foundation_util_mediaQuery__WEBPACK_IMPORTED_MODULE_1__["MediaQuery"];
  120. _foundation_core__WEBPACK_IMPORTED_MODULE_0__["Foundation"].MediaQuery._init();
  121. /***/ }),
  122. /***/ "./js/foundation.util.mediaQuery.js":
  123. /*!******************************************!*\
  124. !*** ./js/foundation.util.mediaQuery.js ***!
  125. \******************************************/
  126. /*! exports provided: MediaQuery */
  127. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  128. "use strict";
  129. __webpack_require__.r(__webpack_exports__);
  130. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MediaQuery", function() { return MediaQuery; });
  131. /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ "jquery");
  132. /* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);
  133. 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); }
  134. function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
  135. function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
  136. function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
  137. function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  138. // Default set of media queries
  139. var defaultQueries = {
  140. 'default': 'only screen',
  141. landscape: 'only screen and (orientation: landscape)',
  142. portrait: 'only screen and (orientation: portrait)',
  143. 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)'
  144. }; // matchMedia() polyfill - Test a CSS media type/query in JS.
  145. // Authors & copyright © 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. MIT license
  146. /* eslint-disable */
  147. window.matchMedia || (window.matchMedia = function () {
  148. "use strict"; // For browsers that support matchMedium api such as IE 9 and webkit
  149. var styleMedia = window.styleMedia || window.media; // For those that don't support matchMedium
  150. if (!styleMedia) {
  151. var style = document.createElement('style'),
  152. script = document.getElementsByTagName('script')[0],
  153. info = null;
  154. style.type = 'text/css';
  155. style.id = 'matchmediajs-test';
  156. if (!script) {
  157. document.head.appendChild(style);
  158. } else {
  159. script.parentNode.insertBefore(style, script);
  160. } // 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
  161. info = 'getComputedStyle' in window && window.getComputedStyle(style, null) || style.currentStyle;
  162. styleMedia = {
  163. matchMedium: function matchMedium(media) {
  164. var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }'; // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
  165. if (style.styleSheet) {
  166. style.styleSheet.cssText = text;
  167. } else {
  168. style.textContent = text;
  169. } // Test if media query is true or false
  170. return info.width === '1px';
  171. }
  172. };
  173. }
  174. return function (media) {
  175. return {
  176. matches: styleMedia.matchMedium(media || 'all'),
  177. media: media || 'all'
  178. };
  179. };
  180. }());
  181. /* eslint-enable */
  182. var MediaQuery = {
  183. queries: [],
  184. current: '',
  185. /**
  186. * Initializes the media query helper, by extracting the breakpoint list from the CSS and activating the breakpoint watcher.
  187. * @function
  188. * @private
  189. */
  190. _init: function _init() {
  191. // make sure the initialization is only done once when calling _init() several times
  192. if (this.isInitialized === true) {
  193. return;
  194. } else {
  195. this.isInitialized = true;
  196. }
  197. var self = this;
  198. var $meta = jquery__WEBPACK_IMPORTED_MODULE_0___default()('meta.foundation-mq');
  199. if (!$meta.length) {
  200. jquery__WEBPACK_IMPORTED_MODULE_0___default()('<meta class="foundation-mq">').appendTo(document.head);
  201. }
  202. var extractedStyles = jquery__WEBPACK_IMPORTED_MODULE_0___default()('.foundation-mq').css('font-family');
  203. var namedQueries;
  204. namedQueries = parseStyleToObject(extractedStyles);
  205. self.queries = []; // reset
  206. for (var key in namedQueries) {
  207. if (namedQueries.hasOwnProperty(key)) {
  208. self.queries.push({
  209. name: key,
  210. value: "only screen and (min-width: ".concat(namedQueries[key], ")")
  211. });
  212. }
  213. }
  214. this.current = this._getCurrentSize();
  215. this._watcher();
  216. },
  217. /**
  218. * Reinitializes the media query helper.
  219. * Useful if your CSS breakpoint configuration has just been loaded or has changed since the initialization.
  220. * @function
  221. * @private
  222. */
  223. _reInit: function _reInit() {
  224. this.isInitialized = false;
  225. this._init();
  226. },
  227. /**
  228. * Checks if the screen is at least as wide as a breakpoint.
  229. * @function
  230. * @param {String} size - Name of the breakpoint to check.
  231. * @returns {Boolean} `true` if the breakpoint matches, `false` if it's smaller.
  232. */
  233. atLeast: function atLeast(size) {
  234. var query = this.get(size);
  235. if (query) {
  236. return window.matchMedia(query).matches;
  237. }
  238. return false;
  239. },
  240. /**
  241. * Checks if the screen is within the given breakpoint.
  242. * If smaller than the breakpoint of larger than its upper limit it returns false.
  243. * @function
  244. * @param {String} size - Name of the breakpoint to check.
  245. * @returns {Boolean} `true` if the breakpoint matches, `false` otherwise.
  246. */
  247. only: function only(size) {
  248. return size === this._getCurrentSize();
  249. },
  250. /**
  251. * Checks if the screen is within a breakpoint or smaller.
  252. * @function
  253. * @param {String} size - Name of the breakpoint to check.
  254. * @returns {Boolean} `true` if the breakpoint matches, `false` if it's larger.
  255. */
  256. upTo: function upTo(size) {
  257. var nextSize = this.next(size); // If the next breakpoint does not match, the screen is smaller than
  258. // the upper limit of this breakpoint.
  259. if (nextSize) {
  260. return !this.atLeast(nextSize);
  261. } // If there is no next breakpoint, the "size" breakpoint does not have
  262. // an upper limit and the screen will always be within it or smaller.
  263. return true;
  264. },
  265. /**
  266. * Checks if the screen matches to a breakpoint.
  267. * @function
  268. * @param {String} size - Name of the breakpoint to check, either 'small only' or 'small'. Omitting 'only' falls back to using atLeast() method.
  269. * @returns {Boolean} `true` if the breakpoint matches, `false` if it does not.
  270. */
  271. is: function is(size) {
  272. var parts = size.trim().split(' ').filter(function (p) {
  273. return !!p.length;
  274. });
  275. var _parts = _slicedToArray(parts, 2),
  276. bpSize = _parts[0],
  277. _parts$ = _parts[1],
  278. bpModifier = _parts$ === void 0 ? '' : _parts$; // Only the breakpont
  279. if (bpModifier === 'only') {
  280. return this.only(bpSize);
  281. } // At least the breakpoint (included)
  282. if (!bpModifier || bpModifier === 'up') {
  283. return this.atLeast(bpSize);
  284. } // Up to the breakpoint (included)
  285. if (bpModifier === 'down') {
  286. return this.upTo(bpSize);
  287. }
  288. throw new Error("\n Invalid breakpoint passed to MediaQuery.is().\n Expected a breakpoint name formatted like \"<size> <modifier>\", got \"".concat(size, "\".\n "));
  289. },
  290. /**
  291. * Gets the media query of a breakpoint.
  292. * @function
  293. * @param {String} size - Name of the breakpoint to get.
  294. * @returns {String|null} - The media query of the breakpoint, or `null` if the breakpoint doesn't exist.
  295. */
  296. get: function get(size) {
  297. for (var i in this.queries) {
  298. if (this.queries.hasOwnProperty(i)) {
  299. var query = this.queries[i];
  300. if (size === query.name) return query.value;
  301. }
  302. }
  303. return null;
  304. },
  305. /**
  306. * Get the breakpoint following the given breakpoint.
  307. * @function
  308. * @param {String} size - Name of the breakpoint.
  309. * @returns {String|null} - The name of the following breakpoint, or `null` if the passed breakpoint was the last one.
  310. */
  311. next: function next(size) {
  312. var _this = this;
  313. var queryIndex = this.queries.findIndex(function (q) {
  314. return _this._getQueryName(q) === size;
  315. });
  316. if (queryIndex === -1) {
  317. throw new Error("\n Unknown breakpoint \"".concat(size, "\" passed to MediaQuery.next().\n Ensure it is present in your Sass \"$breakpoints\" setting.\n "));
  318. }
  319. var nextQuery = this.queries[queryIndex + 1];
  320. return nextQuery ? nextQuery.name : null;
  321. },
  322. /**
  323. * Returns the name of the breakpoint related to the given value.
  324. * @function
  325. * @private
  326. * @param {String|Object} value - Breakpoint name or query object.
  327. * @returns {String} Name of the breakpoint.
  328. */
  329. _getQueryName: function _getQueryName(value) {
  330. if (typeof value === 'string') return value;
  331. if (_typeof(value) === 'object') return value.name;
  332. 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 "));
  333. },
  334. /**
  335. * Gets the current breakpoint name by testing every breakpoint and returning the last one to match (the biggest one).
  336. * @function
  337. * @private
  338. * @returns {String} Name of the current breakpoint.
  339. */
  340. _getCurrentSize: function _getCurrentSize() {
  341. var matched;
  342. for (var i = 0; i < this.queries.length; i++) {
  343. var query = this.queries[i];
  344. if (window.matchMedia(query.value).matches) {
  345. matched = query;
  346. }
  347. }
  348. return matched && this._getQueryName(matched);
  349. },
  350. /**
  351. * Activates the breakpoint watcher, which fires an event on the window whenever the breakpoint changes.
  352. * @function
  353. * @private
  354. */
  355. _watcher: function _watcher() {
  356. var _this2 = this;
  357. jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).off('resize.zf.mediaquery').on('resize.zf.mediaquery', function () {
  358. var newSize = _this2._getCurrentSize(),
  359. currentSize = _this2.current;
  360. if (newSize !== currentSize) {
  361. // Change the current media query
  362. _this2.current = newSize; // Broadcast the media query change on the window
  363. jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).trigger('changed.zf.mediaquery', [newSize, currentSize]);
  364. }
  365. });
  366. }
  367. }; // Thank you: https://github.com/sindresorhus/query-string
  368. function parseStyleToObject(str) {
  369. var styleObject = {};
  370. if (typeof str !== 'string') {
  371. return styleObject;
  372. }
  373. str = str.trim().slice(1, -1); // browsers re-quote string style values
  374. if (!str) {
  375. return styleObject;
  376. }
  377. styleObject = str.split('&').reduce(function (ret, param) {
  378. var parts = param.replace(/\+/g, ' ').split('=');
  379. var key = parts[0];
  380. var val = parts[1];
  381. key = decodeURIComponent(key); // missing `=` should be `null`:
  382. // http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters
  383. val = typeof val === 'undefined' ? null : decodeURIComponent(val);
  384. if (!ret.hasOwnProperty(key)) {
  385. ret[key] = val;
  386. } else if (Array.isArray(ret[key])) {
  387. ret[key].push(val);
  388. } else {
  389. ret[key] = [ret[key], val];
  390. }
  391. return ret;
  392. }, {});
  393. return styleObject;
  394. }
  395. /***/ }),
  396. /***/ 24:
  397. /*!****************************************************************!*\
  398. !*** multi ./js/entries/plugins/foundation.util.mediaQuery.js ***!
  399. \****************************************************************/
  400. /*! no static exports found */
  401. /***/ (function(module, exports, __webpack_require__) {
  402. module.exports = __webpack_require__(/*! /Users/joeworkman/Development/foundation-sites/js/entries/plugins/foundation.util.mediaQuery.js */"./js/entries/plugins/foundation.util.mediaQuery.js");
  403. /***/ }),
  404. /***/ "jquery":
  405. /*!********************************************************************************************!*\
  406. !*** external {"root":["jQuery"],"amd":"jquery","commonjs":"jquery","commonjs2":"jquery"} ***!
  407. \********************************************************************************************/
  408. /*! no static exports found */
  409. /***/ (function(module, exports) {
  410. module.exports = __WEBPACK_EXTERNAL_MODULE_jquery__;
  411. /***/ })
  412. /******/ });
  413. });
  414. //# sourceMappingURL=foundation.util.mediaQuery.js.map