← All changes | assets/js/packages/editor-responsive/editor-responsive.js +363 -136 4.3.0 → 3.17.2 View file →

		@@ -1,148 +1,375 @@
1		-(function(react, _elementor_editor_v1_adapters, _wordpress_i18n) {
	1	+/******/ (function() { // webpackBootstrap
	2	+/******/ "use strict";
	3	+/******/ var __webpack_modules__ = ({
2	4
3		-//#region \0rolldown/runtime.js
4		- var __defProp = Object.defineProperty;
5		- var __name = (target, value) => __defProp(target, "name", {
6		- value,
7		- configurable: true
8		- });
9		- var __exportAll = (all, no_symbols) => {
10		- let target = {};
11		- for (var name in all) {
12		- __defProp(target, name, {
13		- get: all[name],
14		- enumerable: true
15		- });
16		- }
17		- if (!no_symbols) {
18		- __defProp(target, Symbol.toStringTag, { value: "Module" });
19		- }
20		- return target;
21		- };
	5	+/***/ "react":
	6	+/*!**************************!*\
	7	+ !*** external ["React"] ***!
	8	+ \**************************/
	9	+/***/ (function(module) {
22	10
23		-//#endregion
	11	+module.exports = window["React"];
24	12
25		-//#region packages/packages/libs/editor-responsive/src/hooks/use-activate-breakpoint.ts
26		- function useActivateBreakpoint() {
27		- return (0, react.useCallback)((breakpoint) => {
28		- return (0, _elementor_editor_v1_adapters.__privateRunCommand)("panel/change-device-mode", { device: breakpoint });
29		- }, []);
30		- }
	13	+/***/ }),
31	14
32		-//#endregion
33		-//#region packages/packages/libs/editor-responsive/src/hooks/use-active-breakpoint.ts
34		- function useActiveBreakpoint() {
35		- return (0, _elementor_editor_v1_adapters.__privateUseListenTo)((0, _elementor_editor_v1_adapters.windowEvent)("elementor/device-mode/change"), getActiveBreakpoint);
36		- }
37		- function getActiveBreakpoint() {
38		- return window.elementor?.channels?.deviceMode?.request?.("currentMode") || null;
39		- }
	15	+/***/ "@elementor/editor-app-bar":
	16	+/*!***********************************************!*\
	17	+ !*** external ["elementorV2","editorAppBar"] ***!
	18	+ \***********************************************/
	19	+/***/ (function(module) {
40	20
41		-//#endregion
42		-//#region packages/packages/libs/editor-responsive/src/sync/utils/get-breakpoints-by-widths.ts
43		- function getBreakpointsByWidths() {
44		- const { breakpoints } = window.elementor?.config?.responsive || {};
45		- if (!breakpoints || Object.entries(breakpoints).length === 0) return {
46		- minWidth: [],
47		- defaults: [],
48		- maxWidth: []
49		- };
50		- const minWidth = [];
51		- const maxWidth = [];
52		- const defaults = [{
53		- id: "desktop",
54		- label: (0, _wordpress_i18n.__)("Desktop", "elementor")
55		- }];
56		- Object.entries(breakpoints).forEach(([id, v1Breakpoint]) => {
57		- if (!v1Breakpoint.is_enabled) return;
58		- const breakpoint = {
59		- id,
60		- label: v1Breakpoint.label,
61		- width: v1Breakpoint.value,
62		- type: v1Breakpoint.direction === "min" ? "min-width" : "max-width"
63		- };
64		- if (!breakpoint.width) defaults.push(breakpoint);
65		- else if (breakpoint.type === "min-width") minWidth.push(breakpoint);
66		- else if (breakpoint.type === "max-width") maxWidth.push(breakpoint);
67		- });
68		- const byWidth = (a, b) => {
69		- return a.width && b.width ? b.width - a.width : 0;
70		- };
71		- return {
72		- minWidth: minWidth.sort(byWidth),
73		- defaults,
74		- maxWidth: maxWidth.sort(byWidth)
75		- };
76		- }
	21	+module.exports = window["elementorV2"]["editorAppBar"];
77	22
78		-//#endregion
79		-//#region packages/packages/libs/editor-responsive/src/sync/get-breakpoints.ts
80		- function getBreakpoints() {
81		- const { minWidth, defaults, maxWidth } = getBreakpointsByWidths();
82		- return [
83		- ...minWidth,
84		- ...defaults,
85		- ...maxWidth
86		- ];
87		- }
	23	+/***/ }),
88	24
89		-//#endregion
90		-//#region packages/packages/libs/editor-responsive/src/hooks/use-breakpoints.ts
91		- function useBreakpoints() {
92		- return (0, _elementor_editor_v1_adapters.__privateUseListenTo)((0, _elementor_editor_v1_adapters.v1ReadyEvent)(), getBreakpoints);
93		- }
	25	+/***/ "@elementor/editor-v1-adapters":
	26	+/*!***************************************************!*\
	27	+ !*** external ["elementorV2","editorV1Adapters"] ***!
	28	+ \***************************************************/
	29	+/***/ (function(module) {
94	30
95		-//#endregion
96		-//#region packages/packages/libs/editor-responsive/src/hooks/use-breakpoints-map.ts
97		- function useBreakpointsMap() {
98		- const breakpoints = useBreakpoints();
99		- return (0, react.useMemo)(() => {
100		- const entries = breakpoints.map((breakpoint) => [breakpoint.id, breakpoint]);
101		- return Object.fromEntries(entries);
102		- }, [breakpoints]);
103		- }
	31	+module.exports = window["elementorV2"]["editorV1Adapters"];
104	32
105		-//#endregion
106		-//#region packages/packages/libs/editor-responsive/src/sync/get-breakpoints-tree.ts
107		- function getBreakpointsTree() {
108		- const { minWidth, defaults, maxWidth } = getBreakpointsByWidths();
109		- const [rootBreakpoint] = defaults;
110		- const rootNode = {
111		- ...rootBreakpoint,
112		- children: []
113		- };
114		- const buildBranch = (breakpoints) => {
115		- let last = rootNode;
116		- breakpoints.forEach((breakpoint) => {
117		- const newNode = {
118		- ...breakpoint,
119		- children: []
120		- };
121		- last.children.push(newNode);
122		- last = newNode;
123		- });
124		- };
125		- buildBranch(minWidth);
126		- buildBranch(maxWidth);
127		- return rootNode;
128		- }
	33	+/***/ }),
129	34
130		-//#endregion
131		-//#region packages/packages/libs/editor-responsive/src/index.ts
132		- var src_exports = /* @__PURE__ */ __exportAll({
133		- getBreakpoints: () => getBreakpoints,
134		- getBreakpointsTree: () => getBreakpointsTree,
135		- useActivateBreakpoint: () => useActivateBreakpoint,
136		- useActiveBreakpoint: () => useActiveBreakpoint,
137		- useBreakpoints: () => useBreakpoints,
138		- useBreakpointsMap: () => useBreakpointsMap
139		- });
	35	+/***/ "@elementor/icons":
	36	+/*!****************************************!*\
	37	+ !*** external ["elementorV2","icons"] ***!
	38	+ \****************************************/
	39	+/***/ (function(module) {
140	40
141		-//#endregion
142		-//#region \0elementor-package-library-entry
143		- (window.elementorV2 = window.elementorV2 || {}).editorResponsive = src_exports;
	41	+module.exports = window["elementorV2"]["icons"];
144	42
145		-//#endregion
146		-})(React, elementorV2.editorV1Adapters, wp.i18n);
147		-window.elementorV2.editorResponsive?.init?.();
148		-//# sourceMappingURL=editor-responsive.js.map
	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	+;