Gutenberg / 12.1.0

Gutenberg v12.1.0

gutenberg / build / viewport / index.js

index.js in Gutenberg 12.1.0, at build/viewport/index.js

374 lines 11.0 KB

Raw Download Zip

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