| 1 |
(function() { |
| 2 |
"use strict"; |
| 3 |
var wp; |
| 4 |
(wp ||= {}).viewport = (() => { |
| 5 |
var __create = Object.create; |
| 6 |
var __defProp = Object.defineProperty; |
| 7 |
var __getOwnPropDesc = Object.getOwnPropertyDescriptor; |
| 8 |
var __getOwnPropNames = Object.getOwnPropertyNames; |
| 9 |
var __getProtoOf = Object.getPrototypeOf; |
| 10 |
var __hasOwnProp = Object.prototype.hasOwnProperty; |
| 11 |
var __commonJS = (cb, mod) => function __require() { |
| 12 |
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; |
| 13 |
}; |
| 14 |
var __export = (target, all) => { |
| 15 |
for (var name in all) |
| 16 |
__defProp(target, name, { get: all[name], enumerable: true }); |
| 17 |
}; |
| 18 |
var __copyProps = (to, from, except, desc) => { |
| 19 |
if (from && typeof from === "object" || typeof from === "function") { |
| 20 |
for (let key of __getOwnPropNames(from)) |
| 21 |
if (!__hasOwnProp.call(to, key) && key !== except) |
| 22 |
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); |
| 23 |
} |
| 24 |
return to; |
| 25 |
}; |
| 26 |
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( |
| 27 |
// If the importer is in node compatibility mode or this is not an ESM |
| 28 |
// file that has been converted to a CommonJS file using a Babel- |
| 29 |
// compatible transform (i.e. "__esModule" has not been set), then set |
| 30 |
// "default" to the CommonJS "module.exports" for node compatibility. |
| 31 |
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, |
| 32 |
mod |
| 33 |
)); |
| 34 |
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); |
| 35 |
|
| 36 |
// package-external:@wordpress/compose |
| 37 |
var require_compose = __commonJS({ |
| 38 |
"package-external:@wordpress/compose"(exports, module) { |
| 39 |
module.exports = window.wp.compose; |
| 40 |
} |
| 41 |
}); |
| 42 |
|
| 43 |
// package-external:@wordpress/data |
| 44 |
var require_data = __commonJS({ |
| 45 |
"package-external:@wordpress/data"(exports, module) { |
| 46 |
module.exports = window.wp.data; |
| 47 |
} |
| 48 |
}); |
| 49 |
|
| 50 |
// package-external:@wordpress/element |
| 51 |
var require_element = __commonJS({ |
| 52 |
"package-external:@wordpress/element"(exports, module) { |
| 53 |
module.exports = window.wp.element; |
| 54 |
} |
| 55 |
}); |
| 56 |
|
| 57 |
// packages/viewport/build-module/index.mjs |
| 58 |
var index_exports = {}; |
| 59 |
__export(index_exports, { |
| 60 |
ifViewportMatches: () => if_viewport_matches_default, |
| 61 |
store: () => store, |
| 62 |
withViewportMatch: () => with_viewport_match_default |
| 63 |
}); |
| 64 |
|
| 65 |
// packages/viewport/build-module/listener.mjs |
| 66 |
var import_compose = __toESM(require_compose(), 1); |
| 67 |
var import_data2 = __toESM(require_data(), 1); |
| 68 |
|
| 69 |
// packages/viewport/build-module/store/index.mjs |
| 70 |
var import_data = __toESM(require_data(), 1); |
| 71 |
|
| 72 |
// packages/viewport/build-module/store/reducer.mjs |
| 73 |
function reducer(state = {}, action) { |
| 74 |
switch (action.type) { |
| 75 |
case "SET_IS_MATCHING": |
| 76 |
return action.values; |
| 77 |
} |
| 78 |
return state; |
| 79 |
} |
| 80 |
var reducer_default = reducer; |
| 81 |
|
| 82 |
// packages/viewport/build-module/store/actions.mjs |
| 83 |
var actions_exports = {}; |
| 84 |
__export(actions_exports, { |
| 85 |
setIsMatching: () => setIsMatching |
| 86 |
}); |
| 87 |
function setIsMatching(values) { |
| 88 |
return { |
| 89 |
type: "SET_IS_MATCHING", |
| 90 |
values |
| 91 |
}; |
| 92 |
} |
| 93 |
|
| 94 |
// packages/viewport/build-module/store/selectors.mjs |
| 95 |
var selectors_exports = {}; |
| 96 |
__export(selectors_exports, { |
| 97 |
isViewportMatch: () => isViewportMatch |
| 98 |
}); |
| 99 |
function isViewportMatch(state, query) { |
| 100 |
if (query.indexOf(" ") === -1) { |
| 101 |
query = ">= " + query; |
| 102 |
} |
| 103 |
return !!state[query]; |
| 104 |
} |
| 105 |
|
| 106 |
// packages/viewport/build-module/store/index.mjs |
| 107 |
var STORE_NAME = "core/viewport"; |
| 108 |
var store = (0, import_data.createReduxStore)(STORE_NAME, { |
| 109 |
reducer: reducer_default, |
| 110 |
actions: actions_exports, |
| 111 |
selectors: selectors_exports |
| 112 |
}); |
| 113 |
(0, import_data.register)(store); |
| 114 |
|
| 115 |
// packages/viewport/build-module/listener.mjs |
| 116 |
var addDimensionsEventListener = (breakpoints, operators) => { |
| 117 |
const setIsMatching2 = (0, import_compose.debounce)( |
| 118 |
() => { |
| 119 |
const values = Object.fromEntries( |
| 120 |
queries.map(([key, query]) => [key, query.matches]) |
| 121 |
); |
| 122 |
(0, import_data2.dispatch)(store).setIsMatching(values); |
| 123 |
}, |
| 124 |
0, |
| 125 |
{ leading: true } |
| 126 |
); |
| 127 |
const operatorEntries = Object.entries(operators); |
| 128 |
const queries = Object.entries(breakpoints).flatMap( |
| 129 |
([name, width]) => { |
| 130 |
return operatorEntries.map( |
| 131 |
([operator, condition]) => { |
| 132 |
const list = window.matchMedia( |
| 133 |
`screen and (${condition}: ${width}px)` |
| 134 |
); |
| 135 |
list.addEventListener("change", setIsMatching2); |
| 136 |
return [`${operator} ${name}`, list]; |
| 137 |
} |
| 138 |
); |
| 139 |
} |
| 140 |
); |
| 141 |
window.addEventListener("orientationchange", setIsMatching2); |
| 142 |
setIsMatching2(); |
| 143 |
setIsMatching2.flush(); |
| 144 |
}; |
| 145 |
var listener_default = addDimensionsEventListener; |
| 146 |
|
| 147 |
// packages/viewport/build-module/if-viewport-matches.mjs |
| 148 |
var import_compose3 = __toESM(require_compose(), 1); |
| 149 |
|
| 150 |
// packages/viewport/build-module/with-viewport-match.mjs |
| 151 |
var import_element = __toESM(require_element(), 1); |
| 152 |
var import_compose2 = __toESM(require_compose(), 1); |
| 153 |
var withViewportMatch = (queries) => { |
| 154 |
const queryEntries = Object.entries(queries); |
| 155 |
const useViewPortQueriesResult = () => Object.fromEntries( |
| 156 |
queryEntries.map(([key, query]) => { |
| 157 |
let [operator, breakpointName] = query.split(" "); |
| 158 |
if (breakpointName === void 0) { |
| 159 |
breakpointName = operator; |
| 160 |
operator = ">="; |
| 161 |
} |
| 162 |
return [ |
| 163 |
key, |
| 164 |
// Hooks should unconditionally execute in the same order, |
| 165 |
// we are respecting that as from the static query of the HOC we generate |
| 166 |
// a hook that calls other hooks always in the same order (because the query never changes). |
| 167 |
// eslint-disable-next-line react-hooks/rules-of-hooks |
| 168 |
(0, import_compose2.useViewportMatch)( |
| 169 |
breakpointName, |
| 170 |
operator |
| 171 |
) |
| 172 |
]; |
| 173 |
}) |
| 174 |
); |
| 175 |
return (0, import_compose2.createHigherOrderComponent)( |
| 176 |
(WrappedComponent) => { |
| 177 |
return function WithViewportMatch(props) { |
| 178 |
const queriesResult = useViewPortQueriesResult(); |
| 179 |
return (0, import_element.createElement)(WrappedComponent, { |
| 180 |
...props, |
| 181 |
...queriesResult |
| 182 |
}); |
| 183 |
}; |
| 184 |
}, |
| 185 |
"withViewportMatch" |
| 186 |
); |
| 187 |
}; |
| 188 |
var with_viewport_match_default = withViewportMatch; |
| 189 |
|
| 190 |
// packages/viewport/build-module/if-viewport-matches.mjs |
| 191 |
var ifViewportMatches = (query) => (0, import_compose3.createHigherOrderComponent)( |
| 192 |
(0, import_compose3.compose)([ |
| 193 |
with_viewport_match_default({ |
| 194 |
isViewportMatch: query |
| 195 |
}), |
| 196 |
(0, import_compose3.ifCondition)( |
| 197 |
(props) => props.isViewportMatch |
| 198 |
) |
| 199 |
]), |
| 200 |
"ifViewportMatches" |
| 201 |
); |
| 202 |
var if_viewport_matches_default = ifViewportMatches; |
| 203 |
|
| 204 |
// packages/viewport/build-module/index.mjs |
| 205 |
var BREAKPOINTS = { |
| 206 |
huge: 1440, |
| 207 |
wide: 1280, |
| 208 |
large: 960, |
| 209 |
medium: 782, |
| 210 |
small: 600, |
| 211 |
mobile: 480 |
| 212 |
}; |
| 213 |
var OPERATORS = { |
| 214 |
"<": "max-width", |
| 215 |
">=": "min-width" |
| 216 |
}; |
| 217 |
listener_default(BREAKPOINTS, OPERATORS); |
| 218 |
return __toCommonJS(index_exports); |
| 219 |
})(); |
| 220 |
(window.wp ||= {}).viewport = wp.viewport; |
| 221 |
})(); |
| 222 |
//# sourceMappingURL=index.js.map |
| 223 |
|
