@wix/interact 1.85.0 → 1.89.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/README.md +7 -7
- package/dist/cjs/{WixInteractElement.js → InteractElement.js} +14 -14
- package/dist/cjs/InteractElement.js.map +1 -0
- package/dist/cjs/__tests__/interact.spec.js +81 -55
- package/dist/cjs/__tests__/interact.spec.js.map +1 -1
- package/dist/cjs/__tests__/viewEnter.spec.js +207 -0
- package/dist/cjs/__tests__/viewEnter.spec.js.map +1 -0
- package/dist/cjs/core/Interact.js +19 -7
- package/dist/cjs/core/Interact.js.map +1 -1
- package/dist/cjs/core/add.js +3 -3
- package/dist/cjs/core/add.js.map +1 -1
- package/dist/cjs/handlers/click.js +3 -3
- package/dist/cjs/handlers/click.js.map +1 -1
- package/dist/cjs/handlers/hover.js +4 -4
- package/dist/cjs/handlers/hover.js.map +1 -1
- package/dist/cjs/handlers/pointerMove.js +8 -2
- package/dist/cjs/handlers/pointerMove.js.map +1 -1
- package/dist/cjs/handlers/utilities.js +0 -2
- package/dist/cjs/handlers/utilities.js.map +1 -1
- package/dist/cjs/handlers/viewEnter.js +63 -11
- package/dist/cjs/handlers/viewEnter.js.map +1 -1
- package/dist/cjs/handlers/viewProgress.js +9 -3
- package/dist/cjs/handlers/viewProgress.js.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/utils.js +2 -2
- package/dist/cjs/utils.js.map +1 -1
- package/dist/esm/{WixInteractElement.js → InteractElement.js} +12 -12
- package/dist/esm/InteractElement.js.map +1 -0
- package/dist/esm/__tests__/interact.spec.js +80 -55
- package/dist/esm/__tests__/interact.spec.js.map +1 -1
- package/dist/esm/__tests__/viewEnter.spec.js +210 -0
- package/dist/esm/__tests__/viewEnter.spec.js.map +1 -0
- package/dist/esm/core/Interact.js +19 -7
- package/dist/esm/core/Interact.js.map +1 -1
- package/dist/esm/core/add.js +3 -3
- package/dist/esm/core/add.js.map +1 -1
- package/dist/esm/handlers/click.js +3 -3
- package/dist/esm/handlers/click.js.map +1 -1
- package/dist/esm/handlers/hover.js +4 -4
- package/dist/esm/handlers/hover.js.map +1 -1
- package/dist/esm/handlers/pointerMove.js +8 -2
- package/dist/esm/handlers/pointerMove.js.map +1 -1
- package/dist/esm/handlers/utilities.js +0 -2
- package/dist/esm/handlers/utilities.js.map +1 -1
- package/dist/esm/handlers/viewEnter.js +65 -11
- package/dist/esm/handlers/viewEnter.js.map +1 -1
- package/dist/esm/handlers/viewProgress.js +9 -3
- package/dist/esm/handlers/viewProgress.js.map +1 -1
- package/dist/esm/types.js.map +1 -1
- package/dist/esm/utils.js +2 -2
- package/dist/esm/utils.js.map +1 -1
- package/dist/types/{WixInteractElement.d.ts → InteractElement.d.ts} +2 -2
- package/dist/types/__tests__/viewEnter.spec.d.ts +0 -0
- package/dist/types/core/Interact.d.ts +11 -6
- package/dist/types/core/add.d.ts +3 -3
- package/dist/types/handlers/pointerMove.d.ts +2 -0
- package/dist/types/handlers/viewEnter.d.ts +2 -0
- package/dist/types/handlers/viewProgress.d.ts +2 -0
- package/dist/types/types.d.ts +8 -3
- package/package.json +7 -6
- package/dist/cjs/WixInteractElement.js.map +0 -1
- package/dist/esm/WixInteractElement.js.map +0 -1
|
@@ -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","
|
|
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":[]}
|
|
@@ -2,6 +2,10 @@ import { getScrubScene } from '@wix/motion';
|
|
|
2
2
|
import { Pointer } from 'kuliso';
|
|
3
3
|
import { effectToAnimationOptions, addHandlerToMap, removeElementFromHandlerMap } from './utilities';
|
|
4
4
|
const pointerManagerMap = new WeakMap();
|
|
5
|
+
let pointerOptionsGetter = () => ({});
|
|
6
|
+
function registerOptionsGetter(getter) {
|
|
7
|
+
pointerOptionsGetter = getter;
|
|
8
|
+
}
|
|
5
9
|
function addPointerMoveHandler(source, target, effect, options, reducedMotion) {
|
|
6
10
|
if (options === void 0) {
|
|
7
11
|
options = {};
|
|
@@ -20,7 +24,8 @@ function addPointerMoveHandler(source, target, effect, options, reducedMotion) {
|
|
|
20
24
|
if (scene) {
|
|
21
25
|
const pointer = new Pointer({
|
|
22
26
|
root: options.hitArea === 'root' ? document.documentElement : source,
|
|
23
|
-
scenes: Array.isArray(scene) ? scene : [scene]
|
|
27
|
+
scenes: Array.isArray(scene) ? scene : [scene],
|
|
28
|
+
...pointerOptionsGetter()
|
|
24
29
|
});
|
|
25
30
|
const cleanup = () => {
|
|
26
31
|
pointer.destroy();
|
|
@@ -40,6 +45,7 @@ function removePointerMoveHandler(element) {
|
|
|
40
45
|
}
|
|
41
46
|
export default {
|
|
42
47
|
add: addPointerMoveHandler,
|
|
43
|
-
remove: removePointerMoveHandler
|
|
48
|
+
remove: removePointerMoveHandler,
|
|
49
|
+
registerOptionsGetter
|
|
44
50
|
};
|
|
45
51
|
//# sourceMappingURL=pointerMove.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getScrubScene","Pointer","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","pointerManagerMap","WeakMap","addPointerMoveHandler","source","target","effect","options","reducedMotion","triggerParams","trigger","element","scene","pointer","root","hitArea","document","documentElement","scenes","Array","isArray","cleanup","destroy","handlerObj","start","removePointerMoveHandler","add","remove"],"sources":["../../../src/handlers/pointerMove.ts"],"sourcesContent":["import { getScrubScene } from '@wix/motion';\nimport { Pointer } 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;\n\nfunction addPointerMoveHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: ScrubEffect,\n options: PointerMoveParams = {},\n reducedMotion: boolean = false,\n) {\n if (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 === 'root' ? document.documentElement : source,\n scenes: Array.isArray(scene) ? scene : [scene],\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};\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,aAAa;AAC3C,SAASC,OAAO,
|
|
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","document","documentElement","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 reducedMotion: boolean = false,\n) {\n if (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 === 'root' ? document.documentElement : source,\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;AAM/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,aAAsB,EACtB;EAAA,IAFAD,OAA0B;IAA1BA,OAA0B,GAAG,CAAC,CAAC;EAAA;EAAA,IAC/BC,aAAsB;IAAtBA,aAAsB,GAAG,KAAK;EAAA;EAE9B,IAAIA,aAAa,EAAE;IACjB;EACF;EAEA,MAAMC,aAAa,GAAG;IACpBC,OAAO,EAAE,cAAuB;IAChCC,OAAO,EAAEP;EACX,CAAC;EAED,MAAMQ,KAAK,GAAGnB,aAAa,CACzBY,MAAM,EACNV,wBAAwB,CAACW,MAAM,CAAC,EAChCG,aACF,CAAC;EAED,IAAIG,KAAK,EAAE;IACT,MAAMC,OAAO,GAAG,IAAInB,OAAO,CAAC;MAC1BoB,IAAI,EAAEP,OAAO,CAACQ,OAAO,KAAK,MAAM,GAAGC,QAAQ,CAACC,eAAe,GAAGb,MAAM;MACpEc,MAAM,EAAEC,KAAK,CAACC,OAAO,CAACR,KAAK,CAAC,GAAGA,KAAK,GAAG,CAACA,KAAK,CAAC;MAC9C,GAAGZ,oBAAoB,CAAC;IAC1B,CAAC,CAAC;IACF,MAAMqB,OAAO,GAAGA,CAAA,KAAM;MACpBR,OAAO,CAACS,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;IAEtDV,OAAO,CAACW,KAAK,CAAC,CAAC;EACjB;AACF;AAEA,SAASC,wBAAwBA,CAACd,OAAoB,EAAE;EACtDd,2BAA2B,CAACC,iBAAiB,EAAEa,OAAO,CAAC;AACzD;AAEA,eAAe;EACbe,GAAG,EAAEvB,qBAAqB;EAC1BwB,MAAM,EAAEF,wBAAwB;EAChCxB;AACF,CAAC","ignoreList":[]}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export function effectToAnimationOptions(effect) {
|
|
2
2
|
if (effect.duration) {
|
|
3
3
|
return {
|
|
4
|
-
type: 'TimeAnimationOptions',
|
|
5
4
|
id: '',
|
|
6
5
|
...effect
|
|
7
6
|
};
|
|
@@ -12,7 +11,6 @@ export function effectToAnimationOptions(effect) {
|
|
|
12
11
|
...rest
|
|
13
12
|
} = effect;
|
|
14
13
|
return {
|
|
15
|
-
type: 'ScrubAnimationOptions',
|
|
16
14
|
id: '',
|
|
17
15
|
startOffset: rangeStart,
|
|
18
16
|
endOffset: rangeEnd,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["effectToAnimationOptions","effect","duration","
|
|
1
|
+
{"version":3,"names":["effectToAnimationOptions","effect","duration","id","rangeStart","rangeEnd","rest","startOffset","endOffset","addHandlerToMap","handlersMap","element","handlerObj","handlers","get","Set","set","add","removeElementFromHandlerMap","handlerMap","forEach","source","target","cleanup","otherKey","otherHandlers","delete"],"sources":["../../../src/handlers/utilities.ts"],"sourcesContent":["import type {\n TimeEffect,\n ScrubEffect,\n HandlerObject,\n HandlerObjectMap,\n AnimationOptions,\n} from '../types';\n\nexport function effectToAnimationOptions(effect: TimeEffect | ScrubEffect) {\n if ((effect as TimeEffect).duration) {\n return {\n id: '',\n ...effect,\n } as AnimationOptions<'time'>;\n }\n\n const { rangeStart, rangeEnd, ...rest } = effect as ScrubEffect;\n return {\n id: '',\n startOffset: rangeStart,\n endOffset: rangeEnd,\n ...rest,\n } as AnimationOptions<'scrub'>;\n}\n\nexport function addHandlerToMap(\n handlersMap: HandlerObjectMap,\n element: HTMLElement,\n handlerObj: HandlerObject,\n) {\n let handlers = handlersMap.get(element);\n\n if (!handlers) {\n handlers = new Set();\n handlersMap.set(element, handlers);\n }\n\n handlers.add(handlerObj);\n}\n\nexport function removeElementFromHandlerMap(\n handlerMap: HandlerObjectMap,\n element: HTMLElement,\n) {\n const handlers = handlerMap.get(element);\n\n handlers?.forEach((handlerObj) => {\n const { source, target, cleanup } = handlerObj;\n cleanup();\n\n const otherKey = source === element ? target : source;\n const otherHandlers = handlerMap.get(otherKey);\n otherHandlers?.delete(handlerObj);\n });\n\n handlerMap.delete(element);\n}\n"],"mappings":"AAQA,OAAO,SAASA,wBAAwBA,CAACC,MAAgC,EAAE;EACzE,IAAKA,MAAM,CAAgBC,QAAQ,EAAE;IACnC,OAAO;MACLC,EAAE,EAAE,EAAE;MACN,GAAGF;IACL,CAAC;EACH;EAEA,MAAM;IAAEG,UAAU;IAAEC,QAAQ;IAAE,GAAGC;EAAK,CAAC,GAAGL,MAAqB;EAC/D,OAAO;IACLE,EAAE,EAAE,EAAE;IACNI,WAAW,EAAEH,UAAU;IACvBI,SAAS,EAAEH,QAAQ;IACnB,GAAGC;EACL,CAAC;AACH;AAEA,OAAO,SAASG,eAAeA,CAC7BC,WAA6B,EAC7BC,OAAoB,EACpBC,UAAyB,EACzB;EACA,IAAIC,QAAQ,GAAGH,WAAW,CAACI,GAAG,CAACH,OAAO,CAAC;EAEvC,IAAI,CAACE,QAAQ,EAAE;IACbA,QAAQ,GAAG,IAAIE,GAAG,CAAC,CAAC;IACpBL,WAAW,CAACM,GAAG,CAACL,OAAO,EAAEE,QAAQ,CAAC;EACpC;EAEAA,QAAQ,CAACI,GAAG,CAACL,UAAU,CAAC;AAC1B;AAEA,OAAO,SAASM,2BAA2BA,CACzCC,UAA4B,EAC5BR,OAAoB,EACpB;EACA,MAAME,QAAQ,GAAGM,UAAU,CAACL,GAAG,CAACH,OAAO,CAAC;EAExCE,QAAQ,YAARA,QAAQ,CAAEO,OAAO,CAAER,UAAU,IAAK;IAChC,MAAM;MAAES,MAAM;MAAEC,MAAM;MAAEC;IAAQ,CAAC,GAAGX,UAAU;IAC9CW,OAAO,CAAC,CAAC;IAET,MAAMC,QAAQ,GAAGH,MAAM,KAAKV,OAAO,GAAGW,MAAM,GAAGD,MAAM;IACrD,MAAMI,aAAa,GAAGN,UAAU,CAACL,GAAG,CAACU,QAAQ,CAAC;IAC9CC,aAAa,YAAbA,aAAa,CAAEC,MAAM,CAACd,UAAU,CAAC;EACnC,CAAC,CAAC;EAEFO,UAAU,CAACO,MAAM,CAACf,OAAO,CAAC;AAC5B","ignoreList":[]}
|
|
@@ -1,16 +1,65 @@
|
|
|
1
1
|
import { getAnimation } from '@wix/motion';
|
|
2
2
|
import { effectToAnimationOptions, addHandlerToMap, removeElementFromHandlerMap } from './utilities';
|
|
3
|
+
import fastdom from 'fastdom';
|
|
4
|
+
const SAFE_OBSERVER_CONFIG = {
|
|
5
|
+
root: null,
|
|
6
|
+
rootMargin: '0px 0px -10% 0px',
|
|
7
|
+
threshold: [0]
|
|
8
|
+
};
|
|
3
9
|
const observers = {};
|
|
4
10
|
const handlerMap = new WeakMap();
|
|
5
|
-
|
|
6
|
-
|
|
11
|
+
const elementFirstRun = new WeakSet();
|
|
12
|
+
const elementObserverMap = new WeakMap();
|
|
13
|
+
let viewEnterOptions = {};
|
|
14
|
+
function setOptions(options) {
|
|
15
|
+
viewEnterOptions = options;
|
|
16
|
+
}
|
|
17
|
+
function getObserver(options, isSafeMode) {
|
|
18
|
+
if (isSafeMode === void 0) {
|
|
19
|
+
isSafeMode = false;
|
|
20
|
+
}
|
|
21
|
+
const key = JSON.stringify({
|
|
22
|
+
...options,
|
|
23
|
+
isSafeMode
|
|
24
|
+
});
|
|
7
25
|
if (observers[key]) {
|
|
8
26
|
return observers[key];
|
|
9
27
|
}
|
|
28
|
+
const config = isSafeMode ? SAFE_OBSERVER_CONFIG : {
|
|
29
|
+
root: null,
|
|
30
|
+
rootMargin: options.inset ? `${options.inset} 0px ${options.inset}` : '0px',
|
|
31
|
+
threshold: options.threshold
|
|
32
|
+
};
|
|
10
33
|
const observer = new IntersectionObserver(entries => {
|
|
11
34
|
entries.forEach(entry => {
|
|
35
|
+
const target = entry.target;
|
|
36
|
+
const isFirstRun = !elementFirstRun.has(target);
|
|
37
|
+
if (isFirstRun) {
|
|
38
|
+
elementFirstRun.add(target);
|
|
39
|
+
if (options.useSafeViewEnter && !entry.isIntersecting) {
|
|
40
|
+
fastdom.measure(() => {
|
|
41
|
+
var _entry$rootBounds;
|
|
42
|
+
const sourceHeight = entry.boundingClientRect.height;
|
|
43
|
+
const rootHeight = (_entry$rootBounds = entry.rootBounds) == null ? void 0 : _entry$rootBounds.height;
|
|
44
|
+
if (!rootHeight) {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
const threshold = Array.isArray(options.threshold) ? Math.min(...options.threshold) : options.threshold;
|
|
48
|
+
const needsSafeObserver = threshold && sourceHeight * threshold > rootHeight;
|
|
49
|
+
if (needsSafeObserver) {
|
|
50
|
+
fastdom.mutate(() => {
|
|
51
|
+
observer.unobserve(target);
|
|
52
|
+
const safeObserver = getObserver(options, true);
|
|
53
|
+
elementObserverMap.set(target, safeObserver);
|
|
54
|
+
safeObserver.observe(target);
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
12
61
|
if (entry.isIntersecting) {
|
|
13
|
-
const handlers = handlerMap.get(
|
|
62
|
+
const handlers = handlerMap.get(target);
|
|
14
63
|
handlers == null || handlers.forEach(_ref => {
|
|
15
64
|
let {
|
|
16
65
|
source,
|
|
@@ -22,14 +71,11 @@ function getObserver(options) {
|
|
|
22
71
|
});
|
|
23
72
|
if (options.type === 'once') {
|
|
24
73
|
observer.unobserve(entry.target);
|
|
74
|
+
elementFirstRun.delete(target);
|
|
25
75
|
}
|
|
26
76
|
}
|
|
27
77
|
});
|
|
28
|
-
},
|
|
29
|
-
root: null,
|
|
30
|
-
rootMargin: options.inset ? `${options.inset} 0px ${options.inset}` : '0px',
|
|
31
|
-
threshold: options.threshold
|
|
32
|
-
});
|
|
78
|
+
}, config);
|
|
33
79
|
observers[key] = observer;
|
|
34
80
|
return observer;
|
|
35
81
|
}
|
|
@@ -40,7 +86,10 @@ function addViewEnterHandler(source, target, effect, options, reducedMotion) {
|
|
|
40
86
|
if (reducedMotion === void 0) {
|
|
41
87
|
reducedMotion = false;
|
|
42
88
|
}
|
|
43
|
-
const observer = getObserver(
|
|
89
|
+
const observer = getObserver({
|
|
90
|
+
...viewEnterOptions,
|
|
91
|
+
...options
|
|
92
|
+
});
|
|
44
93
|
const animation = getAnimation(target, effectToAnimationOptions(effect), undefined, reducedMotion);
|
|
45
94
|
if (animation != null && animation.isCSS && options.type === 'once') {
|
|
46
95
|
animation.onFinish(() => {
|
|
@@ -55,8 +104,11 @@ function addViewEnterHandler(source, target, effect, options, reducedMotion) {
|
|
|
55
104
|
});
|
|
56
105
|
};
|
|
57
106
|
const cleanup = () => {
|
|
58
|
-
|
|
107
|
+
const currentObserver = elementObserverMap.get(source) || observer;
|
|
108
|
+
currentObserver.unobserve(source);
|
|
59
109
|
animation.cancel();
|
|
110
|
+
elementFirstRun.delete(source);
|
|
111
|
+
elementObserverMap.delete(source);
|
|
60
112
|
};
|
|
61
113
|
const handlerObj = {
|
|
62
114
|
source,
|
|
@@ -66,6 +118,7 @@ function addViewEnterHandler(source, target, effect, options, reducedMotion) {
|
|
|
66
118
|
};
|
|
67
119
|
addHandlerToMap(handlerMap, source, handlerObj);
|
|
68
120
|
addHandlerToMap(handlerMap, target, handlerObj);
|
|
121
|
+
elementObserverMap.set(source, observer);
|
|
69
122
|
observer.observe(source);
|
|
70
123
|
}
|
|
71
124
|
function removeViewEnterHandler(element) {
|
|
@@ -73,6 +126,7 @@ function removeViewEnterHandler(element) {
|
|
|
73
126
|
}
|
|
74
127
|
export default {
|
|
75
128
|
add: addViewEnterHandler,
|
|
76
|
-
remove: removeViewEnterHandler
|
|
129
|
+
remove: removeViewEnterHandler,
|
|
130
|
+
setOptions
|
|
77
131
|
};
|
|
78
132
|
//# sourceMappingURL=viewEnter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getAnimation","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","observers","handlerMap","WeakMap","
|
|
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","reducedMotion","animation","undefined","isCSS","onFinish","dataset","motionEnter","play","cleanup","currentObserver","cancel","handlerObj","removeViewEnterHandler","element","remove"],"sources":["../../../src/handlers/viewEnter.ts"],"sourcesContent":["import type { AnimationGroup } from '@wix/motion';\nimport { getAnimation } from '@wix/motion';\nimport type { TimeEffect, HandlerObjectMap, ViewEnterParams } 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 reducedMotion: boolean = false,\n) {\n const observer = getObserver({ ...viewEnterOptions, ...options });\n const animation = getAnimation(\n target,\n effectToAnimationOptions(effect),\n undefined,\n 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":[]}
|
|
@@ -2,6 +2,10 @@ import { getWebAnimation, getScrubScene } from '@wix/motion';
|
|
|
2
2
|
import { Scroll } from 'fizban';
|
|
3
3
|
import { effectToAnimationOptions, addHandlerToMap, removeElementFromHandlerMap } from './utilities';
|
|
4
4
|
const scrollManagerMap = new WeakMap();
|
|
5
|
+
let scrollOptionsGetter = () => ({});
|
|
6
|
+
function registerOptionsGetter(getter) {
|
|
7
|
+
scrollOptionsGetter = getter;
|
|
8
|
+
}
|
|
5
9
|
function addViewProgressHandler(source, target, effect, __, reducedMotion) {
|
|
6
10
|
if (reducedMotion === void 0) {
|
|
7
11
|
reducedMotion = false;
|
|
@@ -29,8 +33,9 @@ function addViewProgressHandler(source, target, effect, __, reducedMotion) {
|
|
|
29
33
|
scenes,
|
|
30
34
|
observeViewportEntry: false,
|
|
31
35
|
observeViewportResize: false,
|
|
32
|
-
observeSourcesResize:
|
|
33
|
-
root: document.
|
|
36
|
+
observeSourcesResize: true,
|
|
37
|
+
root: document.body,
|
|
38
|
+
...scrollOptionsGetter()
|
|
34
39
|
});
|
|
35
40
|
const cleanup = () => {
|
|
36
41
|
scroll.destroy();
|
|
@@ -53,6 +58,7 @@ function removeViewProgressHandler(element) {
|
|
|
53
58
|
}
|
|
54
59
|
export default {
|
|
55
60
|
add: addViewProgressHandler,
|
|
56
|
-
remove: removeViewProgressHandler
|
|
61
|
+
remove: removeViewProgressHandler,
|
|
62
|
+
registerOptionsGetter
|
|
57
63
|
};
|
|
58
64
|
//# sourceMappingURL=viewProgress.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getWebAnimation","getScrubScene","Scroll","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","scrollManagerMap","WeakMap","addViewProgressHandler","source","target","effect","__","reducedMotion","triggerParams","trigger","element","effectOptions","window","animationGroup","play","scene","scenes","Array","isArray","scroll","viewSource","observeViewportEntry","observeViewportResize","observeSourcesResize","root","document","
|
|
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","cleanup","destroy","handlerObj","Promise","all","map","s","ready","resolve","then","start","removeViewProgressHandler","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 { ViewEnterParams, ScrubEffect, HandlerObjectMap } 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 reducedMotion: boolean = false,\n): void {\n if (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,SAASA,eAAe,EAAEC,aAAa,QAAQ,aAAa;AAC5D,SAASC,MAAM,QAAsB,QAAQ;AAE7C,SACEC,wBAAwB,EACxBC,eAAe,EACfC,2BAA2B,QACtB,aAAa;AAEpB,MAAMC,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,aAAsB,EAChB;EAAA,IADNA,aAAsB;IAAtBA,aAAsB,GAAG,KAAK;EAAA;EAE9B,IAAIA,aAAa,EAAE;IACjB;EACF;EAEA,MAAMC,aAAa,GAAG;IACpBC,OAAO,EAAE,eAAwB;IACjCC,OAAO,EAAEP;EACX,CAAC;EAED,MAAMQ,aAAa,GAAGjB,wBAAwB,CAACW,MAAM,CAAC;EAEtD,IAAI,cAAc,IAAIO,MAAM,EAAE;IAC5B;IACA,MAAMC,cAAc,GAAGtB,eAAe,CACpCa,MAAM,EACNO,aAAa,EACbH,aACF,CAAC;IAED,IAAIK,cAAc,EAAE;MACjBA,cAAc,CAASC,IAAI,CAAC,CAAC;IAChC;EACF,CAAC,MAAM;IACL,MAAMC,KAAK,GAAGvB,aAAa,CAACY,MAAM,EAAEO,aAAa,EAAEH,aAAa,CAAC;IAEjE,IAAIO,KAAK,EAAE;MACT,MAAMC,MAAM,GAAGC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,GAAGA,KAAK,GAAG,CAACA,KAAK,CAAC;MACrD,MAAMI,MAAM,GAAG,IAAI1B,MAAM,CAAC;QACxB2B,UAAU,EAAEjB,MAAM;QAClBa,MAAM;QACNK,oBAAoB,EAAE,KAAK;QAC3BC,qBAAqB,EAAE,KAAK;QAC5BC,oBAAoB,EAAE,IAAI;QAC1BC,IAAI,EAAEC,QAAQ,CAACC,IAAI;QACnB,GAAG3B,mBAAmB,CAAC;MACzB,CAAC,CAAC;MAEF,MAAM4B,OAAO,GAAGA,CAAA,KAAM;QACpBR,MAAM,CAACS,OAAO,CAAC,CAAC;MAClB,CAAC;MAED,MAAMC,UAAU,GAAG;QAAE1B,MAAM;QAAEC,MAAM;QAAEuB;MAAQ,CAAC;MAE9ChC,eAAe,CAACE,gBAAgB,EAAEM,MAAM,EAAE0B,UAAU,CAAC;MACrDlC,eAAe,CAACE,gBAAgB,EAAEO,MAAM,EAAEyB,UAAU,CAAC;MAErDC,OAAO,CAACC,GAAG,CACRf,MAAM,CAAwBgB,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACC,KAAK,IAAIJ,OAAO,CAACK,OAAO,CAAC,CAAC,CACxE,CAAC,CAACC,IAAI,CAAC,MAAM;QACXjB,MAAM,CAACkB,KAAK,CAAC,CAAC;MAChB,CAAC,CAAC;IACJ;EACF;AACF;AAEA,SAASC,yBAAyBA,CAAC5B,OAAoB,EAAQ;EAC7Dd,2BAA2B,CAACC,gBAAgB,EAAEa,OAAO,CAAC;AACxD;AAEA,eAAe;EACb6B,GAAG,EAAErC,sBAAsB;EAC3BsC,MAAM,EAAEF,yBAAyB;EACjCtC;AACF,CAAC","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 '
|
|
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 reducedMotion?: boolean,\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":[]}
|
package/dist/esm/utils.js
CHANGED
|
@@ -36,12 +36,12 @@ export function createTransitionCSS(_ref) {
|
|
|
36
36
|
const styleProperties = ((_properties2 = properties) == null ? void 0 : _properties2.map(property => `${property.name}: ${property.value};`)) || [];
|
|
37
37
|
const escapedKey = key.replace(/"/g, "'");
|
|
38
38
|
const result = [`:is(:state(${effectId}), :--${effectId}) ${childSelector},
|
|
39
|
-
[data-
|
|
39
|
+
[data-interact-effect~="${effectId}"] ${childSelector} {
|
|
40
40
|
${styleProperties.join(`
|
|
41
41
|
`)}
|
|
42
42
|
}`];
|
|
43
43
|
if (transitions.length) {
|
|
44
|
-
result.push(`@media (prefers-reduced-motion: no-preference) { [data-
|
|
44
|
+
result.push(`@media (prefers-reduced-motion: no-preference) { [data-interact-key="${escapedKey}"] ${childSelector} {
|
|
45
45
|
transition: ${transitions.join(', ')};
|
|
46
46
|
} }`);
|
|
47
47
|
}
|
package/dist/esm/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getEasing","generateId","replace","c","String","fromCharCode","crypto","getRandomValues","Uint8Array","createTransitionCSS","_ref","_properties2","key","effectId","transition","properties","childSelector","transitions","styleProperties","duration","easing","delay","hasCustomPropertiesTransition","some","styleProperty","name","startsWith","map","_properties","filter","property","value","escapedKey","result","join","length","push","getMediaQuery","conditionNames","conditions","conditionContent","conditionName","_conditions$condition","type","predicate","condition","mql","window","matchMedia"],"sources":["../../src/utils.ts"],"sourcesContent":["import { getEasing } from '@wix/motion';\nimport type { Condition, CreateTransitionCSSParams } from './types';\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}: 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 const result = [\n `:is(:state(${effectId}), :--${effectId}) ${childSelector},\n [data-
|
|
1
|
+
{"version":3,"names":["getEasing","generateId","replace","c","String","fromCharCode","crypto","getRandomValues","Uint8Array","createTransitionCSS","_ref","_properties2","key","effectId","transition","properties","childSelector","transitions","styleProperties","duration","easing","delay","hasCustomPropertiesTransition","some","styleProperty","name","startsWith","map","_properties","filter","property","value","escapedKey","result","join","length","push","getMediaQuery","conditionNames","conditions","conditionContent","conditionName","_conditions$condition","type","predicate","condition","mql","window","matchMedia"],"sources":["../../src/utils.ts"],"sourcesContent":["import { getEasing } from '@wix/motion';\nimport type { Condition, CreateTransitionCSSParams } from './types';\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}: 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 const result = [\n `:is(:state(${effectId}), :--${effectId}) ${childSelector},\n [data-interact-effect~=\"${effectId}\"] ${childSelector} {\n ${styleProperties.join(`\n `)}\n }`,\n ];\n\n if (transitions.length) {\n result.push(`@media (prefers-reduced-motion: no-preference) { [data-interact-key=\"${escapedKey}\"] ${childSelector} {\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"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { StateParams } from './types';
|
|
2
|
-
export declare const
|
|
3
|
-
export declare function
|
|
2
|
+
export declare const INTERACT_EFFECT_DATA_ATTR = "interactEffect";
|
|
3
|
+
export declare function getInteractElement(): {
|
|
4
4
|
new (): {
|
|
5
5
|
_internals: (ElementInternals & {
|
|
6
6
|
states: Set<string>;
|
|
File without changes
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { InteractCache,
|
|
1
|
+
import { InteractCache, IInteractElement, InteractConfig, Effect, Interaction, ViewEnterParams } from '../types';
|
|
2
2
|
export declare class Interact {
|
|
3
3
|
dataCache: InteractCache;
|
|
4
4
|
addedInteractions: {
|
|
@@ -9,23 +9,28 @@ export declare class Interact {
|
|
|
9
9
|
[interactionId: string]: boolean;
|
|
10
10
|
};
|
|
11
11
|
};
|
|
12
|
-
elements: Set<
|
|
12
|
+
elements: Set<IInteractElement>;
|
|
13
13
|
static forceReducedMotion: boolean;
|
|
14
14
|
static instances: Interact[];
|
|
15
|
-
static elementCache: Map<string,
|
|
15
|
+
static elementCache: Map<string, IInteractElement>;
|
|
16
16
|
constructor();
|
|
17
17
|
init(config: InteractConfig): void;
|
|
18
18
|
destroy(): void;
|
|
19
|
-
setElement(key: string, element:
|
|
19
|
+
setElement(key: string, element: IInteractElement): void;
|
|
20
20
|
deleteElement(key: string): void;
|
|
21
21
|
has(key: string): boolean;
|
|
22
22
|
get(key: string): InteractCache['interactions'][string] | undefined;
|
|
23
23
|
clearInteractionStateForKey(key: string): void;
|
|
24
24
|
static create(config: InteractConfig): Interact;
|
|
25
25
|
static destroy(): void;
|
|
26
|
+
static setup(options: {
|
|
27
|
+
scrollOptionsGetter?: () => Partial<scrollConfig>;
|
|
28
|
+
pointerOptionsGetter?: () => Partial<PointerConfig>;
|
|
29
|
+
viewEnter?: Partial<ViewEnterParams>;
|
|
30
|
+
}): void;
|
|
26
31
|
static getInstance(key: string): Interact | undefined;
|
|
27
|
-
static getElement(key: string | undefined):
|
|
28
|
-
static setElement(key: string, element:
|
|
32
|
+
static getElement(key: string | undefined): IInteractElement | undefined;
|
|
33
|
+
static setElement(key: string, element: IInteractElement): void;
|
|
29
34
|
}
|
|
30
35
|
export declare function getSelector(d: Interaction | Effect, { asCombinator, addItemFilter, }?: {
|
|
31
36
|
asCombinator?: boolean;
|
package/dist/types/core/add.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { IInteractElement } from '../types';
|
|
2
2
|
/**
|
|
3
3
|
* Adds all events and effects to an element based on config
|
|
4
4
|
*/
|
|
5
|
-
export declare function add(element:
|
|
6
|
-
export declare function addListItems(root:
|
|
5
|
+
export declare function add(element: IInteractElement, key: string): boolean;
|
|
6
|
+
export declare function addListItems(root: IInteractElement, key: string, listContainer: string, elements: HTMLElement[]): void;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import type { PointerMoveParams, ScrubEffect } from '../types';
|
|
2
|
+
declare function registerOptionsGetter(getter: () => Partial<PointerConfig>): void;
|
|
2
3
|
declare function addPointerMoveHandler(source: HTMLElement, target: HTMLElement, effect: ScrubEffect, options?: PointerMoveParams, reducedMotion?: boolean): void;
|
|
3
4
|
declare function removePointerMoveHandler(element: HTMLElement): void;
|
|
4
5
|
declare const _default: {
|
|
5
6
|
add: typeof addPointerMoveHandler;
|
|
6
7
|
remove: typeof removePointerMoveHandler;
|
|
8
|
+
registerOptionsGetter: typeof registerOptionsGetter;
|
|
7
9
|
};
|
|
8
10
|
export default _default;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import type { TimeEffect, ViewEnterParams } from '../types';
|
|
2
|
+
declare function setOptions(options: Partial<ViewEnterParams>): void;
|
|
2
3
|
declare function addViewEnterHandler(source: HTMLElement, target: HTMLElement, effect: TimeEffect, options?: ViewEnterParams, reducedMotion?: boolean): void;
|
|
3
4
|
declare function removeViewEnterHandler(element: HTMLElement): void;
|
|
4
5
|
declare const _default: {
|
|
5
6
|
add: typeof addViewEnterHandler;
|
|
6
7
|
remove: typeof removeViewEnterHandler;
|
|
8
|
+
setOptions: typeof setOptions;
|
|
7
9
|
};
|
|
8
10
|
export default _default;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import type { ViewEnterParams, ScrubEffect } from '../types';
|
|
2
|
+
declare function registerOptionsGetter(getter: () => scrollConfig): void;
|
|
2
3
|
declare function addViewProgressHandler(source: HTMLElement, target: HTMLElement, effect: ScrubEffect, __: ViewEnterParams, reducedMotion?: boolean): void;
|
|
3
4
|
declare function removeViewProgressHandler(element: HTMLElement): void;
|
|
4
5
|
declare const _default: {
|
|
5
6
|
add: typeof addViewProgressHandler;
|
|
6
7
|
remove: typeof removeViewProgressHandler;
|
|
8
|
+
registerOptionsGetter: typeof registerOptionsGetter;
|
|
7
9
|
};
|
|
8
10
|
export default _default;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -3,8 +3,8 @@ import type { NamedEffect, RangeOffset, ScrubTransitionEasing, MotionAnimationOp
|
|
|
3
3
|
declare global {
|
|
4
4
|
namespace JSX {
|
|
5
5
|
interface IntrinsicElements {
|
|
6
|
-
'
|
|
7
|
-
'data-
|
|
6
|
+
'interact-element': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
|
|
7
|
+
'data-interact-key'?: string;
|
|
8
8
|
};
|
|
9
9
|
}
|
|
10
10
|
}
|
|
@@ -22,6 +22,7 @@ export type ViewEnterParams = {
|
|
|
22
22
|
type?: ViewEnterType;
|
|
23
23
|
threshold?: number;
|
|
24
24
|
inset?: string;
|
|
25
|
+
useSafeViewEnter?: boolean;
|
|
25
26
|
};
|
|
26
27
|
export type PointerMoveParams = {
|
|
27
28
|
hitArea?: 'root' | 'self';
|
|
@@ -119,7 +120,7 @@ export type InteractConfig = {
|
|
|
119
120
|
interactions: Interaction[];
|
|
120
121
|
};
|
|
121
122
|
export type AnimationOptions<T extends 'time' | 'scrub'> = MotionAnimationOptions<T> & EffectEffectProperty;
|
|
122
|
-
export interface
|
|
123
|
+
export interface IInteractElement extends HTMLElement {
|
|
123
124
|
_internals: (ElementInternals & {
|
|
124
125
|
states: Set<string>;
|
|
125
126
|
}) | null;
|
|
@@ -144,9 +145,13 @@ export type InteractionParamsTypes = {
|
|
|
144
145
|
pointerMove: PointerMoveParams;
|
|
145
146
|
};
|
|
146
147
|
export type InteractionHandlerModule<T extends TriggerType> = {
|
|
148
|
+
registerOptionsGetter?: (getter: () => any) => void;
|
|
147
149
|
add: (source: HTMLElement, target: HTMLElement, effect: Effect, options: InteractionParamsTypes[T], reducedMotion?: boolean) => void;
|
|
148
150
|
remove: (element: HTMLElement) => void;
|
|
149
151
|
};
|
|
152
|
+
export type ViewEnterHandlerModule = InteractionHandlerModule<'viewEnter'> & {
|
|
153
|
+
setOptions: (options: Partial<ViewEnterParams>) => void;
|
|
154
|
+
};
|
|
150
155
|
export type TriggerHandlerMap<T extends TriggerType> = {
|
|
151
156
|
[K in T]: InteractionHandlerModule<K>;
|
|
152
157
|
};
|