@elementor/editor-interactions 4.0.0-679 → 4.0.0-680
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.js +125 -81
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +125 -81
- package/dist/index.mjs.map +1 -1
- package/package.json +12 -12
- package/src/hooks/use-element-interactions.ts +6 -2
- package/src/init.ts +1 -1
- package/src/interactions-controls-registry.ts +1 -1
- package/src/utils/filter-interactions.ts +9 -0
- package/src/utils/is-supported-interaction-item.ts +39 -0
package/dist/index.js
CHANGED
|
@@ -113,74 +113,22 @@ var import_editor_elements2 = require("@elementor/editor-elements");
|
|
|
113
113
|
var import_react = require("react");
|
|
114
114
|
var import_editor_elements = require("@elementor/editor-elements");
|
|
115
115
|
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
116
|
-
var useElementInteractions = (elementId) => {
|
|
117
|
-
const [interactions, setInteractions] = (0, import_react.useState)(() => {
|
|
118
|
-
const initial = (0, import_editor_elements.getElementInteractions)(elementId);
|
|
119
|
-
return initial ?? { version: 1, items: [] };
|
|
120
|
-
});
|
|
121
|
-
(0, import_editor_v1_adapters.__privateUseListenTo)(
|
|
122
|
-
(0, import_editor_v1_adapters.windowEvent)("elementor/element/update_interactions"),
|
|
123
|
-
() => {
|
|
124
|
-
const newInteractions = (0, import_editor_elements.getElementInteractions)(elementId);
|
|
125
|
-
setInteractions(newInteractions ?? { version: 1, items: [] });
|
|
126
|
-
},
|
|
127
|
-
[elementId]
|
|
128
|
-
);
|
|
129
|
-
return interactions;
|
|
130
|
-
};
|
|
131
116
|
|
|
132
|
-
// src/
|
|
133
|
-
var
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
elementId,
|
|
148
|
-
interactions: normalizedValue
|
|
149
|
-
});
|
|
150
|
-
};
|
|
151
|
-
const playInteractions = (interactionId) => {
|
|
152
|
-
(0, import_editor_elements2.playElementInteractions)(elementId, interactionId);
|
|
153
|
-
};
|
|
154
|
-
const contextValue = {
|
|
155
|
-
elementId,
|
|
156
|
-
interactions,
|
|
157
|
-
setInteractions,
|
|
158
|
-
playInteractions
|
|
159
|
-
};
|
|
160
|
-
return /* @__PURE__ */ React2.createElement(InteractionsContext.Provider, { value: contextValue }, children);
|
|
161
|
-
};
|
|
162
|
-
var useInteractionsContext = () => {
|
|
163
|
-
const context = (0, import_react2.useContext)(InteractionsContext);
|
|
164
|
-
if (!context) {
|
|
165
|
-
throw new Error("useInteractionsContext must be used within InteractionsProvider");
|
|
166
|
-
}
|
|
167
|
-
return context;
|
|
168
|
-
};
|
|
169
|
-
|
|
170
|
-
// src/contexts/popup-state-context.tsx
|
|
171
|
-
var React3 = __toESM(require("react"));
|
|
172
|
-
var import_react3 = require("react");
|
|
173
|
-
var PopupStateContext = (0, import_react3.createContext)(void 0);
|
|
174
|
-
var PopupStateProvider = ({ children }) => {
|
|
175
|
-
const [openByDefault, setOpenByDefault] = (0, import_react3.useState)(false);
|
|
176
|
-
const triggerDefaultOpen = (0, import_react3.useCallback)(() => {
|
|
177
|
-
setOpenByDefault(true);
|
|
178
|
-
}, []);
|
|
179
|
-
const resetDefaultOpen = (0, import_react3.useCallback)(() => {
|
|
180
|
-
setOpenByDefault(false);
|
|
181
|
-
}, []);
|
|
182
|
-
return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
|
|
183
|
-
};
|
|
117
|
+
// src/interactions-controls-registry.ts
|
|
118
|
+
var controlsRegistry = /* @__PURE__ */ new Map();
|
|
119
|
+
function registerInteractionsControl({
|
|
120
|
+
type,
|
|
121
|
+
component,
|
|
122
|
+
options
|
|
123
|
+
}) {
|
|
124
|
+
controlsRegistry.set(type, { type, component, options });
|
|
125
|
+
}
|
|
126
|
+
function getInteractionsControl(type) {
|
|
127
|
+
return controlsRegistry.get(type);
|
|
128
|
+
}
|
|
129
|
+
function getInteractionsControlOptions(type) {
|
|
130
|
+
return controlsRegistry.get(type)?.options ?? [];
|
|
131
|
+
}
|
|
184
132
|
|
|
185
133
|
// src/utils/prop-value-utils.ts
|
|
186
134
|
var import_editor_props = require("@elementor/editor-props");
|
|
@@ -435,6 +383,115 @@ var buildDisplayLabel = (item) => {
|
|
|
435
383
|
return `${triggerLabel}: ${effectLabel} ${typeLabel}`;
|
|
436
384
|
};
|
|
437
385
|
|
|
386
|
+
// src/utils/is-supported-interaction-item.ts
|
|
387
|
+
function isSupportedInteractionItem(interaction) {
|
|
388
|
+
const value = interaction.value;
|
|
389
|
+
const replay = extractBoolean(value.animation.value.config?.value.replay);
|
|
390
|
+
if (true === replay) {
|
|
391
|
+
return hasSupport("replay", "yes");
|
|
392
|
+
}
|
|
393
|
+
const trigger = extractString(value.trigger);
|
|
394
|
+
const easing = extractString(value.animation.value.config?.value.easing);
|
|
395
|
+
const effect = extractString(value.animation.value.effect);
|
|
396
|
+
const checks = [
|
|
397
|
+
["trigger", trigger],
|
|
398
|
+
["easing", easing],
|
|
399
|
+
["effect", effect]
|
|
400
|
+
];
|
|
401
|
+
return checks.every(([controlType, controlValue]) => {
|
|
402
|
+
if (controlValue === "" || controlValue === null) {
|
|
403
|
+
return true;
|
|
404
|
+
}
|
|
405
|
+
return hasSupport(controlType, controlValue);
|
|
406
|
+
});
|
|
407
|
+
}
|
|
408
|
+
function hasSupport(controlType, controlValue) {
|
|
409
|
+
const supportedOptions = getInteractionsControlOptions(controlType);
|
|
410
|
+
if (1 > supportedOptions.length) {
|
|
411
|
+
return true;
|
|
412
|
+
}
|
|
413
|
+
return supportedOptions.includes(controlValue);
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
// src/utils/filter-interactions.ts
|
|
417
|
+
var filterInteractions = (interactions) => {
|
|
418
|
+
return interactions.filter((interaction) => {
|
|
419
|
+
return isSupportedInteractionItem(interaction);
|
|
420
|
+
});
|
|
421
|
+
};
|
|
422
|
+
|
|
423
|
+
// src/hooks/use-element-interactions.ts
|
|
424
|
+
var useElementInteractions = (elementId) => {
|
|
425
|
+
const [interactions, setInteractions] = (0, import_react.useState)(() => {
|
|
426
|
+
const initial = (0, import_editor_elements.getElementInteractions)(elementId);
|
|
427
|
+
const filteredInteractions = filterInteractions(initial?.items ?? []);
|
|
428
|
+
return { version: initial?.version ?? 1, items: filteredInteractions };
|
|
429
|
+
});
|
|
430
|
+
(0, import_editor_v1_adapters.__privateUseListenTo)(
|
|
431
|
+
(0, import_editor_v1_adapters.windowEvent)("elementor/element/update_interactions"),
|
|
432
|
+
() => {
|
|
433
|
+
const newInteractions = (0, import_editor_elements.getElementInteractions)(elementId);
|
|
434
|
+
const filteredInteractions = filterInteractions(newInteractions?.items ?? []);
|
|
435
|
+
setInteractions({ version: newInteractions?.version ?? 1, items: filteredInteractions });
|
|
436
|
+
},
|
|
437
|
+
[elementId]
|
|
438
|
+
);
|
|
439
|
+
return interactions;
|
|
440
|
+
};
|
|
441
|
+
|
|
442
|
+
// src/contexts/interactions-context.tsx
|
|
443
|
+
var InteractionsContext = (0, import_react2.createContext)(null);
|
|
444
|
+
var DEFAULT_INTERACTIONS = {
|
|
445
|
+
version: 1,
|
|
446
|
+
items: []
|
|
447
|
+
};
|
|
448
|
+
var InteractionsProvider = ({ children, elementId }) => {
|
|
449
|
+
const rawInteractions = useElementInteractions(elementId);
|
|
450
|
+
(0, import_react2.useEffect)(() => {
|
|
451
|
+
window.dispatchEvent(new CustomEvent("elementor/element/update_interactions"));
|
|
452
|
+
}, []);
|
|
453
|
+
const interactions = rawInteractions ?? DEFAULT_INTERACTIONS;
|
|
454
|
+
const setInteractions = (value) => {
|
|
455
|
+
const normalizedValue = value && value.items?.length === 0 ? void 0 : value;
|
|
456
|
+
(0, import_editor_elements2.updateElementInteractions)({
|
|
457
|
+
elementId,
|
|
458
|
+
interactions: normalizedValue
|
|
459
|
+
});
|
|
460
|
+
};
|
|
461
|
+
const playInteractions = (interactionId) => {
|
|
462
|
+
(0, import_editor_elements2.playElementInteractions)(elementId, interactionId);
|
|
463
|
+
};
|
|
464
|
+
const contextValue = {
|
|
465
|
+
elementId,
|
|
466
|
+
interactions,
|
|
467
|
+
setInteractions,
|
|
468
|
+
playInteractions
|
|
469
|
+
};
|
|
470
|
+
return /* @__PURE__ */ React2.createElement(InteractionsContext.Provider, { value: contextValue }, children);
|
|
471
|
+
};
|
|
472
|
+
var useInteractionsContext = () => {
|
|
473
|
+
const context = (0, import_react2.useContext)(InteractionsContext);
|
|
474
|
+
if (!context) {
|
|
475
|
+
throw new Error("useInteractionsContext must be used within InteractionsProvider");
|
|
476
|
+
}
|
|
477
|
+
return context;
|
|
478
|
+
};
|
|
479
|
+
|
|
480
|
+
// src/contexts/popup-state-context.tsx
|
|
481
|
+
var React3 = __toESM(require("react"));
|
|
482
|
+
var import_react3 = require("react");
|
|
483
|
+
var PopupStateContext = (0, import_react3.createContext)(void 0);
|
|
484
|
+
var PopupStateProvider = ({ children }) => {
|
|
485
|
+
const [openByDefault, setOpenByDefault] = (0, import_react3.useState)(false);
|
|
486
|
+
const triggerDefaultOpen = (0, import_react3.useCallback)(() => {
|
|
487
|
+
setOpenByDefault(true);
|
|
488
|
+
}, []);
|
|
489
|
+
const resetDefaultOpen = (0, import_react3.useCallback)(() => {
|
|
490
|
+
setOpenByDefault(false);
|
|
491
|
+
}, []);
|
|
492
|
+
return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
|
|
493
|
+
};
|
|
494
|
+
|
|
438
495
|
// src/utils/tracking.ts
|
|
439
496
|
var import_editor_elements3 = require("@elementor/editor-elements");
|
|
440
497
|
var import_events = require("@elementor/events");
|
|
@@ -509,19 +566,6 @@ var import_editor_controls3 = require("@elementor/editor-controls");
|
|
|
509
566
|
var import_ui3 = require("@elementor/ui");
|
|
510
567
|
var import_i18n2 = require("@wordpress/i18n");
|
|
511
568
|
|
|
512
|
-
// src/interactions-controls-registry.ts
|
|
513
|
-
var controlsRegistry = /* @__PURE__ */ new Map();
|
|
514
|
-
function registerInteractionsControl({
|
|
515
|
-
type,
|
|
516
|
-
component,
|
|
517
|
-
options
|
|
518
|
-
}) {
|
|
519
|
-
controlsRegistry.set(type, { type, component, options });
|
|
520
|
-
}
|
|
521
|
-
function getInteractionsControl(type) {
|
|
522
|
-
return controlsRegistry.get(type);
|
|
523
|
-
}
|
|
524
|
-
|
|
525
569
|
// src/utils/resolve-direction.ts
|
|
526
570
|
var resolveDirection = (hasDirection, newEffect, newDirection, currentDirection, currentEffect) => {
|
|
527
571
|
if (newEffect === "slide" && !newDirection) {
|
|
@@ -1953,7 +1997,7 @@ function init() {
|
|
|
1953
1997
|
registerInteractionsControl({
|
|
1954
1998
|
type: "replay",
|
|
1955
1999
|
component: Replay,
|
|
1956
|
-
options: ["
|
|
2000
|
+
options: ["no"]
|
|
1957
2001
|
});
|
|
1958
2002
|
registerInteractionsControl({
|
|
1959
2003
|
type: "effectType",
|