viewport.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. this["wp"] = this["wp"] || {}; this["wp"]["viewport"] =
  2. /******/ (function(modules) { // webpackBootstrap
  3. /******/ // The module cache
  4. /******/ var installedModules = {};
  5. /******/
  6. /******/ // The require function
  7. /******/ function __webpack_require__(moduleId) {
  8. /******/
  9. /******/ // Check if module is in cache
  10. /******/ if(installedModules[moduleId]) {
  11. /******/ return installedModules[moduleId].exports;
  12. /******/ }
  13. /******/ // Create a new module (and put it into the cache)
  14. /******/ var module = installedModules[moduleId] = {
  15. /******/ i: moduleId,
  16. /******/ l: false,
  17. /******/ exports: {}
  18. /******/ };
  19. /******/
  20. /******/ // Execute the module function
  21. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  22. /******/
  23. /******/ // Flag the module as loaded
  24. /******/ module.l = true;
  25. /******/
  26. /******/ // Return the exports of the module
  27. /******/ return module.exports;
  28. /******/ }
  29. /******/
  30. /******/
  31. /******/ // expose the modules object (__webpack_modules__)
  32. /******/ __webpack_require__.m = modules;
  33. /******/
  34. /******/ // expose the module cache
  35. /******/ __webpack_require__.c = installedModules;
  36. /******/
  37. /******/ // define getter function for harmony exports
  38. /******/ __webpack_require__.d = function(exports, name, getter) {
  39. /******/ if(!__webpack_require__.o(exports, name)) {
  40. /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
  41. /******/ }
  42. /******/ };
  43. /******/
  44. /******/ // define __esModule on exports
  45. /******/ __webpack_require__.r = function(exports) {
  46. /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  47. /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  48. /******/ }
  49. /******/ Object.defineProperty(exports, '__esModule', { value: true });
  50. /******/ };
  51. /******/
  52. /******/ // create a fake namespace object
  53. /******/ // mode & 1: value is a module id, require it
  54. /******/ // mode & 2: merge all properties of value into the ns
  55. /******/ // mode & 4: return value when already ns object
  56. /******/ // mode & 8|1: behave like require
  57. /******/ __webpack_require__.t = function(value, mode) {
  58. /******/ if(mode & 1) value = __webpack_require__(value);
  59. /******/ if(mode & 8) return value;
  60. /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  61. /******/ var ns = Object.create(null);
  62. /******/ __webpack_require__.r(ns);
  63. /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  64. /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  65. /******/ return ns;
  66. /******/ };
  67. /******/
  68. /******/ // getDefaultExport function for compatibility with non-harmony modules
  69. /******/ __webpack_require__.n = function(module) {
  70. /******/ var getter = module && module.__esModule ?
  71. /******/ function getDefault() { return module['default']; } :
  72. /******/ function getModuleExports() { return module; };
  73. /******/ __webpack_require__.d(getter, 'a', getter);
  74. /******/ return getter;
  75. /******/ };
  76. /******/
  77. /******/ // Object.prototype.hasOwnProperty.call
  78. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  79. /******/
  80. /******/ // __webpack_public_path__
  81. /******/ __webpack_require__.p = "";
  82. /******/
  83. /******/
  84. /******/ // Load entry module and return exports
  85. /******/ return __webpack_require__(__webpack_require__.s = 357);
  86. /******/ })
  87. /************************************************************************/
  88. /******/ ({
  89. /***/ 2:
  90. /***/ (function(module, exports) {
  91. (function() { module.exports = this["lodash"]; }());
  92. /***/ }),
  93. /***/ 357:
  94. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  95. "use strict";
  96. __webpack_require__.r(__webpack_exports__);
  97. var actions_namespaceObject = {};
  98. __webpack_require__.r(actions_namespaceObject);
  99. __webpack_require__.d(actions_namespaceObject, "setIsMatching", function() { return setIsMatching; });
  100. var selectors_namespaceObject = {};
  101. __webpack_require__.r(selectors_namespaceObject);
  102. __webpack_require__.d(selectors_namespaceObject, "isViewportMatch", function() { return isViewportMatch; });
  103. // EXTERNAL MODULE: external "lodash"
  104. var external_lodash_ = __webpack_require__(2);
  105. // EXTERNAL MODULE: external {"this":["wp","data"]}
  106. var external_this_wp_data_ = __webpack_require__(4);
  107. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/reducer.js
  108. /**
  109. * Reducer returning the viewport state, as keys of breakpoint queries with
  110. * boolean value representing whether query is matched.
  111. *
  112. * @param {Object} state Current state.
  113. * @param {Object} action Dispatched action.
  114. *
  115. * @return {Object} Updated state.
  116. */
  117. function reducer() {
  118. var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  119. var action = arguments.length > 1 ? arguments[1] : undefined;
  120. switch (action.type) {
  121. case 'SET_IS_MATCHING':
  122. return action.values;
  123. }
  124. return state;
  125. }
  126. /* harmony default export */ var store_reducer = (reducer);
  127. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/actions.js
  128. /**
  129. * Returns an action object used in signalling that viewport queries have been
  130. * updated. Values are specified as an object of breakpoint query keys where
  131. * value represents whether query matches.
  132. *
  133. * @param {Object} values Breakpoint query matches.
  134. *
  135. * @return {Object} Action object.
  136. */
  137. function setIsMatching(values) {
  138. return {
  139. type: 'SET_IS_MATCHING',
  140. values: values
  141. };
  142. }
  143. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/selectors.js
  144. /**
  145. * Returns true if the viewport matches the given query, or false otherwise.
  146. *
  147. * @param {Object} state Viewport state object.
  148. * @param {string} query Query string. Includes operator and breakpoint name,
  149. * space separated. Operator defaults to >=.
  150. *
  151. * @example
  152. *
  153. * ```js
  154. * isViewportMatch( state, '< huge' );
  155. * isViewPortMatch( state, 'medium' );
  156. * ```
  157. *
  158. * @return {boolean} Whether viewport matches query.
  159. */
  160. function isViewportMatch(state, query) {
  161. // Default to `>=` if no operator is present.
  162. if (query.indexOf(' ') === -1) {
  163. query = '>= ' + query;
  164. }
  165. return !!state[query];
  166. }
  167. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/index.js
  168. /**
  169. * WordPress dependencies
  170. */
  171. /**
  172. * Internal dependencies
  173. */
  174. /* harmony default export */ var store = (Object(external_this_wp_data_["registerStore"])('core/viewport', {
  175. reducer: store_reducer,
  176. actions: actions_namespaceObject,
  177. selectors: selectors_namespaceObject
  178. }));
  179. // EXTERNAL MODULE: external {"this":["wp","compose"]}
  180. var external_this_wp_compose_ = __webpack_require__(8);
  181. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/with-viewport-match.js
  182. /**
  183. * External dependencies
  184. */
  185. /**
  186. * WordPress dependencies
  187. */
  188. /**
  189. * Higher-order component creator, creating a new component which renders with
  190. * the given prop names, where the value passed to the underlying component is
  191. * the result of the query assigned as the object's value.
  192. *
  193. * @see isViewportMatch
  194. *
  195. * @param {Object} queries Object of prop name to viewport query.
  196. *
  197. * @example
  198. *
  199. * ```jsx
  200. * function MyComponent( { isMobile } ) {
  201. * return (
  202. * <div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div>
  203. * );
  204. * }
  205. *
  206. * MyComponent = withViewportMatch( { isMobile: '< small' } )( MyComponent );
  207. * ```
  208. *
  209. * @return {Function} Higher-order component.
  210. */
  211. var with_viewport_match_withViewportMatch = function withViewportMatch(queries) {
  212. return Object(external_this_wp_compose_["createHigherOrderComponent"])(Object(external_this_wp_data_["withSelect"])(function (select) {
  213. return Object(external_lodash_["mapValues"])(queries, function (query) {
  214. return select('core/viewport').isViewportMatch(query);
  215. });
  216. }), 'withViewportMatch');
  217. };
  218. /* harmony default export */ var with_viewport_match = (with_viewport_match_withViewportMatch);
  219. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/if-viewport-matches.js
  220. /**
  221. * WordPress dependencies
  222. */
  223. /**
  224. * Internal dependencies
  225. */
  226. /**
  227. * Higher-order component creator, creating a new component which renders if
  228. * the viewport query is satisfied.
  229. *
  230. * @see withViewportMatches
  231. *
  232. * @param {string} query Viewport query.
  233. *
  234. * @example
  235. *
  236. * ```jsx
  237. * function MyMobileComponent() {
  238. * return <div>I'm only rendered on mobile viewports!</div>;
  239. * }
  240. *
  241. * MyMobileComponent = ifViewportMatches( '< small' )( MyMobileComponent );
  242. * ```
  243. *
  244. * @return {Function} Higher-order component.
  245. */
  246. var if_viewport_matches_ifViewportMatches = function ifViewportMatches(query) {
  247. return Object(external_this_wp_compose_["createHigherOrderComponent"])(Object(external_this_wp_compose_["compose"])([with_viewport_match({
  248. isViewportMatch: query
  249. }), Object(external_this_wp_compose_["ifCondition"])(function (props) {
  250. return props.isViewportMatch;
  251. })]), 'ifViewportMatches');
  252. };
  253. /* harmony default export */ var if_viewport_matches = (if_viewport_matches_ifViewportMatches);
  254. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/index.js
  255. /* concated harmony reexport ifViewportMatches */__webpack_require__.d(__webpack_exports__, "ifViewportMatches", function() { return if_viewport_matches; });
  256. /* concated harmony reexport withViewportMatch */__webpack_require__.d(__webpack_exports__, "withViewportMatch", function() { return with_viewport_match; });
  257. /**
  258. * External dependencies
  259. */
  260. /**
  261. * WordPress dependencies
  262. */
  263. /**
  264. * Internal dependencies
  265. */
  266. /**
  267. * Hash of breakpoint names with pixel width at which it becomes effective.
  268. *
  269. * @see _breakpoints.scss
  270. *
  271. * @type {Object}
  272. */
  273. var BREAKPOINTS = {
  274. huge: 1440,
  275. wide: 1280,
  276. large: 960,
  277. medium: 782,
  278. small: 600,
  279. mobile: 480
  280. };
  281. /**
  282. * Hash of query operators with corresponding condition for media query.
  283. *
  284. * @type {Object}
  285. */
  286. var OPERATORS = {
  287. '<': 'max-width',
  288. '>=': 'min-width'
  289. };
  290. /**
  291. * Callback invoked when media query state should be updated. Is invoked a
  292. * maximum of one time per call stack.
  293. */
  294. var build_module_setIsMatching = Object(external_lodash_["debounce"])(function () {
  295. var values = Object(external_lodash_["mapValues"])(build_module_queries, function (query) {
  296. return query.matches;
  297. });
  298. Object(external_this_wp_data_["dispatch"])('core/viewport').setIsMatching(values);
  299. }, {
  300. leading: true
  301. });
  302. /**
  303. * Hash of breakpoint names with generated MediaQueryList for corresponding
  304. * media query.
  305. *
  306. * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
  307. * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
  308. *
  309. * @type {Object<string,MediaQueryList>}
  310. */
  311. var build_module_queries = Object(external_lodash_["reduce"])(BREAKPOINTS, function (result, width, name) {
  312. Object(external_lodash_["forEach"])(OPERATORS, function (condition, operator) {
  313. var list = window.matchMedia("(".concat(condition, ": ").concat(width, "px)"));
  314. list.addListener(build_module_setIsMatching);
  315. var key = [operator, name].join(' ');
  316. result[key] = list;
  317. });
  318. return result;
  319. }, {});
  320. window.addEventListener('orientationchange', build_module_setIsMatching); // Set initial values
  321. build_module_setIsMatching();
  322. build_module_setIsMatching.flush();
  323. /***/ }),
  324. /***/ 4:
  325. /***/ (function(module, exports) {
  326. (function() { module.exports = this["wp"]["data"]; }());
  327. /***/ }),
  328. /***/ 8:
  329. /***/ (function(module, exports) {
  330. (function() { module.exports = this["wp"]["compose"]; }());
  331. /***/ })
  332. /******/ });