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

Elementor Website Builder – more than just a page builder v4.3.0

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

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

367 lines 12.3 KB

Raw Download Zip

1	(function(_elementor_editor, _elementor_store, react, _elementor_locations, _elementor_ui, _elementor_editor_v1_adapters) {
2
3	//#region \0rolldown/runtime.js
4	var __create = Object.create;
5	var __defProp = Object.defineProperty;
6	var __name = (target, value) => __defProp(target, "name", {
7	value,
8	configurable: true
9	});
10	var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
11	var __getOwnPropNames = Object.getOwnPropertyNames;
12	var __getProtoOf = Object.getPrototypeOf;
13	var __hasOwnProp = Object.prototype.hasOwnProperty;
14	var __exportAll = (all, no_symbols) => {
15	let target = {};
16	for (var name in all) {
17	__defProp(target, name, {
18	get: all[name],
19	enumerable: true
20	});
21	}
22	if (!no_symbols) {
23	__defProp(target, Symbol.toStringTag, { value: "Module" });
24	}
25	return target;
26	};
27	var __copyProps = (to, from, except, desc) => {
28	if (from && typeof from === "object" \|\| typeof from === "function") {
29	for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
30	key = keys[i];
31	if (!__hasOwnProp.call(to, key) && key !== except) {
32	__defProp(to, key, {
33	get: ((k) => from[k]).bind(null, key),
34	enumerable: !(desc = __getOwnPropDesc(from, key)) \|\| desc.enumerable
35	});
36	}
37	}
38	}
39	return to;
40	};
41	var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode \|\| !mod \|\| !mod.__esModule ? __defProp(target, "default", {
42	value: mod,
43	enumerable: true
44	}) : target, mod));
45
46	//#endregion
47	react = __toESM(react);
48
49	//#region packages/packages/core/editor-panels/src/location.ts
50	var panelsMeta = /* @__PURE__ */ new Map();
51	var { inject: baseInject, useInjections: baseUseInjections, getInjections } = (0, _elementor_locations.createLocation)();
52	(0, _elementor_locations.__registerFlushInjections)(() => {
53	panelsMeta.clear();
54	});
55	function injectIntoPanels({ id, component, keepMounted }) {
56	const existedBefore = getInjections().some((injection) => injection.id === id);
57	baseInject({
58	id,
59	component
60	});
61	if (!existedBefore) panelsMeta.set(id, { keepMounted });
62	}
63	function usePanelsInjections() {
64	return baseUseInjections().map((injection) => ({
65	...injection,
66	keepMounted: panelsMeta.get(injection.id)?.keepMounted ?? false
67	}));
68	}
69
70	//#endregion
71	//#region packages/packages/core/editor-panels/src/store/selectors.ts
72	var selectOpenId = (state) => state.panels.openId;
73
74	//#endregion
75	//#region packages/packages/core/editor-panels/src/store/slice.ts
76	var initialState = { openId: null };
77	var slice_default = (0, _elementor_store.__createSlice)({
78	name: "panels",
79	initialState,
80	reducers: {
81	open(state, action) {
82	state.openId = action.payload;
83	},
84	close(state, action) {
85	if (!action.payload \|\| state.openId === action.payload) state.openId = null;
86	}
87	}
88	});
89
90	//#endregion
91	//#region packages/packages/core/editor-panels/src/sync.ts
92	var V2_PANEL = "panel/v2";
93	function getPortalContainer() {
94	return document.querySelector("#elementor-panel-inner");
95	}
96	function sync() {
97	(0, _elementor_editor_v1_adapters.__privateListenTo)((0, _elementor_editor_v1_adapters.windowEvent)("elementor/panel/init"), () => (0, _elementor_editor_v1_adapters.__privateRegisterRoute)(V2_PANEL));
98	(0, _elementor_editor_v1_adapters.__privateListenTo)((0, _elementor_editor_v1_adapters.routeOpenEvent)(V2_PANEL), () => {
99	getV1PanelElements().forEach((el) => {
100	el.setAttribute("hidden", "hidden");
101	el.setAttribute("inert", "true");
102	});
103	});
104	(0, _elementor_editor_v1_adapters.__privateListenTo)((0, _elementor_editor_v1_adapters.routeCloseEvent)(V2_PANEL), () => selectOpenId((0, _elementor_store.__getState)()) && (0, _elementor_store.__dispatch)(slice_default.actions.close()));
105	(0, _elementor_editor_v1_adapters.__privateListenTo)((0, _elementor_editor_v1_adapters.routeCloseEvent)(V2_PANEL), () => {
106	getV1PanelElements().forEach((el) => {
107	el.removeAttribute("hidden");
108	el.removeAttribute("inert");
109	});
110	});
111	(0, _elementor_editor_v1_adapters.__privateListenTo)((0, _elementor_editor_v1_adapters.windowEvent)("elementor/panel/init"), () => subscribe({
112	on: (state) => selectOpenId(state),
113	when: ({ prev, current }) => !!(!prev && current),
114	callback: () => (0, _elementor_editor_v1_adapters.__privateOpenRoute)(V2_PANEL)
115	}));
116	(0, _elementor_editor_v1_adapters.__privateListenTo)((0, _elementor_editor_v1_adapters.windowEvent)("elementor/panel/init"), () => subscribe({
117	on: (state) => selectOpenId(state),
118	when: ({ prev, current }) => !!(!current && prev),
119	callback: () => (0, _elementor_editor_v1_adapters.__privateIsRouteActive)("panel/v2") && (0, _elementor_editor_v1_adapters.__privateOpenRoute)(getDefaultRoute())
120	}));
121	}
122	function getV1PanelElements() {
123	const v1ElementsSelector = [
124	"#elementor-panel-header-wrapper",
125	"#elementor-panel-content-wrapper",
126	"#elementor-panel-state-loading"
127	].join(", ");
128	return document.querySelectorAll(v1ElementsSelector);
129	}
130	function getDefaultRoute() {
131	return window?.elementor?.documents?.getCurrent?.()?.config?.panel?.default_route \|\| "panel/elements/categories";
132	}
133	function subscribe({ on, when, callback }) {
134	let prev;
135	(0, _elementor_store.__subscribe)(() => {
136	const current = on((0, _elementor_store.__getState)());
137	if (when({
138	prev,
139	current
140	})) callback({
141	prev,
142	current
143	});
144	prev = current;
145	});
146	}
147
148	//#endregion
149	//#region packages/packages/core/editor-panels/src/components/internal/portal.tsx
150	function Portal(props) {
151	const [container, setContainer] = (0, react.useState)(() => getPortalContainer());
152	(0, react.useEffect)(() => {
153	if (container) return;
154	const resolveContainer = () => {
155	const portalContainer = getPortalContainer();
156	if (portalContainer) setContainer(portalContainer);
157	};
158	window.addEventListener("elementor/panel/init", resolveContainer);
159	resolveContainer();
160	return () => {
161	window.removeEventListener("elementor/panel/init", resolveContainer);
162	};
163	}, [container]);
164	if (!container) return null;
165	return /* @__PURE__ */ react.createElement(_elementor_ui.Portal, {
166	container,
167	...props
168	});
169	}
170
171	//#endregion
172	//#region packages/packages/core/editor-panels/src/components/internal/panels.tsx
173	function Panels() {
174	const injections = usePanelsInjections();
175	const openId = (0, _elementor_store.__useSelector)(selectOpenId);
176	const persistentInjections = injections.filter((injection) => injection.keepMounted);
177	const openInjection = injections.find((injection) => openId === injection.id);
178	if (!persistentInjections.length && !openInjection) return null;
179	return /* @__PURE__ / react.createElement(Portal, null, persistentInjections.map(({ id, component: Component }) => / @__PURE__ */ react.createElement("div", {
180	key: id,
181	style: { display: openId === id ? "contents" : "none" }
182	}, /* @__PURE__ / react.createElement(Component, null))), openInjection && !openInjection.keepMounted && / @__PURE__ */ react.createElement(openInjection.component, null));
183	}
184
185	//#endregion
186	//#region packages/packages/core/editor-panels/src/init.ts
187	function init() {
188	sync();
189	(0, _elementor_store.__registerSlice)(slice_default);
190	(0, _elementor_editor.injectIntoTop)({
191	id: "panels",
192	component: Panels
193	});
194	}
195
196	//#endregion
197	//#region packages/packages/core/editor-panels/src/api.ts
198	function createPanel({ id, component, onOpen, onClose, allowedEditModes, blockOnKitRoutes, isOpenPreviousElement = false, keepMounted = false }) {
199	const usePanelStatus = createUseStatus(id, {
200	allowedEditModes,
201	blockOnKitRoutes
202	});
203	const usePanelActions = createUseActions(id, usePanelStatus, {
204	onOpen,
205	onClose
206	}, isOpenPreviousElement);
207	return {
208	panel: {
209	id,
210	component,
211	keepMounted
212	},
213	usePanelStatus,
214	usePanelActions
215	};
216	}
217	function registerPanel({ id, component, keepMounted }) {
218	injectIntoPanels({
219	id,
220	component,
221	keepMounted
222	});
223	}
224	function createUseStatus(id, options = {}) {
225	return () => {
226	const openPanelId = (0, _elementor_store.__useSelector)(selectOpenId);
227	const v1PanelStatus = (0, _elementor_editor_v1_adapters.__privateUseRouteStatus)(V2_PANEL, options);
228	return {
229	isOpen: openPanelId === id && v1PanelStatus.isActive,
230	isBlocked: v1PanelStatus.isBlocked
231	};
232	};
233	}
234	function createUseActions(id, useStatus, options = {}, isOpenPreviousElement) {
235	let stateSnapshot = null;
236	let previousSelectedElement = null;
237	return () => {
238	const dispatch = (0, _elementor_store.__useDispatch)();
239	const { isBlocked } = useStatus();
240	return {
241	open: async () => {
242	if (isBlocked) return;
243	if (isOpenPreviousElement) previousSelectedElement = window.elementor?.selection?.getElements?.()[0]?.model.get("id") ?? null;
244	dispatch(slice_default.actions.open(id));
245	stateSnapshot = options.onOpen?.() ?? null;
246	},
247	close: async () => {
248	if (isBlocked) return;
249	dispatch(slice_default.actions.close(id));
250	await options.onClose?.(stateSnapshot);
251	if (previousSelectedElement) {
252	try {
253	const container = window.elementor?.getContainer?.(previousSelectedElement);
254	(0, _elementor_editor_v1_adapters.__privateRunCommand)("document/elements/select", { container });
255	} catch {}
256	previousSelectedElement = null;
257	}
258	}
259	};
260	};
261	}
262
263	//#endregion
264	//#region packages/packages/core/editor-panels/src/components/external/panel.tsx
265	function Panel({ children, sx, ...props }) {
266	return /* @__PURE__ */ react.createElement(_elementor_ui.Drawer, {
267	open: true,
268	variant: "persistent",
269	anchor: "left",
270	PaperProps: { sx: {
271	position: "relative",
272	width: "100%",
273	bgcolor: "background.default",
274	border: "none"
275	} },
276	sx: {
277	height: "100%",
278	...sx
279	},
280	...props
281	}, children);
282	}
283
284	//#endregion
285	//#region packages/packages/core/editor-panels/src/components/external/panel-header.tsx
286	var Header = (0, _elementor_ui.styled)(_elementor_ui.Box)(({ theme }) => ({
287	height: theme?.spacing(6) \|\| "48px",
288	display: "flex",
289	alignItems: "center",
290	justifyContent: "center",
291	gap: theme?.spacing(.5) \|\| "4px"
292	}));
293	function PanelHeader({ children, ...props }) {
294	return /* @__PURE__ / react.createElement(react.Fragment, null, / @__PURE__ */ react.createElement(Header, {
295	component: "header",
296	...props
297	}, children));
298	}
299
300	//#endregion
301	//#region packages/packages/core/editor-panels/src/components/external/panel-header-title.tsx
302	var Typography = (0, _elementor_ui.styled)(_elementor_ui.Typography)(({ theme, variant = "body1" }) => {
303	if (variant === "inherit") return {};
304	return { "&.MuiTypography-root": { ...theme.typography[variant] } };
305	});
306	var PanelHeaderTitle = (0, react.forwardRef)(({ children, ...props }, ref) => {
307	return /* @__PURE__ */ react.createElement(Typography, {
308	ref,
309	component: "h2",
310	variant: "subtitle1",
311	...props
312	}, children);
313	});
314
315	//#endregion
316	//#region packages/packages/core/editor-panels/src/components/external/panel-body.tsx
317	function PanelBody({ children, sx, ...props }) {
318	return /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
319	component: "main",
320	sx: {
321	overflowY: "auto",
322	height: "100%",
323	...sx
324	},
325	...props
326	}, children);
327	}
328
329	//#endregion
330	//#region packages/packages/core/editor-panels/src/components/external/panel-footer.tsx
331	function PanelFooter({ children, sx, ...props }) {
332	return /* @__PURE__ / react.createElement(react.Fragment, null, / @__PURE__ / react.createElement(_elementor_ui.Divider, null), / @__PURE__ */ react.createElement(_elementor_ui.Box, {
333	component: "footer",
334	sx: {
335	display: "flex",
336	position: "sticky",
337	bottom: 0,
338	px: 2,
339	py: 1.5
340	},
341	...props
342	}, children));
343	}
344
345	//#endregion
346	//#region packages/packages/core/editor-panels/src/index.ts
347	var src_exports = /* @__PURE__ */ __exportAll({
348	Panel: () => Panel,
349	PanelBody: () => PanelBody,
350	PanelFooter: () => PanelFooter,
351	PanelHeader: () => PanelHeader,
352	PanelHeaderTitle: () => PanelHeaderTitle,
353	__createPanel: () => createPanel,
354	__registerPanel: () => registerPanel,
355	createPanel: () => createPanel,
356	init: () => init,
357	registerPanel: () => registerPanel
358	});
359
360	//#endregion
361	//#region \0elementor-package-library-entry
362	(window.elementorV2 = window.elementorV2 \|\| {}).editorPanels = src_exports;
363
364	//#endregion
365	})(elementorV2.editor, elementorV2.store, React, elementorV2.locations, elementorV2.ui, elementorV2.editorV1Adapters);
366	window.elementorV2.editorPanels?.init?.();
367	//# sourceMappingURL=editor-panels.js.map