@wix/interact 1.91.0 → 1.92.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/__tests__/interact.spec.js +130 -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 +4 -1
- package/dist/cjs/core/add.js.map +1 -1
- package/dist/cjs/handlers/animationEnd.js +2 -2
- package/dist/cjs/handlers/animationEnd.js.map +1 -1
- package/dist/cjs/handlers/click.js +29 -7
- package/dist/cjs/handlers/click.js.map +1 -1
- package/dist/cjs/handlers/hover.js +33 -8
- 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 +2 -2
- package/dist/cjs/handlers/viewEnter.js.map +1 -1
- package/dist/cjs/handlers/viewProgress.js +2 -2
- package/dist/cjs/handlers/viewProgress.js.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/__tests__/interact.spec.js +130 -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 +4 -1
- package/dist/esm/core/add.js.map +1 -1
- package/dist/esm/handlers/animationEnd.js +2 -5
- package/dist/esm/handlers/animationEnd.js.map +1 -1
- package/dist/esm/handlers/click.js +29 -13
- package/dist/esm/handlers/click.js.map +1 -1
- package/dist/esm/handlers/hover.js +33 -14
- 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 +2 -5
- package/dist/esm/handlers/viewEnter.js.map +1 -1
- package/dist/esm/handlers/viewProgress.js +2 -5
- package/dist/esm/handlers/viewProgress.js.map +1 -1
- package/dist/esm/types.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 +8 -2
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_motion","require","_kuliso","_utilities","pointerManagerMap","WeakMap","pointerOptionsGetter","registerOptionsGetter","getter","addPointerMoveHandler","source","target","effect","options","reducedMotion","triggerParams","trigger","element","scene","getScrubScene","effectToAnimationOptions","pointer","Pointer","root","hitArea","undefined","scenes","Array","isArray","cleanup","destroy","handlerObj","addHandlerToMap","start","removePointerMoveHandler","removeElementFromHandlerMap","_default","exports","default","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":["_motion","require","_kuliso","_utilities","pointerManagerMap","WeakMap","pointerOptionsGetter","registerOptionsGetter","getter","addPointerMoveHandler","source","target","effect","options","globalOptions","reducedMotion","triggerParams","trigger","element","scene","getScrubScene","effectToAnimationOptions","pointer","Pointer","root","hitArea","undefined","scenes","Array","isArray","cleanup","destroy","handlerObj","addHandlerToMap","start","removePointerMoveHandler","removeElementFromHandlerMap","_default","exports","default","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,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAOA,IAAAE,UAAA,GAAAF,OAAA;AAMA,MAAMG,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,GAAG,CAAC,CAAC,EAC/BC,aAAuC,EACvC;EACA,IAAIA,aAAa,YAAbA,aAAa,CAAEC,aAAa,EAAE;IAChC;EACF;EAEA,MAAMC,aAAa,GAAG;IACpBC,OAAO,EAAE,cAAuB;IAChCC,OAAO,EAAER;EACX,CAAC;EAED,MAAMS,KAAK,GAAG,IAAAC,qBAAa,EACzBT,MAAM,EACN,IAAAU,mCAAwB,EAACT,MAAM,CAAC,EAChCI,aACF,CAAC;EAED,IAAIG,KAAK,EAAE;IACT,MAAMG,OAAO,GAAG,IAAIC,eAAO,CAAC;MAC1BC,IAAI,EAAEX,OAAO,CAACY,OAAO,KAAK,MAAM,GAAGf,MAAM,GAAGgB,SAAS;MACrDC,MAAM,EAAEC,KAAK,CAACC,OAAO,CAACV,KAAK,CAAC,GAAGA,KAAK,GAAG,CAACA,KAAK,CAAC;MAC9C,GAAGb,oBAAoB,CAAC;IAC1B,CAAC,CAAC;IACF,MAAMwB,OAAO,GAAGA,CAAA,KAAM;MACpBR,OAAO,CAACS,OAAO,CAAC,CAAC;IACnB,CAAC;IAED,MAAMC,UAAU,GAAG;MAAEtB,MAAM;MAAEC,MAAM;MAAEmB;IAAQ,CAAC;IAE9C,IAAAG,0BAAe,EAAC7B,iBAAiB,EAAEM,MAAM,EAAEsB,UAAU,CAAC;IACtD,IAAAC,0BAAe,EAAC7B,iBAAiB,EAAEO,MAAM,EAAEqB,UAAU,CAAC;IAEtDV,OAAO,CAACY,KAAK,CAAC,CAAC;EACjB;AACF;AAEA,SAASC,wBAAwBA,CAACjB,OAAoB,EAAE;EACtD,IAAAkB,sCAA2B,EAAChC,iBAAiB,EAAEc,OAAO,CAAC;AACzD;AAAC,IAAAmB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc;EACbC,GAAG,EAAE/B,qBAAqB;EAC1BgC,MAAM,EAAEN,wBAAwB;EAChC5B;AACF,CAAC","ignoreList":[]}
|
|
@@ -80,12 +80,12 @@ function getObserver(options, isSafeMode = false) {
|
|
|
80
80
|
observers[key] = observer;
|
|
81
81
|
return observer;
|
|
82
82
|
}
|
|
83
|
-
function addViewEnterHandler(source, target, effect, options = {},
|
|
83
|
+
function addViewEnterHandler(source, target, effect, options = {}, globalOptions) {
|
|
84
84
|
const observer = getObserver({
|
|
85
85
|
...viewEnterOptions,
|
|
86
86
|
...options
|
|
87
87
|
});
|
|
88
|
-
const animation = (0, _motion.getAnimation)(target, (0, _utilities.effectToAnimationOptions)(effect), undefined, reducedMotion);
|
|
88
|
+
const animation = (0, _motion.getAnimation)(target, (0, _utilities.effectToAnimationOptions)(effect), undefined, globalOptions == null ? void 0 : globalOptions.reducedMotion);
|
|
89
89
|
if (animation != null && animation.isCSS && options.type === 'once') {
|
|
90
90
|
animation.onFinish(() => {
|
|
91
91
|
target.dataset.motionEnter = 'done';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_motion","require","_utilities","_fastdom","_interopRequireDefault","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","fastdom","measure","_entry$rootBounds","sourceHeight","boundingClientRect","height","rootHeight","rootBounds","Array","isArray","Math","min","needsSafeObserver","mutate","unobserve","safeObserver","set","observe","handlers","get","source","handler","type","delete","addViewEnterHandler","effect","
|
|
1
|
+
{"version":3,"names":["_motion","require","_utilities","_fastdom","_interopRequireDefault","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","fastdom","measure","_entry$rootBounds","sourceHeight","boundingClientRect","height","rootHeight","rootBounds","Array","isArray","Math","min","needsSafeObserver","mutate","unobserve","safeObserver","set","observe","handlers","get","source","handler","type","delete","addViewEnterHandler","effect","globalOptions","animation","getAnimation","effectToAnimationOptions","undefined","reducedMotion","isCSS","onFinish","dataset","motionEnter","play","cleanup","currentObserver","cancel","handlerObj","addHandlerToMap","removeViewEnterHandler","element","removeElementFromHandlerMap","_default","exports","default","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\n const handler = () => {\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":[]}
|
|
@@ -10,8 +10,8 @@ let scrollOptionsGetter = () => ({});
|
|
|
10
10
|
function registerOptionsGetter(getter) {
|
|
11
11
|
scrollOptionsGetter = getter;
|
|
12
12
|
}
|
|
13
|
-
function addViewProgressHandler(source, target, effect, __,
|
|
14
|
-
if (reducedMotion) {
|
|
13
|
+
function addViewProgressHandler(source, target, effect, __, globalOptions) {
|
|
14
|
+
if (globalOptions != null && globalOptions.reducedMotion) {
|
|
15
15
|
return;
|
|
16
16
|
}
|
|
17
17
|
const triggerParams = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_motion","require","_fizban","_utilities","scrollManagerMap","WeakMap","scrollOptionsGetter","registerOptionsGetter","getter","addViewProgressHandler","source","target","effect","__","reducedMotion","triggerParams","trigger","element","effectOptions","effectToAnimationOptions","window","animationGroup","getWebAnimation","play","scene","getScrubScene","scenes","Array","isArray","scroll","Scroll","viewSource","observeViewportEntry","observeViewportResize","observeSourcesResize","root","document","body","cleanup","destroy","handlerObj","addHandlerToMap","Promise","all","map","s","ready","resolve","then","start","removeViewProgressHandler","removeElementFromHandlerMap","_default","exports","default","add","remove"],"sources":["../../../src/handlers/viewProgress.ts"],"sourcesContent":["import type { ScrubScrollScene } from '@wix/motion';\nimport { getWebAnimation, getScrubScene } from '@wix/motion';\nimport { Scroll, scrollConfig } from 'fizban';\nimport type {
|
|
1
|
+
{"version":3,"names":["_motion","require","_fizban","_utilities","scrollManagerMap","WeakMap","scrollOptionsGetter","registerOptionsGetter","getter","addViewProgressHandler","source","target","effect","__","globalOptions","reducedMotion","triggerParams","trigger","element","effectOptions","effectToAnimationOptions","window","animationGroup","getWebAnimation","play","scene","getScrubScene","scenes","Array","isArray","scroll","Scroll","viewSource","observeViewportEntry","observeViewportResize","observeSourcesResize","root","document","body","cleanup","destroy","handlerObj","addHandlerToMap","Promise","all","map","s","ready","resolve","then","start","removeViewProgressHandler","removeElementFromHandlerMap","_default","exports","default","add","remove"],"sources":["../../../src/handlers/viewProgress.ts"],"sourcesContent":["import type { 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\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 as any).play();\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 const cleanup = () => {\n scroll.destroy();\n };\n\n const handlerObj = { source, target, cleanup };\n\n addHandlerToMap(scrollManagerMap, source, handlerObj);\n addHandlerToMap(scrollManagerMap, target, handlerObj);\n\n Promise.all(\n (scenes as ScrubScrollScene[]).map((s) => s.ready || Promise.resolve()),\n ).then(() => {\n scroll.start();\n });\n }\n }\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":";;;;AACA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAOA,IAAAE,UAAA,GAAAF,OAAA;AAMA,MAAMG,gBAAgB,GAAG,IAAIC,OAAO,CAAC,CAAqB;AAC1D,IAAIC,mBAAgD,GAAGA,CAAA,MAAO,CAAC,CAAC,CAAC;AAEjE,SAASC,qBAAqBA,CAACC,MAA0B,EAAE;EACzDF,mBAAmB,GAAGE,MAAM;AAC9B;AAEA,SAASC,sBAAsBA,CAC7BC,MAAmB,EACnBC,MAAmB,EACnBC,MAAmB,EACnBC,EAAmB,EACnBC,aAAwC,EAClC;EACN,IAAIA,aAAa,YAAbA,aAAa,CAAEC,aAAa,EAAE;IAChC;EACF;EAEA,MAAMC,aAAa,GAAG;IACpBC,OAAO,EAAE,eAAwB;IACjCC,OAAO,EAAER;EACX,CAAC;EAED,MAAMS,aAAa,GAAG,IAAAC,mCAAwB,EAACR,MAAM,CAAC;EAEtD,IAAI,cAAc,IAAIS,MAAM,EAAE;IAC5B;IACA,MAAMC,cAAc,GAAG,IAAAC,uBAAe,EACpCZ,MAAM,EACNQ,aAAa,EACbH,aACF,CAAC;IAED,IAAIM,cAAc,EAAE;MACjBA,cAAc,CAASE,IAAI,CAAC,CAAC;IAChC;EACF,CAAC,MAAM;IACL,MAAMC,KAAK,GAAG,IAAAC,qBAAa,EAACf,MAAM,EAAEQ,aAAa,EAAEH,aAAa,CAAC;IAEjE,IAAIS,KAAK,EAAE;MACT,MAAME,MAAM,GAAGC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAAC,GAAGA,KAAK,GAAG,CAACA,KAAK,CAAC;MACrD,MAAMK,MAAM,GAAG,IAAIC,cAAM,CAAC;QACxBC,UAAU,EAAEtB,MAAM;QAClBiB,MAAM;QACNM,oBAAoB,EAAE,KAAK;QAC3BC,qBAAqB,EAAE,KAAK;QAC5BC,oBAAoB,EAAE,IAAI;QAC1BC,IAAI,EAAEC,QAAQ,CAACC,IAAI;QACnB,GAAGhC,mBAAmB,CAAC;MACzB,CAAC,CAAC;MAEF,MAAMiC,OAAO,GAAGA,CAAA,KAAM;QACpBT,MAAM,CAACU,OAAO,CAAC,CAAC;MAClB,CAAC;MAED,MAAMC,UAAU,GAAG;QAAE/B,MAAM;QAAEC,MAAM;QAAE4B;MAAQ,CAAC;MAE9C,IAAAG,0BAAe,EAACtC,gBAAgB,EAAEM,MAAM,EAAE+B,UAAU,CAAC;MACrD,IAAAC,0BAAe,EAACtC,gBAAgB,EAAEO,MAAM,EAAE8B,UAAU,CAAC;MAErDE,OAAO,CAACC,GAAG,CACRjB,MAAM,CAAwBkB,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACC,KAAK,IAAIJ,OAAO,CAACK,OAAO,CAAC,CAAC,CACxE,CAAC,CAACC,IAAI,CAAC,MAAM;QACXnB,MAAM,CAACoB,KAAK,CAAC,CAAC;MAChB,CAAC,CAAC;IACJ;EACF;AACF;AAEA,SAASC,yBAAyBA,CAACjC,OAAoB,EAAQ;EAC7D,IAAAkC,sCAA2B,EAAChD,gBAAgB,EAAEc,OAAO,CAAC;AACxD;AAAC,IAAAmC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc;EACbC,GAAG,EAAE/C,sBAAsB;EAC3BgD,MAAM,EAAEN,yBAAyB;EACjC5C;AACF,CAAC","ignoreList":[]}
|
package/dist/cjs/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';\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":[]}
|
|
@@ -403,8 +403,9 @@ describe('interact', () => {
|
|
|
403
403
|
jest.clearAllMocks();
|
|
404
404
|
// Clear Interact instances to ensure test isolation
|
|
405
405
|
Interact.destroy();
|
|
406
|
-
// Reset
|
|
406
|
+
// Reset static flags to default
|
|
407
407
|
Interact.forceReducedMotion = false;
|
|
408
|
+
Interact.allowA11yTriggers = false;
|
|
408
409
|
});
|
|
409
410
|
describe('init Interact instance', () => {
|
|
410
411
|
it('should initialize with valid config', () => {
|
|
@@ -1804,5 +1805,133 @@ describe('interact', () => {
|
|
|
1804
1805
|
expect(spy).toHaveBeenCalledWith(pointerOptionsGetter);
|
|
1805
1806
|
});
|
|
1806
1807
|
});
|
|
1808
|
+
describe('a11y - accessible triggers', () => {
|
|
1809
|
+
let a11yElement;
|
|
1810
|
+
function getA11yConfig(trigger, key) {
|
|
1811
|
+
return {
|
|
1812
|
+
interactions: [{
|
|
1813
|
+
trigger,
|
|
1814
|
+
key,
|
|
1815
|
+
effects: [{
|
|
1816
|
+
effectId: 'test-effect'
|
|
1817
|
+
}]
|
|
1818
|
+
}],
|
|
1819
|
+
effects: {
|
|
1820
|
+
'test-effect': {
|
|
1821
|
+
namedEffect: {
|
|
1822
|
+
type: 'BounceIn',
|
|
1823
|
+
power: 'medium'
|
|
1824
|
+
},
|
|
1825
|
+
duration: 500
|
|
1826
|
+
}
|
|
1827
|
+
}
|
|
1828
|
+
};
|
|
1829
|
+
}
|
|
1830
|
+
afterEach(() => {
|
|
1831
|
+
Interact.destroy();
|
|
1832
|
+
});
|
|
1833
|
+
describe('activate trigger', () => {
|
|
1834
|
+
it('should add both click and keydown listeners', () => {
|
|
1835
|
+
Interact.create(getA11yConfig('activate', 'activate-div'));
|
|
1836
|
+
a11yElement = document.createElement('interact-element');
|
|
1837
|
+
const div = document.createElement('div');
|
|
1838
|
+
a11yElement.append(div);
|
|
1839
|
+
const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
|
|
1840
|
+
add(a11yElement, 'activate-div');
|
|
1841
|
+
expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
|
|
1842
|
+
expect(addEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function), expect.any(Object));
|
|
1843
|
+
});
|
|
1844
|
+
it('should not double-invoke handler when Enter triggers both keydown and click', () => {
|
|
1845
|
+
const {
|
|
1846
|
+
getWebAnimation
|
|
1847
|
+
} = require('@wix/motion');
|
|
1848
|
+
const mockPlay = getWebAnimation().play;
|
|
1849
|
+
mockPlay.mockClear();
|
|
1850
|
+
Interact.create(getA11yConfig('activate', 'activate-handler-test'));
|
|
1851
|
+
a11yElement = document.createElement('interact-element');
|
|
1852
|
+
const button = document.createElement('button');
|
|
1853
|
+
a11yElement.append(button);
|
|
1854
|
+
add(a11yElement, 'activate-handler-test');
|
|
1855
|
+
|
|
1856
|
+
// Simulate browser behavior: Enter key triggers keydown AND synthesized click with no pointerType
|
|
1857
|
+
button.dispatchEvent(new KeyboardEvent('keydown', {
|
|
1858
|
+
code: 'Enter',
|
|
1859
|
+
bubbles: true
|
|
1860
|
+
}));
|
|
1861
|
+
button.dispatchEvent(new MouseEvent('click', {
|
|
1862
|
+
bubbles: true
|
|
1863
|
+
}));
|
|
1864
|
+
expect(mockPlay).toHaveBeenCalledTimes(1);
|
|
1865
|
+
});
|
|
1866
|
+
});
|
|
1867
|
+
describe('interest trigger', () => {
|
|
1868
|
+
it('should add focusin listener alongside mouseenter', () => {
|
|
1869
|
+
Interact.create(getA11yConfig('interest', 'interest-test'));
|
|
1870
|
+
a11yElement = document.createElement('interact-element');
|
|
1871
|
+
const div = document.createElement('div');
|
|
1872
|
+
a11yElement.append(div);
|
|
1873
|
+
const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
|
|
1874
|
+
add(a11yElement, 'interest-test');
|
|
1875
|
+
expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
|
|
1876
|
+
expect(addEventListenerSpy).toHaveBeenCalledWith('focusin', expect.any(Function), expect.any(Object));
|
|
1877
|
+
});
|
|
1878
|
+
});
|
|
1879
|
+
describe('click trigger with allowA11yTriggers flag', () => {
|
|
1880
|
+
it('should NOT add keydown listener when flag is false', () => {
|
|
1881
|
+
Interact.create(getA11yConfig('click', 'click-no-flag'));
|
|
1882
|
+
Interact.setup({
|
|
1883
|
+
allowA11yTriggers: false
|
|
1884
|
+
});
|
|
1885
|
+
a11yElement = document.createElement('interact-element');
|
|
1886
|
+
const div = document.createElement('div');
|
|
1887
|
+
a11yElement.append(div);
|
|
1888
|
+
const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
|
|
1889
|
+
add(a11yElement, 'click-no-flag');
|
|
1890
|
+
expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
|
|
1891
|
+
expect(addEventListenerSpy).not.toHaveBeenCalledWith('keydown', expect.any(Function), expect.any(Object));
|
|
1892
|
+
});
|
|
1893
|
+
it('should add keydown listener when flag is true', () => {
|
|
1894
|
+
Interact.setup({
|
|
1895
|
+
allowA11yTriggers: true
|
|
1896
|
+
});
|
|
1897
|
+
Interact.create(getA11yConfig('click', 'click-with-flag'));
|
|
1898
|
+
a11yElement = document.createElement('interact-element');
|
|
1899
|
+
const div = document.createElement('div');
|
|
1900
|
+
a11yElement.append(div);
|
|
1901
|
+
const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
|
|
1902
|
+
add(a11yElement, 'click-with-flag');
|
|
1903
|
+
expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
|
|
1904
|
+
expect(addEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function), expect.any(Object));
|
|
1905
|
+
});
|
|
1906
|
+
});
|
|
1907
|
+
describe('hover trigger with allowA11yTriggers flag', () => {
|
|
1908
|
+
it('should NOT add focusin listener when flag is false', () => {
|
|
1909
|
+
Interact.setup({
|
|
1910
|
+
allowA11yTriggers: false
|
|
1911
|
+
});
|
|
1912
|
+
Interact.create(getA11yConfig('hover', 'hover-no-flag'));
|
|
1913
|
+
a11yElement = document.createElement('interact-element');
|
|
1914
|
+
const div = document.createElement('div');
|
|
1915
|
+
a11yElement.append(div);
|
|
1916
|
+
const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
|
|
1917
|
+
add(a11yElement, 'hover-no-flag');
|
|
1918
|
+
expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
|
|
1919
|
+
expect(addEventListenerSpy).not.toHaveBeenCalledWith('focusin', expect.any(Function), expect.any(Object));
|
|
1920
|
+
});
|
|
1921
|
+
it('should add focusin listener when flag is true', () => {
|
|
1922
|
+
Interact.setup({
|
|
1923
|
+
allowA11yTriggers: true
|
|
1924
|
+
});
|
|
1925
|
+
Interact.create(getA11yConfig('hover', 'hover-with-flag'));
|
|
1926
|
+
a11yElement = document.createElement('interact-element');
|
|
1927
|
+
const div = document.createElement('div');
|
|
1928
|
+
a11yElement.append(div);
|
|
1929
|
+
const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
|
|
1930
|
+
add(a11yElement, 'hover-with-flag');
|
|
1931
|
+
expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
|
|
1932
|
+
expect(addEventListenerSpy).toHaveBeenCalledWith('focusin', expect.any(Function), expect.any(Object));
|
|
1933
|
+
});
|
|
1934
|
+
});
|
|
1935
|
+
});
|
|
1807
1936
|
});
|
|
1808
1937
|
//# sourceMappingURL=interact.spec.js.map
|