viewport.js (13792B)
1 this["wp"] = this["wp"] || {}; this["wp"]["viewport"] = 2 /******/ (function(modules) { // webpackBootstrap 3 /******/ // The module cache 4 /******/ var installedModules = {}; 5 /******/ 6 /******/ // The require function 7 /******/ function __webpack_require__(moduleId) { 8 /******/ 9 /******/ // Check if module is in cache 10 /******/ if(installedModules[moduleId]) { 11 /******/ return installedModules[moduleId].exports; 12 /******/ } 13 /******/ // Create a new module (and put it into the cache) 14 /******/ var module = installedModules[moduleId] = { 15 /******/ i: moduleId, 16 /******/ l: false, 17 /******/ exports: {} 18 /******/ }; 19 /******/ 20 /******/ // Execute the module function 21 /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 22 /******/ 23 /******/ // Flag the module as loaded 24 /******/ module.l = true; 25 /******/ 26 /******/ // Return the exports of the module 27 /******/ return module.exports; 28 /******/ } 29 /******/ 30 /******/ 31 /******/ // expose the modules object (__webpack_modules__) 32 /******/ __webpack_require__.m = modules; 33 /******/ 34 /******/ // expose the module cache 35 /******/ __webpack_require__.c = installedModules; 36 /******/ 37 /******/ // define getter function for harmony exports 38 /******/ __webpack_require__.d = function(exports, name, getter) { 39 /******/ if(!__webpack_require__.o(exports, name)) { 40 /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 41 /******/ } 42 /******/ }; 43 /******/ 44 /******/ // define __esModule on exports 45 /******/ __webpack_require__.r = function(exports) { 46 /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 47 /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 48 /******/ } 49 /******/ Object.defineProperty(exports, '__esModule', { value: true }); 50 /******/ }; 51 /******/ 52 /******/ // create a fake namespace object 53 /******/ // mode & 1: value is a module id, require it 54 /******/ // mode & 2: merge all properties of value into the ns 55 /******/ // mode & 4: return value when already ns object 56 /******/ // mode & 8|1: behave like require 57 /******/ __webpack_require__.t = function(value, mode) { 58 /******/ if(mode & 1) value = __webpack_require__(value); 59 /******/ if(mode & 8) return value; 60 /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 61 /******/ var ns = Object.create(null); 62 /******/ __webpack_require__.r(ns); 63 /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 64 /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 65 /******/ return ns; 66 /******/ }; 67 /******/ 68 /******/ // getDefaultExport function for compatibility with non-harmony modules 69 /******/ __webpack_require__.n = function(module) { 70 /******/ var getter = module && module.__esModule ? 71 /******/ function getDefault() { return module['default']; } : 72 /******/ function getModuleExports() { return module; }; 73 /******/ __webpack_require__.d(getter, 'a', getter); 74 /******/ return getter; 75 /******/ }; 76 /******/ 77 /******/ // Object.prototype.hasOwnProperty.call 78 /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 79 /******/ 80 /******/ // __webpack_public_path__ 81 /******/ __webpack_require__.p = ""; 82 /******/ 83 /******/ 84 /******/ // Load entry module and return exports 85 /******/ return __webpack_require__(__webpack_require__.s = "PR0u"); 86 /******/ }) 87 /************************************************************************/ 88 /******/ ({ 89 90 /***/ "1ZqX": 91 /***/ (function(module, exports) { 92 93 (function() { module.exports = window["wp"]["data"]; }()); 94 95 /***/ }), 96 97 /***/ "GRId": 98 /***/ (function(module, exports) { 99 100 (function() { module.exports = window["wp"]["element"]; }()); 101 102 /***/ }), 103 104 /***/ "K9lf": 105 /***/ (function(module, exports) { 106 107 (function() { module.exports = window["wp"]["compose"]; }()); 108 109 /***/ }), 110 111 /***/ "PR0u": 112 /***/ (function(module, __webpack_exports__, __webpack_require__) { 113 114 "use strict"; 115 // ESM COMPAT FLAG 116 __webpack_require__.r(__webpack_exports__); 117 118 // EXPORTS 119 __webpack_require__.d(__webpack_exports__, "store", function() { return /* reexport */ store; }); 120 __webpack_require__.d(__webpack_exports__, "ifViewportMatches", function() { return /* reexport */ if_viewport_matches; }); 121 __webpack_require__.d(__webpack_exports__, "withViewportMatch", function() { return /* reexport */ with_viewport_match; }); 122 123 // NAMESPACE OBJECT: ./node_modules/@wordpress/viewport/build-module/store/actions.js 124 var actions_namespaceObject = {}; 125 __webpack_require__.r(actions_namespaceObject); 126 __webpack_require__.d(actions_namespaceObject, "setIsMatching", function() { return actions_setIsMatching; }); 127 128 // NAMESPACE OBJECT: ./node_modules/@wordpress/viewport/build-module/store/selectors.js 129 var selectors_namespaceObject = {}; 130 __webpack_require__.r(selectors_namespaceObject); 131 __webpack_require__.d(selectors_namespaceObject, "isViewportMatch", function() { return isViewportMatch; }); 132 133 // EXTERNAL MODULE: external "lodash" 134 var external_lodash_ = __webpack_require__("YLtl"); 135 136 // EXTERNAL MODULE: external ["wp","data"] 137 var external_wp_data_ = __webpack_require__("1ZqX"); 138 139 // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/reducer.js 140 /** 141 * Reducer returning the viewport state, as keys of breakpoint queries with 142 * boolean value representing whether query is matched. 143 * 144 * @param {Object} state Current state. 145 * @param {Object} action Dispatched action. 146 * 147 * @return {Object} Updated state. 148 */ 149 function reducer(state = {}, action) { 150 switch (action.type) { 151 case 'SET_IS_MATCHING': 152 return action.values; 153 } 154 155 return state; 156 } 157 158 /* harmony default export */ var store_reducer = (reducer); 159 160 // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/actions.js 161 /** 162 * Returns an action object used in signalling that viewport queries have been 163 * updated. Values are specified as an object of breakpoint query keys where 164 * value represents whether query matches. 165 * 166 * @param {Object} values Breakpoint query matches. 167 * 168 * @return {Object} Action object. 169 */ 170 function actions_setIsMatching(values) { 171 return { 172 type: 'SET_IS_MATCHING', 173 values 174 }; 175 } 176 177 // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/selectors.js 178 /** 179 * Returns true if the viewport matches the given query, or false otherwise. 180 * 181 * @param {Object} state Viewport state object. 182 * @param {string} query Query string. Includes operator and breakpoint name, 183 * space separated. Operator defaults to >=. 184 * 185 * @example 186 * 187 * ```js 188 * isViewportMatch( state, '< huge' ); 189 * isViewPortMatch( state, 'medium' ); 190 * ``` 191 * 192 * @return {boolean} Whether viewport matches query. 193 */ 194 function isViewportMatch(state, query) { 195 // Default to `>=` if no operator is present. 196 if (query.indexOf(' ') === -1) { 197 query = '>= ' + query; 198 } 199 200 return !!state[query]; 201 } 202 203 // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/store/index.js 204 /** 205 * WordPress dependencies 206 */ 207 208 /** 209 * Internal dependencies 210 */ 211 212 213 214 215 const STORE_NAME = 'core/viewport'; 216 /** 217 * Store definition for the viewport namespace. 218 * 219 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore 220 * 221 * @type {Object} 222 */ 223 224 const store = Object(external_wp_data_["createReduxStore"])(STORE_NAME, { 225 reducer: store_reducer, 226 actions: actions_namespaceObject, 227 selectors: selectors_namespaceObject 228 }); 229 Object(external_wp_data_["register"])(store); 230 231 // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/listener.js 232 /** 233 * External dependencies 234 */ 235 236 /** 237 * WordPress dependencies 238 */ 239 240 241 /** 242 * Internal dependencies 243 */ 244 245 246 247 const addDimensionsEventListener = (breakpoints, operators) => { 248 /** 249 * Callback invoked when media query state should be updated. Is invoked a 250 * maximum of one time per call stack. 251 */ 252 const setIsMatching = Object(external_lodash_["debounce"])(() => { 253 const values = Object(external_lodash_["mapValues"])(queries, query => query.matches); 254 Object(external_wp_data_["dispatch"])(store).setIsMatching(values); 255 }, { 256 leading: true 257 }); 258 /** 259 * Hash of breakpoint names with generated MediaQueryList for corresponding 260 * media query. 261 * 262 * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia 263 * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList 264 * 265 * @type {Object<string,MediaQueryList>} 266 */ 267 268 const queries = Object(external_lodash_["reduce"])(breakpoints, (result, width, name) => { 269 Object(external_lodash_["forEach"])(operators, (condition, operator) => { 270 const list = window.matchMedia(`(${condition}: ${width}px)`); 271 list.addListener(setIsMatching); 272 const key = [operator, name].join(' '); 273 result[key] = list; 274 }); 275 return result; 276 }, {}); 277 window.addEventListener('orientationchange', setIsMatching); // Set initial values 278 279 setIsMatching(); 280 setIsMatching.flush(); 281 }; 282 283 /* harmony default export */ var listener = (addDimensionsEventListener); 284 285 // EXTERNAL MODULE: external ["wp","compose"] 286 var external_wp_compose_ = __webpack_require__("K9lf"); 287 288 // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js 289 var esm_extends = __webpack_require__("wx14"); 290 291 // EXTERNAL MODULE: external ["wp","element"] 292 var external_wp_element_ = __webpack_require__("GRId"); 293 294 // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/with-viewport-match.js 295 296 297 298 /** 299 * External dependencies 300 */ 301 302 /** 303 * WordPress dependencies 304 */ 305 306 307 /** 308 * Higher-order component creator, creating a new component which renders with 309 * the given prop names, where the value passed to the underlying component is 310 * the result of the query assigned as the object's value. 311 * 312 * @see isViewportMatch 313 * 314 * @param {Object} queries Object of prop name to viewport query. 315 * 316 * @example 317 * 318 * ```jsx 319 * function MyComponent( { isMobile } ) { 320 * return ( 321 * <div>Currently: { isMobile ? 'Mobile' : 'Not Mobile' }</div> 322 * ); 323 * } 324 * 325 * MyComponent = withViewportMatch( { isMobile: '< small' } )( MyComponent ); 326 * ``` 327 * 328 * @return {Function} Higher-order component. 329 */ 330 331 const withViewportMatch = queries => { 332 const useViewPortQueriesResult = () => Object(external_lodash_["mapValues"])(queries, query => { 333 let [operator, breakpointName] = query.split(' '); 334 335 if (breakpointName === undefined) { 336 breakpointName = operator; 337 operator = '>='; 338 } // Hooks should unconditionally execute in the same order, 339 // we are respecting that as from the static query of the HOC we generate 340 // a hook that calls other hooks always in the same order (because the query never changes). 341 // eslint-disable-next-line react-hooks/rules-of-hooks 342 343 344 return Object(external_wp_compose_["useViewportMatch"])(breakpointName, operator); 345 }); 346 347 return Object(external_wp_compose_["createHigherOrderComponent"])(WrappedComponent => { 348 return Object(external_wp_compose_["pure"])(props => { 349 const queriesResult = useViewPortQueriesResult(); 350 return Object(external_wp_element_["createElement"])(WrappedComponent, Object(esm_extends["a" /* default */])({}, props, queriesResult)); 351 }); 352 }, 'withViewportMatch'); 353 }; 354 355 /* harmony default export */ var with_viewport_match = (withViewportMatch); 356 357 // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/if-viewport-matches.js 358 /** 359 * WordPress dependencies 360 */ 361 362 /** 363 * Internal dependencies 364 */ 365 366 367 /** 368 * Higher-order component creator, creating a new component which renders if 369 * the viewport query is satisfied. 370 * 371 * @see withViewportMatches 372 * 373 * @param {string} query Viewport query. 374 * 375 * @example 376 * 377 * ```jsx 378 * function MyMobileComponent() { 379 * return <div>I'm only rendered on mobile viewports!</div>; 380 * } 381 * 382 * MyMobileComponent = ifViewportMatches( '< small' )( MyMobileComponent ); 383 * ``` 384 * 385 * @return {Function} Higher-order component. 386 */ 387 388 const ifViewportMatches = query => Object(external_wp_compose_["createHigherOrderComponent"])(Object(external_wp_compose_["compose"])([with_viewport_match({ 389 isViewportMatch: query 390 }), Object(external_wp_compose_["ifCondition"])(props => props.isViewportMatch)]), 'ifViewportMatches'); 391 392 /* harmony default export */ var if_viewport_matches = (ifViewportMatches); 393 394 // CONCATENATED MODULE: ./node_modules/@wordpress/viewport/build-module/index.js 395 /** 396 * Internal dependencies 397 */ 398 399 400 401 402 /** 403 * Hash of breakpoint names with pixel width at which it becomes effective. 404 * 405 * @see _breakpoints.scss 406 * 407 * @type {Object} 408 */ 409 410 const BREAKPOINTS = { 411 huge: 1440, 412 wide: 1280, 413 large: 960, 414 medium: 782, 415 small: 600, 416 mobile: 480 417 }; 418 /** 419 * Hash of query operators with corresponding condition for media query. 420 * 421 * @type {Object} 422 */ 423 424 const OPERATORS = { 425 '<': 'max-width', 426 '>=': 'min-width' 427 }; 428 listener(BREAKPOINTS, OPERATORS); 429 430 431 /***/ }), 432 433 /***/ "YLtl": 434 /***/ (function(module, exports) { 435 436 (function() { module.exports = window["lodash"]; }()); 437 438 /***/ }), 439 440 /***/ "wx14": 441 /***/ (function(module, __webpack_exports__, __webpack_require__) { 442 443 "use strict"; 444 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _extends; }); 445 function _extends() { 446 _extends = Object.assign || function (target) { 447 for (var i = 1; i < arguments.length; i++) { 448 var source = arguments[i]; 449 450 for (var key in source) { 451 if (Object.prototype.hasOwnProperty.call(source, key)) { 452 target[key] = source[key]; 453 } 454 } 455 } 456 457 return target; 458 }; 459 460 return _extends.apply(this, arguments); 461 } 462 463 /***/ }) 464 465 /******/ });