@wix/interact 1.91.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 +294 -1
- package/dist/cjs/__tests__/interact.spec.js.map +1 -1
- package/dist/cjs/core/Interact.js +4 -0
- package/dist/cjs/core/Interact.js.map +1 -1
- package/dist/cjs/core/add.js +15 -8
- package/dist/cjs/core/add.js.map +1 -1
- package/dist/cjs/handlers/animationEnd.js +6 -2
- package/dist/cjs/handlers/animationEnd.js.map +1 -1
- package/dist/cjs/handlers/click.js +37 -9
- package/dist/cjs/handlers/click.js.map +1 -1
- package/dist/cjs/handlers/hover.js +41 -10
- package/dist/cjs/handlers/hover.js.map +1 -1
- package/dist/cjs/handlers/index.js +12 -1
- package/dist/cjs/handlers/index.js.map +1 -1
- package/dist/cjs/handlers/pointerMove.js +2 -2
- package/dist/cjs/handlers/pointerMove.js.map +1 -1
- package/dist/cjs/handlers/viewEnter.js +6 -2
- package/dist/cjs/handlers/viewEnter.js.map +1 -1
- package/dist/cjs/handlers/viewProgress.js +24 -10
- 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 +295 -1
- package/dist/esm/__tests__/interact.spec.js.map +1 -1
- package/dist/esm/core/Interact.js +4 -0
- package/dist/esm/core/Interact.js.map +1 -1
- package/dist/esm/core/add.js +16 -9
- package/dist/esm/core/add.js.map +1 -1
- package/dist/esm/handlers/animationEnd.js +6 -5
- package/dist/esm/handlers/animationEnd.js.map +1 -1
- package/dist/esm/handlers/click.js +37 -15
- package/dist/esm/handlers/click.js.map +1 -1
- package/dist/esm/handlers/hover.js +41 -16
- package/dist/esm/handlers/hover.js.map +1 -1
- package/dist/esm/handlers/index.js +12 -1
- package/dist/esm/handlers/index.js.map +1 -1
- package/dist/esm/handlers/pointerMove.js +2 -5
- package/dist/esm/handlers/pointerMove.js.map +1 -1
- package/dist/esm/handlers/viewEnter.js +6 -5
- package/dist/esm/handlers/viewEnter.js.map +1 -1
- package/dist/esm/handlers/viewProgress.js +24 -13
- 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/core/Interact.d.ts +2 -0
- package/dist/types/handlers/animationEnd.d.ts +2 -2
- package/dist/types/handlers/click.d.ts +2 -2
- package/dist/types/handlers/hover.d.ts +2 -2
- package/dist/types/handlers/pointerMove.d.ts +2 -2
- package/dist/types/handlers/viewEnter.d.ts +2 -2
- package/dist/types/handlers/viewProgress.d.ts +2 -2
- package/dist/types/types.d.ts +11 -3
- package/dist/types/utils.d.ts +2 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getAnimation","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","handlerMap","WeakMap","createTimeEffectHandler","element","effect","options","reducedMotion","animation","undefined","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","handlerObj","addEventListener","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} 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 reducedMotion: boolean = false,\n) {\n const animation = getAnimation(\n element,\n effectToAnimationOptions(effect),\n undefined,\n reducedMotion,\n ) as AnimationGroup;\n const type = options.type || 'alternate';\n let initialPlay = true;\n\n return (event: MouseEvent) => {\n if (event.type === 'mouseenter') {\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') {\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) => {\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') {\n const method_ = isToggle ? 'add' : method;\n interactElement.toggleEffect(effectId, method_, item);\n } else if (event.type === 'mouseleave' && isToggle) {\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 reducedMotion: boolean = false,\n) {\n let handler: (event: MouseEvent) => 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,\n );\n once = (options as PointerTriggerParams).type === 'once';\n }\n\n const cleanup = () => {\n source.removeEventListener('mouseenter', handler);\n source.removeEventListener('mouseleave', handler);\n };\n\n const handlerObj = { source, target, cleanup };\n\n addHandlerToMap(handlerMap, source, handlerObj);\n addHandlerToMap(handlerMap, target, handlerObj);\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 if (addLeave) {\n source.addEventListener('mouseleave', handler, { passive: true });\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":[]}
|
|
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":[]}
|
|
@@ -4,6 +4,15 @@ import hoverHandler from './hover';
|
|
|
4
4
|
import clickHandler from './click';
|
|
5
5
|
import pointerMoveHandler from './pointerMove';
|
|
6
6
|
import animationEndHandler from './animationEnd';
|
|
7
|
+
function withA11y(handler) {
|
|
8
|
+
return {
|
|
9
|
+
add: (source, target, effect, options, globalOptions) => handler.add(source, target, effect, options, {
|
|
10
|
+
...globalOptions,
|
|
11
|
+
allowA11yTriggers: true
|
|
12
|
+
}),
|
|
13
|
+
remove: handler.remove
|
|
14
|
+
};
|
|
15
|
+
}
|
|
7
16
|
export default {
|
|
8
17
|
viewEnter: viewEnterHandler,
|
|
9
18
|
hover: hoverHandler,
|
|
@@ -11,6 +20,8 @@ export default {
|
|
|
11
20
|
pageVisible: viewEnterHandler,
|
|
12
21
|
animationEnd: animationEndHandler,
|
|
13
22
|
viewProgress: viewProgressHandler,
|
|
14
|
-
pointerMove: pointerMoveHandler
|
|
23
|
+
pointerMove: pointerMoveHandler,
|
|
24
|
+
activate: withA11y(clickHandler),
|
|
25
|
+
interest: withA11y(hoverHandler)
|
|
15
26
|
};
|
|
16
27
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["viewEnterHandler","viewProgressHandler","hoverHandler","clickHandler","pointerMoveHandler","animationEndHandler","viewEnter","hover","click","pageVisible","animationEnd","viewProgress","pointerMove"],"sources":["../../../src/handlers/index.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"names":["viewEnterHandler","viewProgressHandler","hoverHandler","clickHandler","pointerMoveHandler","animationEndHandler","withA11y","handler","add","source","target","effect","options","globalOptions","allowA11yTriggers","remove","viewEnter","hover","click","pageVisible","animationEnd","viewProgress","pointerMove","activate","interest"],"sources":["../../../src/handlers/index.ts"],"sourcesContent":["import type {\n TriggerHandlerMap,\n TriggerType,\n Effect,\n InteractionGlobalOptions,\n StateParams,\n PointerTriggerParams,\n} from '../types';\nimport viewEnterHandler from './viewEnter';\nimport viewProgressHandler from './viewProgress';\nimport hoverHandler from './hover';\nimport clickHandler from './click';\nimport pointerMoveHandler from './pointerMove';\nimport animationEndHandler from './animationEnd';\n\nfunction withA11y<T extends typeof clickHandler | typeof hoverHandler>(\n handler: T,\n): T {\n return {\n add: (\n source: HTMLElement,\n target: HTMLElement,\n effect: Effect,\n options: StateParams | PointerTriggerParams,\n globalOptions?: InteractionGlobalOptions,\n ) =>\n handler.add(source, target, effect, options, {\n ...globalOptions,\n allowA11yTriggers: true,\n }),\n remove: handler.remove,\n } as T;\n}\n\nexport default {\n viewEnter: viewEnterHandler,\n hover: hoverHandler,\n click: clickHandler,\n pageVisible: viewEnterHandler,\n animationEnd: animationEndHandler,\n viewProgress: viewProgressHandler,\n pointerMove: pointerMoveHandler,\n activate: withA11y(clickHandler),\n interest: withA11y(hoverHandler),\n} as TriggerHandlerMap<TriggerType>;\n"],"mappings":"AAQA,OAAOA,gBAAgB,MAAM,aAAa;AAC1C,OAAOC,mBAAmB,MAAM,gBAAgB;AAChD,OAAOC,YAAY,MAAM,SAAS;AAClC,OAAOC,YAAY,MAAM,SAAS;AAClC,OAAOC,kBAAkB,MAAM,eAAe;AAC9C,OAAOC,mBAAmB,MAAM,gBAAgB;AAEhD,SAASC,QAAQA,CACfC,OAAU,EACP;EACH,OAAO;IACLC,GAAG,EAAEA,CACHC,MAAmB,EACnBC,MAAmB,EACnBC,MAAc,EACdC,OAA2C,EAC3CC,aAAwC,KAExCN,OAAO,CAACC,GAAG,CAACC,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAE;MAC3C,GAAGC,aAAa;MAChBC,iBAAiB,EAAE;IACrB,CAAC,CAAC;IACJC,MAAM,EAAER,OAAO,CAACQ;EAClB,CAAC;AACH;AAEA,eAAe;EACbC,SAAS,EAAEhB,gBAAgB;EAC3BiB,KAAK,EAAEf,YAAY;EACnBgB,KAAK,EAAEf,YAAY;EACnBgB,WAAW,EAAEnB,gBAAgB;EAC7BoB,YAAY,EAAEf,mBAAmB;EACjCgB,YAAY,EAAEpB,mBAAmB;EACjCqB,WAAW,EAAElB,kBAAkB;EAC/BmB,QAAQ,EAAEjB,QAAQ,CAACH,YAAY,CAAC;EAChCqB,QAAQ,EAAElB,QAAQ,CAACJ,YAAY;AACjC,CAAC","ignoreList":[]}
|
|
@@ -6,14 +6,11 @@ let pointerOptionsGetter = () => ({});
|
|
|
6
6
|
function registerOptionsGetter(getter) {
|
|
7
7
|
pointerOptionsGetter = getter;
|
|
8
8
|
}
|
|
9
|
-
function addPointerMoveHandler(source, target, effect, options,
|
|
9
|
+
function addPointerMoveHandler(source, target, effect, options, globalOptions) {
|
|
10
10
|
if (options === void 0) {
|
|
11
11
|
options = {};
|
|
12
12
|
}
|
|
13
|
-
if (
|
|
14
|
-
reducedMotion = false;
|
|
15
|
-
}
|
|
16
|
-
if (reducedMotion) {
|
|
13
|
+
if (globalOptions != null && globalOptions.reducedMotion) {
|
|
17
14
|
return;
|
|
18
15
|
}
|
|
19
16
|
const triggerParams = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getScrubScene","Pointer","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","pointerManagerMap","WeakMap","pointerOptionsGetter","registerOptionsGetter","getter","addPointerMoveHandler","source","target","effect","options","reducedMotion","triggerParams","trigger","element","scene","pointer","root","hitArea","undefined","scenes","Array","isArray","cleanup","destroy","handlerObj","start","removePointerMoveHandler","add","remove"],"sources":["../../../src/handlers/pointerMove.ts"],"sourcesContent":["import { getScrubScene } from '@wix/motion';\nimport { Pointer, PointerConfig } from 'kuliso';\nimport type {\n PointerMoveParams,\n ScrubEffect,\n HandlerObjectMap,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst pointerManagerMap = new WeakMap() as HandlerObjectMap;\nlet pointerOptionsGetter: () => Partial<PointerConfig> = () => ({});\n\nfunction registerOptionsGetter(getter: () => Partial<PointerConfig>) {\n pointerOptionsGetter = getter;\n}\n\nfunction addPointerMoveHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: ScrubEffect,\n options: PointerMoveParams = {},\n
|
|
1
|
+
{"version":3,"names":["getScrubScene","Pointer","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","pointerManagerMap","WeakMap","pointerOptionsGetter","registerOptionsGetter","getter","addPointerMoveHandler","source","target","effect","options","globalOptions","reducedMotion","triggerParams","trigger","element","scene","pointer","root","hitArea","undefined","scenes","Array","isArray","cleanup","destroy","handlerObj","start","removePointerMoveHandler","add","remove"],"sources":["../../../src/handlers/pointerMove.ts"],"sourcesContent":["import { getScrubScene } from '@wix/motion';\nimport { Pointer, PointerConfig } from 'kuliso';\nimport type {\n PointerMoveParams,\n ScrubEffect,\n HandlerObjectMap,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst pointerManagerMap = new WeakMap() as HandlerObjectMap;\nlet pointerOptionsGetter: () => Partial<PointerConfig> = () => ({});\n\nfunction registerOptionsGetter(getter: () => Partial<PointerConfig>) {\n pointerOptionsGetter = getter;\n}\n\nfunction addPointerMoveHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: ScrubEffect,\n options: PointerMoveParams = {},\n globalOptions: InteractionGlobalOptions,\n) {\n if (globalOptions?.reducedMotion) {\n return;\n }\n\n const triggerParams = {\n trigger: 'pointer-move' as const,\n element: source,\n };\n\n const scene = getScrubScene(\n target,\n effectToAnimationOptions(effect),\n triggerParams,\n );\n\n if (scene) {\n const pointer = new Pointer({\n root: options.hitArea === 'self' ? source : undefined,\n scenes: Array.isArray(scene) ? scene : [scene],\n ...pointerOptionsGetter(),\n });\n const cleanup = () => {\n pointer.destroy();\n };\n\n const handlerObj = { source, target, cleanup };\n\n addHandlerToMap(pointerManagerMap, source, handlerObj);\n addHandlerToMap(pointerManagerMap, target, handlerObj);\n\n pointer.start();\n }\n}\n\nfunction removePointerMoveHandler(element: HTMLElement) {\n removeElementFromHandlerMap(pointerManagerMap, element);\n}\n\nexport default {\n add: addPointerMoveHandler,\n remove: removePointerMoveHandler,\n registerOptionsGetter,\n};\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,aAAa;AAC3C,SAASC,OAAO,QAAuB,QAAQ;AAO/C,SACEC,wBAAwB,EACxBC,eAAe,EACfC,2BAA2B,QACtB,aAAa;AAEpB,MAAMC,iBAAiB,GAAG,IAAIC,OAAO,CAAC,CAAqB;AAC3D,IAAIC,oBAAkD,GAAGA,CAAA,MAAO,CAAC,CAAC,CAAC;AAEnE,SAASC,qBAAqBA,CAACC,MAAoC,EAAE;EACnEF,oBAAoB,GAAGE,MAAM;AAC/B;AAEA,SAASC,qBAAqBA,CAC5BC,MAAmB,EACnBC,MAAmB,EACnBC,MAAmB,EACnBC,OAA0B,EAC1BC,aAAuC,EACvC;EAAA,IAFAD,OAA0B;IAA1BA,OAA0B,GAAG,CAAC,CAAC;EAAA;EAG/B,IAAIC,aAAa,YAAbA,aAAa,CAAEC,aAAa,EAAE;IAChC;EACF;EAEA,MAAMC,aAAa,GAAG;IACpBC,OAAO,EAAE,cAAuB;IAChCC,OAAO,EAAER;EACX,CAAC;EAED,MAAMS,KAAK,GAAGpB,aAAa,CACzBY,MAAM,EACNV,wBAAwB,CAACW,MAAM,CAAC,EAChCI,aACF,CAAC;EAED,IAAIG,KAAK,EAAE;IACT,MAAMC,OAAO,GAAG,IAAIpB,OAAO,CAAC;MAC1BqB,IAAI,EAAER,OAAO,CAACS,OAAO,KAAK,MAAM,GAAGZ,MAAM,GAAGa,SAAS;MACrDC,MAAM,EAAEC,KAAK,CAACC,OAAO,CAACP,KAAK,CAAC,GAAGA,KAAK,GAAG,CAACA,KAAK,CAAC;MAC9C,GAAGb,oBAAoB,CAAC;IAC1B,CAAC,CAAC;IACF,MAAMqB,OAAO,GAAGA,CAAA,KAAM;MACpBP,OAAO,CAACQ,OAAO,CAAC,CAAC;IACnB,CAAC;IAED,MAAMC,UAAU,GAAG;MAAEnB,MAAM;MAAEC,MAAM;MAAEgB;IAAQ,CAAC;IAE9CzB,eAAe,CAACE,iBAAiB,EAAEM,MAAM,EAAEmB,UAAU,CAAC;IACtD3B,eAAe,CAACE,iBAAiB,EAAEO,MAAM,EAAEkB,UAAU,CAAC;IAEtDT,OAAO,CAACU,KAAK,CAAC,CAAC;EACjB;AACF;AAEA,SAASC,wBAAwBA,CAACb,OAAoB,EAAE;EACtDf,2BAA2B,CAACC,iBAAiB,EAAEc,OAAO,CAAC;AACzD;AAEA,eAAe;EACbc,GAAG,EAAEvB,qBAAqB;EAC1BwB,MAAM,EAAEF,wBAAwB;EAChCxB;AACF,CAAC","ignoreList":[]}
|
|
@@ -79,24 +79,25 @@ function getObserver(options, isSafeMode) {
|
|
|
79
79
|
observers[key] = observer;
|
|
80
80
|
return observer;
|
|
81
81
|
}
|
|
82
|
-
function addViewEnterHandler(source, target, effect, options,
|
|
82
|
+
function addViewEnterHandler(source, target, effect, options, globalOptions) {
|
|
83
83
|
if (options === void 0) {
|
|
84
84
|
options = {};
|
|
85
85
|
}
|
|
86
|
-
if (reducedMotion === void 0) {
|
|
87
|
-
reducedMotion = false;
|
|
88
|
-
}
|
|
89
86
|
const observer = getObserver({
|
|
90
87
|
...viewEnterOptions,
|
|
91
88
|
...options
|
|
92
89
|
});
|
|
93
|
-
const animation = getAnimation(target, effectToAnimationOptions(effect), undefined, reducedMotion);
|
|
90
|
+
const animation = getAnimation(target, effectToAnimationOptions(effect), undefined, globalOptions == null ? void 0 : globalOptions.reducedMotion);
|
|
94
91
|
if (animation != null && animation.isCSS && options.type === 'once') {
|
|
95
92
|
animation.onFinish(() => {
|
|
96
93
|
target.dataset.motionEnter = 'done';
|
|
97
94
|
});
|
|
98
95
|
}
|
|
96
|
+
const {
|
|
97
|
+
selectorCondition
|
|
98
|
+
} = globalOptions || {};
|
|
99
99
|
const handler = () => {
|
|
100
|
+
if (selectorCondition && !target.matches(selectorCondition)) return;
|
|
100
101
|
animation.play(() => {
|
|
101
102
|
if (!animation.isCSS) {
|
|
102
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","
|
|
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":[]}
|
|
@@ -6,11 +6,8 @@ let scrollOptionsGetter = () => ({});
|
|
|
6
6
|
function registerOptionsGetter(getter) {
|
|
7
7
|
scrollOptionsGetter = getter;
|
|
8
8
|
}
|
|
9
|
-
function addViewProgressHandler(source, target, effect, __,
|
|
10
|
-
if (
|
|
11
|
-
reducedMotion = false;
|
|
12
|
-
}
|
|
13
|
-
if (reducedMotion) {
|
|
9
|
+
function addViewProgressHandler(source, target, effect, __, globalOptions) {
|
|
10
|
+
if (globalOptions != null && globalOptions.reducedMotion) {
|
|
14
11
|
return;
|
|
15
12
|
}
|
|
16
13
|
const triggerParams = {
|
|
@@ -18,11 +15,24 @@ function addViewProgressHandler(source, target, effect, __, reducedMotion) {
|
|
|
18
15
|
element: source
|
|
19
16
|
};
|
|
20
17
|
const effectOptions = effectToAnimationOptions(effect);
|
|
18
|
+
let cleanup;
|
|
21
19
|
if ('ViewTimeline' in window) {
|
|
22
20
|
// Use ViewTimeline for modern browsers
|
|
23
21
|
const animationGroup = getWebAnimation(target, effectOptions, triggerParams);
|
|
24
22
|
if (animationGroup) {
|
|
25
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);
|
|
26
36
|
}
|
|
27
37
|
} else {
|
|
28
38
|
const scene = getScrubScene(target, effectOptions, triggerParams);
|
|
@@ -37,21 +47,22 @@ function addViewProgressHandler(source, target, effect, __, reducedMotion) {
|
|
|
37
47
|
root: document.body,
|
|
38
48
|
...scrollOptionsGetter()
|
|
39
49
|
});
|
|
40
|
-
|
|
50
|
+
cleanup = () => {
|
|
41
51
|
scroll.destroy();
|
|
42
52
|
};
|
|
43
|
-
const handlerObj = {
|
|
44
|
-
source,
|
|
45
|
-
target,
|
|
46
|
-
cleanup
|
|
47
|
-
};
|
|
48
|
-
addHandlerToMap(scrollManagerMap, source, handlerObj);
|
|
49
|
-
addHandlerToMap(scrollManagerMap, target, handlerObj);
|
|
50
53
|
Promise.all(scenes.map(s => s.ready || Promise.resolve())).then(() => {
|
|
51
54
|
scroll.start();
|
|
52
55
|
});
|
|
53
56
|
}
|
|
54
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);
|
|
55
66
|
}
|
|
56
67
|
function removeViewProgressHandler(element) {
|
|
57
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","__","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\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};\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
|
|
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":[]}
|
package/dist/esm/utils.js
CHANGED
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
import { getEasing } from '@wix/motion';
|
|
2
|
+
/**
|
|
3
|
+
* Applies a selector condition predicate to a base selector.
|
|
4
|
+
* - If `&` is in the predicate, replace `&` with the base selector
|
|
5
|
+
* - If no `&`, assume `&<predicate>` (append predicate to base selector)
|
|
6
|
+
*/
|
|
7
|
+
function applySelectorCondition(baseSelector, predicate) {
|
|
8
|
+
if (predicate.includes('&')) {
|
|
9
|
+
return predicate.replace(/&/g, baseSelector);
|
|
10
|
+
}
|
|
11
|
+
return `${baseSelector}${predicate}`;
|
|
12
|
+
}
|
|
2
13
|
export function generateId() {
|
|
3
14
|
return 'wi-12343210'.replace(/\d/g, c => String.fromCharCode((+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4) + 97) // 97 for "a"
|
|
4
15
|
);
|
|
@@ -10,7 +21,8 @@ export function createTransitionCSS(_ref) {
|
|
|
10
21
|
effectId,
|
|
11
22
|
transition,
|
|
12
23
|
properties,
|
|
13
|
-
childSelector = '> :first-child'
|
|
24
|
+
childSelector = '> :first-child',
|
|
25
|
+
selectorCondition
|
|
14
26
|
} = _ref;
|
|
15
27
|
let transitions = [];
|
|
16
28
|
if (transition != null && transition.styleProperties) {
|
|
@@ -35,13 +47,21 @@ export function createTransitionCSS(_ref) {
|
|
|
35
47
|
}
|
|
36
48
|
const styleProperties = ((_properties2 = properties) == null ? void 0 : _properties2.map(property => `${property.name}: ${property.value};`)) || [];
|
|
37
49
|
const escapedKey = key.replace(/"/g, "'");
|
|
38
|
-
|
|
39
|
-
|
|
50
|
+
|
|
51
|
+
// Build selectors, applying condition if present
|
|
52
|
+
const stateSelector = `:is(:state(${effectId}), :--${effectId}) ${childSelector}`;
|
|
53
|
+
const dataAttrSelector = `[data-interact-effect~="${effectId}"] ${childSelector}`;
|
|
54
|
+
const finalStateSelector = selectorCondition ? applySelectorCondition(stateSelector, selectorCondition) : stateSelector;
|
|
55
|
+
const finalDataAttrSelector = selectorCondition ? applySelectorCondition(dataAttrSelector, selectorCondition) : dataAttrSelector;
|
|
56
|
+
const result = [`${finalStateSelector},
|
|
57
|
+
${finalDataAttrSelector} {
|
|
40
58
|
${styleProperties.join(`
|
|
41
59
|
`)}
|
|
42
60
|
}`];
|
|
43
61
|
if (transitions.length) {
|
|
44
|
-
|
|
62
|
+
const transitionSelector = `[data-interact-key="${escapedKey}"] ${childSelector}`;
|
|
63
|
+
const finalTransitionSelector = selectorCondition ? applySelectorCondition(transitionSelector, selectorCondition) : transitionSelector;
|
|
64
|
+
result.push(`@media (prefers-reduced-motion: no-preference) { ${finalTransitionSelector} {
|
|
45
65
|
transition: ${transitions.join(', ')};
|
|
46
66
|
} }`);
|
|
47
67
|
}
|
|
@@ -60,4 +80,13 @@ export function getMediaQuery(conditionNames, conditions) {
|
|
|
60
80
|
return mql;
|
|
61
81
|
}
|
|
62
82
|
}
|
|
83
|
+
export function getSelectorCondition(conditionNames, conditions) {
|
|
84
|
+
for (const name of conditionNames || []) {
|
|
85
|
+
const condition = conditions[name];
|
|
86
|
+
if ((condition == null ? void 0 : condition.type) === 'selector' && condition.predicate) {
|
|
87
|
+
return condition.predicate;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
63
92
|
//# sourceMappingURL=utils.js.map
|
package/dist/esm/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getEasing","
|
|
1
|
+
{"version":3,"names":["getEasing","applySelectorCondition","baseSelector","predicate","includes","replace","generateId","c","String","fromCharCode","crypto","getRandomValues","Uint8Array","createTransitionCSS","_ref","_properties2","key","effectId","transition","properties","childSelector","selectorCondition","transitions","styleProperties","duration","easing","delay","hasCustomPropertiesTransition","some","styleProperty","name","startsWith","map","_properties","filter","property","value","escapedKey","stateSelector","dataAttrSelector","finalStateSelector","finalDataAttrSelector","result","join","length","transitionSelector","finalTransitionSelector","push","getMediaQuery","conditionNames","conditions","conditionContent","conditionName","_conditions$condition","type","condition","mql","window","matchMedia","getSelectorCondition"],"sources":["../../src/utils.ts"],"sourcesContent":["import { getEasing } from '@wix/motion';\nimport type { Condition, CreateTransitionCSSParams } from './types';\n\n/**\n * Applies a selector condition predicate to a base selector.\n * - If `&` is in the predicate, replace `&` with the base selector\n * - If no `&`, assume `&<predicate>` (append predicate to base selector)\n */\nfunction applySelectorCondition(\n baseSelector: string,\n predicate: string,\n): string {\n if (predicate.includes('&')) {\n return predicate.replace(/&/g, baseSelector);\n }\n return `${baseSelector}${predicate}`;\n}\n\nexport function generateId() {\n return 'wi-12343210'.replace(\n /\\d/g,\n (c) =>\n String.fromCharCode(\n (+c ^\n (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))) +\n 97,\n ), // 97 for \"a\"\n );\n}\n\nexport function createTransitionCSS({\n key,\n effectId,\n transition,\n properties,\n childSelector = '> :first-child',\n selectorCondition,\n}: CreateTransitionCSSParams): string[] {\n let transitions: string[] = [];\n\n if (transition?.styleProperties) {\n const { duration, easing, delay } = transition;\n\n if (duration) {\n const hasCustomPropertiesTransition = transition.styleProperties.some(\n (styleProperty) => styleProperty.name.startsWith('--'),\n );\n\n if (hasCustomPropertiesTransition) {\n // If there are custom properties in the transition, we need to fall back to Viewer's legacy implementation\n transitions = [\n `all ${duration}ms ${getEasing(easing || 'ease')}${\n delay ? ` ${delay}ms` : ''\n }`,\n 'visibility 0s',\n ];\n } else {\n transitions = transition.styleProperties.map(\n (styleProperty) =>\n `${styleProperty.name} ${duration}ms ${getEasing(\n easing || 'ease',\n )}${delay ? ` ${delay}ms` : ''}`,\n );\n }\n }\n\n properties = transition.styleProperties;\n } else {\n transitions =\n properties\n ?.filter((property) => property.duration)\n .map(\n (property) =>\n `${property.name} ${property.duration}ms ${\n getEasing(property.easing) || 'ease'\n }${property.delay ? ` ${property.delay}ms` : ''}`,\n ) || [];\n }\n\n const styleProperties =\n properties?.map((property) => `${property.name}: ${property.value};`) || [];\n const escapedKey = key.replace(/\"/g, \"'\");\n\n // Build selectors, applying condition if present\n const stateSelector = `:is(:state(${effectId}), :--${effectId}) ${childSelector}`;\n const dataAttrSelector = `[data-interact-effect~=\"${effectId}\"] ${childSelector}`;\n\n const finalStateSelector = selectorCondition\n ? applySelectorCondition(stateSelector, selectorCondition)\n : stateSelector;\n const finalDataAttrSelector = selectorCondition\n ? applySelectorCondition(dataAttrSelector, selectorCondition)\n : dataAttrSelector;\n\n const result = [\n `${finalStateSelector},\n ${finalDataAttrSelector} {\n ${styleProperties.join(`\n `)}\n }`,\n ];\n\n if (transitions.length) {\n const transitionSelector = `[data-interact-key=\"${escapedKey}\"] ${childSelector}`;\n const finalTransitionSelector = selectorCondition\n ? applySelectorCondition(transitionSelector, selectorCondition)\n : transitionSelector;\n result.push(`@media (prefers-reduced-motion: no-preference) { ${finalTransitionSelector} {\n transition: ${transitions.join(', ')};\n } }`);\n }\n return result;\n}\n\nexport function getMediaQuery(\n conditionNames: string[] | undefined,\n conditions: Record<string, Condition>,\n) {\n const conditionContent = (conditionNames || [])\n .filter((conditionName) => {\n return (\n conditions[conditionName]?.type === 'media' &&\n conditions[conditionName].predicate\n );\n })\n .map((conditionName) => {\n return conditions[conditionName].predicate;\n })\n .join(') and (');\n\n const condition = conditionContent && `(${conditionContent})`;\n const mql = condition && window.matchMedia(condition);\n\n if (mql) {\n return mql;\n }\n}\n\nexport function getSelectorCondition(\n conditionNames: string[] | undefined,\n conditions: Record<string, Condition>,\n): string | undefined {\n for (const name of conditionNames || []) {\n const condition = conditions[name];\n if (condition?.type === 'selector' && condition.predicate) {\n return condition.predicate;\n }\n }\n return;\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,6 +11,7 @@ export declare class Interact {
|
|
|
11
11
|
};
|
|
12
12
|
elements: Set<IInteractElement>;
|
|
13
13
|
static forceReducedMotion: boolean;
|
|
14
|
+
static allowA11yTriggers: boolean;
|
|
14
15
|
static instances: Interact[];
|
|
15
16
|
static elementCache: Map<string, IInteractElement>;
|
|
16
17
|
constructor();
|
|
@@ -27,6 +28,7 @@ export declare class Interact {
|
|
|
27
28
|
scrollOptionsGetter?: () => Partial<scrollConfig>;
|
|
28
29
|
pointerOptionsGetter?: () => Partial<PointerConfig>;
|
|
29
30
|
viewEnter?: Partial<ViewEnterParams>;
|
|
31
|
+
allowA11yTriggers?: boolean;
|
|
30
32
|
}): void;
|
|
31
33
|
static getInstance(key: string): Interact | undefined;
|
|
32
34
|
static getElement(key: string | undefined): IInteractElement | undefined;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { AnimationEndParams, TimeEffect } from '../types';
|
|
2
|
-
declare function addAnimationEndHandler(source: HTMLElement, target: HTMLElement, effect: TimeEffect, __: AnimationEndParams,
|
|
1
|
+
import type { AnimationEndParams, TimeEffect, InteractionGlobalOptions } from '../types';
|
|
2
|
+
declare function addAnimationEndHandler(source: HTMLElement, target: HTMLElement, effect: TimeEffect, __: AnimationEndParams, globalOptions?: InteractionGlobalOptions): void;
|
|
3
3
|
declare function removeAnimationEndHandler(element: HTMLElement): void;
|
|
4
4
|
declare const _default: {
|
|
5
5
|
add: typeof addAnimationEndHandler;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { TimeEffect, TransitionEffect, StateParams, PointerTriggerParams, EffectBase } from '../types';
|
|
2
|
-
declare function addClickHandler(source: HTMLElement, target: HTMLElement, effect: (TimeEffect | TransitionEffect) & EffectBase, options?: StateParams | PointerTriggerParams,
|
|
1
|
+
import type { TimeEffect, TransitionEffect, StateParams, PointerTriggerParams, EffectBase, InteractionGlobalOptions } from '../types';
|
|
2
|
+
declare function addClickHandler(source: HTMLElement, target: HTMLElement, effect: (TimeEffect | TransitionEffect) & EffectBase, options?: StateParams | PointerTriggerParams, globalOptions?: InteractionGlobalOptions): void;
|
|
3
3
|
declare function removeClickHandler(element: HTMLElement): void;
|
|
4
4
|
declare const _default: {
|
|
5
5
|
add: typeof addClickHandler;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { TimeEffect, TransitionEffect, StateParams, PointerTriggerParams, EffectBase } from '../types';
|
|
2
|
-
declare function addHoverHandler(source: HTMLElement, target: HTMLElement, effect: (TransitionEffect | TimeEffect) & EffectBase, options
|
|
1
|
+
import type { TimeEffect, TransitionEffect, StateParams, PointerTriggerParams, EffectBase, InteractionGlobalOptions } from '../types';
|
|
2
|
+
declare function addHoverHandler(source: HTMLElement, target: HTMLElement, effect: (TransitionEffect | TimeEffect) & EffectBase, options: StateParams | PointerTriggerParams | undefined, globalOptions: InteractionGlobalOptions): void;
|
|
3
3
|
declare function removeHoverHandler(element: HTMLElement): void;
|
|
4
4
|
declare const _default: {
|
|
5
5
|
add: typeof addHoverHandler;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { PointerMoveParams, ScrubEffect } from '../types';
|
|
1
|
+
import type { PointerMoveParams, ScrubEffect, InteractionGlobalOptions } from '../types';
|
|
2
2
|
declare function registerOptionsGetter(getter: () => Partial<PointerConfig>): void;
|
|
3
|
-
declare function addPointerMoveHandler(source: HTMLElement, target: HTMLElement, effect: ScrubEffect, options
|
|
3
|
+
declare function addPointerMoveHandler(source: HTMLElement, target: HTMLElement, effect: ScrubEffect, options: PointerMoveParams | undefined, globalOptions: InteractionGlobalOptions): void;
|
|
4
4
|
declare function removePointerMoveHandler(element: HTMLElement): void;
|
|
5
5
|
declare const _default: {
|
|
6
6
|
add: typeof addPointerMoveHandler;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { TimeEffect, ViewEnterParams } from '../types';
|
|
1
|
+
import type { TimeEffect, ViewEnterParams, InteractionGlobalOptions } from '../types';
|
|
2
2
|
declare function setOptions(options: Partial<ViewEnterParams>): void;
|
|
3
|
-
declare function addViewEnterHandler(source: HTMLElement, target: HTMLElement, effect: TimeEffect, options?: ViewEnterParams,
|
|
3
|
+
declare function addViewEnterHandler(source: HTMLElement, target: HTMLElement, effect: TimeEffect, options?: ViewEnterParams, globalOptions?: InteractionGlobalOptions): void;
|
|
4
4
|
declare function removeViewEnterHandler(element: HTMLElement): void;
|
|
5
5
|
declare const _default: {
|
|
6
6
|
add: typeof addViewEnterHandler;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { ViewEnterParams, ScrubEffect } from '../types';
|
|
1
|
+
import type { ViewEnterParams, ScrubEffect, InteractionGlobalOptions } from '../types';
|
|
2
2
|
declare function registerOptionsGetter(getter: () => scrollConfig): void;
|
|
3
|
-
declare function addViewProgressHandler(source: HTMLElement, target: HTMLElement, effect: ScrubEffect, __: ViewEnterParams,
|
|
3
|
+
declare function addViewProgressHandler(source: HTMLElement, target: HTMLElement, effect: ScrubEffect, __: ViewEnterParams, globalOptions?: InteractionGlobalOptions): void;
|
|
4
4
|
declare function removeViewProgressHandler(element: HTMLElement): void;
|
|
5
5
|
declare const _default: {
|
|
6
6
|
add: typeof addViewProgressHandler;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ declare global {
|
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
|
-
export type TriggerType = 'hover' | 'click' | 'viewEnter' | 'pageVisible' | 'animationEnd' | 'viewProgress' | 'pointerMove';
|
|
12
|
+
export type TriggerType = 'hover' | 'click' | 'viewEnter' | 'pageVisible' | 'animationEnd' | 'viewProgress' | 'pointerMove' | 'activate' | 'interest';
|
|
13
13
|
export type ViewEnterType = 'once' | 'repeat' | 'alternate';
|
|
14
14
|
export type TransitionMethod = 'add' | 'remove' | 'toggle' | 'clear';
|
|
15
15
|
export type StateParams = {
|
|
@@ -97,7 +97,7 @@ export type EffectRef = EffectBase & {
|
|
|
97
97
|
};
|
|
98
98
|
export type Effect = EffectBase & (TimeEffect | ScrubEffect | TransitionEffect);
|
|
99
99
|
export type Condition = {
|
|
100
|
-
type: 'media' | 'container';
|
|
100
|
+
type: 'media' | 'container' | 'selector';
|
|
101
101
|
predicate?: string;
|
|
102
102
|
};
|
|
103
103
|
export type InteractionTrigger = {
|
|
@@ -143,10 +143,17 @@ export type InteractionParamsTypes = {
|
|
|
143
143
|
animationEnd: AnimationEndParams;
|
|
144
144
|
viewProgress: ViewEnterParams;
|
|
145
145
|
pointerMove: PointerMoveParams;
|
|
146
|
+
activate: StateParams | PointerTriggerParams;
|
|
147
|
+
interest: StateParams | PointerTriggerParams;
|
|
148
|
+
};
|
|
149
|
+
export type InteractionGlobalOptions = {
|
|
150
|
+
reducedMotion?: boolean;
|
|
151
|
+
allowA11yTriggers?: boolean;
|
|
152
|
+
selectorCondition?: string;
|
|
146
153
|
};
|
|
147
154
|
export type InteractionHandlerModule<T extends TriggerType> = {
|
|
148
155
|
registerOptionsGetter?: (getter: () => any) => void;
|
|
149
|
-
add: (source: HTMLElement, target: HTMLElement, effect: Effect, options: InteractionParamsTypes[T],
|
|
156
|
+
add: (source: HTMLElement, target: HTMLElement, effect: Effect, options: InteractionParamsTypes[T], globalOptions?: InteractionGlobalOptions) => void;
|
|
150
157
|
remove: (element: HTMLElement) => void;
|
|
151
158
|
};
|
|
152
159
|
export type ViewEnterHandlerModule = InteractionHandlerModule<'viewEnter'> & {
|
|
@@ -186,5 +193,6 @@ export type CreateTransitionCSSParams = {
|
|
|
186
193
|
transition?: TransitionEffect['transition'];
|
|
187
194
|
properties?: TransitionProperty[];
|
|
188
195
|
childSelector?: string;
|
|
196
|
+
selectorCondition?: string;
|
|
189
197
|
};
|
|
190
198
|
export {};
|
package/dist/types/utils.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Condition, CreateTransitionCSSParams } from './types';
|
|
2
2
|
export declare function generateId(): string;
|
|
3
|
-
export declare function createTransitionCSS({ key, effectId, transition, properties, childSelector, }: CreateTransitionCSSParams): string[];
|
|
3
|
+
export declare function createTransitionCSS({ key, effectId, transition, properties, childSelector, selectorCondition, }: CreateTransitionCSSParams): string[];
|
|
4
4
|
export declare function getMediaQuery(conditionNames: string[] | undefined, conditions: Record<string, Condition>): MediaQueryList | undefined;
|
|
5
|
+
export declare function getSelectorCondition(conditionNames: string[] | undefined, conditions: Record<string, Condition>): string | undefined;
|