1 /******/ (function() { // webpackBootstrap |
1 /******/ (() => { // webpackBootstrap |
2 /******/ "use strict"; |
2 /******/ "use strict"; |
3 /******/ // The require scope |
3 /******/ // The require scope |
4 /******/ var __webpack_require__ = {}; |
4 /******/ var __webpack_require__ = {}; |
5 /******/ |
5 /******/ |
6 /************************************************************************/ |
6 /************************************************************************/ |
7 /******/ /* webpack/runtime/define property getters */ |
7 /******/ /* webpack/runtime/define property getters */ |
8 /******/ !function() { |
8 /******/ (() => { |
9 /******/ // define getter functions for harmony exports |
9 /******/ // define getter functions for harmony exports |
10 /******/ __webpack_require__.d = function(exports, definition) { |
10 /******/ __webpack_require__.d = (exports, definition) => { |
11 /******/ for(var key in definition) { |
11 /******/ for(var key in definition) { |
12 /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { |
12 /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { |
13 /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); |
13 /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); |
14 /******/ } |
14 /******/ } |
15 /******/ } |
15 /******/ } |
16 /******/ }; |
16 /******/ }; |
17 /******/ }(); |
17 /******/ })(); |
18 /******/ |
18 /******/ |
19 /******/ /* webpack/runtime/hasOwnProperty shorthand */ |
19 /******/ /* webpack/runtime/hasOwnProperty shorthand */ |
20 /******/ !function() { |
20 /******/ (() => { |
21 /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); } |
21 /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) |
22 /******/ }(); |
22 /******/ })(); |
23 /******/ |
23 /******/ |
24 /******/ /* webpack/runtime/make namespace object */ |
24 /******/ /* webpack/runtime/make namespace object */ |
25 /******/ !function() { |
25 /******/ (() => { |
26 /******/ // define __esModule on exports |
26 /******/ // define __esModule on exports |
27 /******/ __webpack_require__.r = function(exports) { |
27 /******/ __webpack_require__.r = (exports) => { |
28 /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { |
28 /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { |
29 /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); |
29 /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); |
30 /******/ } |
30 /******/ } |
31 /******/ Object.defineProperty(exports, '__esModule', { value: true }); |
31 /******/ Object.defineProperty(exports, '__esModule', { value: true }); |
32 /******/ }; |
32 /******/ }; |
33 /******/ }(); |
33 /******/ })(); |
34 /******/ |
34 /******/ |
35 /************************************************************************/ |
35 /************************************************************************/ |
36 var __webpack_exports__ = {}; |
36 var __webpack_exports__ = {}; |
37 // ESM COMPAT FLAG |
37 // ESM COMPAT FLAG |
38 __webpack_require__.r(__webpack_exports__); |
38 __webpack_require__.r(__webpack_exports__); |
39 |
39 |
40 // EXPORTS |
40 // EXPORTS |
41 __webpack_require__.d(__webpack_exports__, { |
41 __webpack_require__.d(__webpack_exports__, { |
42 "ifViewportMatches": function() { return /* reexport */ if_viewport_matches; }, |
42 ifViewportMatches: () => (/* reexport */ if_viewport_matches), |
43 "store": function() { return /* reexport */ store; }, |
43 store: () => (/* reexport */ store), |
44 "withViewportMatch": function() { return /* reexport */ with_viewport_match; } |
44 withViewportMatch: () => (/* reexport */ with_viewport_match) |
45 }); |
45 }); |
46 |
46 |
47 // NAMESPACE OBJECT: ./node_modules/@wordpress/viewport/build-module/store/actions.js |
47 // NAMESPACE OBJECT: ./node_modules/@wordpress/viewport/build-module/store/actions.js |
48 var actions_namespaceObject = {}; |
48 var actions_namespaceObject = {}; |
49 __webpack_require__.r(actions_namespaceObject); |
49 __webpack_require__.r(actions_namespaceObject); |
50 __webpack_require__.d(actions_namespaceObject, { |
50 __webpack_require__.d(actions_namespaceObject, { |
51 "setIsMatching": function() { return setIsMatching; } |
51 setIsMatching: () => (setIsMatching) |
52 }); |
52 }); |
53 |
53 |
54 // NAMESPACE OBJECT: ./node_modules/@wordpress/viewport/build-module/store/selectors.js |
54 // NAMESPACE OBJECT: ./node_modules/@wordpress/viewport/build-module/store/selectors.js |
55 var selectors_namespaceObject = {}; |
55 var selectors_namespaceObject = {}; |
56 __webpack_require__.r(selectors_namespaceObject); |
56 __webpack_require__.r(selectors_namespaceObject); |
57 __webpack_require__.d(selectors_namespaceObject, { |
57 __webpack_require__.d(selectors_namespaceObject, { |
58 "isViewportMatch": function() { return isViewportMatch; } |
58 isViewportMatch: () => (isViewportMatch) |
59 }); |
59 }); |
60 |
60 |
61 ;// CONCATENATED MODULE: external "lodash" |
61 ;// CONCATENATED MODULE: external ["wp","compose"] |
62 var external_lodash_namespaceObject = window["lodash"]; |
62 const external_wp_compose_namespaceObject = window["wp"]["compose"]; |
63 ;// CONCATENATED MODULE: external ["wp","data"] |
63 ;// CONCATENATED MODULE: external ["wp","data"] |
64 var external_wp_data_namespaceObject = window["wp"]["data"]; |
64 const external_wp_data_namespaceObject = window["wp"]["data"]; |
65 ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/reducer.js |
65 ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/reducer.js |
66 /** |
66 /** |
67 * Reducer returning the viewport state, as keys of breakpoint queries with |
67 * Reducer returning the viewport state, as keys of breakpoint queries with |
68 * boolean value representing whether query is matched. |
68 * boolean value representing whether query is matched. |
69 * |
69 * |
70 * @param {Object} state Current state. |
70 * @param {Object} state Current state. |
71 * @param {Object} action Dispatched action. |
71 * @param {Object} action Dispatched action. |
72 * |
72 * |
73 * @return {Object} Updated state. |
73 * @return {Object} Updated state. |
74 */ |
74 */ |
75 function reducer() { |
75 function reducer(state = {}, action) { |
76 let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; |
|
77 let action = arguments.length > 1 ? arguments[1] : undefined; |
|
78 |
|
79 switch (action.type) { |
76 switch (action.type) { |
80 case 'SET_IS_MATCHING': |
77 case 'SET_IS_MATCHING': |
81 return action.values; |
78 return action.values; |
82 } |
79 } |
83 |
|
84 return state; |
80 return state; |
85 } |
81 } |
86 |
82 /* harmony default export */ const store_reducer = (reducer); |
87 /* harmony default export */ var store_reducer = (reducer); |
|
88 |
83 |
89 ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/actions.js |
84 ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/actions.js |
90 /** |
85 /** |
91 * Returns an action object used in signalling that viewport queries have been |
86 * Returns an action object used in signalling that viewport queries have been |
92 * updated. Values are specified as an object of breakpoint query keys where |
87 * updated. Values are specified as an object of breakpoint query keys where |
93 * value represents whether query matches. |
88 * value represents whether query matches. |
|
89 * Ignored from documentation as it is for internal use only. |
|
90 * |
|
91 * @ignore |
94 * |
92 * |
95 * @param {Object} values Breakpoint query matches. |
93 * @param {Object} values Breakpoint query matches. |
96 * |
94 * |
97 * @return {Object} Action object. |
95 * @return {Object} Action object. |
98 */ |
96 */ |
112 * space separated. Operator defaults to >=. |
110 * space separated. Operator defaults to >=. |
113 * |
111 * |
114 * @example |
112 * @example |
115 * |
113 * |
116 * ```js |
114 * ```js |
117 * isViewportMatch( state, '< huge' ); |
115 * import { store as viewportStore } from '@wordpress/viewport'; |
118 * isViewPortMatch( state, 'medium' ); |
116 * import { useSelect } from '@wordpress/data'; |
|
117 * import { __ } from '@wordpress/i18n'; |
|
118 * const ExampleComponent = () => { |
|
119 * const isMobile = useSelect( |
|
120 * ( select ) => select( viewportStore ).isViewportMatch( '< small' ), |
|
121 * [] |
|
122 * ); |
|
123 * |
|
124 * return isMobile ? ( |
|
125 * <div>{ __( 'Mobile' ) }</div> |
|
126 * ) : ( |
|
127 * <div>{ __( 'Not Mobile' ) }</div> |
|
128 * ); |
|
129 * }; |
119 * ``` |
130 * ``` |
120 * |
131 * |
121 * @return {boolean} Whether viewport matches query. |
132 * @return {boolean} Whether viewport matches query. |
122 */ |
133 */ |
123 function isViewportMatch(state, query) { |
134 function isViewportMatch(state, query) { |
124 // Default to `>=` if no operator is present. |
135 // Default to `>=` if no operator is present. |
125 if (query.indexOf(' ') === -1) { |
136 if (query.indexOf(' ') === -1) { |
126 query = '>= ' + query; |
137 query = '>= ' + query; |
127 } |
138 } |
128 |
|
129 return !!state[query]; |
139 return !!state[query]; |
130 } |
140 } |
131 |
141 |
132 ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/index.js |
142 ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/index.js |
133 /** |
143 /** |
134 * WordPress dependencies |
144 * WordPress dependencies |
135 */ |
145 */ |
136 |
146 |
|
147 |
137 /** |
148 /** |
138 * Internal dependencies |
149 * Internal dependencies |
139 */ |
150 */ |
140 |
151 |
141 |
152 |
142 |
153 |
143 |
|
144 const STORE_NAME = 'core/viewport'; |
154 const STORE_NAME = 'core/viewport'; |
|
155 |
145 /** |
156 /** |
146 * Store definition for the viewport namespace. |
157 * Store definition for the viewport namespace. |
147 * |
158 * |
148 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore |
159 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore |
149 * |
160 * |
150 * @type {Object} |
161 * @type {Object} |
151 */ |
162 */ |
152 |
|
153 const store = (0,external_wp_data_namespaceObject.createReduxStore)(STORE_NAME, { |
163 const store = (0,external_wp_data_namespaceObject.createReduxStore)(STORE_NAME, { |
154 reducer: store_reducer, |
164 reducer: store_reducer, |
155 actions: actions_namespaceObject, |
165 actions: actions_namespaceObject, |
156 selectors: selectors_namespaceObject |
166 selectors: selectors_namespaceObject |
157 }); |
167 }); |
158 (0,external_wp_data_namespaceObject.register)(store); |
168 (0,external_wp_data_namespaceObject.register)(store); |
159 |
169 |
160 ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/listener.js |
170 ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/listener.js |
161 /** |
171 /** |
162 * External dependencies |
|
163 */ |
|
164 |
|
165 /** |
|
166 * WordPress dependencies |
172 * WordPress dependencies |
167 */ |
173 */ |
168 |
174 |
169 |
175 |
|
176 |
170 /** |
177 /** |
171 * Internal dependencies |
178 * Internal dependencies |
172 */ |
179 */ |
173 |
|
174 |
|
175 |
180 |
176 const addDimensionsEventListener = (breakpoints, operators) => { |
181 const addDimensionsEventListener = (breakpoints, operators) => { |
177 /** |
182 /** |
178 * Callback invoked when media query state should be updated. Is invoked a |
183 * Callback invoked when media query state should be updated. Is invoked a |
179 * maximum of one time per call stack. |
184 * maximum of one time per call stack. |
180 */ |
185 */ |
181 const setIsMatching = (0,external_lodash_namespaceObject.debounce)(() => { |
186 const setIsMatching = (0,external_wp_compose_namespaceObject.debounce)(() => { |
182 const values = (0,external_lodash_namespaceObject.mapValues)(queries, query => query.matches); |
187 const values = Object.fromEntries(queries.map(([key, query]) => [key, query.matches])); |
183 (0,external_wp_data_namespaceObject.dispatch)(store).setIsMatching(values); |
188 (0,external_wp_data_namespaceObject.dispatch)(store).setIsMatching(values); |
184 }, { |
189 }, 0, { |
185 leading: true |
190 leading: true |
186 }); |
191 }); |
|
192 |
187 /** |
193 /** |
188 * Hash of breakpoint names with generated MediaQueryList for corresponding |
194 * Hash of breakpoint names with generated MediaQueryList for corresponding |
189 * media query. |
195 * media query. |
190 * |
196 * |
191 * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia |
197 * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia |
192 * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList |
198 * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList |
193 * |
199 * |
194 * @type {Object<string,MediaQueryList>} |
200 * @type {Object<string,MediaQueryList>} |
195 */ |
201 */ |
196 |
202 const operatorEntries = Object.entries(operators); |
197 const queries = (0,external_lodash_namespaceObject.reduce)(breakpoints, (result, width, name) => { |
203 const queries = Object.entries(breakpoints).flatMap(([name, width]) => { |
198 (0,external_lodash_namespaceObject.forEach)(operators, (condition, operator) => { |
204 return operatorEntries.map(([operator, condition]) => { |
199 const list = window.matchMedia(`(${condition}: ${width}px)`); |
205 const list = window.matchMedia(`(${condition}: ${width}px)`); |
200 list.addListener(setIsMatching); |
206 list.addEventListener('change', setIsMatching); |
201 const key = [operator, name].join(' '); |
207 return [`${operator} ${name}`, list]; |
202 result[key] = list; |
|
203 }); |
208 }); |
204 return result; |
209 }); |
205 }, {}); |
210 window.addEventListener('orientationchange', setIsMatching); |
206 window.addEventListener('orientationchange', setIsMatching); // Set initial values. |
211 |
207 |
212 // Set initial values. |
208 setIsMatching(); |
213 setIsMatching(); |
209 setIsMatching.flush(); |
214 setIsMatching.flush(); |
210 }; |
215 }; |
211 |
216 /* harmony default export */ const listener = (addDimensionsEventListener); |
212 /* harmony default export */ var listener = (addDimensionsEventListener); |
217 |
213 |
218 ;// CONCATENATED MODULE: external "ReactJSXRuntime" |
214 ;// CONCATENATED MODULE: external ["wp","compose"] |
219 const external_ReactJSXRuntime_namespaceObject = window["ReactJSXRuntime"]; |
215 var external_wp_compose_namespaceObject = window["wp"]["compose"]; |
|
216 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js |
|
217 function _extends() { |
|
218 _extends = Object.assign ? Object.assign.bind() : function (target) { |
|
219 for (var i = 1; i < arguments.length; i++) { |
|
220 var source = arguments[i]; |
|
221 |
|
222 for (var key in source) { |
|
223 if (Object.prototype.hasOwnProperty.call(source, key)) { |
|
224 target[key] = source[key]; |
|
225 } |
|
226 } |
|
227 } |
|
228 |
|
229 return target; |
|
230 }; |
|
231 return _extends.apply(this, arguments); |
|
232 } |
|
233 ;// CONCATENATED MODULE: external ["wp","element"] |
|
234 var external_wp_element_namespaceObject = window["wp"]["element"]; |
|
235 ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/with-viewport-match.js |
220 ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/with-viewport-match.js |
236 |
|
237 |
|
238 |
|
239 /** |
|
240 * External dependencies |
|
241 */ |
|
242 |
|
243 /** |
221 /** |
244 * WordPress dependencies |
222 * WordPress dependencies |
245 */ |
223 */ |
246 |
224 |
247 |
225 |
268 * |
246 * |
269 * @return {Function} Higher-order component. |
247 * @return {Function} Higher-order component. |
270 */ |
248 */ |
271 |
249 |
272 const withViewportMatch = queries => { |
250 const withViewportMatch = queries => { |
273 const useViewPortQueriesResult = () => (0,external_lodash_namespaceObject.mapValues)(queries, query => { |
251 const queryEntries = Object.entries(queries); |
|
252 const useViewPortQueriesResult = () => Object.fromEntries(queryEntries.map(([key, query]) => { |
274 let [operator, breakpointName] = query.split(' '); |
253 let [operator, breakpointName] = query.split(' '); |
275 |
|
276 if (breakpointName === undefined) { |
254 if (breakpointName === undefined) { |
277 breakpointName = operator; |
255 breakpointName = operator; |
278 operator = '>='; |
256 operator = '>='; |
279 } // Hooks should unconditionally execute in the same order, |
257 } |
|
258 // Hooks should unconditionally execute in the same order, |
280 // we are respecting that as from the static query of the HOC we generate |
259 // we are respecting that as from the static query of the HOC we generate |
281 // a hook that calls other hooks always in the same order (because the query never changes). |
260 // a hook that calls other hooks always in the same order (because the query never changes). |
282 // eslint-disable-next-line react-hooks/rules-of-hooks |
261 // eslint-disable-next-line react-hooks/rules-of-hooks |
283 |
262 return [key, (0,external_wp_compose_namespaceObject.useViewportMatch)(breakpointName, operator)]; |
284 |
263 })); |
285 return (0,external_wp_compose_namespaceObject.useViewportMatch)(breakpointName, operator); |
|
286 }); |
|
287 |
|
288 return (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => { |
264 return (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => { |
289 return (0,external_wp_compose_namespaceObject.pure)(props => { |
265 return (0,external_wp_compose_namespaceObject.pure)(props => { |
290 const queriesResult = useViewPortQueriesResult(); |
266 const queriesResult = useViewPortQueriesResult(); |
291 return (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, _extends({}, props, queriesResult)); |
267 return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, { |
|
268 ...props, |
|
269 ...queriesResult |
|
270 }); |
292 }); |
271 }); |
293 }, 'withViewportMatch'); |
272 }, 'withViewportMatch'); |
294 }; |
273 }; |
295 |
274 /* harmony default export */ const with_viewport_match = (withViewportMatch); |
296 /* harmony default export */ var with_viewport_match = (withViewportMatch); |
|
297 |
275 |
298 ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/if-viewport-matches.js |
276 ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/if-viewport-matches.js |
299 /** |
277 /** |
300 * WordPress dependencies |
278 * WordPress dependencies |
301 */ |
279 */ |
|
280 |
302 |
281 |
303 /** |
282 /** |
304 * Internal dependencies |
283 * Internal dependencies |
305 */ |
284 */ |
306 |
285 |
323 * MyMobileComponent = ifViewportMatches( '< small' )( MyMobileComponent ); |
302 * MyMobileComponent = ifViewportMatches( '< small' )( MyMobileComponent ); |
324 * ``` |
303 * ``` |
325 * |
304 * |
326 * @return {Function} Higher-order component. |
305 * @return {Function} Higher-order component. |
327 */ |
306 */ |
328 |
|
329 const ifViewportMatches = query => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)((0,external_wp_compose_namespaceObject.compose)([with_viewport_match({ |
307 const ifViewportMatches = query => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)((0,external_wp_compose_namespaceObject.compose)([with_viewport_match({ |
330 isViewportMatch: query |
308 isViewportMatch: query |
331 }), (0,external_wp_compose_namespaceObject.ifCondition)(props => props.isViewportMatch)]), 'ifViewportMatches'); |
309 }), (0,external_wp_compose_namespaceObject.ifCondition)(props => props.isViewportMatch)]), 'ifViewportMatches'); |
332 |
310 /* harmony default export */ const if_viewport_matches = (ifViewportMatches); |
333 /* harmony default export */ var if_viewport_matches = (ifViewportMatches); |
|
334 |
311 |
335 ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/index.js |
312 ;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/index.js |
336 /** |
313 /** |
337 * Internal dependencies |
314 * Internal dependencies |
338 */ |
315 */ |
339 |
316 |
340 |
317 |
341 |
318 |
342 |
319 |
|
320 |
343 /** |
321 /** |
344 * Hash of breakpoint names with pixel width at which it becomes effective. |
322 * Hash of breakpoint names with pixel width at which it becomes effective. |
345 * |
323 * |
346 * @see _breakpoints.scss |
324 * @see _breakpoints.scss |
347 * |
325 * |
348 * @type {Object} |
326 * @type {Object} |
349 */ |
327 */ |
350 |
|
351 const BREAKPOINTS = { |
328 const BREAKPOINTS = { |
352 huge: 1440, |
329 huge: 1440, |
353 wide: 1280, |
330 wide: 1280, |
354 large: 960, |
331 large: 960, |
355 medium: 782, |
332 medium: 782, |
356 small: 600, |
333 small: 600, |
357 mobile: 480 |
334 mobile: 480 |
358 }; |
335 }; |
|
336 |
359 /** |
337 /** |
360 * Hash of query operators with corresponding condition for media query. |
338 * Hash of query operators with corresponding condition for media query. |
361 * |
339 * |
362 * @type {Object} |
340 * @type {Object} |
363 */ |
341 */ |
364 |
|
365 const OPERATORS = { |
342 const OPERATORS = { |
366 '<': 'max-width', |
343 '<': 'max-width', |
367 '>=': 'min-width' |
344 '>=': 'min-width' |
368 }; |
345 }; |
369 listener(BREAKPOINTS, OPERATORS); |
346 listener(BREAKPOINTS, OPERATORS); |