Elementor Website Builder – more than just a page builder / 3.18.2

Elementor Website Builder – more than just a page builder v3.18.2

elementor / assets / js / packages / editor-responsive / editor-responsive.js

editor-responsive.js in Elementor Website Builder – more than just a page builder 3.18.2, at assets/js/packages/editor-responsive/editor-responsive.js

375 lines 12.0 KB

Raw Download Zip

1	/******/ (function() { // webpackBootstrap
2	/******/ "use strict";
3	/******/ var __webpack_modules__ = ({
4
5	/***/ "react":
6	/!************************!\
7	!* external ["React"] *!
8	\**************************/
9	/***/ (function(module) {
10
11	module.exports = window["React"];
12
13	/***/ }),
14
15	/***/ "@elementor/editor-app-bar":
16	/!*********************************************!\
17	!* external ["elementorV2","editorAppBar"] *!
18	\***********************************************/
19	/***/ (function(module) {
20
21	module.exports = window["elementorV2"]["editorAppBar"];
22
23	/***/ }),
24
25	/***/ "@elementor/editor-v1-adapters":
26	/!*************************************************!\
27	!* external ["elementorV2","editorV1Adapters"] *!
28	\***************************************************/
29	/***/ (function(module) {
30
31	module.exports = window["elementorV2"]["editorV1Adapters"];
32
33	/***/ }),
34
35	/***/ "@elementor/icons":
36	/!**************************************!\
37	!* external ["elementorV2","icons"] *!
38	\****************************************/
39	/***/ (function(module) {
40
41	module.exports = window["elementorV2"]["icons"];
42
43	/***/ }),
44
45	/***/ "@elementor/store":
46	/!**************************************!\
47	!* external ["elementorV2","store"] *!
48	\****************************************/
49	/***/ (function(module) {
50
51	module.exports = window["elementorV2"]["store"];
52
53	/***/ }),
54
55	/***/ "@elementor/ui":
56	/!***********************************!\
57	!* external ["elementorV2","ui"] *!
58	\*************************************/
59	/***/ (function(module) {
60
61	module.exports = window["elementorV2"]["ui"];
62
63	/***/ }),
64
65	/***/ "@wordpress/i18n":
66	/!****************************!\
67	!* external ["wp","i18n"] *!
68	\******************************/
69	/***/ (function(module) {
70
71	module.exports = window["wp"]["i18n"];
72
73	/***/ })
74
75	/******/ });
76	/************************************************************************/
77	/******/ // The module cache
78	/******/ var __webpack_module_cache__ = {};
79	/******/
80	/******/ // The require function
81	/******/ function __webpack_require__(moduleId) {
82	/******/ // Check if module is in cache
83	/******/ var cachedModule = __webpack_module_cache__[moduleId];
84	/******/ if (cachedModule !== undefined) {
85	/******/ return cachedModule.exports;
86	/******/ }
87	/******/ // Create a new module (and put it into the cache)
88	/******/ var module = __webpack_module_cache__[moduleId] = {
89	/******/ // no module.id needed
90	/******/ // no module.loaded needed
91	/******/ exports: {}
92	/******/ };
93	/******/
94	/******/ // Execute the module function
95	/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
96	/******/
97	/******/ // Return the exports of the module
98	/******/ return module.exports;
99	/******/ }
100	/******/
101	/************************************************************************/
102	/*****/ / webpack/runtime/make namespace object */
103	/******/ !function() {
104	/******/ // define __esModule on exports
105	/******/ __webpack_require__.r = function(exports) {
106	/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
107	/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
108	/******/ }
109	/******/ Object.defineProperty(exports, '__esModule', { value: true });
110	/******/ };
111	/******/ }();
112	/******/
113	/************************************************************************/
114	var __webpack_exports__ = {};
115	// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
116	!function() {
117	/!****************************************************************!\
118	!* ./node_modules/@elementor/editor-responsive/dist/index.mjs *!
119	\******************************************************************/
120	__webpack_require__.r(__webpack_exports__);
121	/* harmony import / var _elementor_store__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/! @elementor/store */ "@elementor/store");
122	/* harmony import / var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/! @elementor/editor-v1-adapters */ "@elementor/editor-v1-adapters");
123	/* harmony import / var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/! @wordpress/i18n */ "@wordpress/i18n");
124	/* harmony import / var _elementor_editor_app_bar__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/! @elementor/editor-app-bar */ "@elementor/editor-app-bar");
125	/* harmony import / var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/! react */ "react");
126	/* harmony import / var _elementor_ui__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/! @elementor/ui */ "@elementor/ui");
127	/* harmony import / var _elementor_icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/! @elementor/icons */ "@elementor/icons");
128	// src/store/index.ts
129
130	var initialState = {
131	entities: {},
132	activeId: null
133	};
134	var slice = (0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__createSlice)({
135	name: "breakpoints",
136	initialState,
137	reducers: {
138	init(state, action) {
139	state.activeId = action.payload.activeId;
140	state.entities = normalizeEntities(action.payload.entities);
141	},
142	activateBreakpoint(state, action) {
143	if (state.entities[action.payload]) {
144	state.activeId = action.payload;
145	}
146	}
147	}
148	});
149	function normalizeEntities(entities) {
150	return entities.reduce((acc, breakpoint) => {
151	return {
152	...acc,
153	[breakpoint.id]: breakpoint
154	};
155	}, {});
156	}
157
158	// src/sync/sync-store.ts
159
160
161
162	function syncStore() {
163	syncInitialization();
164	syncOnChange();
165	}
166	function syncInitialization() {
167	const { init: init2 } = slice.actions;
168	(0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.__privateListenTo)(
169	(0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.v1ReadyEvent)(),
170	() => {
171	(0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__dispatch)(init2({
172	entities: getBreakpoints(),
173	activeId: getActiveBreakpoint()
174	}));
175	}
176	);
177	}
178	function syncOnChange() {
179	const { activateBreakpoint } = slice.actions;
180	(0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.__privateListenTo)(
181	deviceModeChangeEvent(),
182	() => {
183	const activeBreakpoint = getActiveBreakpoint();
184	(0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__dispatch)(activateBreakpoint(activeBreakpoint));
185	}
186	);
187	}
188	function getBreakpoints() {
189	const { breakpoints } = window.elementor?.config?.responsive \|\| {};
190	if (!breakpoints) {
191	return [];
192	}
193	const entities = Object.entries(breakpoints).filter(([, breakpoint]) => breakpoint.is_enabled).map(([id, { value, direction, label }]) => {
194	return {
195	id,
196	label,
197	width: value,
198	type: direction === "min" ? "min-width" : "max-width"
199	};
200	});
201	entities.push({
202	id: "desktop",
203	label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Desktop", "elementor")
204	});
205	return entities;
206	}
207	function getActiveBreakpoint() {
208	const extendedWindow = window;
209	return extendedWindow.elementor?.channels?.deviceMode?.request?.("currentMode") \|\| null;
210	}
211	function deviceModeChangeEvent() {
212	return (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.windowEvent)("elementor/device-mode/change");
213	}
214
215	// src/init.ts
216
217
218	// src/components/breakpoints-switcher.tsx
219
220
221
222	// src/hooks/use-breakpoints.ts
223
224
225	// src/store/selectors.ts
226
227	var selectEntities = (state) => state.breakpoints.entities;
228	var selectActiveId = (state) => state.breakpoints.activeId;
229	var selectActiveBreakpoint = (0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__createSelector)(
230	selectEntities,
231	selectActiveId,
232	(entities, activeId) => activeId && entities[activeId] ? entities[activeId] : null
233	);
234	var selectSortedBreakpoints = (0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__createSelector)(
235	selectEntities,
236	(entities) => {
237	const byWidth = (a, b) => {
238	return a.width && b.width ? b.width - a.width : 0;
239	};
240	const all = Object.values(entities);
241	const defaults = all.filter((breakpoint) => !breakpoint.width);
242	const minWidth = all.filter((breakpoint) => breakpoint.type === "min-width");
243	const maxWidth = all.filter((breakpoint) => breakpoint.type === "max-width");
244	return [
245	...minWidth.sort(byWidth),
246	...defaults,
247	...maxWidth.sort(byWidth)
248	];
249	}
250	);
251
252	// src/hooks/use-breakpoints.ts
253	function useBreakpoints() {
254	const all = (0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__useSelector)(selectSortedBreakpoints);
255	const active = (0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__useSelector)(selectActiveBreakpoint);
256	return {
257	all,
258	active
259	};
260	}
261
262	// src/components/breakpoints-switcher.tsx
263
264
265
266	// src/hooks/use-breakpoints-actions.ts
267
268
269	function useBreakpointsActions() {
270	const activate = (0,react__WEBPACK_IMPORTED_MODULE_4__.useCallback)((device) => {
271	return (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.__privateRunCommand)("panel/change-device-mode", { device });
272	}, []);
273	return {
274	activate
275	};
276	}
277
278	// src/components/breakpoints-switcher.tsx
279	function BreakpointsSwitcher() {
280	const { all, active } = useBreakpoints();
281	const { activate } = useBreakpointsActions();
282	if (!all.length \|\| !active) {
283	return null;
284	}
285	const onChange = (_, value) => activate(value);
286	return /* @__PURE__ */ react__WEBPACK_IMPORTED_MODULE_4__.createElement(
287	_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Tabs,
288	{
289	textColor: "inherit",
290	indicatorColor: "secondary",
291	value: active.id,
292	onChange,
293	"aria-label": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Switch Device", "elementor"),
294	sx: {
295	"& .MuiTabs-indicator": {
296	backgroundColor: "text.primary"
297	}
298	}
299	},
300	all.map(({ id, label, type, width }) => {
301	const Icon = iconsMap[id];
302	const title = labelsMap[type \|\| "default"].replace("%s", label).replace("%d", width?.toString() \|\| "");
303	return /* @__PURE__ */ react__WEBPACK_IMPORTED_MODULE_4__.createElement(
304	_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Tab,
305	{
306	value: id,
307	key: id,
308	"aria-label": title,
309	icon: /* @__PURE__ / react__WEBPACK_IMPORTED_MODULE_4__.createElement(Tooltip, { title }, / @__PURE__ */ react__WEBPACK_IMPORTED_MODULE_4__.createElement(Icon, null)),
310	sx: { minWidth: "auto" }
311	}
312	);
313	})
314	);
315	}
316	function Tooltip(props) {
317	return /* @__PURE__ */ react__WEBPACK_IMPORTED_MODULE_4__.createElement(
318	_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Tooltip,
319	{
320	PopperProps: {
321	sx: {
322	"&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
323	mt: 2.5
324	}
325	}
326	},
327	...props
328	}
329	);
330	}
331	var iconsMap = {
332	widescreen: _elementor_icons__WEBPACK_IMPORTED_MODULE_6__.WidescreenIcon,
333	desktop: _elementor_icons__WEBPACK_IMPORTED_MODULE_6__.DesktopIcon,
334	laptop: _elementor_icons__WEBPACK_IMPORTED_MODULE_6__.LaptopIcon,
335	tablet_extra: _elementor_icons__WEBPACK_IMPORTED_MODULE_6__.TabletLandscapeIcon,
336	tablet: _elementor_icons__WEBPACK_IMPORTED_MODULE_6__.TabletPortraitIcon,
337	mobile_extra: _elementor_icons__WEBPACK_IMPORTED_MODULE_6__.MobileLandscapeIcon,
338	mobile: _elementor_icons__WEBPACK_IMPORTED_MODULE_6__.MobilePortraitIcon
339	};
340	var labelsMap = {
341	default: "%s",
342	// translators: %s: Breakpoint label, %d: Breakpoint size.
343	"min-width": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("%s (%dpx and up)", "elementor"),
344	// translators: %s: Breakpoint label, %d: Breakpoint size.
345	"max-width": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("%s (up to %dpx)", "elementor")
346	};
347
348	// src/init.ts
349
350	function init() {
351	initStore();
352	registerAppBarUI();
353	}
354	function initStore() {
355	(0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__registerSlice)(slice);
356	syncStore();
357	}
358	function registerAppBarUI() {
359	(0,_elementor_editor_app_bar__WEBPACK_IMPORTED_MODULE_3__.injectIntoResponsive)({
360	id: "responsive-breakpoints-switcher",
361	component: BreakpointsSwitcher,
362	options: {
363	priority: 20
364	// After document indication.
365	}
366	});
367	}
368
369	// src/index.ts
370	init();
371	//# sourceMappingURL=index.mjs.map
372	}();
373	(window.elementorV2 = window.elementorV2 \|\| {}).editorResponsive = __webpack_exports__;
374	/******/ })()
375	;