@elementor/editor-interactions 4.0.0-manual → 4.0.1

package/src/utils/prop-value-utils.ts

@@ -17,6 +17,8 @@ import {
 	type TimingConfigPropValue,
 } from '../types';
 import { formatSizeValue, parseSizeValue } from '../utils/size-transform-utils';
+import { type PlainCustomEffect, toCustomEffectPropValue } from './custom-effect-to-prop-value';
+import { getInteractionsConfig } from './get-interactions-config';
 import { generateTempInteractionId } from './temp-id-utils';
 
 export const createString = ( value: string ): StringPropValue => ( {
@@ -45,25 +47,32 @@ export const createBoolean = ( value: boolean ): BooleanPropValue => ( {
 export const createConfig = ( {
 	replay,
 	easing = 'easeIn',
-	relativeTo = '',
+	relativeTo = 'viewport',
+	repeat = '',
+	times = 1,
 	start = 85,
 	end = 15,
 }: {
 	replay: boolean;
 	easing?: string;
 	relativeTo?: string;
+	repeat?: string;
+	times?: number;
 	start?: SizeStringValue;
 	end?: SizeStringValue;
-} ): ConfigPropValue => ( {
-	$$type: 'config',
-	value: {
-		replay: createBoolean( replay ),
-		easing: createString( easing ),
-		relativeTo: createString( relativeTo ),
-		start: createSize( start, '%' ),
-		end: createSize( end, '%' ),
-	},
-} );
+} ): ConfigPropValue =>
+	( {
+		$$type: 'config',
+		value: {
+			replay: createBoolean( replay ),
+			easing: createString( easing ),
+			relativeTo: createString( relativeTo ),
+			repeat: createString( repeat ),
+			times: createNumber( times ),
+			start: createSize( start, '%' ),
+			end: createSize( end, '%' ),
+		},
+	} ) as ConfigPropValue;
 
 const createSize = ( value?: SizeStringValue, defaultUnit?: Unit, defaultValue?: SizeStringValue ) => {
 	if ( ! value ) {
@@ -102,6 +111,8 @@ export const createAnimationPreset = ( {
 	replay = false,
 	easing = 'easeIn',
 	relativeTo,
+	repeat,
+	times,
 	start,
 	end,
 	customEffects,
@@ -114,26 +125,33 @@ export const createAnimationPreset = ( {
 	replay: boolean;
 	easing?: string;
 	relativeTo?: string;
+	repeat?: string;
+	times?: number;
 	start?: SizeStringValue;
 	end?: SizeStringValue;
-	customEffects?: PropValue;
-} ): AnimationPresetPropValue => ( {
-	$$type: 'animation-preset-props',
-	value: {
-		effect: createString( effect ),
-		custom_effect: customEffects,
-		type: createString( type ),
-		direction: createString( direction ?? '' ),
-		timing_config: createTimingConfig( duration, delay ),
-		config: createConfig( {
-			replay,
-			easing,
-			relativeTo,
-			start,
-			end,
-		} ),
-	},
-} );
+	customEffects?: PropValue | PlainCustomEffect;
+} ): AnimationPresetPropValue => {
+	const customEffectProp = toCustomEffectPropValue( customEffects );
+	return {
+		$$type: 'animation-preset-props',
+		value: {
+			effect: createString( effect ),
+			...( customEffectProp !== undefined && { custom_effect: customEffectProp } ),
+			type: createString( type ),
+			direction: createString( direction ?? '' ),
+			timing_config: createTimingConfig( duration, delay ),
+			config: createConfig( {
+				replay,
+				easing,
+				relativeTo,
+				repeat,
+				times,
+				start,
+				end,
+			} ),
+		},
+	};
+};
 
 export const createInteractionItem = ( {
 	trigger,
@@ -146,6 +164,8 @@ export const createInteractionItem = ( {
 	replay = false,
 	easing = 'easeIn',
 	relativeTo,
+	repeat,
+	times,
 	start,
 	end,
 	excludedBreakpoints,
@@ -161,10 +181,12 @@ export const createInteractionItem = ( {
 	replay?: boolean;
 	easing?: string;
 	relativeTo?: string;
+	repeat?: string;
+	times?: number;
 	start?: number;
 	end?: number;
 	excludedBreakpoints?: string[];
-	customEffects?: PropValue;
+	customEffects?: PropValue | PlainCustomEffect;
 } ): InteractionItemPropValue => ( {
 	$$type: 'interaction-item',
 	value: {
@@ -179,6 +201,8 @@ export const createInteractionItem = ( {
 			replay,
 			easing,
 			relativeTo,
+			repeat,
+			times,
 			start,
 			end,
 			customEffects,
@@ -191,14 +215,15 @@ export const createInteractionItem = ( {
 } );
 
 export const createDefaultInteractionItem = (): InteractionItemPropValue => {
+	const { constants } = getInteractionsConfig();
 	return createInteractionItem( {
 		trigger: 'load',
 		effect: 'fade',
 		type: 'in',
-		duration: 600,
-		delay: 0,
+		duration: constants.defaultDuration,
+		delay: constants.defaultDelay,
 		replay: false,
-		easing: 'easeIn',
+		easing: constants.defaultEasing,
 		interactionId: generateTempInteractionId(),
 	} );
 };
@@ -238,7 +263,7 @@ export const buildDisplayLabel = ( item: InteractionItemValue ): string => {
 
 	const triggerLabel = TRIGGER_LABELS[ trigger ] || capitalize( trigger );
 	const effectLabel = capitalize( effect );
-	const typeLabel = capitalize( type );
+	const typeLabel = 'custom' === effect ? '' : capitalize( type );
 
 	return `${ triggerLabel }: ${ effectLabel } ${ typeLabel }`;
 };

package/src/utils/tracking.ts

@@ -0,0 +1,42 @@
+import { getElementLabel } from '@elementor/editor-elements';
+import { getMixpanel } from '@elementor/events';
+
+import type { InteractionItemPropValue } from '../types';
+import { extractString } from './prop-value-utils';
+
+const TRIGGER_LABELS: Record< string, string > = {
+	load: 'On page load',
+	scrollIn: 'Scroll into view',
+	scrollOut: 'Scroll out of view',
+	scrollOn: 'While scrolling',
+	hover: 'Hover',
+	click: 'Click',
+};
+
+const capitalize = ( s: string ) => s.charAt( 0 ).toUpperCase() + s.slice( 1 );
+
+export const trackInteractionCreated = ( elementId: string, item: InteractionItemPropValue ) => {
+	const { dispatchEvent, config } = getMixpanel();
+	if ( ! config?.names?.interactions?.created ) {
+		return;
+	}
+
+	const trigger = extractString( item.value.trigger );
+	const effect = extractString( item.value.animation.value.effect );
+	const type = extractString( item.value.animation.value.type );
+
+	dispatchEvent?.( config.names.interactions.created, {
+		app_type: config?.appTypes?.editor,
+		window_name: config?.appTypes?.editor,
+		interaction_type: config?.triggers?.click,
+		target_name: getElementLabel( elementId ),
+		interaction_result: 'interaction_created',
+		target_location: config?.locations?.widgetPanel,
+		location_l1: getElementLabel( elementId ),
+		location_l2: 'interactions',
+		interaction_description: 'interaction_created',
+		interaction_trigger: TRIGGER_LABELS[ trigger ] ?? capitalize( trigger ),
+		interaction_effect:
+			effect === 'custom' ? capitalize( effect ) : `${ capitalize( effect ) } ${ capitalize( type ) }`,
+	} );
+};