summaryrefslogtreecommitdiffstats
path: root/wp-includes/js/dist/viewport.js
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-17 07:56:49 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-17 07:56:49 +0000
commita415c29efee45520ae252d2aa28f1083a521cd7b (patch)
treef4ade4b6668ecc0765de7e1424f7c1427ad433ff /wp-includes/js/dist/viewport.js
parentInitial commit. (diff)
downloadwordpress-a415c29efee45520ae252d2aa28f1083a521cd7b.tar.xz
wordpress-a415c29efee45520ae252d2aa28f1083a521cd7b.zip
Adding upstream version 6.4.3+dfsg1.upstream/6.4.3+dfsg1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'wp-includes/js/dist/viewport.js')
-rw-r--r--wp-includes/js/dist/viewport.js350
1 files changed, 350 insertions, 0 deletions
diff --git a/wp-includes/js/dist/viewport.js b/wp-includes/js/dist/viewport.js
new file mode 100644
index 0000000..e7328bb
--- /dev/null
+++ b/wp-includes/js/dist/viewport.js
@@ -0,0 +1,350 @@
+/******/ (function() { // webpackBootstrap
+/******/ "use strict";
+/******/ // The require scope
+/******/ var __webpack_require__ = {};
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ !function() {
+/******/ // define getter functions for harmony exports
+/******/ __webpack_require__.d = function(exports, definition) {
+/******/ for(var key in definition) {
+/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ }
+/******/ }
+/******/ };
+/******/ }();
+/******/
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ !function() {
+/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
+/******/ }();
+/******/
+/******/ /* webpack/runtime/make namespace object */
+/******/ !function() {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = function(exports) {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ }();
+/******/
+/************************************************************************/
+var __webpack_exports__ = {};
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+ ifViewportMatches: function() { return /* reexport */ if_viewport_matches; },
+ store: function() { return /* reexport */ store; },
+ withViewportMatch: function() { return /* reexport */ with_viewport_match; }
+});
+
+// NAMESPACE OBJECT: ./node_modules/@wordpress/viewport/build-module/store/actions.js
+var actions_namespaceObject = {};
+__webpack_require__.r(actions_namespaceObject);
+__webpack_require__.d(actions_namespaceObject, {
+ setIsMatching: function() { return setIsMatching; }
+});
+
+// NAMESPACE OBJECT: ./node_modules/@wordpress/viewport/build-module/store/selectors.js
+var selectors_namespaceObject = {};
+__webpack_require__.r(selectors_namespaceObject);
+__webpack_require__.d(selectors_namespaceObject, {
+ isViewportMatch: function() { return isViewportMatch; }
+});
+
+;// CONCATENATED MODULE: external ["wp","compose"]
+var external_wp_compose_namespaceObject = window["wp"]["compose"];
+;// CONCATENATED MODULE: external ["wp","data"]
+var external_wp_data_namespaceObject = window["wp"]["data"];
+;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/reducer.js
+/**
+ * Reducer returning the viewport state, as keys of breakpoint queries with
+ * boolean value representing whether query is matched.
+ *
+ * @param {Object} state Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+function reducer(state = {}, action) {
+ switch (action.type) {
+ case 'SET_IS_MATCHING':
+ return action.values;
+ }
+ return state;
+}
+/* harmony default export */ var store_reducer = (reducer);
+
+;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/actions.js
+/**
+ * Returns an action object used in signalling that viewport queries have been
+ * updated. Values are specified as an object of breakpoint query keys where
+ * value represents whether query matches.
+ * Ignored from documentation as it is for internal use only.
+ *
+ * @ignore
+ *
+ * @param {Object} values Breakpoint query matches.
+ *
+ * @return {Object} Action object.
+ */
+function setIsMatching(values) {
+ return {
+ type: 'SET_IS_MATCHING',
+ values
+ };
+}
+
+;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/selectors.js
+/**
+ * Returns true if the viewport matches the given query, or false otherwise.
+ *
+ * @param {Object} state Viewport state object.
+ * @param {string} query Query string. Includes operator and breakpoint name,
+ * space separated. Operator defaults to >=.
+ *
+ * @example
+ *
+ * ```js
+ * import { store as viewportStore } from '@wordpress/viewport';
+ * import { useSelect } from '@wordpress/data';
+ * import { __ } from '@wordpress/i18n';
+ * const ExampleComponent = () => {
+ * const isMobile = useSelect(
+ * ( select ) => select( viewportStore ).isViewportMatch( '< small' ),
+ * []
+ * );
+ *
+ * return isMobile ? (
+ * <div>{ __( 'Mobile' ) }</div>
+ * ) : (
+ * <div>{ __( 'Not Mobile' ) }</div>
+ * );
+ * };
+ * ```
+ *
+ * @return {boolean} Whether viewport matches query.
+ */
+function isViewportMatch(state, query) {
+ // Default to `>=` if no operator is present.
+ if (query.indexOf(' ') === -1) {
+ query = '>= ' + query;
+ }
+ return !!state[query];
+}
+
+;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/index.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+const STORE_NAME = 'core/viewport';
+
+/**
+ * Store definition for the viewport namespace.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
+ *
+ * @type {Object}
+ */
+const store = (0,external_wp_data_namespaceObject.createReduxStore)(STORE_NAME, {
+ reducer: store_reducer,
+ actions: actions_namespaceObject,
+ selectors: selectors_namespaceObject
+});
+(0,external_wp_data_namespaceObject.register)(store);
+
+;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/listener.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+const addDimensionsEventListener = (breakpoints, operators) => {
+ /**
+ * Callback invoked when media query state should be updated. Is invoked a
+ * maximum of one time per call stack.
+ */
+ const setIsMatching = (0,external_wp_compose_namespaceObject.debounce)(() => {
+ const values = Object.fromEntries(queries.map(([key, query]) => [key, query.matches]));
+ (0,external_wp_data_namespaceObject.dispatch)(store).setIsMatching(values);
+ }, 0, {
+ leading: true
+ });
+
+ /**
+ * Hash of breakpoint names with generated MediaQueryList for corresponding
+ * media query.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
+ *
+ * @type {Object<string,MediaQueryList>}
+ */
+ const operatorEntries = Object.entries(operators);
+ const queries = Object.entries(breakpoints).flatMap(([name, width]) => {
+ return operatorEntries.map(([operator, condition]) => {
+ const list = window.matchMedia(`(${condition}: ${width}px)`);
+ list.addEventListener('change', setIsMatching);
+ return [`${operator} ${name}`, list];
+ });
+ });
+ window.addEventListener('orientationchange', setIsMatching);
+
+ // Set initial values.
+ setIsMatching();
+ setIsMatching.flush();
+};
+/* harmony default export */ var listener = (addDimensionsEventListener);
+
+;// CONCATENATED MODULE: external ["wp","element"]
+var external_wp_element_namespaceObject = window["wp"]["element"];
+;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/with-viewport-match.js
+
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Higher-order component creator, creating a new component which renders with
+ * the given prop names, where the value passed to the underlying component is
+ * the result of the query assigned as the object's value.
+ *
+ * @see isViewportMatch
+ *
+ * @param {Object} queries Object of prop name to viewport query.
+ *
+ * @example
+ *
+ * ```jsx
+ * function MyComponent( { isMobile } ) {
+ * return (
+ * <div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div>
+ * );
+ * }
+ *
+ * MyComponent = withViewportMatch( { isMobile: '< small' } )( MyComponent );
+ * ```
+ *
+ * @return {Function} Higher-order component.
+ */
+const withViewportMatch = queries => {
+ const queryEntries = Object.entries(queries);
+ const useViewPortQueriesResult = () => Object.fromEntries(queryEntries.map(([key, query]) => {
+ let [operator, breakpointName] = query.split(' ');
+ if (breakpointName === undefined) {
+ breakpointName = operator;
+ operator = '>=';
+ }
+ // Hooks should unconditionally execute in the same order,
+ // we are respecting that as from the static query of the HOC we generate
+ // a hook that calls other hooks always in the same order (because the query never changes).
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ return [key, (0,external_wp_compose_namespaceObject.useViewportMatch)(breakpointName, operator)];
+ }));
+ return (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => {
+ return (0,external_wp_compose_namespaceObject.pure)(props => {
+ const queriesResult = useViewPortQueriesResult();
+ return (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, {
+ ...props,
+ ...queriesResult
+ });
+ });
+ }, 'withViewportMatch');
+};
+/* harmony default export */ var with_viewport_match = (withViewportMatch);
+
+;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/if-viewport-matches.js
+/**
+ * WordPress dependencies
+ */
+
+
+/**
+ * Internal dependencies
+ */
+
+
+/**
+ * Higher-order component creator, creating a new component which renders if
+ * the viewport query is satisfied.
+ *
+ * @see withViewportMatches
+ *
+ * @param {string} query Viewport query.
+ *
+ * @example
+ *
+ * ```jsx
+ * function MyMobileComponent() {
+ * return <div>I'm only rendered on mobile viewports!</div>;
+ * }
+ *
+ * MyMobileComponent = ifViewportMatches( '< small' )( MyMobileComponent );
+ * ```
+ *
+ * @return {Function} Higher-order component.
+ */
+const ifViewportMatches = query => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)((0,external_wp_compose_namespaceObject.compose)([with_viewport_match({
+ isViewportMatch: query
+}), (0,external_wp_compose_namespaceObject.ifCondition)(props => props.isViewportMatch)]), 'ifViewportMatches');
+/* harmony default export */ var if_viewport_matches = (ifViewportMatches);
+
+;// CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/index.js
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+/**
+ * Hash of breakpoint names with pixel width at which it becomes effective.
+ *
+ * @see _breakpoints.scss
+ *
+ * @type {Object}
+ */
+const BREAKPOINTS = {
+ huge: 1440,
+ wide: 1280,
+ large: 960,
+ medium: 782,
+ small: 600,
+ mobile: 480
+};
+
+/**
+ * Hash of query operators with corresponding condition for media query.
+ *
+ * @type {Object}
+ */
+const OPERATORS = {
+ '<': 'max-width',
+ '>=': 'min-width'
+};
+listener(BREAKPOINTS, OPERATORS);
+
+(window.wp = window.wp || {}).viewport = __webpack_exports__;
+/******/ })()
+; \ No newline at end of file