@elementor/editor-interactions 3.33.0-227 → 3.33.0-229
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +4 -17
- package/dist/index.d.ts +4 -17
- package/dist/index.js +150 -86
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +137 -71
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -3
- package/src/components/controls/direction.tsx +1 -1
- package/src/components/controls/effect-type.tsx +1 -1
- package/src/components/interactions-list.tsx +10 -3
- package/src/components/interactions-tab.tsx +81 -0
- package/src/contexts/interactions-context.tsx +36 -0
- package/src/index.ts +1 -2
- package/src/utils/format-interaction-label.ts +0 -32
- /package/src/contexts/{popup-state-contex.tsx → popup-state-context.tsx} +0 -0
package/dist/index.d.mts
CHANGED
|
@@ -4,12 +4,9 @@ declare const EmptyState: ({ onCreateInteraction }: {
|
|
|
4
4
|
onCreateInteraction: () => void;
|
|
5
5
|
}) => React.JSX.Element;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
onDelete?: () => void;
|
|
11
|
-
};
|
|
12
|
-
declare const PredefinedInteractionsList: ({ onSelectInteraction, selectedInteraction, onDelete, }: PredefinedInteractionsListProps) => React.JSX.Element;
|
|
7
|
+
declare const InteractionsTab: ({ elementId }: {
|
|
8
|
+
elementId: string;
|
|
9
|
+
}) => React.JSX.Element;
|
|
13
10
|
|
|
14
11
|
type AnimationOption = {
|
|
15
12
|
value: string;
|
|
@@ -34,14 +31,4 @@ type FieldProps = {
|
|
|
34
31
|
|
|
35
32
|
declare function getInteractionsConfig(): InteractionsConfig;
|
|
36
33
|
|
|
37
|
-
type
|
|
38
|
-
openByDefault: boolean;
|
|
39
|
-
triggerDefaultOpen: () => void;
|
|
40
|
-
resetDefaultOpen: () => void;
|
|
41
|
-
};
|
|
42
|
-
declare const PopupStateProvider: ({ children }: {
|
|
43
|
-
children: React.ReactNode;
|
|
44
|
-
}) => React.JSX.Element;
|
|
45
|
-
declare const usePopupStateContext: () => PopupStateContextType;
|
|
46
|
-
|
|
47
|
-
export { type AnimationOption, EmptyState, type FieldProps, type InteractionConstants, type InteractionsConfig, PopupStateProvider, PredefinedInteractionsList, getInteractionsConfig, usePopupStateContext };
|
|
34
|
+
export { type AnimationOption, EmptyState, type FieldProps, type InteractionConstants, type InteractionsConfig, InteractionsTab, getInteractionsConfig };
|
package/dist/index.d.ts
CHANGED
|
@@ -4,12 +4,9 @@ declare const EmptyState: ({ onCreateInteraction }: {
|
|
|
4
4
|
onCreateInteraction: () => void;
|
|
5
5
|
}) => React.JSX.Element;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
onDelete?: () => void;
|
|
11
|
-
};
|
|
12
|
-
declare const PredefinedInteractionsList: ({ onSelectInteraction, selectedInteraction, onDelete, }: PredefinedInteractionsListProps) => React.JSX.Element;
|
|
7
|
+
declare const InteractionsTab: ({ elementId }: {
|
|
8
|
+
elementId: string;
|
|
9
|
+
}) => React.JSX.Element;
|
|
13
10
|
|
|
14
11
|
type AnimationOption = {
|
|
15
12
|
value: string;
|
|
@@ -34,14 +31,4 @@ type FieldProps = {
|
|
|
34
31
|
|
|
35
32
|
declare function getInteractionsConfig(): InteractionsConfig;
|
|
36
33
|
|
|
37
|
-
type
|
|
38
|
-
openByDefault: boolean;
|
|
39
|
-
triggerDefaultOpen: () => void;
|
|
40
|
-
resetDefaultOpen: () => void;
|
|
41
|
-
};
|
|
42
|
-
declare const PopupStateProvider: ({ children }: {
|
|
43
|
-
children: React.ReactNode;
|
|
44
|
-
}) => React.JSX.Element;
|
|
45
|
-
declare const usePopupStateContext: () => PopupStateContextType;
|
|
46
|
-
|
|
47
|
-
export { type AnimationOption, EmptyState, type FieldProps, type InteractionConstants, type InteractionsConfig, PopupStateProvider, PredefinedInteractionsList, getInteractionsConfig, usePopupStateContext };
|
|
34
|
+
export { type AnimationOption, EmptyState, type FieldProps, type InteractionConstants, type InteractionsConfig, InteractionsTab, getInteractionsConfig };
|
package/dist/index.js
CHANGED
|
@@ -31,10 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
33
|
EmptyState: () => EmptyState,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
getInteractionsConfig: () => getInteractionsConfig,
|
|
37
|
-
usePopupStateContext: () => usePopupStateContext
|
|
34
|
+
InteractionsTab: () => InteractionsTab,
|
|
35
|
+
getInteractionsConfig: () => getInteractionsConfig
|
|
38
36
|
});
|
|
39
37
|
module.exports = __toCommonJS(index_exports);
|
|
40
38
|
|
|
@@ -64,35 +62,68 @@ var EmptyState = ({ onCreateInteraction }) => {
|
|
|
64
62
|
);
|
|
65
63
|
};
|
|
66
64
|
|
|
67
|
-
// src/components/interactions-
|
|
68
|
-
var
|
|
69
|
-
var
|
|
70
|
-
var
|
|
71
|
-
var
|
|
72
|
-
var import_i18n8 = require("@wordpress/i18n");
|
|
65
|
+
// src/components/interactions-tab.tsx
|
|
66
|
+
var React12 = __toESM(require("react"));
|
|
67
|
+
var import_react5 = require("react");
|
|
68
|
+
var import_editor_elements2 = require("@elementor/editor-elements");
|
|
69
|
+
var import_session = require("@elementor/session");
|
|
73
70
|
|
|
74
|
-
// src/contexts/
|
|
71
|
+
// src/contexts/interactions-context.tsx
|
|
75
72
|
var React2 = __toESM(require("react"));
|
|
76
73
|
var import_react = require("react");
|
|
77
|
-
var
|
|
74
|
+
var import_editor_elements = require("@elementor/editor-elements");
|
|
75
|
+
var InteractionsContext = (0, import_react.createContext)(null);
|
|
76
|
+
var InteractionsProvider = ({ children, elementId }) => {
|
|
77
|
+
const interactions = (0, import_editor_elements.useElementInteractions)(elementId);
|
|
78
|
+
const setInteractions = (value) => {
|
|
79
|
+
(0, import_editor_elements.updateElementInteractions)({
|
|
80
|
+
elementId,
|
|
81
|
+
interactions: value
|
|
82
|
+
});
|
|
83
|
+
};
|
|
84
|
+
const contextValue = {
|
|
85
|
+
interactions: interactions || "",
|
|
86
|
+
setInteractions
|
|
87
|
+
};
|
|
88
|
+
return /* @__PURE__ */ React2.createElement(InteractionsContext.Provider, { value: contextValue }, children);
|
|
89
|
+
};
|
|
90
|
+
var useInteractionsContext = () => {
|
|
91
|
+
const context = (0, import_react.useContext)(InteractionsContext);
|
|
92
|
+
if (!context) {
|
|
93
|
+
throw new Error("useInteractionsContext must be used within InteractionsProvider");
|
|
94
|
+
}
|
|
95
|
+
return context;
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
// src/contexts/popup-state-context.tsx
|
|
99
|
+
var React3 = __toESM(require("react"));
|
|
100
|
+
var import_react2 = require("react");
|
|
101
|
+
var PopupStateContext = (0, import_react2.createContext)(void 0);
|
|
78
102
|
var PopupStateProvider = ({ children }) => {
|
|
79
|
-
const [openByDefault, setOpenByDefault] = (0,
|
|
80
|
-
const triggerDefaultOpen = (0,
|
|
103
|
+
const [openByDefault, setOpenByDefault] = (0, import_react2.useState)(false);
|
|
104
|
+
const triggerDefaultOpen = (0, import_react2.useCallback)(() => {
|
|
81
105
|
setOpenByDefault(true);
|
|
82
106
|
}, []);
|
|
83
|
-
const resetDefaultOpen = (0,
|
|
107
|
+
const resetDefaultOpen = (0, import_react2.useCallback)(() => {
|
|
84
108
|
setOpenByDefault(false);
|
|
85
109
|
}, []);
|
|
86
|
-
return /* @__PURE__ */
|
|
110
|
+
return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
|
|
87
111
|
};
|
|
88
112
|
var usePopupStateContext = () => {
|
|
89
|
-
const context = (0,
|
|
113
|
+
const context = (0, import_react2.useContext)(PopupStateContext);
|
|
90
114
|
if (!context) {
|
|
91
115
|
throw new Error("usePopupStateContext must be used within PopupStateProvider");
|
|
92
116
|
}
|
|
93
117
|
return context;
|
|
94
118
|
};
|
|
95
119
|
|
|
120
|
+
// src/components/interactions-list.tsx
|
|
121
|
+
var React11 = __toESM(require("react"));
|
|
122
|
+
var import_react4 = require("react");
|
|
123
|
+
var import_icons4 = require("@elementor/icons");
|
|
124
|
+
var import_ui9 = require("@elementor/ui");
|
|
125
|
+
var import_i18n8 = require("@wordpress/i18n");
|
|
126
|
+
|
|
96
127
|
// src/utils/get-interactions-config.ts
|
|
97
128
|
var DEFAULT_CONFIG = {
|
|
98
129
|
constants: {
|
|
@@ -108,35 +139,12 @@ function getInteractionsConfig() {
|
|
|
108
139
|
return window.ElementorInteractionsConfig || DEFAULT_CONFIG;
|
|
109
140
|
}
|
|
110
141
|
|
|
111
|
-
// src/utils/format-interaction-label.ts
|
|
112
|
-
function formatInteractionLabel(animationId) {
|
|
113
|
-
if (!animationId) {
|
|
114
|
-
return "";
|
|
115
|
-
}
|
|
116
|
-
const [trigger, effect, type, direction, duration, delay] = animationId.split("-");
|
|
117
|
-
const baseValue = `${trigger}-${effect}-${type}-${direction || ""}`;
|
|
118
|
-
const animationOptions = getInteractionsConfig()?.animationOptions;
|
|
119
|
-
const option = animationOptions.find((opt) => opt.value === baseValue);
|
|
120
|
-
let label = option?.label || animationId;
|
|
121
|
-
if (duration || delay) {
|
|
122
|
-
const constants = getInteractionsConfig()?.constants;
|
|
123
|
-
const durationValue = duration || String(constants.defaultDuration);
|
|
124
|
-
const delayValue = delay || String(constants.defaultDelay);
|
|
125
|
-
label += ` (${durationValue}ms`;
|
|
126
|
-
if (delayValue !== "0") {
|
|
127
|
-
label += `, ${delayValue}ms delay`;
|
|
128
|
-
}
|
|
129
|
-
label += ")";
|
|
130
|
-
}
|
|
131
|
-
return label;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
142
|
// src/components/header.tsx
|
|
135
|
-
var
|
|
143
|
+
var React4 = __toESM(require("react"));
|
|
136
144
|
var import_icons2 = require("@elementor/icons");
|
|
137
145
|
var import_ui2 = require("@elementor/ui");
|
|
138
146
|
var Header = ({ label }) => {
|
|
139
|
-
return /* @__PURE__ */
|
|
147
|
+
return /* @__PURE__ */ React4.createElement(
|
|
140
148
|
import_ui2.Stack,
|
|
141
149
|
{
|
|
142
150
|
direction: "row",
|
|
@@ -145,30 +153,30 @@ var Header = ({ label }) => {
|
|
|
145
153
|
gap: 1,
|
|
146
154
|
sx: { marginInlineEnd: -0.75, py: 0.25 }
|
|
147
155
|
},
|
|
148
|
-
/* @__PURE__ */
|
|
149
|
-
/* @__PURE__ */
|
|
156
|
+
/* @__PURE__ */ React4.createElement(import_ui2.Typography, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label),
|
|
157
|
+
/* @__PURE__ */ React4.createElement(import_ui2.IconButton, { size: "tiny", disabled: true }, /* @__PURE__ */ React4.createElement(import_icons2.PlusIcon, { fontSize: "tiny" }))
|
|
150
158
|
);
|
|
151
159
|
};
|
|
152
160
|
|
|
153
161
|
// src/components/interaction-details.tsx
|
|
154
|
-
var
|
|
155
|
-
var
|
|
162
|
+
var React10 = __toESM(require("react"));
|
|
163
|
+
var import_react3 = require("react");
|
|
156
164
|
var import_ui8 = require("@elementor/ui");
|
|
157
165
|
var import_i18n7 = require("@wordpress/i18n");
|
|
158
166
|
|
|
159
167
|
// src/components/controls/direction.tsx
|
|
160
|
-
var
|
|
168
|
+
var React5 = __toESM(require("react"));
|
|
161
169
|
var import_icons3 = require("@elementor/icons");
|
|
162
170
|
var import_ui3 = require("@elementor/ui");
|
|
163
171
|
var import_i18n2 = require("@wordpress/i18n");
|
|
164
172
|
function Direction({ value, onChange }) {
|
|
165
173
|
const availableDirections = [
|
|
166
|
-
{ key: "top", label: (0, import_i18n2.__)("Up", "elementor"), icon: /* @__PURE__ */
|
|
167
|
-
{ key: "bottom", label: (0, import_i18n2.__)("Down", "elementor"), icon: /* @__PURE__ */
|
|
168
|
-
{ key: "left", label: (0, import_i18n2.__)("Left", "elementor"), icon: /* @__PURE__ */
|
|
169
|
-
{ key: "right", label: (0, import_i18n2.__)("Right", "elementor"), icon: /* @__PURE__ */
|
|
174
|
+
{ key: "top", label: (0, import_i18n2.__)("Up", "elementor"), icon: /* @__PURE__ */ React5.createElement(import_icons3.ArrowUpSmallIcon, { fontSize: "tiny" }) },
|
|
175
|
+
{ key: "bottom", label: (0, import_i18n2.__)("Down", "elementor"), icon: /* @__PURE__ */ React5.createElement(import_icons3.ArrowDownSmallIcon, { fontSize: "tiny" }) },
|
|
176
|
+
{ key: "left", label: (0, import_i18n2.__)("Left", "elementor"), icon: /* @__PURE__ */ React5.createElement(import_icons3.ArrowLeftIcon, { fontSize: "tiny" }) },
|
|
177
|
+
{ key: "right", label: (0, import_i18n2.__)("Right", "elementor"), icon: /* @__PURE__ */ React5.createElement(import_icons3.ArrowRightIcon, { fontSize: "tiny" }) }
|
|
170
178
|
];
|
|
171
|
-
return /* @__PURE__ */
|
|
179
|
+
return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui3.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React5.createElement(import_ui3.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n2.__)("Direction", "elementor"))), /* @__PURE__ */ React5.createElement(import_ui3.Grid, { item: true, xs: 12, md: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React5.createElement(
|
|
172
180
|
import_ui3.ToggleButtonGroup,
|
|
173
181
|
{
|
|
174
182
|
size: "tiny",
|
|
@@ -177,13 +185,13 @@ function Direction({ value, onChange }) {
|
|
|
177
185
|
value
|
|
178
186
|
},
|
|
179
187
|
availableDirections.map((direction) => {
|
|
180
|
-
return /* @__PURE__ */
|
|
188
|
+
return /* @__PURE__ */ React5.createElement(import_ui3.Tooltip, { key: direction.key, title: direction.label, placement: "top" }, /* @__PURE__ */ React5.createElement(import_ui3.ToggleButton, { key: direction.key, value: direction.key }, direction.icon));
|
|
181
189
|
})
|
|
182
190
|
)));
|
|
183
191
|
}
|
|
184
192
|
|
|
185
193
|
// src/components/controls/effect.tsx
|
|
186
|
-
var
|
|
194
|
+
var React6 = __toESM(require("react"));
|
|
187
195
|
var import_editor_ui = require("@elementor/editor-ui");
|
|
188
196
|
var import_ui4 = require("@elementor/ui");
|
|
189
197
|
var import_i18n3 = require("@wordpress/i18n");
|
|
@@ -193,7 +201,7 @@ function Effect({ value, onChange }) {
|
|
|
193
201
|
{ key: "slide", label: (0, import_i18n3.__)("Slide", "elementor") },
|
|
194
202
|
{ key: "scale", label: (0, import_i18n3.__)("Scale", "elementor") }
|
|
195
203
|
];
|
|
196
|
-
return /* @__PURE__ */
|
|
204
|
+
return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui4.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(import_ui4.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n3.__)("Effect", "elementor"))), /* @__PURE__ */ React6.createElement(import_ui4.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(
|
|
197
205
|
import_ui4.Select,
|
|
198
206
|
{
|
|
199
207
|
fullWidth: true,
|
|
@@ -203,13 +211,13 @@ function Effect({ value, onChange }) {
|
|
|
203
211
|
onChange: (event) => onChange(event.target.value)
|
|
204
212
|
},
|
|
205
213
|
availableEffects.map((effect) => {
|
|
206
|
-
return /* @__PURE__ */
|
|
214
|
+
return /* @__PURE__ */ React6.createElement(import_editor_ui.MenuListItem, { key: effect.key, value: effect.key }, effect.label);
|
|
207
215
|
})
|
|
208
216
|
)));
|
|
209
217
|
}
|
|
210
218
|
|
|
211
219
|
// src/components/controls/effect-type.tsx
|
|
212
|
-
var
|
|
220
|
+
var React7 = __toESM(require("react"));
|
|
213
221
|
var import_ui5 = require("@elementor/ui");
|
|
214
222
|
var import_i18n4 = require("@wordpress/i18n");
|
|
215
223
|
function EffectType({ value, onChange }) {
|
|
@@ -217,7 +225,7 @@ function EffectType({ value, onChange }) {
|
|
|
217
225
|
{ key: "in", label: (0, import_i18n4.__)("In", "elementor") },
|
|
218
226
|
{ key: "out", label: (0, import_i18n4.__)("Out", "elementor") }
|
|
219
227
|
];
|
|
220
|
-
return /* @__PURE__ */
|
|
228
|
+
return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React7.createElement(import_ui5.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n4.__)("Type", "elementor"))), /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12, md: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React7.createElement(
|
|
221
229
|
import_ui5.ToggleButtonGroup,
|
|
222
230
|
{
|
|
223
231
|
size: "tiny",
|
|
@@ -226,13 +234,13 @@ function EffectType({ value, onChange }) {
|
|
|
226
234
|
value
|
|
227
235
|
},
|
|
228
236
|
availableEffectTypes.map((effectType) => {
|
|
229
|
-
return /* @__PURE__ */
|
|
237
|
+
return /* @__PURE__ */ React7.createElement(import_ui5.Tooltip, { key: effectType.key, title: effectType.label, placement: "top" }, /* @__PURE__ */ React7.createElement(import_ui5.ToggleButton, { key: effectType.key, value: effectType.key }, effectType.label));
|
|
230
238
|
})
|
|
231
239
|
)));
|
|
232
240
|
}
|
|
233
241
|
|
|
234
242
|
// src/components/controls/time-frame-indicator.tsx
|
|
235
|
-
var
|
|
243
|
+
var React8 = __toESM(require("react"));
|
|
236
244
|
var import_editor_ui2 = require("@elementor/editor-ui");
|
|
237
245
|
var import_ui6 = require("@elementor/ui");
|
|
238
246
|
var import_i18n5 = require("@wordpress/i18n");
|
|
@@ -244,7 +252,7 @@ function TimeFrameIndicator({ value, onChange, label }) {
|
|
|
244
252
|
label: (0, import_i18n5.__)("%s MS", "elementor").replace("%s", key)
|
|
245
253
|
})
|
|
246
254
|
);
|
|
247
|
-
return /* @__PURE__ */
|
|
255
|
+
return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui6.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React8.createElement(import_ui6.Typography, { variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React8.createElement(import_ui6.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React8.createElement(
|
|
248
256
|
import_ui6.Select,
|
|
249
257
|
{
|
|
250
258
|
fullWidth: true,
|
|
@@ -254,13 +262,13 @@ function TimeFrameIndicator({ value, onChange, label }) {
|
|
|
254
262
|
onChange: (event) => onChange(event.target.value)
|
|
255
263
|
},
|
|
256
264
|
availableTimeFrames.map((timeFrame) => {
|
|
257
|
-
return /* @__PURE__ */
|
|
265
|
+
return /* @__PURE__ */ React8.createElement(import_editor_ui2.MenuListItem, { key: timeFrame.key, value: timeFrame.key }, timeFrame.label);
|
|
258
266
|
})
|
|
259
267
|
)));
|
|
260
268
|
}
|
|
261
269
|
|
|
262
270
|
// src/components/controls/trigger.tsx
|
|
263
|
-
var
|
|
271
|
+
var React9 = __toESM(require("react"));
|
|
264
272
|
var import_editor_ui3 = require("@elementor/editor-ui");
|
|
265
273
|
var import_ui7 = require("@elementor/ui");
|
|
266
274
|
var import_i18n6 = require("@wordpress/i18n");
|
|
@@ -273,7 +281,7 @@ function Trigger({ value, onChange }) {
|
|
|
273
281
|
key,
|
|
274
282
|
label
|
|
275
283
|
}));
|
|
276
|
-
return /* @__PURE__ */
|
|
284
|
+
return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(import_ui7.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React9.createElement(import_ui7.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n6.__)("Trigger", "elementor"))), /* @__PURE__ */ React9.createElement(import_ui7.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React9.createElement(
|
|
277
285
|
import_ui7.Select,
|
|
278
286
|
{
|
|
279
287
|
fullWidth: true,
|
|
@@ -283,7 +291,7 @@ function Trigger({ value, onChange }) {
|
|
|
283
291
|
value
|
|
284
292
|
},
|
|
285
293
|
availableTriggers.map((trigger) => {
|
|
286
|
-
return /* @__PURE__ */
|
|
294
|
+
return /* @__PURE__ */ React9.createElement(import_editor_ui3.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
|
|
287
295
|
})
|
|
288
296
|
)));
|
|
289
297
|
}
|
|
@@ -291,7 +299,7 @@ function Trigger({ value, onChange }) {
|
|
|
291
299
|
// src/components/interaction-details.tsx
|
|
292
300
|
var DELIMITER = "-";
|
|
293
301
|
var InteractionDetails = ({ interaction, onChange }) => {
|
|
294
|
-
const [interactionDetails, setInteractionDetails] = (0,
|
|
302
|
+
const [interactionDetails, setInteractionDetails] = (0, import_react3.useState)(() => {
|
|
295
303
|
const [trigger, effect, type, direction, duration, delay] = interaction.split(DELIMITER);
|
|
296
304
|
return {
|
|
297
305
|
trigger: trigger || "load",
|
|
@@ -302,27 +310,27 @@ var InteractionDetails = ({ interaction, onChange }) => {
|
|
|
302
310
|
delay: delay || "0"
|
|
303
311
|
};
|
|
304
312
|
});
|
|
305
|
-
(0,
|
|
313
|
+
(0, import_react3.useEffect)(() => {
|
|
306
314
|
const newValue = Object.values(interactionDetails).join(DELIMITER);
|
|
307
315
|
onChange(newValue);
|
|
308
316
|
}, [interactionDetails, onChange]);
|
|
309
317
|
const handleChange = (key, value) => {
|
|
310
318
|
setInteractionDetails((prev) => ({ ...prev, [key]: value }));
|
|
311
319
|
};
|
|
312
|
-
return /* @__PURE__ */
|
|
320
|
+
return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(import_ui8.Grid, { container: true, spacing: 2, sx: { width: "300px", p: 1 } }, /* @__PURE__ */ React10.createElement(Trigger, { value: interactionDetails.trigger, onChange: (v) => handleChange("trigger", v) })), /* @__PURE__ */ React10.createElement(import_ui8.Divider, null), /* @__PURE__ */ React10.createElement(import_ui8.Grid, { container: true, spacing: 2, sx: { width: "300px", p: 1 } }, /* @__PURE__ */ React10.createElement(Effect, { value: interactionDetails.effect, onChange: (v) => handleChange("effect", v) }), /* @__PURE__ */ React10.createElement(EffectType, { value: interactionDetails.type, onChange: (v) => handleChange("type", v) }), /* @__PURE__ */ React10.createElement(
|
|
313
321
|
Direction,
|
|
314
322
|
{
|
|
315
323
|
value: interactionDetails.direction ?? "",
|
|
316
324
|
onChange: (v) => handleChange("direction", v)
|
|
317
325
|
}
|
|
318
|
-
), /* @__PURE__ */
|
|
326
|
+
), /* @__PURE__ */ React10.createElement(
|
|
319
327
|
TimeFrameIndicator,
|
|
320
328
|
{
|
|
321
329
|
value: interactionDetails.duration,
|
|
322
330
|
onChange: (v) => handleChange("duration", v),
|
|
323
331
|
label: (0, import_i18n7.__)("Duration", "elementor")
|
|
324
332
|
}
|
|
325
|
-
), /* @__PURE__ */
|
|
333
|
+
), /* @__PURE__ */ React10.createElement(
|
|
326
334
|
TimeFrameIndicator,
|
|
327
335
|
{
|
|
328
336
|
value: interactionDetails.delay,
|
|
@@ -338,7 +346,7 @@ var PredefinedInteractionsList = ({
|
|
|
338
346
|
selectedInteraction,
|
|
339
347
|
onDelete
|
|
340
348
|
}) => {
|
|
341
|
-
return /* @__PURE__ */
|
|
349
|
+
return /* @__PURE__ */ React11.createElement(import_ui9.Stack, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React11.createElement(Header, { label: (0, import_i18n8.__)("Interactions", "elementor") }), /* @__PURE__ */ React11.createElement(
|
|
342
350
|
InteractionsList,
|
|
343
351
|
{
|
|
344
352
|
onDelete: () => onDelete?.(),
|
|
@@ -348,29 +356,34 @@ var PredefinedInteractionsList = ({
|
|
|
348
356
|
));
|
|
349
357
|
};
|
|
350
358
|
function InteractionsList({ onSelectInteraction, selectedInteraction, defaultStateRef }) {
|
|
351
|
-
const [interactionId, setInteractionId] = (0,
|
|
352
|
-
const anchorEl = (0,
|
|
353
|
-
const popupId = (0,
|
|
359
|
+
const [interactionId, setInteractionId] = (0, import_react4.useState)(selectedInteraction);
|
|
360
|
+
const anchorEl = (0, import_react4.useRef)(null);
|
|
361
|
+
const popupId = (0, import_react4.useId)();
|
|
354
362
|
const popupState = (0, import_ui9.usePopupState)({
|
|
355
363
|
variant: "popover",
|
|
356
364
|
popupId: `elementor-interactions-list-${popupId}`
|
|
357
365
|
});
|
|
358
366
|
const { openByDefault, resetDefaultOpen } = usePopupStateContext();
|
|
359
|
-
(0,
|
|
367
|
+
(0, import_react4.useEffect)(() => {
|
|
360
368
|
if (interactionId) {
|
|
361
369
|
onSelectInteraction(interactionId);
|
|
362
370
|
}
|
|
363
371
|
}, [interactionId, onSelectInteraction]);
|
|
364
|
-
(0,
|
|
372
|
+
(0, import_react4.useEffect)(() => {
|
|
365
373
|
if (openByDefault && anchorEl.current) {
|
|
366
374
|
popupState.open();
|
|
367
375
|
resetDefaultOpen();
|
|
368
376
|
}
|
|
369
377
|
}, [defaultStateRef, openByDefault, popupState, resetDefaultOpen]);
|
|
370
|
-
const displayLabel = (0,
|
|
371
|
-
|
|
378
|
+
const displayLabel = (0, import_react4.useMemo)(() => {
|
|
379
|
+
if (!interactionId) {
|
|
380
|
+
return "";
|
|
381
|
+
}
|
|
382
|
+
const animationOptions = getInteractionsConfig()?.animationOptions;
|
|
383
|
+
const option = animationOptions.find((opt) => opt.value === interactionId);
|
|
384
|
+
return option?.label || interactionId;
|
|
372
385
|
}, [interactionId]);
|
|
373
|
-
return /* @__PURE__ */
|
|
386
|
+
return /* @__PURE__ */ React11.createElement(import_ui9.Stack, { gap: 1.5, ref: anchorEl }, /* @__PURE__ */ React11.createElement(
|
|
374
387
|
import_ui9.UnstableTag,
|
|
375
388
|
{
|
|
376
389
|
...(0, import_ui9.bindTrigger)(popupState),
|
|
@@ -378,9 +391,9 @@ function InteractionsList({ onSelectInteraction, selectedInteraction, defaultSta
|
|
|
378
391
|
variant: "outlined",
|
|
379
392
|
label: displayLabel,
|
|
380
393
|
showActionsOnHover: true,
|
|
381
|
-
actions: /* @__PURE__ */
|
|
394
|
+
actions: /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(import_ui9.IconButton, { size: "tiny", disabled: true }, /* @__PURE__ */ React11.createElement(import_icons4.EyeIcon, { fontSize: "tiny" })), /* @__PURE__ */ React11.createElement(import_ui9.IconButton, { size: "tiny" }, /* @__PURE__ */ React11.createElement(import_icons4.XIcon, { fontSize: "tiny" })))
|
|
382
395
|
}
|
|
383
|
-
), /* @__PURE__ */
|
|
396
|
+
), /* @__PURE__ */ React11.createElement(
|
|
384
397
|
import_ui9.Popover,
|
|
385
398
|
{
|
|
386
399
|
...(0, import_ui9.bindPopover)(popupState),
|
|
@@ -395,7 +408,7 @@ function InteractionsList({ onSelectInteraction, selectedInteraction, defaultSta
|
|
|
395
408
|
popupState.close();
|
|
396
409
|
}
|
|
397
410
|
},
|
|
398
|
-
/* @__PURE__ */
|
|
411
|
+
/* @__PURE__ */ React11.createElement(
|
|
399
412
|
InteractionDetails,
|
|
400
413
|
{
|
|
401
414
|
interaction: selectedInteraction,
|
|
@@ -406,12 +419,63 @@ function InteractionsList({ onSelectInteraction, selectedInteraction, defaultSta
|
|
|
406
419
|
)
|
|
407
420
|
));
|
|
408
421
|
}
|
|
422
|
+
|
|
423
|
+
// src/components/interactions-tab.tsx
|
|
424
|
+
var InteractionsTab = ({ elementId }) => {
|
|
425
|
+
return /* @__PURE__ */ React12.createElement(PopupStateProvider, null, /* @__PURE__ */ React12.createElement(InteractionsTabContent, { elementId }));
|
|
426
|
+
};
|
|
427
|
+
function InteractionsTabContent({ elementId }) {
|
|
428
|
+
const existingInteractions = (0, import_editor_elements2.useElementInteractions)(elementId);
|
|
429
|
+
const { triggerDefaultOpen } = usePopupStateContext();
|
|
430
|
+
const [showInteractions, setShowInteractions] = (0, import_react5.useState)(() => {
|
|
431
|
+
return !!JSON.parse(existingInteractions || "[]").length;
|
|
432
|
+
});
|
|
433
|
+
return /* @__PURE__ */ React12.createElement(import_session.SessionStorageProvider, { prefix: elementId }, showInteractions ? /* @__PURE__ */ React12.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React12.createElement(InteractionsContent, null)) : /* @__PURE__ */ React12.createElement(
|
|
434
|
+
EmptyState,
|
|
435
|
+
{
|
|
436
|
+
onCreateInteraction: () => {
|
|
437
|
+
setShowInteractions(true);
|
|
438
|
+
triggerDefaultOpen();
|
|
439
|
+
}
|
|
440
|
+
}
|
|
441
|
+
));
|
|
442
|
+
}
|
|
443
|
+
function InteractionsContent() {
|
|
444
|
+
const { interactions, setInteractions } = useInteractionsContext();
|
|
445
|
+
const applyInteraction = (0, import_react5.useCallback)(
|
|
446
|
+
(interaction) => {
|
|
447
|
+
const newInteractions = [
|
|
448
|
+
{
|
|
449
|
+
animation: {
|
|
450
|
+
animation_type: "full-preset",
|
|
451
|
+
animation_id: interaction
|
|
452
|
+
}
|
|
453
|
+
}
|
|
454
|
+
];
|
|
455
|
+
setInteractions(JSON.stringify(newInteractions));
|
|
456
|
+
},
|
|
457
|
+
[setInteractions]
|
|
458
|
+
);
|
|
459
|
+
const selectedInteraction = (0, import_react5.useMemo)(() => {
|
|
460
|
+
try {
|
|
461
|
+
const parsed = JSON.parse(interactions || "[]");
|
|
462
|
+
return parsed[0]?.animation?.animation_id || "";
|
|
463
|
+
} catch {
|
|
464
|
+
return "";
|
|
465
|
+
}
|
|
466
|
+
}, [interactions]);
|
|
467
|
+
return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
|
|
468
|
+
PredefinedInteractionsList,
|
|
469
|
+
{
|
|
470
|
+
selectedInteraction,
|
|
471
|
+
onSelectInteraction: applyInteraction
|
|
472
|
+
}
|
|
473
|
+
));
|
|
474
|
+
}
|
|
409
475
|
// Annotate the CommonJS export names for ESM import in node:
|
|
410
476
|
0 && (module.exports = {
|
|
411
477
|
EmptyState,
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
getInteractionsConfig,
|
|
415
|
-
usePopupStateContext
|
|
478
|
+
InteractionsTab,
|
|
479
|
+
getInteractionsConfig
|
|
416
480
|
});
|
|
417
481
|
//# sourceMappingURL=index.js.map
|