[Summary view] [Print] [Text view]

   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: ./node_modules/@wordpress/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: ./node_modules/@wordpress/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: ./node_modules/@wordpress/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  
  89  ;// CONCATENATED MODULE: ./node_modules/@wordpress/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  
 106  ;// CONCATENATED MODULE: ./node_modules/@wordpress/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  
 132  ;// CONCATENATED MODULE: ./node_modules/@wordpress/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  
 160  ;// CONCATENATED MODULE: ./node_modules/@wordpress/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  
 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: ./node_modules/@wordpress/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  
 299  ;// CONCATENATED MODULE: ./node_modules/@wordpress/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  
 336  ;// CONCATENATED MODULE: ./node_modules/@wordpress/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  
 372  (window.wp = window.wp || {}).viewport = __webpack_exports__;
 373  /******/ })()
 374  ;