diff options
Diffstat (limited to 'wp-includes/js/dist/viewport.js')
| -rw-r--r-- | wp-includes/js/dist/viewport.js | 350 |
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 |