| 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 |
"useBreakpoints": function() { return /* reexport */ useBreakpoints; } |
| 43 |
}); |
| 44 |
|
| 45 |
;// CONCATENATED MODULE: external "__UNSTABLE__elementorPackages.store" |
| 46 |
var external_UNSTABLE_elementorPackages_store_namespaceObject = __UNSTABLE__elementorPackages.store; |
| 47 |
;// CONCATENATED MODULE: ./packages/responsive/src/store/index.ts |
| 48 |
|
| 49 |
const initialState = { |
| 50 |
entities: {}, |
| 51 |
activeId: null |
| 52 |
}; |
| 53 |
function createSlice() { |
| 54 |
return (0,external_UNSTABLE_elementorPackages_store_namespaceObject.addSlice)({ |
| 55 |
name: 'breakpoints', |
| 56 |
initialState, |
| 57 |
reducers: { |
| 58 |
init(state, action) { |
| 59 |
state.activeId = action.payload.activeId; |
| 60 |
state.entities = normalizeEntities(action.payload.entities); |
| 61 |
}, |
| 62 |
activateBreakpoint(state, action) { |
| 63 |
if (state.entities[action.payload]) { |
| 64 |
state.activeId = action.payload; |
| 65 |
} |
| 66 |
} |
| 67 |
} |
| 68 |
}); |
| 69 |
} |
| 70 |
function normalizeEntities(entities) { |
| 71 |
return entities.reduce((acc, breakpoint) => { |
| 72 |
return { |
| 73 |
...acc, |
| 74 |
[breakpoint.id]: breakpoint |
| 75 |
}; |
| 76 |
}, {}); |
| 77 |
} |
| 78 |
;// CONCATENATED MODULE: external "__UNSTABLE__elementorPackages.v1Adapters" |
| 79 |
var external_UNSTABLE_elementorPackages_v1Adapters_namespaceObject = __UNSTABLE__elementorPackages.v1Adapters; |
| 80 |
;// CONCATENATED MODULE: external "wp.i18n" |
| 81 |
var external_wp_i18n_namespaceObject = wp.i18n; |
| 82 |
;// CONCATENATED MODULE: ./packages/responsive/src/sync/sync-store.ts |
| 83 |
|
| 84 |
|
| 85 |
|
| 86 |
function syncStore(slice) { |
| 87 |
syncInitialization(slice); |
| 88 |
syncOnChange(slice); |
| 89 |
} |
| 90 |
function syncInitialization(slice) { |
| 91 |
const { |
| 92 |
init |
| 93 |
} = slice.actions; |
| 94 |
(0,external_UNSTABLE_elementorPackages_v1Adapters_namespaceObject.listenTo)((0,external_UNSTABLE_elementorPackages_v1Adapters_namespaceObject.v1ReadyEvent)(), () => { |
| 95 |
(0,external_UNSTABLE_elementorPackages_store_namespaceObject.dispatch)(init({ |
| 96 |
entities: getBreakpoints(), |
| 97 |
activeId: getActiveBreakpoint() |
| 98 |
})); |
| 99 |
}); |
| 100 |
} |
| 101 |
function syncOnChange(slice) { |
| 102 |
const { |
| 103 |
activateBreakpoint |
| 104 |
} = slice.actions; |
| 105 |
(0,external_UNSTABLE_elementorPackages_v1Adapters_namespaceObject.listenTo)(deviceModeChangeEvent(), () => { |
| 106 |
const activeBreakpoint = getActiveBreakpoint(); |
| 107 |
(0,external_UNSTABLE_elementorPackages_store_namespaceObject.dispatch)(activateBreakpoint(activeBreakpoint)); |
| 108 |
}); |
| 109 |
} |
| 110 |
function getBreakpoints() { |
| 111 |
const { |
| 112 |
breakpoints |
| 113 |
} = window.elementor?.config?.responsive || {}; |
| 114 |
if (!breakpoints) { |
| 115 |
return []; |
| 116 |
} |
| 117 |
const entities = Object.entries(breakpoints).filter(([, breakpoint]) => breakpoint.is_enabled).map(([id, { |
| 118 |
value, |
| 119 |
direction, |
| 120 |
label |
| 121 |
}]) => { |
| 122 |
return { |
| 123 |
id, |
| 124 |
label, |
| 125 |
width: value, |
| 126 |
type: direction === 'min' ? 'min-width' : 'max-width' |
| 127 |
}; |
| 128 |
}); |
| 129 |
|
| 130 |
// Desktop breakpoint is not included in V1 config. |
| 131 |
entities.push({ |
| 132 |
id: 'desktop', |
| 133 |
label: (0,external_wp_i18n_namespaceObject.__)('Desktop', 'elementor') |
| 134 |
}); |
| 135 |
return entities; |
| 136 |
} |
| 137 |
function getActiveBreakpoint() { |
| 138 |
const extendedWindow = window; |
| 139 |
return extendedWindow.elementor?.channels?.deviceMode?.request?.('currentMode') || null; |
| 140 |
} |
| 141 |
function deviceModeChangeEvent() { |
| 142 |
return (0,external_UNSTABLE_elementorPackages_v1Adapters_namespaceObject.windowEvent)('elementor/device-mode/change'); |
| 143 |
} |
| 144 |
;// CONCATENATED MODULE: external "__UNSTABLE__elementorPackages.topBar" |
| 145 |
var external_UNSTABLE_elementorPackages_topBar_namespaceObject = __UNSTABLE__elementorPackages.topBar; |
| 146 |
;// CONCATENATED MODULE: ./packages/responsive/src/store/selectors.ts |
| 147 |
|
| 148 |
const selectEntities = state => state.breakpoints.entities; |
| 149 |
const selectActiveId = state => state.breakpoints.activeId; |
| 150 |
const selectActiveBreakpoint = (0,external_UNSTABLE_elementorPackages_store_namespaceObject.createSelector)(selectEntities, selectActiveId, (entities, activeId) => activeId && entities[activeId] ? entities[activeId] : null); |
| 151 |
const selectSortedBreakpoints = (0,external_UNSTABLE_elementorPackages_store_namespaceObject.createSelector)(selectEntities, entities => { |
| 152 |
const byWidth = (a, b) => { |
| 153 |
return a.width && b.width ? b.width - a.width : 0; |
| 154 |
}; |
| 155 |
const all = Object.values(entities); |
| 156 |
const defaults = all.filter(breakpoint => !breakpoint.width); // AKA Desktop. |
| 157 |
const minWidth = all.filter(breakpoint => breakpoint.type === 'min-width'); |
| 158 |
const maxWidth = all.filter(breakpoint => breakpoint.type === 'max-width'); |
| 159 |
|
| 160 |
// Sort by size, big to small. |
| 161 |
return [...minWidth.sort(byWidth), ...defaults, ...maxWidth.sort(byWidth)]; |
| 162 |
}); |
| 163 |
;// CONCATENATED MODULE: ./packages/responsive/src/hooks/use-breakpoints.ts |
| 164 |
|
| 165 |
|
| 166 |
function useBreakpoints() { |
| 167 |
const all = (0,external_UNSTABLE_elementorPackages_store_namespaceObject.useSelector)(selectSortedBreakpoints); |
| 168 |
const active = (0,external_UNSTABLE_elementorPackages_store_namespaceObject.useSelector)(selectActiveBreakpoint); |
| 169 |
return { |
| 170 |
all, |
| 171 |
active |
| 172 |
}; |
| 173 |
} |
| 174 |
;// CONCATENATED MODULE: external "__UNSTABLE__elementorPackages.ui" |
| 175 |
var external_UNSTABLE_elementorPackages_ui_namespaceObject = __UNSTABLE__elementorPackages.ui; |
| 176 |
;// CONCATENATED MODULE: external "__UNSTABLE__elementorPackages.icons" |
| 177 |
var external_UNSTABLE_elementorPackages_icons_namespaceObject = __UNSTABLE__elementorPackages.icons; |
| 178 |
;// CONCATENATED MODULE: external "React" |
| 179 |
var external_React_namespaceObject = React; |
| 180 |
;// CONCATENATED MODULE: ./packages/responsive/src/hooks/use-breakpoints-actions.ts |
| 181 |
|
| 182 |
|
| 183 |
function useBreakpointsActions() { |
| 184 |
const activate = (0,external_React_namespaceObject.useCallback)(device => { |
| 185 |
return (0,external_UNSTABLE_elementorPackages_v1Adapters_namespaceObject.runCommand)('panel/change-device-mode', { |
| 186 |
device |
| 187 |
}); |
| 188 |
}, []); |
| 189 |
return { |
| 190 |
activate |
| 191 |
}; |
| 192 |
} |
| 193 |
;// CONCATENATED MODULE: ./packages/responsive/src/components/breakpoints-switcher.tsx |
| 194 |
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } |
| 195 |
|
| 196 |
|
| 197 |
|
| 198 |
|
| 199 |
|
| 200 |
function BreakpointsSwitcher() { |
| 201 |
const { |
| 202 |
all, |
| 203 |
active |
| 204 |
} = useBreakpoints(); |
| 205 |
const { |
| 206 |
activate |
| 207 |
} = useBreakpointsActions(); |
| 208 |
if (!all.length || !active) { |
| 209 |
return null; |
| 210 |
} |
| 211 |
const onChange = (_, value) => activate(value); |
| 212 |
return /*#__PURE__*/React.createElement(external_UNSTABLE_elementorPackages_ui_namespaceObject.Tabs, { |
| 213 |
value: active.id, |
| 214 |
onChange: onChange, |
| 215 |
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Switch Device', 'elementor') |
| 216 |
}, all.map(({ |
| 217 |
id, |
| 218 |
label, |
| 219 |
type, |
| 220 |
width |
| 221 |
}) => { |
| 222 |
const Icon = iconsMap[id]; |
| 223 |
const title = labelsMap[type || 'default'].replace('%s', label).replace('%d', width?.toString() || ''); |
| 224 |
return /*#__PURE__*/React.createElement(external_UNSTABLE_elementorPackages_ui_namespaceObject.Tab, { |
| 225 |
value: id, |
| 226 |
key: id, |
| 227 |
"aria-label": title, |
| 228 |
icon: /*#__PURE__*/React.createElement(Tooltip, { |
| 229 |
title: title |
| 230 |
}, /*#__PURE__*/React.createElement(Icon, null)) |
| 231 |
}); |
| 232 |
})); |
| 233 |
} |
| 234 |
function Tooltip(props) { |
| 235 |
return /*#__PURE__*/React.createElement(external_UNSTABLE_elementorPackages_ui_namespaceObject.Tooltip, _extends({ |
| 236 |
PopperProps: { |
| 237 |
sx: { |
| 238 |
'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': { |
| 239 |
mt: 7 |
| 240 |
} |
| 241 |
} |
| 242 |
} |
| 243 |
}, props)); |
| 244 |
} |
| 245 |
const iconsMap = { |
| 246 |
widescreen: external_UNSTABLE_elementorPackages_icons_namespaceObject.WidescreenIcon, |
| 247 |
desktop: external_UNSTABLE_elementorPackages_icons_namespaceObject.DesktopIcon, |
| 248 |
laptop: external_UNSTABLE_elementorPackages_icons_namespaceObject.LaptopIcon, |
| 249 |
tablet_extra: external_UNSTABLE_elementorPackages_icons_namespaceObject.TabletLandscapeIcon, |
| 250 |
tablet: external_UNSTABLE_elementorPackages_icons_namespaceObject.TabletPortraitIcon, |
| 251 |
mobile_extra: external_UNSTABLE_elementorPackages_icons_namespaceObject.MobileLandscapeIcon, |
| 252 |
mobile: external_UNSTABLE_elementorPackages_icons_namespaceObject.MobilePortraitIcon |
| 253 |
}; |
| 254 |
const labelsMap = { |
| 255 |
default: '%s', |
| 256 |
// translators: %s: Breakpoint label, %d: Breakpoint size. |
| 257 |
'min-width': (0,external_wp_i18n_namespaceObject.__)('%s (%dpx and up)', 'elementor'), |
| 258 |
// translators: %s: Breakpoint label, %d: Breakpoint size. |
| 259 |
'max-width': (0,external_wp_i18n_namespaceObject.__)('%s (up to %dpx)', 'elementor') |
| 260 |
}; |
| 261 |
;// CONCATENATED MODULE: ./packages/responsive/src/init.ts |
| 262 |
|
| 263 |
|
| 264 |
|
| 265 |
|
| 266 |
function init() { |
| 267 |
initStore(); |
| 268 |
registerTopBarUI(); |
| 269 |
} |
| 270 |
function initStore() { |
| 271 |
const slice = createSlice(); |
| 272 |
syncStore(slice); |
| 273 |
} |
| 274 |
function registerTopBarUI() { |
| 275 |
(0,external_UNSTABLE_elementorPackages_topBar_namespaceObject.injectIntoCanvasDisplay)({ |
| 276 |
name: 'responsive-breakpoints-switcher', |
| 277 |
filler: BreakpointsSwitcher, |
| 278 |
options: { |
| 279 |
priority: 20 // After document indication. |
| 280 |
} |
| 281 |
}); |
| 282 |
} |
| 283 |
;// CONCATENATED MODULE: ./packages/responsive/src/index.ts |
| 284 |
|
| 285 |
|
| 286 |
init(); |
| 287 |
(window.__UNSTABLE__elementorPackages = window.__UNSTABLE__elementorPackages || {}).responsive = __webpack_exports__; |
| 288 |
/******/ })() |
| 289 |
; |
