Nessuna descrizione

viewport.js 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465
  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 = "PR0u");
  86. /******/ })
  87. /************************************************************************/
  88. /******/ ({
  89. /***/ "1ZqX":
  90. /***/ (function(module, exports) {
  91. (function() { module.exports = window["wp"]["data"]; }());
  92. /***/ }),
  93. /***/ "GRId":
  94. /***/ (function(module, exports) {
  95. (function() { module.exports = window["wp"]["element"]; }());
  96. /***/ }),
  97. /***/ "K9lf":
  98. /***/ (function(module, exports) {
  99. (function() { module.exports = window["wp"]["compose"]; }());
  100. /***/ }),
  101. /***/ "PR0u":
  102. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  103. "use strict";
  104. // ESM COMPAT FLAG
  105. __webpack_require__.r(__webpack_exports__);
  106. // EXPORTS
  107. __webpack_require__.d(__webpack_exports__, "store", function() { return /* reexport */ store; });
  108. __webpack_require__.d(__webpack_exports__, "ifViewportMatches", function() { return /* reexport */ if_viewport_matches; });
  109. __webpack_require__.d(__webpack_exports__, "withViewportMatch", function() { return /* reexport */ with_viewport_match; });
  110. // NAMESPACE OBJECT: ./node_modules/@wordpress/viewport/build-module/store/actions.js
  111. var actions_namespaceObject = {};
  112. __webpack_require__.r(actions_namespaceObject);
  113. __webpack_require__.d(actions_namespaceObject, "setIsMatching", function() { return actions_setIsMatching; });
  114. // NAMESPACE OBJECT: ./node_modules/@wordpress/viewport/build-module/store/selectors.js
  115. var selectors_namespaceObject = {};
  116. __webpack_require__.r(selectors_namespaceObject);
  117. __webpack_require__.d(selectors_namespaceObject, "isViewportMatch", function() { return isViewportMatch; });
  118. // EXTERNAL MODULE: external "lodash"
  119. var external_lodash_ = __webpack_require__("YLtl");
  120. // EXTERNAL MODULE: external ["wp","data"]
  121. var external_wp_data_ = __webpack_require__("1ZqX");
  122. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/reducer.js
  123. /**
  124. * Reducer returning the viewport state, as keys of breakpoint queries with
  125. * boolean value representing whether query is matched.
  126. *
  127. * @param {Object} state Current state.
  128. * @param {Object} action Dispatched action.
  129. *
  130. * @return {Object} Updated state.
  131. */
  132. function reducer(state = {}, action) {
  133. switch (action.type) {
  134. case 'SET_IS_MATCHING':
  135. return action.values;
  136. }
  137. return state;
  138. }
  139. /* harmony default export */ var store_reducer = (reducer);
  140. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/actions.js
  141. /**
  142. * Returns an action object used in signalling that viewport queries have been
  143. * updated. Values are specified as an object of breakpoint query keys where
  144. * value represents whether query matches.
  145. *
  146. * @param {Object} values Breakpoint query matches.
  147. *
  148. * @return {Object} Action object.
  149. */
  150. function actions_setIsMatching(values) {
  151. return {
  152. type: 'SET_IS_MATCHING',
  153. values
  154. };
  155. }
  156. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/selectors.js
  157. /**
  158. * Returns true if the viewport matches the given query, or false otherwise.
  159. *
  160. * @param {Object} state Viewport state object.
  161. * @param {string} query Query string. Includes operator and breakpoint name,
  162. * space separated. Operator defaults to >=.
  163. *
  164. * @example
  165. *
  166. * ```js
  167. * isViewportMatch( state, '< huge' );
  168. * isViewPortMatch( state, 'medium' );
  169. * ```
  170. *
  171. * @return {boolean} Whether viewport matches query.
  172. */
  173. function isViewportMatch(state, query) {
  174. // Default to `>=` if no operator is present.
  175. if (query.indexOf(' ') === -1) {
  176. query = '>= ' + query;
  177. }
  178. return !!state[query];
  179. }
  180. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/index.js
  181. /**
  182. * WordPress dependencies
  183. */
  184. /**
  185. * Internal dependencies
  186. */
  187. const STORE_NAME = 'core/viewport';
  188. /**
  189. * Store definition for the viewport namespace.
  190. *
  191. * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
  192. *
  193. * @type {Object}
  194. */
  195. const store = Object(external_wp_data_["createReduxStore"])(STORE_NAME, {
  196. reducer: store_reducer,
  197. actions: actions_namespaceObject,
  198. selectors: selectors_namespaceObject
  199. });
  200. Object(external_wp_data_["register"])(store);
  201. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/listener.js
  202. /**
  203. * External dependencies
  204. */
  205. /**
  206. * WordPress dependencies
  207. */
  208. /**
  209. * Internal dependencies
  210. */
  211. const addDimensionsEventListener = (breakpoints, operators) => {
  212. /**
  213. * Callback invoked when media query state should be updated. Is invoked a
  214. * maximum of one time per call stack.
  215. */
  216. const setIsMatching = Object(external_lodash_["debounce"])(() => {
  217. const values = Object(external_lodash_["mapValues"])(queries, query => query.matches);
  218. Object(external_wp_data_["dispatch"])(store).setIsMatching(values);
  219. }, {
  220. leading: true
  221. });
  222. /**
  223. * Hash of breakpoint names with generated MediaQueryList for corresponding
  224. * media query.
  225. *
  226. * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
  227. * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
  228. *
  229. * @type {Object<string,MediaQueryList>}
  230. */
  231. const queries = Object(external_lodash_["reduce"])(breakpoints, (result, width, name) => {
  232. Object(external_lodash_["forEach"])(operators, (condition, operator) => {
  233. const list = window.matchMedia(`(${condition}: ${width}px)`);
  234. list.addListener(setIsMatching);
  235. const key = [operator, name].join(' ');
  236. result[key] = list;
  237. });
  238. return result;
  239. }, {});
  240. window.addEventListener('orientationchange', setIsMatching); // Set initial values
  241. setIsMatching();
  242. setIsMatching.flush();
  243. };
  244. /* harmony default export */ var listener = (addDimensionsEventListener);
  245. // EXTERNAL MODULE: external ["wp","compose"]
  246. var external_wp_compose_ = __webpack_require__("K9lf");
  247. // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js
  248. var esm_extends = __webpack_require__("wx14");
  249. // EXTERNAL MODULE: external ["wp","element"]
  250. var external_wp_element_ = __webpack_require__("GRId");
  251. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/with-viewport-match.js
  252. /**
  253. * External dependencies
  254. */
  255. /**
  256. * WordPress dependencies
  257. */
  258. /**
  259. * Higher-order component creator, creating a new component which renders with
  260. * the given prop names, where the value passed to the underlying component is
  261. * the result of the query assigned as the object's value.
  262. *
  263. * @see isViewportMatch
  264. *
  265. * @param {Object} queries Object of prop name to viewport query.
  266. *
  267. * @example
  268. *
  269. * ```jsx
  270. * function MyComponent( { isMobile } ) {
  271. * return (
  272. * <div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div>
  273. * );
  274. * }
  275. *
  276. * MyComponent = withViewportMatch( { isMobile: '< small' } )( MyComponent );
  277. * ```
  278. *
  279. * @return {Function} Higher-order component.
  280. */
  281. const withViewportMatch = queries => {
  282. const useViewPortQueriesResult = () => Object(external_lodash_["mapValues"])(queries, query => {
  283. let [operator, breakpointName] = query.split(' ');
  284. if (breakpointName === undefined) {
  285. breakpointName = operator;
  286. operator = '>=';
  287. } // Hooks should unconditionally execute in the same order,
  288. // we are respecting that as from the static query of the HOC we generate
  289. // a hook that calls other hooks always in the same order (because the query never changes).
  290. // eslint-disable-next-line react-hooks/rules-of-hooks
  291. return Object(external_wp_compose_["useViewportMatch"])(breakpointName, operator);
  292. });
  293. return Object(external_wp_compose_["createHigherOrderComponent"])(WrappedComponent => {
  294. return Object(external_wp_compose_["pure"])(props => {
  295. const queriesResult = useViewPortQueriesResult();
  296. return Object(external_wp_element_["createElement"])(WrappedComponent, Object(esm_extends["a" /* default */])({}, props, queriesResult));
  297. });
  298. }, 'withViewportMatch');
  299. };
  300. /* harmony default export */ var with_viewport_match = (withViewportMatch);
  301. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/if-viewport-matches.js
  302. /**
  303. * WordPress dependencies
  304. */
  305. /**
  306. * Internal dependencies
  307. */
  308. /**
  309. * Higher-order component creator, creating a new component which renders if
  310. * the viewport query is satisfied.
  311. *
  312. * @see withViewportMatches
  313. *
  314. * @param {string} query Viewport query.
  315. *
  316. * @example
  317. *
  318. * ```jsx
  319. * function MyMobileComponent() {
  320. * return <div>I'm only rendered on mobile viewports!</div>;
  321. * }
  322. *
  323. * MyMobileComponent = ifViewportMatches( '< small' )( MyMobileComponent );
  324. * ```
  325. *
  326. * @return {Function} Higher-order component.
  327. */
  328. const ifViewportMatches = query => Object(external_wp_compose_["createHigherOrderComponent"])(Object(external_wp_compose_["compose"])([with_viewport_match({
  329. isViewportMatch: query
  330. }), Object(external_wp_compose_["ifCondition"])(props => props.isViewportMatch)]), 'ifViewportMatches');
  331. /* harmony default export */ var if_viewport_matches = (ifViewportMatches);
  332. // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/index.js
  333. /**
  334. * Internal dependencies
  335. */
  336. /**
  337. * Hash of breakpoint names with pixel width at which it becomes effective.
  338. *
  339. * @see _breakpoints.scss
  340. *
  341. * @type {Object}
  342. */
  343. const BREAKPOINTS = {
  344. huge: 1440,
  345. wide: 1280,
  346. large: 960,
  347. medium: 782,
  348. small: 600,
  349. mobile: 480
  350. };
  351. /**
  352. * Hash of query operators with corresponding condition for media query.
  353. *
  354. * @type {Object}
  355. */
  356. const OPERATORS = {
  357. '<': 'max-width',
  358. '>=': 'min-width'
  359. };
  360. listener(BREAKPOINTS, OPERATORS);
  361. /***/ }),
  362. /***/ "YLtl":
  363. /***/ (function(module, exports) {
  364. (function() { module.exports = window["lodash"]; }());
  365. /***/ }),
  366. /***/ "wx14":
  367. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  368. "use strict";
  369. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _extends; });
  370. function _extends() {
  371. _extends = Object.assign || function (target) {
  372. for (var i = 1; i < arguments.length; i++) {
  373. var source = arguments[i];
  374. for (var key in source) {
  375. if (Object.prototype.hasOwnProperty.call(source, key)) {
  376. target[key] = source[key];
  377. }
  378. }
  379. }
  380. return target;
  381. };
  382. return _extends.apply(this, arguments);
  383. }
  384. /***/ })
  385. /******/ });