@elementor/editor-interactions 3.35.0-390 → 3.35.0-392
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 +25 -2
- package/dist/index.d.ts +25 -2
- package/dist/index.js +66 -17
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +60 -12
- package/dist/index.mjs.map +1 -1
- package/package.json +7 -7
- package/src/components/controls/replay.tsx +25 -0
- package/src/components/interaction-details.tsx +43 -3
- package/src/index.ts +1 -0
- package/src/interactions-controls-registry.ts +45 -0
- package/src/types.ts +9 -0
- package/src/utils/prop-value-utils.ts +25 -4
package/src/types.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type {
|
|
2
2
|
AnimationPresetPropValue,
|
|
3
|
+
BooleanPropValue,
|
|
4
|
+
ConfigPropValue,
|
|
3
5
|
ElementInteractions,
|
|
4
6
|
InteractionItemPropValue,
|
|
5
7
|
NumberPropValue,
|
|
@@ -8,6 +10,8 @@ import type {
|
|
|
8
10
|
} from '@elementor/editor-elements';
|
|
9
11
|
|
|
10
12
|
export type {
|
|
13
|
+
BooleanPropValue,
|
|
14
|
+
ConfigPropValue,
|
|
11
15
|
StringPropValue,
|
|
12
16
|
NumberPropValue,
|
|
13
17
|
TimingConfigPropValue,
|
|
@@ -40,6 +44,11 @@ export type FieldProps = {
|
|
|
40
44
|
label?: string;
|
|
41
45
|
};
|
|
42
46
|
|
|
47
|
+
export type ReplayFieldProps = {
|
|
48
|
+
value: boolean;
|
|
49
|
+
onChange: ( value: boolean ) => void;
|
|
50
|
+
disabled?: boolean;
|
|
51
|
+
};
|
|
43
52
|
export type DirectionFieldProps = FieldProps & {
|
|
44
53
|
interactionType: string;
|
|
45
54
|
};
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type {
|
|
2
2
|
AnimationPresetPropValue,
|
|
3
|
+
BooleanPropValue,
|
|
4
|
+
ConfigPropValue,
|
|
3
5
|
ElementInteractions,
|
|
4
6
|
InteractionItemPropValue,
|
|
5
7
|
InteractionItemValue,
|
|
@@ -26,12 +28,29 @@ export const createTimingConfig = ( duration: number, delay: number ): TimingCon
|
|
|
26
28
|
},
|
|
27
29
|
} );
|
|
28
30
|
|
|
31
|
+
export const createBoolean = ( value: boolean ): BooleanPropValue => ( {
|
|
32
|
+
$$type: 'boolean',
|
|
33
|
+
value,
|
|
34
|
+
} );
|
|
35
|
+
|
|
36
|
+
export const createConfig = ( replay: boolean ): ConfigPropValue => ( {
|
|
37
|
+
$$type: 'config',
|
|
38
|
+
value: {
|
|
39
|
+
replay: createBoolean( replay ),
|
|
40
|
+
},
|
|
41
|
+
} );
|
|
42
|
+
|
|
43
|
+
export const extractBoolean = ( prop: BooleanPropValue | undefined, fallback = false ): boolean => {
|
|
44
|
+
return prop?.value ?? fallback;
|
|
45
|
+
};
|
|
46
|
+
|
|
29
47
|
export const createAnimationPreset = (
|
|
30
48
|
effect: string,
|
|
31
49
|
type: string,
|
|
32
50
|
direction: string,
|
|
33
51
|
duration: number,
|
|
34
|
-
delay: number
|
|
52
|
+
delay: number,
|
|
53
|
+
replay: boolean = false
|
|
35
54
|
): AnimationPresetPropValue => ( {
|
|
36
55
|
$$type: 'animation-preset-props',
|
|
37
56
|
value: {
|
|
@@ -39,6 +58,7 @@ export const createAnimationPreset = (
|
|
|
39
58
|
type: createString( type ),
|
|
40
59
|
direction: createString( direction ),
|
|
41
60
|
timing_config: createTimingConfig( duration, delay ),
|
|
61
|
+
config: createConfig( replay ),
|
|
42
62
|
},
|
|
43
63
|
} );
|
|
44
64
|
|
|
@@ -49,18 +69,19 @@ export const createInteractionItem = (
|
|
|
49
69
|
direction: string,
|
|
50
70
|
duration: number,
|
|
51
71
|
delay: number,
|
|
52
|
-
interactionId?: string
|
|
72
|
+
interactionId?: string,
|
|
73
|
+
replay: boolean = false
|
|
53
74
|
): InteractionItemPropValue => ( {
|
|
54
75
|
$$type: 'interaction-item',
|
|
55
76
|
value: {
|
|
56
77
|
...( interactionId && { interaction_id: createString( interactionId ) } ),
|
|
57
78
|
trigger: createString( trigger ),
|
|
58
|
-
animation: createAnimationPreset( effect, type, direction, duration, delay ),
|
|
79
|
+
animation: createAnimationPreset( effect, type, direction, duration, delay, replay ),
|
|
59
80
|
},
|
|
60
81
|
} );
|
|
61
82
|
|
|
62
83
|
export const createDefaultInteractionItem = (): InteractionItemPropValue => {
|
|
63
|
-
return createInteractionItem( 'load', 'fade', 'in', '', 300, 0 );
|
|
84
|
+
return createInteractionItem( 'load', 'fade', 'in', '', 300, 0, undefined, false );
|
|
64
85
|
};
|
|
65
86
|
|
|
66
87
|
export const createDefaultInteractions = (): ElementInteractions => ( {
|