@wix/interact 1.92.0 → 1.93.0
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/cjs/InteractElement.js +1 -0
- package/dist/cjs/InteractElement.js.map +1 -1
- package/dist/cjs/__tests__/interact.spec.js +164 -0
- package/dist/cjs/__tests__/interact.spec.js.map +1 -1
- package/dist/cjs/core/add.js +12 -8
- package/dist/cjs/core/add.js.map +1 -1
- package/dist/cjs/handlers/animationEnd.js +4 -0
- package/dist/cjs/handlers/animationEnd.js.map +1 -1
- package/dist/cjs/handlers/click.js +9 -3
- package/dist/cjs/handlers/click.js.map +1 -1
- package/dist/cjs/handlers/hover.js +9 -3
- package/dist/cjs/handlers/hover.js.map +1 -1
- package/dist/cjs/handlers/viewEnter.js +4 -0
- package/dist/cjs/handlers/viewEnter.js.map +1 -1
- package/dist/cjs/handlers/viewProgress.js +22 -8
- package/dist/cjs/handlers/viewProgress.js.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/utils.js +34 -4
- package/dist/cjs/utils.js.map +1 -1
- package/dist/esm/InteractElement.js +1 -0
- package/dist/esm/InteractElement.js.map +1 -1
- package/dist/esm/__tests__/interact.spec.js +165 -0
- package/dist/esm/__tests__/interact.spec.js.map +1 -1
- package/dist/esm/core/add.js +13 -9
- package/dist/esm/core/add.js.map +1 -1
- package/dist/esm/handlers/animationEnd.js +4 -0
- package/dist/esm/handlers/animationEnd.js.map +1 -1
- package/dist/esm/handlers/click.js +9 -3
- package/dist/esm/handlers/click.js.map +1 -1
- package/dist/esm/handlers/hover.js +9 -3
- package/dist/esm/handlers/hover.js.map +1 -1
- package/dist/esm/handlers/viewEnter.js +4 -0
- package/dist/esm/handlers/viewEnter.js.map +1 -1
- package/dist/esm/handlers/viewProgress.js +22 -8
- package/dist/esm/handlers/viewProgress.js.map +1 -1
- package/dist/esm/types.js.map +1 -1
- package/dist/esm/utils.js +33 -4
- package/dist/esm/utils.js.map +1 -1
- package/dist/types/types.d.ts +3 -1
- package/dist/types/utils.d.ts +2 -1
- package/package.json +2 -2
package/dist/esm/core/add.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createTransitionCSS, getMediaQuery } from '../utils';
|
|
1
|
+
import { createTransitionCSS, getMediaQuery, getSelectorCondition } from '../utils';
|
|
2
2
|
import { getInterpolatedKey } from './utilities';
|
|
3
3
|
import { Interact, getSelector } from './Interact';
|
|
4
4
|
import TRIGGER_TO_HANDLER_MODULE_MAP from '../handlers';
|
|
@@ -32,20 +32,20 @@ function _queryItemElement(data, elements) {
|
|
|
32
32
|
function _getInteractionElements(interaction, effect, source, target, sourceElements, targetElements) {
|
|
33
33
|
return [sourceElements ? _queryItemElement(interaction, sourceElements) : _getElementsFromData(interaction, source), targetElements ? _queryItemElement(effect, targetElements) : _getElementsFromData(effect, target)];
|
|
34
34
|
}
|
|
35
|
-
function _applyInteraction(key, interaction, effect, sourceElements, targetElements) {
|
|
35
|
+
function _applyInteraction(key, interaction, effect, sourceElements, targetElements, selectorCondition) {
|
|
36
36
|
const isSourceArray = Array.isArray(sourceElements);
|
|
37
37
|
const isTargetArray = Array.isArray(targetElements);
|
|
38
38
|
if (isSourceArray) {
|
|
39
39
|
sourceElements.forEach((sourceEl, index) => {
|
|
40
40
|
const targetEl = isTargetArray ? targetElements[index] : targetElements;
|
|
41
41
|
if (targetEl) {
|
|
42
|
-
addInteraction(key, sourceEl, interaction.trigger, targetEl, effect, interaction.params);
|
|
42
|
+
addInteraction(key, sourceEl, interaction.trigger, targetEl, effect, interaction.params, selectorCondition);
|
|
43
43
|
}
|
|
44
44
|
});
|
|
45
45
|
} else {
|
|
46
46
|
const targets = isTargetArray ? targetElements : [targetElements];
|
|
47
47
|
targets.forEach(targetEl => {
|
|
48
|
-
addInteraction(key, sourceElements, interaction.trigger, targetEl, effect, interaction.params);
|
|
48
|
+
addInteraction(key, sourceElements, interaction.trigger, targetEl, effect, interaction.params, selectorCondition);
|
|
49
49
|
});
|
|
50
50
|
}
|
|
51
51
|
}
|
|
@@ -94,7 +94,8 @@ function _addInteraction(sourceKey, sourceRoot, instance, interaction, elements)
|
|
|
94
94
|
}
|
|
95
95
|
instance.addedInteractions[interactionId] = true;
|
|
96
96
|
const key = target || interaction.key;
|
|
97
|
-
|
|
97
|
+
const selectorCondition = getSelectorCondition(effectOptions.conditions || [], instance.dataCache.conditions);
|
|
98
|
+
_applyInteraction(key, interaction, effectOptions, sourceElements, targetElements, selectorCondition);
|
|
98
99
|
}
|
|
99
100
|
});
|
|
100
101
|
}
|
|
@@ -146,7 +147,8 @@ function addEffectsForTarget(targetKey, element, instance, listContainer, elemen
|
|
|
146
147
|
return true;
|
|
147
148
|
}
|
|
148
149
|
instance.addedInteractions[interactionId] = true;
|
|
149
|
-
|
|
150
|
+
const selectorCondition = getSelectorCondition(effectOptions.conditions || [], instance.dataCache.conditions);
|
|
151
|
+
_applyInteraction(targetKey, interaction, effectOptions, sourceElements, targetElements, selectorCondition);
|
|
150
152
|
|
|
151
153
|
// short-circuit the loop since we have a match
|
|
152
154
|
return true;
|
|
@@ -159,7 +161,7 @@ function addEffectsForTarget(targetKey, element, instance, listContainer, elemen
|
|
|
159
161
|
/**
|
|
160
162
|
* Registers a handler to an event on a given element.
|
|
161
163
|
*/
|
|
162
|
-
function addInteraction(key, source, trigger, target, effect, options) {
|
|
164
|
+
function addInteraction(key, source, trigger, target, effect, options, selectorCondition) {
|
|
163
165
|
var _TRIGGER_TO_HANDLER_M;
|
|
164
166
|
if (effect.transition || effect.transitionProperties) {
|
|
165
167
|
const args = {
|
|
@@ -170,7 +172,8 @@ function addInteraction(key, source, trigger, target, effect, options) {
|
|
|
170
172
|
childSelector: getSelector(effect, {
|
|
171
173
|
asCombinator: true,
|
|
172
174
|
addItemFilter: true
|
|
173
|
-
})
|
|
175
|
+
}),
|
|
176
|
+
selectorCondition
|
|
174
177
|
};
|
|
175
178
|
const root = target.closest('interact-element');
|
|
176
179
|
if (!root) {
|
|
@@ -180,7 +183,8 @@ function addInteraction(key, source, trigger, target, effect, options) {
|
|
|
180
183
|
}
|
|
181
184
|
(_TRIGGER_TO_HANDLER_M = TRIGGER_TO_HANDLER_MODULE_MAP[trigger]) == null || _TRIGGER_TO_HANDLER_M.add(source, target, effect, options, {
|
|
182
185
|
reducedMotion: Interact.forceReducedMotion,
|
|
183
|
-
allowA11yTriggers: Interact.allowA11yTriggers
|
|
186
|
+
allowA11yTriggers: Interact.allowA11yTriggers,
|
|
187
|
+
selectorCondition
|
|
184
188
|
});
|
|
185
189
|
}
|
|
186
190
|
|
package/dist/esm/core/add.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createTransitionCSS","getMediaQuery","getInterpolatedKey","Interact","getSelector","TRIGGER_TO_HANDLER_MODULE_MAP","_getElementsFromData","data","root","listContainer","container","querySelector","console","warn","selector","Array","from","querySelectorAll","children","element","firstElementChild","_queryItemElement","elements","map","filter","Boolean","_getInteractionElements","interaction","effect","source","target","sourceElements","targetElements","_applyInteraction","key","isSourceArray","isArray","isTargetArray","forEach","sourceEl","index","targetEl","addInteraction","trigger","params","targets","_addInteraction","sourceKey","sourceRoot","instance","interactionVariations","effects","effectId","effectOptions","dataCache","targetKey_","interactionId","addedInteractions","mql","conditions","matches","targetElement","getElement","watchChildList","addEffectsForTarget","targetKey","_instance$get","get","interactionIds","Object","keys","interactionId_","effectVariations","some","_ref","sourceElement","undefined","length","options","_TRIGGER_TO_HANDLER_M","transition","transitionProperties","args","properties","childSelector","asCombinator","addItemFilter","closest","renderStyle","add","reducedMotion","forceReducedMotion","allowA11yTriggers","getInstance","setElement","triggers","hasTriggers","hasEffects","addListItems"],"sources":["../../../src/core/add.ts"],"sourcesContent":["import type {\n Effect,\n TriggerType,\n EffectRef,\n InteractionParamsTypes,\n TransitionEffect,\n IInteractElement,\n Interaction,\n InteractionTrigger,\n CreateTransitionCSSParams,\n} from '../types';\nimport { createTransitionCSS, getMediaQuery } from '../utils';\nimport { getInterpolatedKey } from './utilities';\nimport { Interact, getSelector } from './Interact';\nimport TRIGGER_TO_HANDLER_MODULE_MAP from '../handlers';\n\nfunction _getElementsFromData(\n data: Interaction | Effect,\n root: IInteractElement,\n): HTMLElement | HTMLElement[] | null {\n if (data.listContainer) {\n const container = root.querySelector(data.listContainer);\n\n if (!container) {\n console.warn(\n `Interact: No container found for list container \"${data.listContainer}\"`,\n );\n\n return [];\n }\n\n if (data.selector) {\n return Array.from(\n container.querySelectorAll(data.selector),\n ) as HTMLElement[];\n }\n\n return Array.from(container.children) as HTMLElement[];\n }\n\n if (data.selector) {\n const element = root.querySelector(data.selector);\n\n if (element) {\n return element as HTMLElement;\n } else {\n console.warn(\n `Interact: No element found for selector \"${data.selector}\"`,\n );\n }\n }\n\n return root.firstElementChild as HTMLElement | null;\n}\n\nfunction _queryItemElement(\n data: Interaction | Effect,\n elements: HTMLElement[],\n): HTMLElement[] {\n return elements\n .map((element) => {\n return data.selector ? element.querySelector(data.selector) : element;\n })\n .filter(Boolean) as HTMLElement[];\n}\n\nfunction _getInteractionElements(\n interaction: InteractionTrigger,\n effect: Effect,\n source: IInteractElement,\n target: IInteractElement,\n sourceElements?: HTMLElement[],\n targetElements?: HTMLElement[],\n): [HTMLElement | HTMLElement[] | null, HTMLElement | HTMLElement[] | null] {\n return [\n sourceElements\n ? _queryItemElement(interaction, sourceElements)\n : _getElementsFromData(interaction, source),\n targetElements\n ? _queryItemElement(effect, targetElements)\n : _getElementsFromData(effect, target),\n ];\n}\n\nfunction _applyInteraction(\n key: string,\n interaction: InteractionTrigger,\n effect: Effect,\n sourceElements: HTMLElement | HTMLElement[],\n targetElements: HTMLElement | HTMLElement[],\n) {\n const isSourceArray = Array.isArray(sourceElements);\n const isTargetArray = Array.isArray(targetElements);\n\n if (isSourceArray) {\n sourceElements.forEach((sourceEl, index) => {\n const targetEl = isTargetArray ? targetElements[index] : targetElements;\n\n if (targetEl) {\n addInteraction(\n key,\n sourceEl,\n interaction.trigger,\n targetEl,\n effect as Effect,\n interaction.params!,\n );\n }\n });\n } else {\n const targets = isTargetArray ? targetElements : [targetElements];\n targets.forEach((targetEl) => {\n addInteraction(\n key,\n sourceElements,\n interaction.trigger,\n targetEl,\n effect as Effect,\n interaction.params!,\n );\n });\n }\n}\n\nfunction _addInteraction(\n sourceKey: string,\n sourceRoot: IInteractElement,\n instance: Interact,\n interaction: Interaction,\n elements?: HTMLElement[],\n) {\n const interactionVariations: Record<string, boolean> = {};\n\n interaction.effects.forEach((effect) => {\n const effectId = (effect as EffectRef).effectId;\n\n const effectOptions = {\n ...(instance.dataCache.effects[effectId] || {}),\n ...effect,\n effectId,\n };\n const targetKey_ = effectOptions.key;\n\n const interactionId = getInterpolatedKey(effect.interactionId!, sourceKey);\n\n if (interactionVariations[interactionId!]) {\n // Skip this effect if it has already been added\n return;\n }\n\n if (instance.addedInteractions[interactionId!] && !elements) {\n // Skip this interaction if it has already been added\n return;\n }\n\n // TODO: implement watching for condition `change` events and add/remove interactions accordingly\n const mql = getMediaQuery(\n effectOptions.conditions || [],\n instance.dataCache.conditions,\n );\n\n if (!mql || mql.matches) {\n interactionVariations[interactionId!] = true;\n\n const target = targetKey_ && getInterpolatedKey(targetKey_, sourceKey);\n\n let targetElement;\n if (target) {\n targetElement = Interact.getElement(target);\n\n if (!targetElement) {\n // Bail out :: no target element in cache\n return;\n }\n\n if (effectOptions.listContainer) {\n targetElement.watchChildList(effectOptions.listContainer);\n }\n } else {\n // target is not specified - fallback to same as source\n targetElement = sourceRoot;\n }\n\n const [sourceElements, targetElements] = _getInteractionElements(\n interaction,\n effectOptions,\n sourceRoot,\n targetElement!,\n elements,\n );\n\n if (!sourceElements || !targetElements) {\n return;\n }\n\n instance.addedInteractions[interactionId!] = true;\n\n const key = target || interaction.key;\n\n _applyInteraction(\n key,\n interaction,\n effectOptions,\n sourceElements,\n targetElements,\n );\n }\n });\n}\n\nfunction addEffectsForTarget(\n targetKey: string,\n element: IInteractElement,\n instance: Interact,\n listContainer?: string,\n elements?: HTMLElement[],\n) {\n const effects = instance.get(targetKey)?.effects || {};\n const interactionIds = Object.keys(effects);\n\n interactionIds.forEach((interactionId_) => {\n const interactionId = getInterpolatedKey(interactionId_, targetKey);\n\n if (instance.addedInteractions[interactionId] && !elements) {\n // Skip this interaction if it has already been added\n return;\n }\n\n const effectVariations = effects[interactionId_];\n\n // use `some` to short-circuit after the first effect that matches the conditions\n // eslint-disable-next-line array-callback-return\n effectVariations.some(({ effect, ...interaction }) => {\n const effectId = (effect as EffectRef).effectId;\n\n const effectOptions = {\n ...(instance!.dataCache.effects[effectId] || {}),\n ...effect,\n effectId,\n };\n\n if (listContainer && effectOptions.listContainer !== listContainer) {\n // skip this effect if a listContainer was provided and it's not matching this effect.listContainer\n return false;\n }\n\n // TODO: implement watching for condition `change` events and add/remove interactions accordingly\n const mql = getMediaQuery(\n effectOptions.conditions || [],\n instance!.dataCache.conditions,\n );\n\n if (!mql || mql.matches) {\n const sourceKey =\n interaction.key && getInterpolatedKey(interaction.key, targetKey);\n const sourceElement = Interact.getElement(sourceKey);\n\n if (!sourceElement) {\n // Bail out :: no source or target elements in cache\n return true;\n }\n\n if (effectOptions.listContainer) {\n element.watchChildList(effectOptions.listContainer);\n }\n\n const [sourceElements, targetElements] = _getInteractionElements(\n interaction,\n effectOptions,\n sourceElement,\n element,\n undefined,\n elements,\n );\n\n if (!sourceElements || !targetElements) {\n // Bail out :: no source or target elements found in DOM\n return true;\n }\n\n instance!.addedInteractions[interactionId] = true;\n\n _applyInteraction(\n targetKey,\n interaction,\n effectOptions as Effect,\n sourceElements,\n targetElements,\n );\n\n // short-circuit the loop since we have a match\n return true;\n }\n });\n });\n\n return interactionIds.length > 0;\n}\n\n/**\n * Registers a handler to an event on a given element.\n */\nfunction addInteraction<T extends TriggerType>(\n key: string,\n source: HTMLElement,\n trigger: T,\n target: HTMLElement,\n effect: Effect,\n options: InteractionParamsTypes[T],\n): void {\n if (\n (effect as TransitionEffect).transition ||\n (effect as TransitionEffect).transitionProperties\n ) {\n const args: CreateTransitionCSSParams = {\n key,\n effectId: (effect as Effect).effectId!,\n transition: (effect as TransitionEffect).transition,\n properties: (effect as TransitionEffect).transitionProperties,\n childSelector: getSelector(effect, {\n asCombinator: true,\n addItemFilter: true,\n }),\n };\n\n const root = target.closest('interact-element') as IInteractElement;\n if (!root) {\n return;\n }\n\n root.renderStyle(createTransitionCSS(args));\n }\n\n TRIGGER_TO_HANDLER_MODULE_MAP[trigger]?.add(source, target, effect, options, {\n reducedMotion: Interact.forceReducedMotion,\n allowA11yTriggers: Interact.allowA11yTriggers,\n });\n}\n\n/**\n * Adds all events and effects to an element based on config\n */\nexport function add(element: IInteractElement, key: string): boolean {\n const instance = Interact.getInstance(key);\n\n if (!instance) {\n console.warn(`No instance found for key: ${key}`);\n\n // even if we don't find a matching instance, we still want to cache the element\n Interact.setElement(key, element);\n return false;\n }\n\n const { triggers = [] } = instance?.get(key) || {};\n const hasTriggers = triggers.length > 0;\n\n instance.setElement(key, element);\n\n triggers.forEach((interaction) => {\n const mql = getMediaQuery(\n interaction.conditions,\n instance!.dataCache.conditions,\n );\n\n // TODO: implement watching for condition `change` events and add/remove interactions accordingly\n if (!mql || mql.matches) {\n if (interaction.listContainer) {\n element.watchChildList(interaction.listContainer);\n }\n\n _addInteraction(key, element, instance!, interaction);\n }\n });\n\n let hasEffects = false;\n if (instance) {\n hasEffects = addEffectsForTarget(key, element, instance);\n }\n\n return hasTriggers || hasEffects;\n}\n\nexport function addListItems(\n root: IInteractElement,\n key: string,\n listContainer: string,\n elements: HTMLElement[],\n) {\n const instance = Interact.getInstance(key);\n\n if (instance) {\n const { triggers = [] } = instance?.get(key) || {};\n\n triggers.forEach((interaction) => {\n if (interaction.listContainer !== listContainer) {\n return;\n }\n\n const mql = getMediaQuery(\n interaction.conditions,\n instance!.dataCache.conditions,\n );\n\n // TODO: implement watching for condition `change` events and add/remove interactions accordingly\n if (!mql || mql.matches) {\n _addInteraction(key, root, instance!, interaction, elements);\n }\n });\n\n addEffectsForTarget(key, root, instance, listContainer, elements);\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["createTransitionCSS","getMediaQuery","getSelectorCondition","getInterpolatedKey","Interact","getSelector","TRIGGER_TO_HANDLER_MODULE_MAP","_getElementsFromData","data","root","listContainer","container","querySelector","console","warn","selector","Array","from","querySelectorAll","children","element","firstElementChild","_queryItemElement","elements","map","filter","Boolean","_getInteractionElements","interaction","effect","source","target","sourceElements","targetElements","_applyInteraction","key","selectorCondition","isSourceArray","isArray","isTargetArray","forEach","sourceEl","index","targetEl","addInteraction","trigger","params","targets","_addInteraction","sourceKey","sourceRoot","instance","interactionVariations","effects","effectId","effectOptions","dataCache","targetKey_","interactionId","addedInteractions","mql","conditions","matches","targetElement","getElement","watchChildList","addEffectsForTarget","targetKey","_instance$get","get","interactionIds","Object","keys","interactionId_","effectVariations","some","_ref","sourceElement","undefined","length","options","_TRIGGER_TO_HANDLER_M","transition","transitionProperties","args","properties","childSelector","asCombinator","addItemFilter","closest","renderStyle","add","reducedMotion","forceReducedMotion","allowA11yTriggers","getInstance","setElement","triggers","hasTriggers","hasEffects","addListItems"],"sources":["../../../src/core/add.ts"],"sourcesContent":["import type {\n Effect,\n TriggerType,\n EffectRef,\n InteractionParamsTypes,\n TransitionEffect,\n IInteractElement,\n Interaction,\n InteractionTrigger,\n CreateTransitionCSSParams,\n} from '../types';\nimport {\n createTransitionCSS,\n getMediaQuery,\n getSelectorCondition,\n} from '../utils';\nimport { getInterpolatedKey } from './utilities';\nimport { Interact, getSelector } from './Interact';\nimport TRIGGER_TO_HANDLER_MODULE_MAP from '../handlers';\n\nfunction _getElementsFromData(\n data: Interaction | Effect,\n root: IInteractElement,\n): HTMLElement | HTMLElement[] | null {\n if (data.listContainer) {\n const container = root.querySelector(data.listContainer);\n\n if (!container) {\n console.warn(\n `Interact: No container found for list container \"${data.listContainer}\"`,\n );\n\n return [];\n }\n\n if (data.selector) {\n return Array.from(\n container.querySelectorAll(data.selector),\n ) as HTMLElement[];\n }\n\n return Array.from(container.children) as HTMLElement[];\n }\n\n if (data.selector) {\n const element = root.querySelector(data.selector);\n\n if (element) {\n return element as HTMLElement;\n } else {\n console.warn(\n `Interact: No element found for selector \"${data.selector}\"`,\n );\n }\n }\n\n return root.firstElementChild as HTMLElement | null;\n}\n\nfunction _queryItemElement(\n data: Interaction | Effect,\n elements: HTMLElement[],\n): HTMLElement[] {\n return elements\n .map((element) => {\n return data.selector ? element.querySelector(data.selector) : element;\n })\n .filter(Boolean) as HTMLElement[];\n}\n\nfunction _getInteractionElements(\n interaction: InteractionTrigger,\n effect: Effect,\n source: IInteractElement,\n target: IInteractElement,\n sourceElements?: HTMLElement[],\n targetElements?: HTMLElement[],\n): [HTMLElement | HTMLElement[] | null, HTMLElement | HTMLElement[] | null] {\n return [\n sourceElements\n ? _queryItemElement(interaction, sourceElements)\n : _getElementsFromData(interaction, source),\n targetElements\n ? _queryItemElement(effect, targetElements)\n : _getElementsFromData(effect, target),\n ];\n}\n\nfunction _applyInteraction(\n key: string,\n interaction: InteractionTrigger,\n effect: Effect,\n sourceElements: HTMLElement | HTMLElement[],\n targetElements: HTMLElement | HTMLElement[],\n selectorCondition?: string,\n) {\n const isSourceArray = Array.isArray(sourceElements);\n const isTargetArray = Array.isArray(targetElements);\n\n if (isSourceArray) {\n sourceElements.forEach((sourceEl, index) => {\n const targetEl = isTargetArray ? targetElements[index] : targetElements;\n\n if (targetEl) {\n addInteraction(\n key,\n sourceEl,\n interaction.trigger,\n targetEl,\n effect as Effect,\n interaction.params!,\n selectorCondition,\n );\n }\n });\n } else {\n const targets = isTargetArray ? targetElements : [targetElements];\n targets.forEach((targetEl) => {\n addInteraction(\n key,\n sourceElements,\n interaction.trigger,\n targetEl,\n effect as Effect,\n interaction.params!,\n selectorCondition,\n );\n });\n }\n}\n\nfunction _addInteraction(\n sourceKey: string,\n sourceRoot: IInteractElement,\n instance: Interact,\n interaction: Interaction,\n elements?: HTMLElement[],\n) {\n const interactionVariations: Record<string, boolean> = {};\n\n interaction.effects.forEach((effect) => {\n const effectId = (effect as EffectRef).effectId;\n\n const effectOptions = {\n ...(instance.dataCache.effects[effectId] || {}),\n ...effect,\n effectId,\n };\n const targetKey_ = effectOptions.key;\n\n const interactionId = getInterpolatedKey(effect.interactionId!, sourceKey);\n\n if (interactionVariations[interactionId!]) {\n // Skip this effect if it has already been added\n return;\n }\n\n if (instance.addedInteractions[interactionId!] && !elements) {\n // Skip this interaction if it has already been added\n return;\n }\n\n // TODO: implement watching for condition `change` events and add/remove interactions accordingly\n const mql = getMediaQuery(\n effectOptions.conditions || [],\n instance.dataCache.conditions,\n );\n\n if (!mql || mql.matches) {\n interactionVariations[interactionId!] = true;\n\n const target = targetKey_ && getInterpolatedKey(targetKey_, sourceKey);\n\n let targetElement;\n if (target) {\n targetElement = Interact.getElement(target);\n\n if (!targetElement) {\n // Bail out :: no target element in cache\n return;\n }\n\n if (effectOptions.listContainer) {\n targetElement.watchChildList(effectOptions.listContainer);\n }\n } else {\n // target is not specified - fallback to same as source\n targetElement = sourceRoot;\n }\n\n const [sourceElements, targetElements] = _getInteractionElements(\n interaction,\n effectOptions,\n sourceRoot,\n targetElement!,\n elements,\n );\n\n if (!sourceElements || !targetElements) {\n return;\n }\n\n instance.addedInteractions[interactionId!] = true;\n\n const key = target || interaction.key;\n \n const selectorCondition = getSelectorCondition(\n effectOptions.conditions || [],\n instance.dataCache.conditions,\n );\n\n _applyInteraction(\n key,\n interaction,\n effectOptions,\n sourceElements,\n targetElements,\n selectorCondition,\n );\n }\n });\n}\n\nfunction addEffectsForTarget(\n targetKey: string,\n element: IInteractElement,\n instance: Interact,\n listContainer?: string,\n elements?: HTMLElement[],\n) {\n const effects = instance.get(targetKey)?.effects || {};\n const interactionIds = Object.keys(effects);\n\n interactionIds.forEach((interactionId_) => {\n const interactionId = getInterpolatedKey(interactionId_, targetKey);\n\n if (instance.addedInteractions[interactionId] && !elements) {\n // Skip this interaction if it has already been added\n return;\n }\n\n const effectVariations = effects[interactionId_];\n\n // use `some` to short-circuit after the first effect that matches the conditions\n // eslint-disable-next-line array-callback-return\n effectVariations.some(({ effect, ...interaction }) => {\n const effectId = (effect as EffectRef).effectId;\n\n const effectOptions = {\n ...(instance!.dataCache.effects[effectId] || {}),\n ...effect,\n effectId,\n };\n\n if (listContainer && effectOptions.listContainer !== listContainer) {\n // skip this effect if a listContainer was provided and it's not matching this effect.listContainer\n return false;\n }\n\n // TODO: implement watching for condition `change` events and add/remove interactions accordingly\n const mql = getMediaQuery(\n effectOptions.conditions || [],\n instance!.dataCache.conditions,\n );\n\n if (!mql || mql.matches) {\n const sourceKey =\n interaction.key && getInterpolatedKey(interaction.key, targetKey);\n const sourceElement = Interact.getElement(sourceKey);\n\n if (!sourceElement) {\n // Bail out :: no source or target elements in cache\n return true;\n }\n\n if (effectOptions.listContainer) {\n element.watchChildList(effectOptions.listContainer);\n }\n\n const [sourceElements, targetElements] = _getInteractionElements(\n interaction,\n effectOptions,\n sourceElement,\n element,\n undefined,\n elements,\n );\n\n if (!sourceElements || !targetElements) {\n // Bail out :: no source or target elements found in DOM\n return true;\n }\n\n instance!.addedInteractions[interactionId] = true;\n\n\n const selectorCondition = getSelectorCondition(\n effectOptions.conditions || [],\n instance!.dataCache.conditions,\n );\n\n _applyInteraction(\n targetKey,\n interaction,\n effectOptions as Effect,\n sourceElements,\n targetElements, \n selectorCondition,\n );\n\n // short-circuit the loop since we have a match\n return true;\n }\n });\n });\n\n return interactionIds.length > 0;\n}\n\n/**\n * Registers a handler to an event on a given element.\n */\nfunction addInteraction<T extends TriggerType>(\n key: string,\n source: HTMLElement,\n trigger: T,\n target: HTMLElement,\n effect: Effect,\n options: InteractionParamsTypes[T],\n selectorCondition?: string,\n): void {\n if (\n (effect as TransitionEffect).transition ||\n (effect as TransitionEffect).transitionProperties\n ) {\n const args: CreateTransitionCSSParams = {\n key,\n effectId: (effect as Effect).effectId!,\n transition: (effect as TransitionEffect).transition,\n properties: (effect as TransitionEffect).transitionProperties,\n childSelector: getSelector(effect, {\n asCombinator: true,\n addItemFilter: true,\n }),\n selectorCondition\n };\n\n const root = target.closest('interact-element') as IInteractElement;\n if (!root) {\n return;\n }\n\n root.renderStyle(createTransitionCSS(args));\n }\n\n TRIGGER_TO_HANDLER_MODULE_MAP[trigger]?.add(source, target, effect, options, {\n reducedMotion: Interact.forceReducedMotion,\n allowA11yTriggers: Interact.allowA11yTriggers,\n selectorCondition,\n });\n}\n\n/**\n * Adds all events and effects to an element based on config\n */\nexport function add(element: IInteractElement, key: string): boolean {\n const instance = Interact.getInstance(key);\n\n if (!instance) {\n console.warn(`No instance found for key: ${key}`);\n\n // even if we don't find a matching instance, we still want to cache the element\n Interact.setElement(key, element);\n return false;\n }\n\n const { triggers = [] } = instance?.get(key) || {};\n const hasTriggers = triggers.length > 0;\n\n instance.setElement(key, element);\n\n triggers.forEach((interaction) => {\n const mql = getMediaQuery(\n interaction.conditions,\n instance!.dataCache.conditions,\n );\n\n // TODO: implement watching for condition `change` events and add/remove interactions accordingly\n if (!mql || mql.matches) {\n if (interaction.listContainer) {\n element.watchChildList(interaction.listContainer);\n }\n\n _addInteraction(key, element, instance!, interaction);\n }\n });\n\n let hasEffects = false;\n if (instance) {\n hasEffects = addEffectsForTarget(key, element, instance);\n }\n\n return hasTriggers || hasEffects;\n}\n\nexport function addListItems(\n root: IInteractElement,\n key: string,\n listContainer: string,\n elements: HTMLElement[],\n) {\n const instance = Interact.getInstance(key);\n\n if (instance) {\n const { triggers = [] } = instance?.get(key) || {};\n\n triggers.forEach((interaction) => {\n if (interaction.listContainer !== listContainer) {\n return;\n }\n\n const mql = getMediaQuery(\n interaction.conditions,\n instance!.dataCache.conditions,\n );\n\n // TODO: implement watching for condition `change` events and add/remove interactions accordingly\n if (!mql || mql.matches) {\n _addInteraction(key, root, instance!, interaction, elements);\n }\n });\n\n addEffectsForTarget(key, root, instance, listContainer, elements);\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,7 +3,11 @@ import { effectToAnimationOptions, addHandlerToMap, removeElementFromHandlerMap
|
|
|
3
3
|
const handlerMap = new WeakMap();
|
|
4
4
|
function addAnimationEndHandler(source, target, effect, __, globalOptions) {
|
|
5
5
|
const animation = getAnimation(target, effectToAnimationOptions(effect), undefined, globalOptions == null ? void 0 : globalOptions.reducedMotion);
|
|
6
|
+
const {
|
|
7
|
+
selectorCondition
|
|
8
|
+
} = globalOptions || {};
|
|
6
9
|
const handler = () => {
|
|
10
|
+
if (selectorCondition && !target.matches(selectorCondition)) return;
|
|
7
11
|
animation.play();
|
|
8
12
|
};
|
|
9
13
|
const cleanup = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getAnimation","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","handlerMap","WeakMap","addAnimationEndHandler","source","target","effect","__","globalOptions","animation","undefined","reducedMotion","handler","play","cleanup","cancel","removeEventListener","handlerObj","addEventListener","removeAnimationEndHandler","element","add","remove"],"sources":["../../../src/handlers/animationEnd.ts"],"sourcesContent":["import type { AnimationGroup } from '@wix/motion';\nimport { getAnimation } from '@wix/motion';\nimport type {\n AnimationEndParams,\n TimeEffect,\n HandlerObjectMap,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst handlerMap = new WeakMap() as HandlerObjectMap;\n\nfunction addAnimationEndHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: TimeEffect,\n __: AnimationEndParams,\n globalOptions?: InteractionGlobalOptions,\n): void {\n const animation = getAnimation(\n target,\n effectToAnimationOptions(effect),\n undefined,\n globalOptions?.reducedMotion,\n ) as AnimationGroup;\n
|
|
1
|
+
{"version":3,"names":["getAnimation","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","handlerMap","WeakMap","addAnimationEndHandler","source","target","effect","__","globalOptions","animation","undefined","reducedMotion","selectorCondition","handler","matches","play","cleanup","cancel","removeEventListener","handlerObj","addEventListener","removeAnimationEndHandler","element","add","remove"],"sources":["../../../src/handlers/animationEnd.ts"],"sourcesContent":["import type { AnimationGroup } from '@wix/motion';\nimport { getAnimation } from '@wix/motion';\nimport type {\n AnimationEndParams,\n TimeEffect,\n HandlerObjectMap,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst handlerMap = new WeakMap() as HandlerObjectMap;\n\nfunction addAnimationEndHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: TimeEffect,\n __: AnimationEndParams,\n globalOptions?: InteractionGlobalOptions,\n): void {\n const animation = getAnimation(\n target,\n effectToAnimationOptions(effect),\n undefined,\n globalOptions?.reducedMotion,\n ) as AnimationGroup;\n const {selectorCondition} = globalOptions || {};\n const handler = () => {\n if (selectorCondition && !target.matches(selectorCondition)) return;\n animation.play();\n };\n const cleanup = () => {\n animation.cancel();\n source.removeEventListener('animationend', handler);\n };\n\n const handlerObj = { source, target, cleanup };\n addHandlerToMap(handlerMap, source, handlerObj);\n addHandlerToMap(handlerMap, target, handlerObj);\n\n source.addEventListener('animationend', handler);\n}\n\nfunction removeAnimationEndHandler(element: HTMLElement): void {\n removeElementFromHandlerMap(handlerMap, element);\n}\n\nexport default {\n add: addAnimationEndHandler,\n remove: removeAnimationEndHandler,\n};\n"],"mappings":"AACA,SAASA,YAAY,QAAQ,aAAa;AAO1C,SACEC,wBAAwB,EACxBC,eAAe,EACfC,2BAA2B,QACtB,aAAa;AAEpB,MAAMC,UAAU,GAAG,IAAIC,OAAO,CAAC,CAAqB;AAEpD,SAASC,sBAAsBA,CAC7BC,MAAmB,EACnBC,MAAmB,EACnBC,MAAkB,EAClBC,EAAsB,EACtBC,aAAwC,EAClC;EACN,MAAMC,SAAS,GAAGZ,YAAY,CAC5BQ,MAAM,EACNP,wBAAwB,CAACQ,MAAM,CAAC,EAChCI,SAAS,EACTF,aAAa,oBAAbA,aAAa,CAAEG,aACjB,CAAmB;EACnB,MAAM;IAACC;EAAiB,CAAC,GAAGJ,aAAa,IAAI,CAAC,CAAC;EAC/C,MAAMK,OAAO,GAAGA,CAAA,KAAM;IACpB,IAAID,iBAAiB,IAAI,CAACP,MAAM,CAACS,OAAO,CAACF,iBAAiB,CAAC,EAAE;IAC7DH,SAAS,CAACM,IAAI,CAAC,CAAC;EAClB,CAAC;EACD,MAAMC,OAAO,GAAGA,CAAA,KAAM;IACpBP,SAAS,CAACQ,MAAM,CAAC,CAAC;IAClBb,MAAM,CAACc,mBAAmB,CAAC,cAAc,EAAEL,OAAO,CAAC;EACrD,CAAC;EAED,MAAMM,UAAU,GAAG;IAAEf,MAAM;IAAEC,MAAM;IAAEW;EAAQ,CAAC;EAC9CjB,eAAe,CAACE,UAAU,EAAEG,MAAM,EAAEe,UAAU,CAAC;EAC/CpB,eAAe,CAACE,UAAU,EAAEI,MAAM,EAAEc,UAAU,CAAC;EAE/Cf,MAAM,CAACgB,gBAAgB,CAAC,cAAc,EAAEP,OAAO,CAAC;AAClD;AAEA,SAASQ,yBAAyBA,CAACC,OAAoB,EAAQ;EAC7DtB,2BAA2B,CAACC,UAAU,EAAEqB,OAAO,CAAC;AAClD;AAEA,eAAe;EACbC,GAAG,EAAEpB,sBAAsB;EAC3BqB,MAAM,EAAEH;AACV,CAAC","ignoreList":[]}
|
|
@@ -5,7 +5,11 @@ function createTimeEffectHandler(element, effect, options, globalOptions) {
|
|
|
5
5
|
const animation = getAnimation(element, effectToAnimationOptions(effect), undefined, globalOptions == null ? void 0 : globalOptions.reducedMotion);
|
|
6
6
|
let initialPlay = true;
|
|
7
7
|
const type = options.type || 'alternate';
|
|
8
|
+
const {
|
|
9
|
+
selectorCondition
|
|
10
|
+
} = globalOptions || {};
|
|
8
11
|
return event => {
|
|
12
|
+
if (selectorCondition && !element.matches(selectorCondition)) return;
|
|
9
13
|
if (type === 'alternate') {
|
|
10
14
|
if (initialPlay) {
|
|
11
15
|
initialPlay = false;
|
|
@@ -38,7 +42,7 @@ function createTimeEffectHandler(element, effect, options, globalOptions) {
|
|
|
38
42
|
}
|
|
39
43
|
};
|
|
40
44
|
}
|
|
41
|
-
function createTransitionHandler(element, _ref, options) {
|
|
45
|
+
function createTransitionHandler(element, _ref, options, selectorCondition) {
|
|
42
46
|
let {
|
|
43
47
|
effectId,
|
|
44
48
|
listContainer,
|
|
@@ -46,6 +50,7 @@ function createTransitionHandler(element, _ref, options) {
|
|
|
46
50
|
} = _ref;
|
|
47
51
|
const shouldSetStateOnElement = !!listContainer;
|
|
48
52
|
return event => {
|
|
53
|
+
if (selectorCondition && !element.matches(selectorCondition)) return;
|
|
49
54
|
const interactElement = element.closest('interact-element');
|
|
50
55
|
if (!interactElement) {
|
|
51
56
|
return;
|
|
@@ -64,10 +69,11 @@ function addClickHandler(source, target, effect, options, globalOptions) {
|
|
|
64
69
|
let handler;
|
|
65
70
|
let once = false;
|
|
66
71
|
if (effect.transition || effect.transitionProperties) {
|
|
67
|
-
handler = createTransitionHandler(target, effect, options);
|
|
72
|
+
handler = createTransitionHandler(target, effect, options, globalOptions == null ? void 0 : globalOptions.selectorCondition);
|
|
68
73
|
} else {
|
|
69
74
|
handler = createTimeEffectHandler(target, effect, options, {
|
|
70
|
-
reducedMotion: globalOptions == null ? void 0 : globalOptions.reducedMotion
|
|
75
|
+
reducedMotion: globalOptions == null ? void 0 : globalOptions.reducedMotion,
|
|
76
|
+
selectorCondition: globalOptions == null ? void 0 : globalOptions.selectorCondition
|
|
71
77
|
});
|
|
72
78
|
once = options.type === 'once';
|
|
73
79
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getAnimation","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","handlerMap","WeakMap","createTimeEffectHandler","element","effect","options","globalOptions","animation","undefined","reducedMotion","initialPlay","type","event","play","reverse","playState","pause","progress","isCSS","onFinish","dataset","motionEnter","createTransitionHandler","_ref","effectId","listContainer","listItemSelector","shouldSetStateOnElement","interactElement","closest","item","toggleEffect","method","addClickHandler","source","target","handler","once","transition","transitionProperties","cleanup","removeEventListener","allowA11yTriggers","handlerObj","addEventListener","e","pointerType","passive","tabIndex","code","preventDefault","removeClickHandler","add","remove"],"sources":["../../../src/handlers/click.ts"],"sourcesContent":["import { getAnimation } from '@wix/motion';\nimport type { AnimationGroup } from '@wix/motion';\nimport type {\n TimeEffect,\n TransitionEffect,\n StateParams,\n HandlerObjectMap,\n IInteractElement,\n PointerTriggerParams,\n EffectBase,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst handlerMap = new WeakMap() as HandlerObjectMap;\n\nfunction createTimeEffectHandler(\n element: HTMLElement,\n effect: TimeEffect & EffectBase,\n options: PointerTriggerParams,\n globalOptions: InteractionGlobalOptions,\n) {\n const animation = getAnimation(\n element,\n effectToAnimationOptions(effect),\n undefined,\n globalOptions?.reducedMotion,\n ) as AnimationGroup;\n let initialPlay = true;\n const type = options.type || 'alternate';\n
|
|
1
|
+
{"version":3,"names":["getAnimation","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","handlerMap","WeakMap","createTimeEffectHandler","element","effect","options","globalOptions","animation","undefined","reducedMotion","initialPlay","type","selectorCondition","event","matches","play","reverse","playState","pause","progress","isCSS","onFinish","dataset","motionEnter","createTransitionHandler","_ref","effectId","listContainer","listItemSelector","shouldSetStateOnElement","interactElement","closest","item","toggleEffect","method","addClickHandler","source","target","handler","once","transition","transitionProperties","cleanup","removeEventListener","allowA11yTriggers","handlerObj","addEventListener","e","pointerType","passive","tabIndex","code","preventDefault","removeClickHandler","add","remove"],"sources":["../../../src/handlers/click.ts"],"sourcesContent":["import { getAnimation } from '@wix/motion';\nimport type { AnimationGroup } from '@wix/motion';\nimport type {\n TimeEffect,\n TransitionEffect,\n StateParams,\n HandlerObjectMap,\n IInteractElement,\n PointerTriggerParams,\n EffectBase,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst handlerMap = new WeakMap() as HandlerObjectMap;\n\nfunction createTimeEffectHandler(\n element: HTMLElement,\n effect: TimeEffect & EffectBase,\n options: PointerTriggerParams,\n globalOptions: InteractionGlobalOptions,\n) {\n const animation = getAnimation(\n element,\n effectToAnimationOptions(effect),\n undefined,\n globalOptions?.reducedMotion,\n ) as AnimationGroup;\n let initialPlay = true;\n const type = options.type || 'alternate';\n const {selectorCondition} = globalOptions || {};\n return (event: MouseEvent | KeyboardEvent) => {\n if (selectorCondition && !element.matches(selectorCondition)) return;\n \n if (type === 'alternate') {\n if (initialPlay) {\n initialPlay = false;\n animation.play();\n } else {\n animation.reverse();\n }\n } else if (type === 'state') {\n if (initialPlay) {\n initialPlay = false;\n animation.play();\n } else {\n if (animation.playState === 'running') {\n animation.pause();\n } else if (animation.playState !== 'finished') {\n // 'idle' OR 'paused'\n animation.play();\n }\n }\n } else {\n // type === 'repeat'\n // type === 'once'\n animation.progress(0);\n\n if (animation.isCSS) {\n animation.onFinish(() => {\n element.dataset.motionEnter = 'done';\n });\n }\n\n animation.play();\n }\n };\n}\n\nfunction createTransitionHandler(\n element: HTMLElement,\n {\n effectId,\n listContainer,\n listItemSelector,\n }: TransitionEffect & EffectBase & { effectId: string },\n options: StateParams,\n selectorCondition?: string,\n) {\n const shouldSetStateOnElement = !!listContainer;\n \n return (event: MouseEvent | KeyboardEvent) => {\n if (selectorCondition && !element.matches(selectorCondition)) return;\n const interactElement = element.closest(\n 'interact-element',\n ) as IInteractElement;\n if (!interactElement) {\n return;\n }\n\n let item;\n if (shouldSetStateOnElement) {\n item = element.closest(\n `${listContainer} > ${listItemSelector || ''}:has(:scope)`,\n ) as HTMLElement | null;\n }\n\n interactElement.toggleEffect(effectId, options.method || 'toggle', item);\n };\n}\n\nfunction addClickHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: (TimeEffect | TransitionEffect) & EffectBase,\n options: StateParams | PointerTriggerParams = {} as StateParams,\n globalOptions?: InteractionGlobalOptions,\n) {\n let handler: (event: MouseEvent | KeyboardEvent) => void;\n let once = false;\n\n if (\n (effect as TransitionEffect).transition ||\n (effect as TransitionEffect).transitionProperties\n ) {\n handler = createTransitionHandler(\n target,\n effect as TransitionEffect & EffectBase & { effectId: string },\n options as StateParams,\n globalOptions?.selectorCondition,\n );\n } else {\n handler = createTimeEffectHandler(\n target,\n effect as TimeEffect & EffectBase,\n options as PointerTriggerParams,\n { reducedMotion: globalOptions?.reducedMotion, selectorCondition: globalOptions?.selectorCondition },\n );\n once = (options as PointerTriggerParams).type === 'once';\n }\n\n const cleanup = () => {\n source.removeEventListener('click', handler);\n if (globalOptions?.allowA11yTriggers) {\n source.removeEventListener('keydown', handler);\n }\n };\n\n const handlerObj = { source, target, cleanup };\n\n addHandlerToMap(handlerMap, source, handlerObj);\n addHandlerToMap(handlerMap, target, handlerObj);\n\n source.addEventListener(\n 'click',\n (e) => {\n if ((e as PointerEvent).pointerType) {\n handler(e);\n }\n },\n { passive: true, once },\n );\n\n if (globalOptions?.allowA11yTriggers) {\n source.tabIndex = 0;\n\n source.addEventListener(\n 'keydown',\n (event: KeyboardEvent) => {\n if (event.code === 'Space') {\n event.preventDefault();\n handler(event);\n } else if (event.code === 'Enter') {\n handler(event);\n }\n },\n { once },\n );\n }\n}\n\nfunction removeClickHandler(element: HTMLElement) {\n removeElementFromHandlerMap(handlerMap, element);\n}\n\nexport default {\n add: addClickHandler,\n remove: removeClickHandler,\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,7 +5,11 @@ function createTimeEffectHandler(element, effect, options, globalOptions) {
|
|
|
5
5
|
const animation = getAnimation(element, effectToAnimationOptions(effect), undefined, globalOptions == null ? void 0 : globalOptions.reducedMotion);
|
|
6
6
|
const type = options.type || 'alternate';
|
|
7
7
|
let initialPlay = true;
|
|
8
|
+
const {
|
|
9
|
+
selectorCondition
|
|
10
|
+
} = globalOptions || {};
|
|
8
11
|
return event => {
|
|
12
|
+
if (selectorCondition && !element.matches(selectorCondition)) return;
|
|
9
13
|
if (event.type === 'mouseenter' || event.type === 'focusin') {
|
|
10
14
|
if (type === 'alternate') {
|
|
11
15
|
if (initialPlay) {
|
|
@@ -44,7 +48,7 @@ function createTimeEffectHandler(element, effect, options, globalOptions) {
|
|
|
44
48
|
}
|
|
45
49
|
};
|
|
46
50
|
}
|
|
47
|
-
function createTransitionHandler(element, _ref, options) {
|
|
51
|
+
function createTransitionHandler(element, _ref, options, selectorCondition) {
|
|
48
52
|
let {
|
|
49
53
|
effectId,
|
|
50
54
|
listContainer,
|
|
@@ -54,6 +58,7 @@ function createTransitionHandler(element, _ref, options) {
|
|
|
54
58
|
const isToggle = method === 'toggle';
|
|
55
59
|
const shouldSetStateOnElement = !!listContainer;
|
|
56
60
|
return event => {
|
|
61
|
+
if (selectorCondition && !element.matches(selectorCondition)) return;
|
|
57
62
|
const interactElement = element.closest('interact-element');
|
|
58
63
|
if (!interactElement) {
|
|
59
64
|
return;
|
|
@@ -78,11 +83,12 @@ function addHoverHandler(source, target, effect, options, globalOptions) {
|
|
|
78
83
|
let isStateTrigger = false;
|
|
79
84
|
let once = false;
|
|
80
85
|
if (effect.transition || effect.transitionProperties) {
|
|
81
|
-
handler = createTransitionHandler(target, effect, options);
|
|
86
|
+
handler = createTransitionHandler(target, effect, options, globalOptions == null ? void 0 : globalOptions.selectorCondition);
|
|
82
87
|
isStateTrigger = true;
|
|
83
88
|
} else {
|
|
84
89
|
handler = createTimeEffectHandler(target, effect, options, {
|
|
85
|
-
reducedMotion: globalOptions == null ? void 0 : globalOptions.reducedMotion
|
|
90
|
+
reducedMotion: globalOptions == null ? void 0 : globalOptions.reducedMotion,
|
|
91
|
+
selectorCondition: globalOptions == null ? void 0 : globalOptions.selectorCondition
|
|
86
92
|
});
|
|
87
93
|
once = options.type === 'once';
|
|
88
94
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getAnimation","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","handlerMap","WeakMap","createTimeEffectHandler","element","effect","options","globalOptions","animation","undefined","reducedMotion","type","initialPlay","event","play","reverse","playState","progress","isCSS","onFinish","dataset","motionEnter","cancel","pause","createTransitionHandler","_ref","effectId","listContainer","listItemSelector","method","isToggle","shouldSetStateOnElement","interactElement","closest","item","method_","toggleEffect","addHoverHandler","source","target","handler","isStateTrigger","once","transition","transitionProperties","cleanup","removeEventListener","allowA11yTriggers","handlerObj","tabIndex","addEventListener","contains","relatedTarget","passive","addLeave","removeHoverHandler","add","remove"],"sources":["../../../src/handlers/hover.ts"],"sourcesContent":["import type { AnimationGroup } from '@wix/motion';\nimport { getAnimation } from '@wix/motion';\nimport type {\n TimeEffect,\n TransitionEffect,\n StateParams,\n HandlerObjectMap,\n IInteractElement,\n PointerTriggerParams,\n EffectBase,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst handlerMap = new WeakMap() as HandlerObjectMap;\n\nfunction createTimeEffectHandler(\n element: HTMLElement,\n effect: TimeEffect & EffectBase,\n options: PointerTriggerParams,\n globalOptions: InteractionGlobalOptions,\n) {\n const animation = getAnimation(\n element,\n effectToAnimationOptions(effect),\n undefined,\n globalOptions?.reducedMotion,\n ) as AnimationGroup;\n const type = options.type || 'alternate';\n let initialPlay = true;\n\n return (event: MouseEvent | FocusEvent) => {\n if (event.type === 'mouseenter' || event.type === 'focusin') {\n if (type === 'alternate') {\n if (initialPlay) {\n initialPlay = false;\n animation.play();\n } else {\n animation.reverse();\n }\n } else if (type === 'state') {\n if (animation.playState !== 'finished') {\n // 'idle' OR 'paused'\n animation.play();\n }\n } else {\n // type === 'repeat'\n // type === 'once'\n animation.progress(0);\n\n if (animation.isCSS) {\n animation.onFinish(() => {\n element.dataset.motionEnter = 'done';\n });\n }\n\n animation.play();\n }\n } else if (event.type === 'mouseleave' || event.type === 'focusout') {\n if (type === 'alternate') {\n animation.reverse();\n } else if (type === 'repeat') {\n animation.cancel();\n delete element.dataset.motionEnter;\n } else if (type === 'state') {\n if (animation.playState === 'running') {\n animation.pause();\n }\n }\n }\n };\n}\n\nfunction createTransitionHandler(\n element: HTMLElement,\n {\n effectId,\n listContainer,\n listItemSelector,\n }: TransitionEffect & EffectBase & { effectId: string },\n options: StateParams,\n) {\n const method = options.method || 'toggle';\n const isToggle = method === 'toggle';\n const shouldSetStateOnElement = !!listContainer;\n\n return (event: MouseEvent | FocusEvent) => {\n const interactElement = element.closest(\n 'interact-element',\n ) as IInteractElement;\n if (!interactElement) {\n return;\n }\n\n let item;\n if (shouldSetStateOnElement) {\n item = element.closest(\n `${listContainer} > ${listItemSelector || ''}:has(:scope)`,\n ) as HTMLElement | null;\n }\n\n if (event.type === 'mouseenter' || event.type === 'focusin') {\n const method_ = isToggle ? 'add' : method;\n interactElement.toggleEffect(effectId, method_, item);\n } else if (\n (event.type === 'mouseleave' || event.type === 'focusout') &&\n isToggle\n ) {\n interactElement.toggleEffect(effectId, 'remove', item);\n }\n };\n}\n\nfunction addHoverHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: (TransitionEffect | TimeEffect) & EffectBase,\n options: StateParams | PointerTriggerParams = {},\n globalOptions: InteractionGlobalOptions,\n) {\n let handler: (event: MouseEvent | FocusEvent) => void;\n let isStateTrigger = false;\n let once = false;\n\n if (\n (effect as TransitionEffect).transition ||\n (effect as TransitionEffect).transitionProperties\n ) {\n handler = createTransitionHandler(\n target,\n effect as TransitionEffect & EffectBase & { effectId: string },\n options as StateParams,\n );\n isStateTrigger = true;\n } else {\n handler = createTimeEffectHandler(\n target,\n effect as TimeEffect & EffectBase,\n options as PointerTriggerParams,\n { reducedMotion: globalOptions?.reducedMotion },\n );\n once = (options as PointerTriggerParams).type === 'once';\n }\n\n const cleanup = () => {\n source.removeEventListener('mouseenter', handler);\n source.removeEventListener('mouseleave', handler);\n if (globalOptions?.allowA11yTriggers) {\n source.removeEventListener('focusin', handler);\n source.removeEventListener('focusout', handler);\n }\n };\n\n const handlerObj = { source, target, cleanup };\n\n addHandlerToMap(handlerMap, source, handlerObj);\n addHandlerToMap(handlerMap, target, handlerObj);\n\n if (globalOptions?.allowA11yTriggers) {\n source.tabIndex = 0;\n source.addEventListener(\n 'focusin',\n (event) => {\n if (!source.contains(event.relatedTarget as HTMLElement)) {\n handler(event);\n }\n },\n { once },\n );\n }\n\n source.addEventListener('mouseenter', handler, { passive: true, once });\n\n const addLeave = isStateTrigger\n ? ((options as StateParams).method || 'toggle') === 'toggle'\n : (options as PointerTriggerParams).type !== 'once';\n\n if (addLeave) {\n source.addEventListener('mouseleave', handler, { passive: true });\n\n if (globalOptions?.allowA11yTriggers) {\n source.addEventListener(\n 'focusout',\n (event) => {\n if (!source.contains(event.relatedTarget as HTMLElement)) {\n handler(event);\n }\n },\n { once },\n );\n }\n }\n}\n\nfunction removeHoverHandler(element: HTMLElement) {\n removeElementFromHandlerMap(handlerMap, element);\n}\n\nexport default {\n add: addHoverHandler,\n remove: removeHoverHandler,\n};\n"],"mappings":"AACA,SAASA,YAAY,QAAQ,aAAa;AAW1C,SACEC,wBAAwB,EACxBC,eAAe,EACfC,2BAA2B,QACtB,aAAa;AAEpB,MAAMC,UAAU,GAAG,IAAIC,OAAO,CAAC,CAAqB;AAEpD,SAASC,uBAAuBA,CAC9BC,OAAoB,EACpBC,MAA+B,EAC/BC,OAA6B,EAC7BC,aAAuC,EACvC;EACA,MAAMC,SAAS,GAAGX,YAAY,CAC5BO,OAAO,EACPN,wBAAwB,CAACO,MAAM,CAAC,EAChCI,SAAS,EACTF,aAAa,oBAAbA,aAAa,CAAEG,aACjB,CAAmB;EACnB,MAAMC,IAAI,GAAGL,OAAO,CAACK,IAAI,IAAI,WAAW;EACxC,IAAIC,WAAW,GAAG,IAAI;EAEtB,OAAQC,KAA8B,IAAK;IACzC,IAAIA,KAAK,CAACF,IAAI,KAAK,YAAY,IAAIE,KAAK,CAACF,IAAI,KAAK,SAAS,EAAE;MAC3D,IAAIA,IAAI,KAAK,WAAW,EAAE;QACxB,IAAIC,WAAW,EAAE;UACfA,WAAW,GAAG,KAAK;UACnBJ,SAAS,CAACM,IAAI,CAAC,CAAC;QAClB,CAAC,MAAM;UACLN,SAAS,CAACO,OAAO,CAAC,CAAC;QACrB;MACF,CAAC,MAAM,IAAIJ,IAAI,KAAK,OAAO,EAAE;QAC3B,IAAIH,SAAS,CAACQ,SAAS,KAAK,UAAU,EAAE;UACtC;UACAR,SAAS,CAACM,IAAI,CAAC,CAAC;QAClB;MACF,CAAC,MAAM;QACL;QACA;QACAN,SAAS,CAACS,QAAQ,CAAC,CAAC,CAAC;QAErB,IAAIT,SAAS,CAACU,KAAK,EAAE;UACnBV,SAAS,CAACW,QAAQ,CAAC,MAAM;YACvBf,OAAO,CAACgB,OAAO,CAACC,WAAW,GAAG,MAAM;UACtC,CAAC,CAAC;QACJ;QAEAb,SAAS,CAACM,IAAI,CAAC,CAAC;MAClB;IACF,CAAC,MAAM,IAAID,KAAK,CAACF,IAAI,KAAK,YAAY,IAAIE,KAAK,CAACF,IAAI,KAAK,UAAU,EAAE;MACnE,IAAIA,IAAI,KAAK,WAAW,EAAE;QACxBH,SAAS,CAACO,OAAO,CAAC,CAAC;MACrB,CAAC,MAAM,IAAIJ,IAAI,KAAK,QAAQ,EAAE;QAC5BH,SAAS,CAACc,MAAM,CAAC,CAAC;QAClB,OAAOlB,OAAO,CAACgB,OAAO,CAACC,WAAW;MACpC,CAAC,MAAM,IAAIV,IAAI,KAAK,OAAO,EAAE;QAC3B,IAAIH,SAAS,CAACQ,SAAS,KAAK,SAAS,EAAE;UACrCR,SAAS,CAACe,KAAK,CAAC,CAAC;QACnB;MACF;IACF;EACF,CAAC;AACH;AAEA,SAASC,uBAAuBA,CAC9BpB,OAAoB,EAAAqB,IAAA,EAMpBnB,OAAoB,EACpB;EAAA,IANA;IACEoB,QAAQ;IACRC,aAAa;IACbC;EACoD,CAAC,GAAAH,IAAA;EAGvD,MAAMI,MAAM,GAAGvB,OAAO,CAACuB,MAAM,IAAI,QAAQ;EACzC,MAAMC,QAAQ,GAAGD,MAAM,KAAK,QAAQ;EACpC,MAAME,uBAAuB,GAAG,CAAC,CAACJ,aAAa;EAE/C,OAAQd,KAA8B,IAAK;IACzC,MAAMmB,eAAe,GAAG5B,OAAO,CAAC6B,OAAO,CACrC,kBACF,CAAqB;IACrB,IAAI,CAACD,eAAe,EAAE;MACpB;IACF;IAEA,IAAIE,IAAI;IACR,IAAIH,uBAAuB,EAAE;MAC3BG,IAAI,GAAG9B,OAAO,CAAC6B,OAAO,CACpB,GAAGN,aAAa,MAAMC,gBAAgB,IAAI,EAAE,cAC9C,CAAuB;IACzB;IAEA,IAAIf,KAAK,CAACF,IAAI,KAAK,YAAY,IAAIE,KAAK,CAACF,IAAI,KAAK,SAAS,EAAE;MAC3D,MAAMwB,OAAO,GAAGL,QAAQ,GAAG,KAAK,GAAGD,MAAM;MACzCG,eAAe,CAACI,YAAY,CAACV,QAAQ,EAAES,OAAO,EAAED,IAAI,CAAC;IACvD,CAAC,MAAM,IACL,CAACrB,KAAK,CAACF,IAAI,KAAK,YAAY,IAAIE,KAAK,CAACF,IAAI,KAAK,UAAU,KACzDmB,QAAQ,EACR;MACAE,eAAe,CAACI,YAAY,CAACV,QAAQ,EAAE,QAAQ,EAAEQ,IAAI,CAAC;IACxD;EACF,CAAC;AACH;AAEA,SAASG,eAAeA,CACtBC,MAAmB,EACnBC,MAAmB,EACnBlC,MAAoD,EACpDC,OAA2C,EAC3CC,aAAuC,EACvC;EAAA,IAFAD,OAA2C;IAA3CA,OAA2C,GAAG,CAAC,CAAC;EAAA;EAGhD,IAAIkC,OAAiD;EACrD,IAAIC,cAAc,GAAG,KAAK;EAC1B,IAAIC,IAAI,GAAG,KAAK;EAEhB,IACGrC,MAAM,CAAsBsC,UAAU,IACtCtC,MAAM,CAAsBuC,oBAAoB,EACjD;IACAJ,OAAO,GAAGhB,uBAAuB,CAC/Be,MAAM,EACNlC,MAAM,EACNC,OACF,CAAC;IACDmC,cAAc,GAAG,IAAI;EACvB,CAAC,MAAM;IACLD,OAAO,GAAGrC,uBAAuB,CAC/BoC,MAAM,EACNlC,MAAM,EACNC,OAAO,EACP;MAAEI,aAAa,EAAEH,aAAa,oBAAbA,aAAa,CAAEG;IAAc,CAChD,CAAC;IACDgC,IAAI,GAAIpC,OAAO,CAA0BK,IAAI,KAAK,MAAM;EAC1D;EAEA,MAAMkC,OAAO,GAAGA,CAAA,KAAM;IACpBP,MAAM,CAACQ,mBAAmB,CAAC,YAAY,EAAEN,OAAO,CAAC;IACjDF,MAAM,CAACQ,mBAAmB,CAAC,YAAY,EAAEN,OAAO,CAAC;IACjD,IAAIjC,aAAa,YAAbA,aAAa,CAAEwC,iBAAiB,EAAE;MACpCT,MAAM,CAACQ,mBAAmB,CAAC,SAAS,EAAEN,OAAO,CAAC;MAC9CF,MAAM,CAACQ,mBAAmB,CAAC,UAAU,EAAEN,OAAO,CAAC;IACjD;EACF,CAAC;EAED,MAAMQ,UAAU,GAAG;IAAEV,MAAM;IAAEC,MAAM;IAAEM;EAAQ,CAAC;EAE9C9C,eAAe,CAACE,UAAU,EAAEqC,MAAM,EAAEU,UAAU,CAAC;EAC/CjD,eAAe,CAACE,UAAU,EAAEsC,MAAM,EAAES,UAAU,CAAC;EAE/C,IAAIzC,aAAa,YAAbA,aAAa,CAAEwC,iBAAiB,EAAE;IACpCT,MAAM,CAACW,QAAQ,GAAG,CAAC;IACnBX,MAAM,CAACY,gBAAgB,CACrB,SAAS,EACRrC,KAAK,IAAK;MACT,IAAI,CAACyB,MAAM,CAACa,QAAQ,CAACtC,KAAK,CAACuC,aAA4B,CAAC,EAAE;QACxDZ,OAAO,CAAC3B,KAAK,CAAC;MAChB;IACF,CAAC,EACD;MAAE6B;IAAK,CACT,CAAC;EACH;EAEAJ,MAAM,CAACY,gBAAgB,CAAC,YAAY,EAAEV,OAAO,EAAE;IAAEa,OAAO,EAAE,IAAI;IAAEX;EAAK,CAAC,CAAC;EAEvE,MAAMY,QAAQ,GAAGb,cAAc,GAC3B,CAAEnC,OAAO,CAAiBuB,MAAM,IAAI,QAAQ,MAAM,QAAQ,GACzDvB,OAAO,CAA0BK,IAAI,KAAK,MAAM;EAErD,IAAI2C,QAAQ,EAAE;IACZhB,MAAM,CAACY,gBAAgB,CAAC,YAAY,EAAEV,OAAO,EAAE;MAAEa,OAAO,EAAE;IAAK,CAAC,CAAC;IAEjE,IAAI9C,aAAa,YAAbA,aAAa,CAAEwC,iBAAiB,EAAE;MACpCT,MAAM,CAACY,gBAAgB,CACrB,UAAU,EACTrC,KAAK,IAAK;QACT,IAAI,CAACyB,MAAM,CAACa,QAAQ,CAACtC,KAAK,CAACuC,aAA4B,CAAC,EAAE;UACxDZ,OAAO,CAAC3B,KAAK,CAAC;QAChB;MACF,CAAC,EACD;QAAE6B;MAAK,CACT,CAAC;IACH;EACF;AACF;AAEA,SAASa,kBAAkBA,CAACnD,OAAoB,EAAE;EAChDJ,2BAA2B,CAACC,UAAU,EAAEG,OAAO,CAAC;AAClD;AAEA,eAAe;EACboD,GAAG,EAAEnB,eAAe;EACpBoB,MAAM,EAAEF;AACV,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["getAnimation","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","handlerMap","WeakMap","createTimeEffectHandler","element","effect","options","globalOptions","animation","undefined","reducedMotion","type","initialPlay","selectorCondition","event","matches","play","reverse","playState","progress","isCSS","onFinish","dataset","motionEnter","cancel","pause","createTransitionHandler","_ref","effectId","listContainer","listItemSelector","method","isToggle","shouldSetStateOnElement","interactElement","closest","item","method_","toggleEffect","addHoverHandler","source","target","handler","isStateTrigger","once","transition","transitionProperties","cleanup","removeEventListener","allowA11yTriggers","handlerObj","tabIndex","addEventListener","contains","relatedTarget","passive","addLeave","removeHoverHandler","add","remove"],"sources":["../../../src/handlers/hover.ts"],"sourcesContent":["import type { AnimationGroup } from '@wix/motion';\nimport { getAnimation } from '@wix/motion';\nimport type {\n TimeEffect,\n TransitionEffect,\n StateParams,\n HandlerObjectMap,\n IInteractElement,\n PointerTriggerParams,\n EffectBase,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst handlerMap = new WeakMap() as HandlerObjectMap;\n\nfunction createTimeEffectHandler(\n element: HTMLElement,\n effect: TimeEffect & EffectBase,\n options: PointerTriggerParams,\n globalOptions: InteractionGlobalOptions,\n) {\n const animation = getAnimation(\n element,\n effectToAnimationOptions(effect),\n undefined,\n globalOptions?.reducedMotion,\n ) as AnimationGroup;\n const type = options.type || 'alternate';\n let initialPlay = true;\n const {selectorCondition} = globalOptions || {};\n return (event: MouseEvent | FocusEvent) => {\n if (selectorCondition && !element.matches(selectorCondition)) return;\n if (event.type === 'mouseenter' || event.type === 'focusin') {\n if (type === 'alternate') {\n if (initialPlay) {\n initialPlay = false;\n animation.play();\n } else {\n animation.reverse();\n }\n } else if (type === 'state') {\n if (animation.playState !== 'finished') {\n // 'idle' OR 'paused'\n animation.play();\n }\n } else {\n // type === 'repeat'\n // type === 'once'\n animation.progress(0);\n\n if (animation.isCSS) {\n animation.onFinish(() => {\n element.dataset.motionEnter = 'done';\n });\n }\n\n animation.play();\n }\n } else if (event.type === 'mouseleave' || event.type === 'focusout') {\n if (type === 'alternate') {\n animation.reverse();\n } else if (type === 'repeat') {\n animation.cancel();\n delete element.dataset.motionEnter;\n } else if (type === 'state') {\n if (animation.playState === 'running') {\n animation.pause();\n }\n }\n }\n };\n}\n\nfunction createTransitionHandler(\n element: HTMLElement,\n {\n effectId,\n listContainer,\n listItemSelector,\n }: TransitionEffect & EffectBase & { effectId: string },\n options: StateParams,\n selectorCondition?: string,\n) {\n const method = options.method || 'toggle';\n const isToggle = method === 'toggle';\n const shouldSetStateOnElement = !!listContainer;\n\n return (event: MouseEvent | FocusEvent) => {\n if (selectorCondition && !element.matches(selectorCondition)) return;\n const interactElement = element.closest(\n 'interact-element',\n ) as IInteractElement;\n if (!interactElement) {\n return;\n }\n\n let item;\n if (shouldSetStateOnElement) {\n item = element.closest(\n `${listContainer} > ${listItemSelector || ''}:has(:scope)`,\n ) as HTMLElement | null;\n }\n\n if (event.type === 'mouseenter' || event.type === 'focusin') {\n const method_ = isToggle ? 'add' : method;\n interactElement.toggleEffect(effectId, method_, item);\n } else if (\n (event.type === 'mouseleave' || event.type === 'focusout') &&\n isToggle\n ) {\n interactElement.toggleEffect(effectId, 'remove', item);\n }\n };\n}\n\nfunction addHoverHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: (TransitionEffect | TimeEffect) & EffectBase,\n options: StateParams | PointerTriggerParams = {},\n globalOptions: InteractionGlobalOptions,\n) {\n let handler: (event: MouseEvent | FocusEvent) => void;\n let isStateTrigger = false;\n let once = false;\n\n if (\n (effect as TransitionEffect).transition ||\n (effect as TransitionEffect).transitionProperties\n ) {\n handler = createTransitionHandler(\n target,\n effect as TransitionEffect & EffectBase & { effectId: string },\n options as StateParams,\n globalOptions?.selectorCondition,\n );\n isStateTrigger = true;\n } else {\n handler = createTimeEffectHandler(\n target,\n effect as TimeEffect & EffectBase,\n options as PointerTriggerParams,\n { reducedMotion: globalOptions?.reducedMotion, selectorCondition: globalOptions?.selectorCondition },\n );\n once = (options as PointerTriggerParams).type === 'once';\n }\n\n const cleanup = () => {\n source.removeEventListener('mouseenter', handler);\n source.removeEventListener('mouseleave', handler);\n if (globalOptions?.allowA11yTriggers) {\n source.removeEventListener('focusin', handler);\n source.removeEventListener('focusout', handler);\n }\n };\n\n const handlerObj = { source, target, cleanup };\n\n addHandlerToMap(handlerMap, source, handlerObj);\n addHandlerToMap(handlerMap, target, handlerObj);\n\n if (globalOptions?.allowA11yTriggers) {\n source.tabIndex = 0;\n source.addEventListener(\n 'focusin',\n (event) => {\n if (!source.contains(event.relatedTarget as HTMLElement)) {\n handler(event);\n }\n },\n { once },\n );\n }\n\n source.addEventListener('mouseenter', handler, { passive: true, once });\n\n const addLeave = isStateTrigger\n ? ((options as StateParams).method || 'toggle') === 'toggle'\n : (options as PointerTriggerParams).type !== 'once';\n\n if (addLeave) {\n source.addEventListener('mouseleave', handler, { passive: true });\n\n if (globalOptions?.allowA11yTriggers) {\n source.addEventListener(\n 'focusout',\n (event) => {\n if (!source.contains(event.relatedTarget as HTMLElement)) {\n handler(event);\n }\n },\n { once },\n );\n }\n }\n}\n\nfunction removeHoverHandler(element: HTMLElement) {\n removeElementFromHandlerMap(handlerMap, element);\n}\n\nexport default {\n add: addHoverHandler,\n remove: removeHoverHandler,\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -93,7 +93,11 @@ function addViewEnterHandler(source, target, effect, options, globalOptions) {
|
|
|
93
93
|
target.dataset.motionEnter = 'done';
|
|
94
94
|
});
|
|
95
95
|
}
|
|
96
|
+
const {
|
|
97
|
+
selectorCondition
|
|
98
|
+
} = globalOptions || {};
|
|
96
99
|
const handler = () => {
|
|
100
|
+
if (selectorCondition && !target.matches(selectorCondition)) return;
|
|
97
101
|
animation.play(() => {
|
|
98
102
|
if (!animation.isCSS) {
|
|
99
103
|
target.dataset.motionEnter = 'done';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getAnimation","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","fastdom","SAFE_OBSERVER_CONFIG","root","rootMargin","threshold","observers","handlerMap","WeakMap","elementFirstRun","WeakSet","elementObserverMap","viewEnterOptions","setOptions","options","getObserver","isSafeMode","key","JSON","stringify","config","inset","observer","IntersectionObserver","entries","forEach","entry","target","isFirstRun","has","add","useSafeViewEnter","isIntersecting","measure","_entry$rootBounds","sourceHeight","boundingClientRect","height","rootHeight","rootBounds","Array","isArray","Math","min","needsSafeObserver","mutate","unobserve","safeObserver","set","observe","handlers","get","_ref","source","handler","type","delete","addViewEnterHandler","effect","globalOptions","animation","undefined","reducedMotion","isCSS","onFinish","dataset","motionEnter","play","cleanup","currentObserver","cancel","handlerObj","removeViewEnterHandler","element","remove"],"sources":["../../../src/handlers/viewEnter.ts"],"sourcesContent":["import type { AnimationGroup } from '@wix/motion';\nimport { getAnimation } from '@wix/motion';\nimport type {\n TimeEffect,\n HandlerObjectMap,\n ViewEnterParams,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\nimport fastdom from 'fastdom';\n\nconst SAFE_OBSERVER_CONFIG: IntersectionObserverInit = {\n root: null,\n rootMargin: '0px 0px -10% 0px',\n threshold: [0],\n};\n\nconst observers: Record<string, IntersectionObserver> = {};\nconst handlerMap = new WeakMap() as HandlerObjectMap;\nconst elementFirstRun = new WeakSet<HTMLElement>();\nconst elementObserverMap = new WeakMap<HTMLElement, IntersectionObserver>();\nlet viewEnterOptions: Partial<ViewEnterParams> = {};\n\nfunction setOptions(options: Partial<ViewEnterParams>) {\n viewEnterOptions = options;\n}\n\nfunction getObserver(options: ViewEnterParams, isSafeMode: boolean = false) {\n const key = JSON.stringify({ ...options, isSafeMode });\n\n if (observers[key]) {\n return observers[key];\n }\n\n const config: IntersectionObserverInit = isSafeMode\n ? SAFE_OBSERVER_CONFIG\n : {\n root: null,\n rootMargin: options.inset\n ? `${options.inset} 0px ${options.inset}`\n : '0px',\n threshold: options.threshold,\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n const target = entry.target as HTMLElement;\n const isFirstRun = !elementFirstRun.has(target);\n\n if (isFirstRun) {\n elementFirstRun.add(target);\n\n if (options.useSafeViewEnter && !entry.isIntersecting) {\n fastdom.measure(() => {\n const sourceHeight = entry.boundingClientRect.height;\n const rootHeight = entry.rootBounds?.height;\n\n if (!rootHeight) {\n return;\n }\n\n const threshold = Array.isArray(options.threshold)\n ? Math.min(...options.threshold)\n : options.threshold;\n\n const needsSafeObserver =\n threshold && sourceHeight * threshold > rootHeight;\n\n if (needsSafeObserver) {\n fastdom.mutate(() => {\n observer.unobserve(target);\n const safeObserver = getObserver(options, true);\n elementObserverMap.set(target, safeObserver);\n safeObserver.observe(target);\n });\n }\n });\n return;\n }\n }\n\n if (entry.isIntersecting) {\n const handlers = handlerMap.get(target);\n\n handlers?.forEach(({ source, handler }) => {\n if (source === entry.target) {\n handler!();\n }\n });\n\n if (options.type === 'once') {\n observer.unobserve(entry.target);\n elementFirstRun.delete(target);\n }\n }\n });\n }, config);\n\n observers[key] = observer;\n\n return observer;\n}\n\nfunction addViewEnterHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: TimeEffect,\n options: ViewEnterParams = {},\n globalOptions?: InteractionGlobalOptions,\n) {\n const observer = getObserver({ ...viewEnterOptions, ...options });\n const animation = getAnimation(\n target,\n effectToAnimationOptions(effect),\n undefined,\n globalOptions?.reducedMotion,\n ) as AnimationGroup;\n\n if (animation?.isCSS && options.type === 'once') {\n animation.onFinish(() => {\n target.dataset.motionEnter = 'done';\n });\n }\n
|
|
1
|
+
{"version":3,"names":["getAnimation","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","fastdom","SAFE_OBSERVER_CONFIG","root","rootMargin","threshold","observers","handlerMap","WeakMap","elementFirstRun","WeakSet","elementObserverMap","viewEnterOptions","setOptions","options","getObserver","isSafeMode","key","JSON","stringify","config","inset","observer","IntersectionObserver","entries","forEach","entry","target","isFirstRun","has","add","useSafeViewEnter","isIntersecting","measure","_entry$rootBounds","sourceHeight","boundingClientRect","height","rootHeight","rootBounds","Array","isArray","Math","min","needsSafeObserver","mutate","unobserve","safeObserver","set","observe","handlers","get","_ref","source","handler","type","delete","addViewEnterHandler","effect","globalOptions","animation","undefined","reducedMotion","isCSS","onFinish","dataset","motionEnter","selectorCondition","matches","play","cleanup","currentObserver","cancel","handlerObj","removeViewEnterHandler","element","remove"],"sources":["../../../src/handlers/viewEnter.ts"],"sourcesContent":["import type { AnimationGroup } from '@wix/motion';\nimport { getAnimation } from '@wix/motion';\nimport type {\n TimeEffect,\n HandlerObjectMap,\n ViewEnterParams,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\nimport fastdom from 'fastdom';\n\nconst SAFE_OBSERVER_CONFIG: IntersectionObserverInit = {\n root: null,\n rootMargin: '0px 0px -10% 0px',\n threshold: [0],\n};\n\nconst observers: Record<string, IntersectionObserver> = {};\nconst handlerMap = new WeakMap() as HandlerObjectMap;\nconst elementFirstRun = new WeakSet<HTMLElement>();\nconst elementObserverMap = new WeakMap<HTMLElement, IntersectionObserver>();\nlet viewEnterOptions: Partial<ViewEnterParams> = {};\n\nfunction setOptions(options: Partial<ViewEnterParams>) {\n viewEnterOptions = options;\n}\n\nfunction getObserver(options: ViewEnterParams, isSafeMode: boolean = false) {\n const key = JSON.stringify({ ...options, isSafeMode });\n\n if (observers[key]) {\n return observers[key];\n }\n\n const config: IntersectionObserverInit = isSafeMode\n ? SAFE_OBSERVER_CONFIG\n : {\n root: null,\n rootMargin: options.inset\n ? `${options.inset} 0px ${options.inset}`\n : '0px',\n threshold: options.threshold,\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n const target = entry.target as HTMLElement;\n const isFirstRun = !elementFirstRun.has(target);\n\n if (isFirstRun) {\n elementFirstRun.add(target);\n\n if (options.useSafeViewEnter && !entry.isIntersecting) {\n fastdom.measure(() => {\n const sourceHeight = entry.boundingClientRect.height;\n const rootHeight = entry.rootBounds?.height;\n\n if (!rootHeight) {\n return;\n }\n\n const threshold = Array.isArray(options.threshold)\n ? Math.min(...options.threshold)\n : options.threshold;\n\n const needsSafeObserver =\n threshold && sourceHeight * threshold > rootHeight;\n\n if (needsSafeObserver) {\n fastdom.mutate(() => {\n observer.unobserve(target);\n const safeObserver = getObserver(options, true);\n elementObserverMap.set(target, safeObserver);\n safeObserver.observe(target);\n });\n }\n });\n return;\n }\n }\n\n if (entry.isIntersecting) {\n const handlers = handlerMap.get(target);\n\n handlers?.forEach(({ source, handler }) => {\n if (source === entry.target) {\n handler!();\n }\n });\n\n if (options.type === 'once') {\n observer.unobserve(entry.target);\n elementFirstRun.delete(target);\n }\n }\n });\n }, config);\n\n observers[key] = observer;\n\n return observer;\n}\n\nfunction addViewEnterHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: TimeEffect,\n options: ViewEnterParams = {},\n globalOptions?: InteractionGlobalOptions,\n) {\n const observer = getObserver({ ...viewEnterOptions, ...options });\n const animation = getAnimation(\n target,\n effectToAnimationOptions(effect),\n undefined,\n globalOptions?.reducedMotion,\n ) as AnimationGroup;\n\n if (animation?.isCSS && options.type === 'once') {\n animation.onFinish(() => {\n target.dataset.motionEnter = 'done';\n });\n }\n const {selectorCondition} = globalOptions || {};\n const handler = () => {\n if (selectorCondition && !target.matches(selectorCondition)) return;\n animation.play(() => {\n if (!animation.isCSS) {\n target.dataset.motionEnter = 'done';\n }\n });\n };\n const cleanup = () => {\n const currentObserver = elementObserverMap.get(source) || observer;\n currentObserver.unobserve(source);\n animation.cancel();\n elementFirstRun.delete(source);\n elementObserverMap.delete(source);\n };\n const handlerObj = { source, target, handler, cleanup };\n\n addHandlerToMap(handlerMap, source, handlerObj);\n addHandlerToMap(handlerMap, target, handlerObj);\n\n elementObserverMap.set(source, observer);\n observer.observe(source);\n}\n\nfunction removeViewEnterHandler(element: HTMLElement) {\n removeElementFromHandlerMap(handlerMap, element);\n}\n\nexport default {\n add: addViewEnterHandler,\n remove: removeViewEnterHandler,\n setOptions,\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -15,11 +15,24 @@ function addViewProgressHandler(source, target, effect, __, globalOptions) {
|
|
|
15
15
|
element: source
|
|
16
16
|
};
|
|
17
17
|
const effectOptions = effectToAnimationOptions(effect);
|
|
18
|
+
let cleanup;
|
|
18
19
|
if ('ViewTimeline' in window) {
|
|
19
20
|
// Use ViewTimeline for modern browsers
|
|
20
21
|
const animationGroup = getWebAnimation(target, effectOptions, triggerParams);
|
|
21
22
|
if (animationGroup) {
|
|
22
23
|
animationGroup.play();
|
|
24
|
+
cleanup = () => {
|
|
25
|
+
animationGroup.ready.then(() => {
|
|
26
|
+
animationGroup.cancel();
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
const handlerObj = {
|
|
30
|
+
source,
|
|
31
|
+
target,
|
|
32
|
+
cleanup
|
|
33
|
+
};
|
|
34
|
+
addHandlerToMap(scrollManagerMap, source, handlerObj);
|
|
35
|
+
addHandlerToMap(scrollManagerMap, target, handlerObj);
|
|
23
36
|
}
|
|
24
37
|
} else {
|
|
25
38
|
const scene = getScrubScene(target, effectOptions, triggerParams);
|
|
@@ -34,21 +47,22 @@ function addViewProgressHandler(source, target, effect, __, globalOptions) {
|
|
|
34
47
|
root: document.body,
|
|
35
48
|
...scrollOptionsGetter()
|
|
36
49
|
});
|
|
37
|
-
|
|
50
|
+
cleanup = () => {
|
|
38
51
|
scroll.destroy();
|
|
39
52
|
};
|
|
40
|
-
const handlerObj = {
|
|
41
|
-
source,
|
|
42
|
-
target,
|
|
43
|
-
cleanup
|
|
44
|
-
};
|
|
45
|
-
addHandlerToMap(scrollManagerMap, source, handlerObj);
|
|
46
|
-
addHandlerToMap(scrollManagerMap, target, handlerObj);
|
|
47
53
|
Promise.all(scenes.map(s => s.ready || Promise.resolve())).then(() => {
|
|
48
54
|
scroll.start();
|
|
49
55
|
});
|
|
50
56
|
}
|
|
51
57
|
}
|
|
58
|
+
if (!cleanup) return;
|
|
59
|
+
const handlerObj = {
|
|
60
|
+
source,
|
|
61
|
+
target,
|
|
62
|
+
cleanup
|
|
63
|
+
};
|
|
64
|
+
addHandlerToMap(scrollManagerMap, source, handlerObj);
|
|
65
|
+
addHandlerToMap(scrollManagerMap, target, handlerObj);
|
|
52
66
|
}
|
|
53
67
|
function removeViewProgressHandler(element) {
|
|
54
68
|
removeElementFromHandlerMap(scrollManagerMap, element);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getWebAnimation","getScrubScene","Scroll","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","scrollManagerMap","WeakMap","scrollOptionsGetter","registerOptionsGetter","getter","addViewProgressHandler","source","target","effect","__","globalOptions","reducedMotion","triggerParams","trigger","element","effectOptions","window","animationGroup","play","scene","scenes","Array","isArray","scroll","viewSource","observeViewportEntry","observeViewportResize","observeSourcesResize","root","document","body","
|
|
1
|
+
{"version":3,"names":["getWebAnimation","getScrubScene","Scroll","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","scrollManagerMap","WeakMap","scrollOptionsGetter","registerOptionsGetter","getter","addViewProgressHandler","source","target","effect","__","globalOptions","reducedMotion","triggerParams","trigger","element","effectOptions","cleanup","window","animationGroup","play","ready","then","cancel","handlerObj","scene","scenes","Array","isArray","scroll","viewSource","observeViewportEntry","observeViewportResize","observeSourcesResize","root","document","body","destroy","Promise","all","map","s","resolve","start","removeViewProgressHandler","add","remove"],"sources":["../../../src/handlers/viewProgress.ts"],"sourcesContent":["import type { AnimationGroup, ScrubScrollScene } from '@wix/motion';\nimport { getWebAnimation, getScrubScene } from '@wix/motion';\nimport { Scroll, scrollConfig } from 'fizban';\nimport type {\n ViewEnterParams,\n ScrubEffect,\n HandlerObjectMap,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst scrollManagerMap = new WeakMap() as HandlerObjectMap;\nlet scrollOptionsGetter: () => Partial<scrollConfig> = () => ({});\n\nfunction registerOptionsGetter(getter: () => scrollConfig) {\n scrollOptionsGetter = getter;\n}\n\nfunction addViewProgressHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: ScrubEffect,\n __: ViewEnterParams,\n globalOptions?: InteractionGlobalOptions,\n): void {\n if (globalOptions?.reducedMotion) {\n return;\n }\n\n const triggerParams = {\n trigger: 'view-progress' as const,\n element: source,\n };\n\n const effectOptions = effectToAnimationOptions(effect);\n let cleanup;\n if ('ViewTimeline' in window) {\n // Use ViewTimeline for modern browsers\n const animationGroup = getWebAnimation(\n target,\n effectOptions,\n triggerParams,\n );\n\n if (animationGroup) {\n animationGroup.play();\n\n cleanup = () => {\n (animationGroup as AnimationGroup).ready.then(() => {\n (animationGroup as AnimationGroup).cancel();\n });\n };\n\n const handlerObj = { source, target, cleanup };\n addHandlerToMap(scrollManagerMap, source, handlerObj);\n addHandlerToMap(scrollManagerMap, target, handlerObj);\n }\n } else {\n const scene = getScrubScene(target, effectOptions, triggerParams);\n\n if (scene) {\n const scenes = Array.isArray(scene) ? scene : [scene];\n const scroll = new Scroll({\n viewSource: source,\n scenes,\n observeViewportEntry: false,\n observeViewportResize: false,\n observeSourcesResize: true,\n root: document.body,\n ...scrollOptionsGetter(),\n });\n\n cleanup = () => {\n scroll.destroy();\n };\n\n Promise.all(\n (scenes as ScrubScrollScene[]).map((s) => s.ready || Promise.resolve()),\n ).then(() => {\n scroll.start();\n });\n }\n }\n if (!cleanup) return;\n \n const handlerObj = { source, target, cleanup };\n\n addHandlerToMap(scrollManagerMap, source, handlerObj);\n addHandlerToMap(scrollManagerMap, target, handlerObj);\n}\n\nfunction removeViewProgressHandler(element: HTMLElement): void {\n removeElementFromHandlerMap(scrollManagerMap, element);\n}\n\nexport default {\n add: addViewProgressHandler,\n remove: removeViewProgressHandler,\n registerOptionsGetter,\n};\n"],"mappings":"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","ignoreList":[]}
|
package/dist/esm/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/types.ts"],"sourcesContent":["import type {\n NamedEffect,\n RangeOffset,\n ScrubTransitionEasing,\n MotionAnimationOptions,\n} from '@wix/motion';\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'interact-element': React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLElement>,\n HTMLElement\n > & {\n 'data-interact-key'?: string;\n };\n }\n }\n}\n\nexport type TriggerType =\n | 'hover'\n | 'click'\n | 'viewEnter'\n | 'pageVisible'\n | 'animationEnd'\n | 'viewProgress'\n | 'pointerMove'\n | 'activate'\n | 'interest';\n\nexport type ViewEnterType = 'once' | 'repeat' | 'alternate';\n\nexport type TransitionMethod = 'add' | 'remove' | 'toggle' | 'clear';\n\nexport type StateParams = {\n method: TransitionMethod;\n};\n\nexport type PointerTriggerParams = {\n type?: ViewEnterType | 'state';\n};\n\nexport type ViewEnterParams = {\n type?: ViewEnterType;\n threshold?: number;\n inset?: string;\n useSafeViewEnter?: boolean;\n};\n\nexport type PointerMoveParams = {\n hitArea?: 'root' | 'self';\n};\n\nexport type AnimationEndParams = {\n effectId: string;\n};\n\nexport type TriggerParams =\n | StateParams\n | PointerTriggerParams\n | ViewEnterParams\n | PointerMoveParams\n | AnimationEndParams;\n\ntype Fill = 'none' | 'forwards' | 'backwards' | 'both';\n\ntype MotionKeyframeEffect = {\n name: string;\n keyframes: Keyframe[];\n};\n\ntype EffectEffectProperty =\n | {\n keyframeEffect: MotionKeyframeEffect;\n }\n | {\n namedEffect: NamedEffect;\n }\n | {\n customEffect: (element: Element, progress: any) => void;\n };\n\nexport type TimeEffect = {\n duration: number;\n easing?: string;\n iterations?: number;\n alternate?: boolean;\n fill?: Fill;\n reversed?: boolean;\n delay?: number;\n} & EffectEffectProperty;\n\nexport type ScrubEffect = {\n easing?: string;\n iterations?: number;\n alternate?: boolean;\n fill?: Fill;\n reversed?: boolean;\n rangeStart?: RangeOffset;\n rangeEnd?: RangeOffset;\n centeredToTarget?: boolean;\n transitionDuration?: number;\n transitionDelay?: number;\n transitionEasing?: ScrubTransitionEasing;\n} & EffectEffectProperty;\n\nexport type TransitionOptions = {\n duration?: number;\n delay?: number;\n easing?: string;\n};\n\nexport type StyleProperty = {\n name: string;\n value: string;\n};\n\nexport type TransitionProperty = StyleProperty & TransitionOptions;\n\nexport type TransitionEffect = {\n key?: string;\n effectId?: string;\n} & {\n transition?: TransitionOptions & {\n styleProperties: StyleProperty[];\n };\n transitionProperties?: TransitionProperty[];\n};\n\nexport type EffectBase = {\n key?: string;\n listContainer?: string;\n listItemSelector?: string;\n conditions?: string[];\n selector?: string;\n effectId?: string;\n};\n\nexport type EffectRef = EffectBase & { effectId: string };\n\nexport type Effect = EffectBase & (TimeEffect | ScrubEffect | TransitionEffect);\n\nexport type Condition = {\n type: 'media' | 'container';\n predicate?: string;\n};\n\nexport type InteractionTrigger = {\n key: string;\n listContainer?: string;\n listItemSelector?: string;\n trigger: TriggerType;\n params?: TriggerParams;\n conditions?: string[];\n selector?: string;\n};\n\nexport type Interaction = InteractionTrigger & {\n effects: ((Effect | EffectRef) & { interactionId?: string })[];\n};\n\nexport type InteractConfig = {\n effects: Record<string, Effect>;\n conditions?: Record<string, Condition>;\n interactions: Interaction[];\n};\n\nexport type AnimationOptions<T extends 'time' | 'scrub'> =\n MotionAnimationOptions<T> & EffectEffectProperty;\n\n/// ////////////////////////////////////////////////////////\n/// ////////////////////////////////////////////////////////\n/// ////////////////////////////////////////////////////////\n\nexport interface IInteractElement extends HTMLElement {\n _internals: (ElementInternals & { states: Set<string> }) | null;\n connected: boolean;\n sheet: CSSStyleSheet | null;\n _observers: WeakMap<HTMLElement, MutationObserver>;\n connectedCallback(): void;\n disconnectedCallback(): void;\n connect(path?: string): void;\n disconnect(): void;\n renderStyle(cssRules: string[]): void;\n toggleEffect(\n effectId: string,\n method: StateParams['method'],\n item?: HTMLElement | null,\n ): void;\n watchChildList(listContainer: string): void;\n}\n\nexport type InteractionParamsTypes = {\n hover: StateParams | PointerTriggerParams;\n click: StateParams | PointerTriggerParams;\n viewEnter: ViewEnterParams;\n pageVisible: ViewEnterParams;\n animationEnd: AnimationEndParams;\n viewProgress: ViewEnterParams;\n pointerMove: PointerMoveParams;\n activate: StateParams | PointerTriggerParams;\n interest: StateParams | PointerTriggerParams;\n};\n\nexport type InteractionGlobalOptions = {\n reducedMotion?: boolean;\n allowA11yTriggers?: boolean;\n};\n\nexport type InteractionHandlerModule<T extends TriggerType> = {\n registerOptionsGetter?: (getter: () => any) => void;\n add: (\n source: HTMLElement,\n target: HTMLElement,\n effect: Effect,\n options: InteractionParamsTypes[T],\n globalOptions?: InteractionGlobalOptions,\n ) => void;\n remove: (element: HTMLElement) => void;\n};\n\nexport type ViewEnterHandlerModule = InteractionHandlerModule<'viewEnter'> & {\n setOptions: (options: Partial<ViewEnterParams>) => void;\n};\n\nexport type TriggerHandlerMap<T extends TriggerType> = {\n [K in T]: InteractionHandlerModule<K>;\n};\n\nexport type HandlerObject = {\n source: HTMLElement;\n target: HTMLElement;\n cleanup: () => void;\n handler?: () => void;\n};\n\nexport type HandlerObjectMap = WeakMap<HTMLElement, Set<HandlerObject>>;\n\nexport type InteractCache = {\n effects: {\n [effectId: string]: Effect;\n };\n conditions: {\n [conditionId: string]: Condition;\n };\n interactions: {\n [path: string]: {\n triggers: Interaction[];\n effects: Record<\n string,\n (InteractionTrigger & { effect: Effect | EffectRef })[]\n >;\n interactionIds: Set<string>;\n selectors: Set<string>;\n };\n };\n};\n\nexport type CreateTransitionCSSParams = {\n key: string;\n effectId: string;\n transition?: TransitionEffect['transition'];\n properties?: TransitionProperty[];\n childSelector?: string;\n};\n"],"mappings":"","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["../../src/types.ts"],"sourcesContent":["import type {\n NamedEffect,\n RangeOffset,\n ScrubTransitionEasing,\n MotionAnimationOptions,\n} from '@wix/motion';\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'interact-element': React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLElement>,\n HTMLElement\n > & {\n 'data-interact-key'?: string;\n };\n }\n }\n}\n\nexport type TriggerType =\n | 'hover'\n | 'click'\n | 'viewEnter'\n | 'pageVisible'\n | 'animationEnd'\n | 'viewProgress'\n | 'pointerMove'\n | 'activate'\n | 'interest';\n\nexport type ViewEnterType = 'once' | 'repeat' | 'alternate';\n\nexport type TransitionMethod = 'add' | 'remove' | 'toggle' | 'clear';\n\nexport type StateParams = {\n method: TransitionMethod;\n};\n\nexport type PointerTriggerParams = {\n type?: ViewEnterType | 'state';\n};\n\nexport type ViewEnterParams = {\n type?: ViewEnterType;\n threshold?: number;\n inset?: string;\n useSafeViewEnter?: boolean;\n};\n\nexport type PointerMoveParams = {\n hitArea?: 'root' | 'self';\n};\n\nexport type AnimationEndParams = {\n effectId: string;\n};\n\nexport type TriggerParams =\n | StateParams\n | PointerTriggerParams\n | ViewEnterParams\n | PointerMoveParams\n | AnimationEndParams;\n\ntype Fill = 'none' | 'forwards' | 'backwards' | 'both';\n\ntype MotionKeyframeEffect = {\n name: string;\n keyframes: Keyframe[];\n};\n\ntype EffectEffectProperty =\n | {\n keyframeEffect: MotionKeyframeEffect;\n }\n | {\n namedEffect: NamedEffect;\n }\n | {\n customEffect: (element: Element, progress: any) => void;\n };\n\nexport type TimeEffect = {\n duration: number;\n easing?: string;\n iterations?: number;\n alternate?: boolean;\n fill?: Fill;\n reversed?: boolean;\n delay?: number;\n} & EffectEffectProperty;\n\nexport type ScrubEffect = {\n easing?: string;\n iterations?: number;\n alternate?: boolean;\n fill?: Fill;\n reversed?: boolean;\n rangeStart?: RangeOffset;\n rangeEnd?: RangeOffset;\n centeredToTarget?: boolean;\n transitionDuration?: number;\n transitionDelay?: number;\n transitionEasing?: ScrubTransitionEasing;\n} & EffectEffectProperty;\n\nexport type TransitionOptions = {\n duration?: number;\n delay?: number;\n easing?: string;\n};\n\nexport type StyleProperty = {\n name: string;\n value: string;\n};\n\nexport type TransitionProperty = StyleProperty & TransitionOptions;\n\nexport type TransitionEffect = {\n key?: string;\n effectId?: string;\n} & {\n transition?: TransitionOptions & {\n styleProperties: StyleProperty[];\n };\n transitionProperties?: TransitionProperty[];\n};\n\nexport type EffectBase = {\n key?: string;\n listContainer?: string;\n listItemSelector?: string;\n conditions?: string[];\n selector?: string;\n effectId?: string;\n};\n\nexport type EffectRef = EffectBase & { effectId: string };\n\nexport type Effect = EffectBase & (TimeEffect | ScrubEffect | TransitionEffect);\n\nexport type Condition = {\n type: 'media' | 'container' | 'selector';\n predicate?: string;\n};\n\nexport type InteractionTrigger = {\n key: string;\n listContainer?: string;\n listItemSelector?: string;\n trigger: TriggerType;\n params?: TriggerParams;\n conditions?: string[];\n selector?: string;\n};\n\nexport type Interaction = InteractionTrigger & {\n effects: ((Effect | EffectRef) & { interactionId?: string })[];\n};\n\nexport type InteractConfig = {\n effects: Record<string, Effect>;\n conditions?: Record<string, Condition>;\n interactions: Interaction[];\n};\n\nexport type AnimationOptions<T extends 'time' | 'scrub'> =\n MotionAnimationOptions<T> & EffectEffectProperty;\n\n/// ////////////////////////////////////////////////////////\n/// ////////////////////////////////////////////////////////\n/// ////////////////////////////////////////////////////////\n\nexport interface IInteractElement extends HTMLElement {\n _internals: (ElementInternals & { states: Set<string> }) | null;\n connected: boolean;\n sheet: CSSStyleSheet | null;\n _observers: WeakMap<HTMLElement, MutationObserver>;\n connectedCallback(): void;\n disconnectedCallback(): void;\n connect(path?: string): void;\n disconnect(): void;\n renderStyle(cssRules: string[]): void;\n toggleEffect(\n effectId: string,\n method: StateParams['method'],\n item?: HTMLElement | null,\n ): void;\n watchChildList(listContainer: string): void;\n}\n\nexport type InteractionParamsTypes = {\n hover: StateParams | PointerTriggerParams;\n click: StateParams | PointerTriggerParams;\n viewEnter: ViewEnterParams;\n pageVisible: ViewEnterParams;\n animationEnd: AnimationEndParams;\n viewProgress: ViewEnterParams;\n pointerMove: PointerMoveParams;\n activate: StateParams | PointerTriggerParams;\n interest: StateParams | PointerTriggerParams;\n};\n\nexport type InteractionGlobalOptions = {\n reducedMotion?: boolean;\n allowA11yTriggers?: boolean;\n selectorCondition?: string;\n};\n\nexport type InteractionHandlerModule<T extends TriggerType> = {\n registerOptionsGetter?: (getter: () => any) => void;\n add: (\n source: HTMLElement,\n target: HTMLElement,\n effect: Effect,\n options: InteractionParamsTypes[T],\n globalOptions?: InteractionGlobalOptions,\n ) => void;\n remove: (element: HTMLElement) => void;\n};\n\nexport type ViewEnterHandlerModule = InteractionHandlerModule<'viewEnter'> & {\n setOptions: (options: Partial<ViewEnterParams>) => void;\n};\n\nexport type TriggerHandlerMap<T extends TriggerType> = {\n [K in T]: InteractionHandlerModule<K>;\n};\n\nexport type HandlerObject = {\n source: HTMLElement;\n target: HTMLElement;\n cleanup: () => void;\n handler?: () => void;\n};\n\nexport type HandlerObjectMap = WeakMap<HTMLElement, Set<HandlerObject>>;\n\nexport type InteractCache = {\n effects: {\n [effectId: string]: Effect;\n };\n conditions: {\n [conditionId: string]: Condition;\n };\n interactions: {\n [path: string]: {\n triggers: Interaction[];\n effects: Record<\n string,\n (InteractionTrigger & { effect: Effect | EffectRef })[]\n >;\n interactionIds: Set<string>;\n selectors: Set<string>;\n };\n };\n};\n\nexport type CreateTransitionCSSParams = {\n key: string;\n effectId: string;\n transition?: TransitionEffect['transition'];\n properties?: TransitionProperty[];\n childSelector?: string;\n selectorCondition?: string;\n};\n"],"mappings":"","ignoreList":[]}
|