@wix/interact 1.93.0 → 2.0.0-rc.2
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/index.js +2 -23
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/react.js +15 -0
- package/dist/cjs/react.js.map +1 -0
- package/dist/cjs/web.js +2 -0
- package/dist/cjs/web.js.map +1 -0
- package/dist/es/index.js +8 -0
- package/dist/es/index.js.map +1 -0
- package/dist/es/react.js +650 -0
- package/dist/es/react.js.map +1 -0
- package/dist/es/web.js +56 -0
- package/dist/es/web.js.map +1 -0
- package/dist/index-C8QxOkui.mjs +7940 -0
- package/dist/index-C8QxOkui.mjs.map +1 -0
- package/dist/index-DEPRHaUt.js +18 -0
- package/dist/index-DEPRHaUt.js.map +1 -0
- package/dist/tsconfig.build.tsbuildinfo +1 -0
- package/dist/types/core/Interact.d.ts +17 -7
- package/dist/types/core/Interact.d.ts.map +1 -0
- package/dist/types/core/InteractionController.d.ts +19 -0
- package/dist/types/core/InteractionController.d.ts.map +1 -0
- package/dist/types/core/add.d.ts +4 -3
- package/dist/types/core/add.d.ts.map +1 -0
- package/dist/types/core/css.d.ts +3 -0
- package/dist/types/core/css.d.ts.map +1 -0
- package/dist/types/core/remove.d.ts +3 -1
- package/dist/types/core/remove.d.ts.map +1 -0
- package/dist/types/core/utilities.d.ts +1 -0
- package/dist/types/core/utilities.d.ts.map +1 -0
- package/dist/types/dom/api.d.ts +3 -0
- package/dist/types/dom/api.d.ts.map +1 -0
- package/dist/types/handlers/animationEnd.d.ts +3 -2
- package/dist/types/handlers/animationEnd.d.ts.map +1 -0
- package/dist/types/handlers/click.d.ts +3 -2
- package/dist/types/handlers/click.d.ts.map +1 -0
- package/dist/types/handlers/hover.d.ts +3 -2
- package/dist/types/handlers/hover.d.ts.map +1 -0
- package/dist/types/handlers/index.d.ts +1 -0
- package/dist/types/handlers/index.d.ts.map +1 -0
- package/dist/types/handlers/pointerMove.d.ts +3 -2
- package/dist/types/handlers/pointerMove.d.ts.map +1 -0
- package/dist/types/handlers/utilities.d.ts +1 -0
- package/dist/types/handlers/utilities.d.ts.map +1 -0
- package/dist/types/handlers/viewEnter.d.ts +3 -2
- package/dist/types/handlers/viewEnter.d.ts.map +1 -0
- package/dist/types/handlers/viewProgress.d.ts +4 -3
- package/dist/types/handlers/viewProgress.d.ts.map +1 -0
- package/dist/types/index.d.ts +3 -2
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/react/Interaction.d.ts +10 -0
- package/dist/types/react/Interaction.d.ts.map +1 -0
- package/dist/types/react/index.d.ts +8 -0
- package/dist/types/react/index.d.ts.map +1 -0
- package/dist/types/react/interactRef.d.ts +3 -0
- package/dist/types/react/interactRef.d.ts.map +1 -0
- package/dist/types/types.d.ts +23 -10
- package/dist/types/types.d.ts.map +1 -0
- package/dist/types/utils.d.ts +2 -1
- package/dist/types/utils.d.ts.map +1 -0
- package/dist/types/{InteractElement.d.ts → web/InteractElement.d.ts} +115 -77
- package/dist/types/web/InteractElement.d.ts.map +1 -0
- package/dist/types/web/defineInteractElement.d.ts +2 -0
- package/dist/types/web/defineInteractElement.d.ts.map +1 -0
- package/dist/types/web/index.d.ts +6 -0
- package/dist/types/web/index.d.ts.map +1 -0
- package/docs/README.md +211 -0
- package/docs/advanced/README.md +164 -0
- package/docs/api/README.md +157 -0
- package/docs/api/element-selection.md +607 -0
- package/docs/api/functions.md +638 -0
- package/docs/api/interact-class.md +663 -0
- package/docs/api/interact-element.md +565 -0
- package/docs/api/interaction-controller.md +450 -0
- package/docs/api/types.md +957 -0
- package/docs/examples/README.md +212 -0
- package/docs/examples/click-interactions.md +977 -0
- package/docs/examples/entrance-animations.md +935 -0
- package/docs/examples/hover-effects.md +930 -0
- package/docs/examples/list-patterns.md +737 -0
- package/docs/guides/README.md +49 -0
- package/docs/guides/conditions-and-media-queries.md +1068 -0
- package/docs/guides/configuration-structure.md +726 -0
- package/docs/guides/custom-elements.md +327 -0
- package/docs/guides/effects-and-animations.md +634 -0
- package/docs/guides/getting-started.md +379 -0
- package/docs/guides/lists-and-dynamic-content.md +713 -0
- package/docs/guides/state-management.md +747 -0
- package/docs/guides/understanding-triggers.md +690 -0
- package/docs/integration/README.md +264 -0
- package/docs/integration/react.md +605 -0
- package/package.json +73 -56
- package/rules/Integration.md +255 -0
- package/rules/click-rules.md +533 -0
- package/rules/full-lean.md +346 -0
- package/rules/hover-rules.md +593 -0
- package/rules/pointermove-rules.md +1341 -0
- package/rules/scroll-list-rules.md +900 -0
- package/rules/viewenter-rules.md +1015 -0
- package/rules/viewprogress-rules.md +1044 -0
- package/dist/cjs/InteractElement.js +0 -163
- package/dist/cjs/InteractElement.js.map +0 -1
- package/dist/cjs/__tests__/interact.spec.js +0 -2094
- package/dist/cjs/__tests__/interact.spec.js.map +0 -1
- package/dist/cjs/__tests__/viewEnter.spec.js +0 -207
- package/dist/cjs/__tests__/viewEnter.spec.js.map +0 -1
- package/dist/cjs/core/Interact.js +0 -257
- package/dist/cjs/core/Interact.js.map +0 -1
- package/dist/cjs/core/add.js +0 -250
- package/dist/cjs/core/add.js.map +0 -1
- package/dist/cjs/core/remove.js +0 -35
- package/dist/cjs/core/remove.js.map +0 -1
- package/dist/cjs/core/utilities.js +0 -16
- package/dist/cjs/core/utilities.js.map +0 -1
- package/dist/cjs/external-types.d.js +0 -2
- package/dist/cjs/external-types.d.js.map +0 -1
- package/dist/cjs/handlers/animationEnd.js +0 -37
- package/dist/cjs/handlers/animationEnd.js.map +0 -1
- package/dist/cjs/handlers/click.js +0 -122
- package/dist/cjs/handlers/click.js.map +0 -1
- package/dist/cjs/handlers/hover.js +0 -147
- package/dist/cjs/handlers/hover.js.map +0 -1
- package/dist/cjs/handlers/index.js +0 -32
- package/dist/cjs/handlers/index.js.map +0 -1
- package/dist/cjs/handlers/pointerMove.js +0 -49
- package/dist/cjs/handlers/pointerMove.js.map +0 -1
- package/dist/cjs/handlers/utilities.js +0 -49
- package/dist/cjs/handlers/utilities.js.map +0 -1
- package/dist/cjs/handlers/viewEnter.js +0 -131
- package/dist/cjs/handlers/viewEnter.js.map +0 -1
- package/dist/cjs/handlers/viewProgress.js +0 -79
- package/dist/cjs/handlers/viewProgress.js.map +0 -1
- package/dist/cjs/test-types.d.js +0 -2
- package/dist/cjs/test-types.d.js.map +0 -1
- package/dist/cjs/types.js +0 -2
- package/dist/cjs/types.js.map +0 -1
- package/dist/cjs/utils.js +0 -98
- package/dist/cjs/utils.js.map +0 -1
- package/dist/esm/InteractElement.js +0 -157
- package/dist/esm/InteractElement.js.map +0 -1
- package/dist/esm/__tests__/interact.spec.js +0 -2102
- package/dist/esm/__tests__/interact.spec.js.map +0 -1
- package/dist/esm/__tests__/viewEnter.spec.js +0 -210
- package/dist/esm/__tests__/viewEnter.spec.js.map +0 -1
- package/dist/esm/core/Interact.js +0 -251
- package/dist/esm/core/Interact.js.map +0 -1
- package/dist/esm/core/add.js +0 -245
- package/dist/esm/core/add.js.map +0 -1
- package/dist/esm/core/remove.js +0 -30
- package/dist/esm/core/remove.js.map +0 -1
- package/dist/esm/core/utilities.js +0 -14
- package/dist/esm/core/utilities.js.map +0 -1
- package/dist/esm/external-types.d.js +0 -2
- package/dist/esm/external-types.d.js.map +0 -1
- package/dist/esm/handlers/animationEnd.js +0 -33
- package/dist/esm/handlers/animationEnd.js.map +0 -1
- package/dist/esm/handlers/click.js +0 -122
- package/dist/esm/handlers/click.js.map +0 -1
- package/dist/esm/handlers/hover.js +0 -147
- package/dist/esm/handlers/hover.js.map +0 -1
- package/dist/esm/handlers/index.js +0 -27
- package/dist/esm/handlers/index.js.map +0 -1
- package/dist/esm/handlers/pointerMove.js +0 -48
- package/dist/esm/handlers/pointerMove.js.map +0 -1
- package/dist/esm/handlers/utilities.js +0 -43
- package/dist/esm/handlers/utilities.js.map +0 -1
- package/dist/esm/handlers/viewEnter.js +0 -133
- package/dist/esm/handlers/viewEnter.js.map +0 -1
- package/dist/esm/handlers/viewProgress.js +0 -75
- package/dist/esm/handlers/viewProgress.js.map +0 -1
- package/dist/esm/index.js +0 -5
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/test-types.d.js +0 -2
- package/dist/esm/test-types.d.js.map +0 -1
- package/dist/esm/types.js +0 -2
- package/dist/esm/types.js.map +0 -1
- package/dist/esm/utils.js +0 -92
- package/dist/esm/utils.js.map +0 -1
- package/dist/types/__tests__/interact.spec.d.ts +0 -1
- package/dist/types/__tests__/viewEnter.spec.d.ts +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["getAnimation","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","fastdom","SAFE_OBSERVER_CONFIG","root","rootMargin","threshold","observers","handlerMap","WeakMap","elementFirstRun","WeakSet","elementObserverMap","viewEnterOptions","setOptions","options","getObserver","isSafeMode","key","JSON","stringify","config","inset","observer","IntersectionObserver","entries","forEach","entry","target","isFirstRun","has","add","useSafeViewEnter","isIntersecting","measure","_entry$rootBounds","sourceHeight","boundingClientRect","height","rootHeight","rootBounds","Array","isArray","Math","min","needsSafeObserver","mutate","unobserve","safeObserver","set","observe","handlers","get","_ref","source","handler","type","delete","addViewEnterHandler","effect","globalOptions","animation","undefined","reducedMotion","isCSS","onFinish","dataset","motionEnter","selectorCondition","matches","play","cleanup","currentObserver","cancel","handlerObj","removeViewEnterHandler","element","remove"],"sources":["../../../src/handlers/viewEnter.ts"],"sourcesContent":["import type { AnimationGroup } from '@wix/motion';\nimport { getAnimation } from '@wix/motion';\nimport type {\n TimeEffect,\n HandlerObjectMap,\n ViewEnterParams,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\nimport fastdom from 'fastdom';\n\nconst SAFE_OBSERVER_CONFIG: IntersectionObserverInit = {\n root: null,\n rootMargin: '0px 0px -10% 0px',\n threshold: [0],\n};\n\nconst observers: Record<string, IntersectionObserver> = {};\nconst handlerMap = new WeakMap() as HandlerObjectMap;\nconst elementFirstRun = new WeakSet<HTMLElement>();\nconst elementObserverMap = new WeakMap<HTMLElement, IntersectionObserver>();\nlet viewEnterOptions: Partial<ViewEnterParams> = {};\n\nfunction setOptions(options: Partial<ViewEnterParams>) {\n viewEnterOptions = options;\n}\n\nfunction getObserver(options: ViewEnterParams, isSafeMode: boolean = false) {\n const key = JSON.stringify({ ...options, isSafeMode });\n\n if (observers[key]) {\n return observers[key];\n }\n\n const config: IntersectionObserverInit = isSafeMode\n ? SAFE_OBSERVER_CONFIG\n : {\n root: null,\n rootMargin: options.inset\n ? `${options.inset} 0px ${options.inset}`\n : '0px',\n threshold: options.threshold,\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n const target = entry.target as HTMLElement;\n const isFirstRun = !elementFirstRun.has(target);\n\n if (isFirstRun) {\n elementFirstRun.add(target);\n\n if (options.useSafeViewEnter && !entry.isIntersecting) {\n fastdom.measure(() => {\n const sourceHeight = entry.boundingClientRect.height;\n const rootHeight = entry.rootBounds?.height;\n\n if (!rootHeight) {\n return;\n }\n\n const threshold = Array.isArray(options.threshold)\n ? Math.min(...options.threshold)\n : options.threshold;\n\n const needsSafeObserver =\n threshold && sourceHeight * threshold > rootHeight;\n\n if (needsSafeObserver) {\n fastdom.mutate(() => {\n observer.unobserve(target);\n const safeObserver = getObserver(options, true);\n elementObserverMap.set(target, safeObserver);\n safeObserver.observe(target);\n });\n }\n });\n return;\n }\n }\n\n if (entry.isIntersecting) {\n const handlers = handlerMap.get(target);\n\n handlers?.forEach(({ source, handler }) => {\n if (source === entry.target) {\n handler!();\n }\n });\n\n if (options.type === 'once') {\n observer.unobserve(entry.target);\n elementFirstRun.delete(target);\n }\n }\n });\n }, config);\n\n observers[key] = observer;\n\n return observer;\n}\n\nfunction addViewEnterHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: TimeEffect,\n options: ViewEnterParams = {},\n globalOptions?: InteractionGlobalOptions,\n) {\n const observer = getObserver({ ...viewEnterOptions, ...options });\n const animation = getAnimation(\n target,\n effectToAnimationOptions(effect),\n undefined,\n globalOptions?.reducedMotion,\n ) as AnimationGroup;\n\n if (animation?.isCSS && options.type === 'once') {\n animation.onFinish(() => {\n target.dataset.motionEnter = 'done';\n });\n }\n const {selectorCondition} = globalOptions || {};\n const handler = () => {\n if (selectorCondition && !target.matches(selectorCondition)) return;\n animation.play(() => {\n if (!animation.isCSS) {\n target.dataset.motionEnter = 'done';\n }\n });\n };\n const cleanup = () => {\n const currentObserver = elementObserverMap.get(source) || observer;\n currentObserver.unobserve(source);\n animation.cancel();\n elementFirstRun.delete(source);\n elementObserverMap.delete(source);\n };\n const handlerObj = { source, target, handler, cleanup };\n\n addHandlerToMap(handlerMap, source, handlerObj);\n addHandlerToMap(handlerMap, target, handlerObj);\n\n elementObserverMap.set(source, observer);\n observer.observe(source);\n}\n\nfunction removeViewEnterHandler(element: HTMLElement) {\n removeElementFromHandlerMap(handlerMap, element);\n}\n\nexport default {\n add: addViewEnterHandler,\n remove: removeViewEnterHandler,\n setOptions,\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { getWebAnimation, getScrubScene } from '@wix/motion';
|
|
2
|
-
import { Scroll } from 'fizban';
|
|
3
|
-
import { effectToAnimationOptions, addHandlerToMap, removeElementFromHandlerMap } from './utilities';
|
|
4
|
-
const scrollManagerMap = new WeakMap();
|
|
5
|
-
let scrollOptionsGetter = () => ({});
|
|
6
|
-
function registerOptionsGetter(getter) {
|
|
7
|
-
scrollOptionsGetter = getter;
|
|
8
|
-
}
|
|
9
|
-
function addViewProgressHandler(source, target, effect, __, globalOptions) {
|
|
10
|
-
if (globalOptions != null && globalOptions.reducedMotion) {
|
|
11
|
-
return;
|
|
12
|
-
}
|
|
13
|
-
const triggerParams = {
|
|
14
|
-
trigger: 'view-progress',
|
|
15
|
-
element: source
|
|
16
|
-
};
|
|
17
|
-
const effectOptions = effectToAnimationOptions(effect);
|
|
18
|
-
let cleanup;
|
|
19
|
-
if ('ViewTimeline' in window) {
|
|
20
|
-
// Use ViewTimeline for modern browsers
|
|
21
|
-
const animationGroup = getWebAnimation(target, effectOptions, triggerParams);
|
|
22
|
-
if (animationGroup) {
|
|
23
|
-
animationGroup.play();
|
|
24
|
-
cleanup = () => {
|
|
25
|
-
animationGroup.ready.then(() => {
|
|
26
|
-
animationGroup.cancel();
|
|
27
|
-
});
|
|
28
|
-
};
|
|
29
|
-
const handlerObj = {
|
|
30
|
-
source,
|
|
31
|
-
target,
|
|
32
|
-
cleanup
|
|
33
|
-
};
|
|
34
|
-
addHandlerToMap(scrollManagerMap, source, handlerObj);
|
|
35
|
-
addHandlerToMap(scrollManagerMap, target, handlerObj);
|
|
36
|
-
}
|
|
37
|
-
} else {
|
|
38
|
-
const scene = getScrubScene(target, effectOptions, triggerParams);
|
|
39
|
-
if (scene) {
|
|
40
|
-
const scenes = Array.isArray(scene) ? scene : [scene];
|
|
41
|
-
const scroll = new Scroll({
|
|
42
|
-
viewSource: source,
|
|
43
|
-
scenes,
|
|
44
|
-
observeViewportEntry: false,
|
|
45
|
-
observeViewportResize: false,
|
|
46
|
-
observeSourcesResize: true,
|
|
47
|
-
root: document.body,
|
|
48
|
-
...scrollOptionsGetter()
|
|
49
|
-
});
|
|
50
|
-
cleanup = () => {
|
|
51
|
-
scroll.destroy();
|
|
52
|
-
};
|
|
53
|
-
Promise.all(scenes.map(s => s.ready || Promise.resolve())).then(() => {
|
|
54
|
-
scroll.start();
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
if (!cleanup) return;
|
|
59
|
-
const handlerObj = {
|
|
60
|
-
source,
|
|
61
|
-
target,
|
|
62
|
-
cleanup
|
|
63
|
-
};
|
|
64
|
-
addHandlerToMap(scrollManagerMap, source, handlerObj);
|
|
65
|
-
addHandlerToMap(scrollManagerMap, target, handlerObj);
|
|
66
|
-
}
|
|
67
|
-
function removeViewProgressHandler(element) {
|
|
68
|
-
removeElementFromHandlerMap(scrollManagerMap, element);
|
|
69
|
-
}
|
|
70
|
-
export default {
|
|
71
|
-
add: addViewProgressHandler,
|
|
72
|
-
remove: removeViewProgressHandler,
|
|
73
|
-
registerOptionsGetter
|
|
74
|
-
};
|
|
75
|
-
//# sourceMappingURL=viewProgress.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["getWebAnimation","getScrubScene","Scroll","effectToAnimationOptions","addHandlerToMap","removeElementFromHandlerMap","scrollManagerMap","WeakMap","scrollOptionsGetter","registerOptionsGetter","getter","addViewProgressHandler","source","target","effect","__","globalOptions","reducedMotion","triggerParams","trigger","element","effectOptions","cleanup","window","animationGroup","play","ready","then","cancel","handlerObj","scene","scenes","Array","isArray","scroll","viewSource","observeViewportEntry","observeViewportResize","observeSourcesResize","root","document","body","destroy","Promise","all","map","s","resolve","start","removeViewProgressHandler","add","remove"],"sources":["../../../src/handlers/viewProgress.ts"],"sourcesContent":["import type { AnimationGroup, ScrubScrollScene } from '@wix/motion';\nimport { getWebAnimation, getScrubScene } from '@wix/motion';\nimport { Scroll, scrollConfig } from 'fizban';\nimport type {\n ViewEnterParams,\n ScrubEffect,\n HandlerObjectMap,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\n\nconst scrollManagerMap = new WeakMap() as HandlerObjectMap;\nlet scrollOptionsGetter: () => Partial<scrollConfig> = () => ({});\n\nfunction registerOptionsGetter(getter: () => scrollConfig) {\n scrollOptionsGetter = getter;\n}\n\nfunction addViewProgressHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: ScrubEffect,\n __: ViewEnterParams,\n globalOptions?: InteractionGlobalOptions,\n): void {\n if (globalOptions?.reducedMotion) {\n return;\n }\n\n const triggerParams = {\n trigger: 'view-progress' as const,\n element: source,\n };\n\n const effectOptions = effectToAnimationOptions(effect);\n let cleanup;\n if ('ViewTimeline' in window) {\n // Use ViewTimeline for modern browsers\n const animationGroup = getWebAnimation(\n target,\n effectOptions,\n triggerParams,\n );\n\n if (animationGroup) {\n animationGroup.play();\n\n cleanup = () => {\n (animationGroup as AnimationGroup).ready.then(() => {\n (animationGroup as AnimationGroup).cancel();\n });\n };\n\n const handlerObj = { source, target, cleanup };\n addHandlerToMap(scrollManagerMap, source, handlerObj);\n addHandlerToMap(scrollManagerMap, target, handlerObj);\n }\n } else {\n const scene = getScrubScene(target, effectOptions, triggerParams);\n\n if (scene) {\n const scenes = Array.isArray(scene) ? scene : [scene];\n const scroll = new Scroll({\n viewSource: source,\n scenes,\n observeViewportEntry: false,\n observeViewportResize: false,\n observeSourcesResize: true,\n root: document.body,\n ...scrollOptionsGetter(),\n });\n\n cleanup = () => {\n scroll.destroy();\n };\n\n Promise.all(\n (scenes as ScrubScrollScene[]).map((s) => s.ready || Promise.resolve()),\n ).then(() => {\n scroll.start();\n });\n }\n }\n if (!cleanup) return;\n \n const handlerObj = { source, target, cleanup };\n\n addHandlerToMap(scrollManagerMap, source, handlerObj);\n addHandlerToMap(scrollManagerMap, target, handlerObj);\n}\n\nfunction removeViewProgressHandler(element: HTMLElement): void {\n removeElementFromHandlerMap(scrollManagerMap, element);\n}\n\nexport default {\n add: addViewProgressHandler,\n remove: removeViewProgressHandler,\n registerOptionsGetter,\n};\n"],"mappings":"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","ignoreList":[]}
|
package/dist/esm/index.js
DELETED
package/dist/esm/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["Interact","add","remove"],"sources":["../../src/index.ts"],"sourcesContent":["export { Interact } from './core/Interact';\nexport { add } from './core/add';\nexport { remove } from './core/remove';\n\nexport * from './types';\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,YAAY;AAChC,SAASC,MAAM,QAAQ,eAAe;AAEtC,cAAc,SAAS","ignoreList":[]}
|
package/dist/esm/test-types.d.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/test-types.d.ts"],"sourcesContent":["/// <reference types=\"@wix/jest-yoshi-preset/types\" />\n"],"mappings":"AAAA","ignoreList":[]}
|
package/dist/esm/types.js
DELETED
package/dist/esm/types.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/types.ts"],"sourcesContent":["import type {\n NamedEffect,\n RangeOffset,\n ScrubTransitionEasing,\n MotionAnimationOptions,\n} from '@wix/motion';\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'interact-element': React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLElement>,\n HTMLElement\n > & {\n 'data-interact-key'?: string;\n };\n }\n }\n}\n\nexport type TriggerType =\n | 'hover'\n | 'click'\n | 'viewEnter'\n | 'pageVisible'\n | 'animationEnd'\n | 'viewProgress'\n | 'pointerMove'\n | 'activate'\n | 'interest';\n\nexport type ViewEnterType = 'once' | 'repeat' | 'alternate';\n\nexport type TransitionMethod = 'add' | 'remove' | 'toggle' | 'clear';\n\nexport type StateParams = {\n method: TransitionMethod;\n};\n\nexport type PointerTriggerParams = {\n type?: ViewEnterType | 'state';\n};\n\nexport type ViewEnterParams = {\n type?: ViewEnterType;\n threshold?: number;\n inset?: string;\n useSafeViewEnter?: boolean;\n};\n\nexport type PointerMoveParams = {\n hitArea?: 'root' | 'self';\n};\n\nexport type AnimationEndParams = {\n effectId: string;\n};\n\nexport type TriggerParams =\n | StateParams\n | PointerTriggerParams\n | ViewEnterParams\n | PointerMoveParams\n | AnimationEndParams;\n\ntype Fill = 'none' | 'forwards' | 'backwards' | 'both';\n\ntype MotionKeyframeEffect = {\n name: string;\n keyframes: Keyframe[];\n};\n\ntype EffectEffectProperty =\n | {\n keyframeEffect: MotionKeyframeEffect;\n }\n | {\n namedEffect: NamedEffect;\n }\n | {\n customEffect: (element: Element, progress: any) => void;\n };\n\nexport type TimeEffect = {\n duration: number;\n easing?: string;\n iterations?: number;\n alternate?: boolean;\n fill?: Fill;\n reversed?: boolean;\n delay?: number;\n} & EffectEffectProperty;\n\nexport type ScrubEffect = {\n easing?: string;\n iterations?: number;\n alternate?: boolean;\n fill?: Fill;\n reversed?: boolean;\n rangeStart?: RangeOffset;\n rangeEnd?: RangeOffset;\n centeredToTarget?: boolean;\n transitionDuration?: number;\n transitionDelay?: number;\n transitionEasing?: ScrubTransitionEasing;\n} & EffectEffectProperty;\n\nexport type TransitionOptions = {\n duration?: number;\n delay?: number;\n easing?: string;\n};\n\nexport type StyleProperty = {\n name: string;\n value: string;\n};\n\nexport type TransitionProperty = StyleProperty & TransitionOptions;\n\nexport type TransitionEffect = {\n key?: string;\n effectId?: string;\n} & {\n transition?: TransitionOptions & {\n styleProperties: StyleProperty[];\n };\n transitionProperties?: TransitionProperty[];\n};\n\nexport type EffectBase = {\n key?: string;\n listContainer?: string;\n listItemSelector?: string;\n conditions?: string[];\n selector?: string;\n effectId?: string;\n};\n\nexport type EffectRef = EffectBase & { effectId: string };\n\nexport type Effect = EffectBase & (TimeEffect | ScrubEffect | TransitionEffect);\n\nexport type Condition = {\n type: 'media' | 'container' | 'selector';\n predicate?: string;\n};\n\nexport type InteractionTrigger = {\n key: string;\n listContainer?: string;\n listItemSelector?: string;\n trigger: TriggerType;\n params?: TriggerParams;\n conditions?: string[];\n selector?: string;\n};\n\nexport type Interaction = InteractionTrigger & {\n effects: ((Effect | EffectRef) & { interactionId?: string })[];\n};\n\nexport type InteractConfig = {\n effects: Record<string, Effect>;\n conditions?: Record<string, Condition>;\n interactions: Interaction[];\n};\n\nexport type AnimationOptions<T extends 'time' | 'scrub'> =\n MotionAnimationOptions<T> & EffectEffectProperty;\n\n/// ////////////////////////////////////////////////////////\n/// ////////////////////////////////////////////////////////\n/// ////////////////////////////////////////////////////////\n\nexport interface IInteractElement extends HTMLElement {\n _internals: (ElementInternals & { states: Set<string> }) | null;\n connected: boolean;\n sheet: CSSStyleSheet | null;\n _observers: WeakMap<HTMLElement, MutationObserver>;\n connectedCallback(): void;\n disconnectedCallback(): void;\n connect(path?: string): void;\n disconnect(): void;\n renderStyle(cssRules: string[]): void;\n toggleEffect(\n effectId: string,\n method: StateParams['method'],\n item?: HTMLElement | null,\n ): void;\n watchChildList(listContainer: string): void;\n}\n\nexport type InteractionParamsTypes = {\n hover: StateParams | PointerTriggerParams;\n click: StateParams | PointerTriggerParams;\n viewEnter: ViewEnterParams;\n pageVisible: ViewEnterParams;\n animationEnd: AnimationEndParams;\n viewProgress: ViewEnterParams;\n pointerMove: PointerMoveParams;\n activate: StateParams | PointerTriggerParams;\n interest: StateParams | PointerTriggerParams;\n};\n\nexport type InteractionGlobalOptions = {\n reducedMotion?: boolean;\n allowA11yTriggers?: boolean;\n selectorCondition?: string;\n};\n\nexport type InteractionHandlerModule<T extends TriggerType> = {\n registerOptionsGetter?: (getter: () => any) => void;\n add: (\n source: HTMLElement,\n target: HTMLElement,\n effect: Effect,\n options: InteractionParamsTypes[T],\n globalOptions?: InteractionGlobalOptions,\n ) => void;\n remove: (element: HTMLElement) => void;\n};\n\nexport type ViewEnterHandlerModule = InteractionHandlerModule<'viewEnter'> & {\n setOptions: (options: Partial<ViewEnterParams>) => void;\n};\n\nexport type TriggerHandlerMap<T extends TriggerType> = {\n [K in T]: InteractionHandlerModule<K>;\n};\n\nexport type HandlerObject = {\n source: HTMLElement;\n target: HTMLElement;\n cleanup: () => void;\n handler?: () => void;\n};\n\nexport type HandlerObjectMap = WeakMap<HTMLElement, Set<HandlerObject>>;\n\nexport type InteractCache = {\n effects: {\n [effectId: string]: Effect;\n };\n conditions: {\n [conditionId: string]: Condition;\n };\n interactions: {\n [path: string]: {\n triggers: Interaction[];\n effects: Record<\n string,\n (InteractionTrigger & { effect: Effect | EffectRef })[]\n >;\n interactionIds: Set<string>;\n selectors: Set<string>;\n };\n };\n};\n\nexport type CreateTransitionCSSParams = {\n key: string;\n effectId: string;\n transition?: TransitionEffect['transition'];\n properties?: TransitionProperty[];\n childSelector?: string;\n selectorCondition?: string;\n};\n"],"mappings":"","ignoreList":[]}
|
package/dist/esm/utils.js
DELETED
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import { getEasing } from '@wix/motion';
|
|
2
|
-
/**
|
|
3
|
-
* Applies a selector condition predicate to a base selector.
|
|
4
|
-
* - If `&` is in the predicate, replace `&` with the base selector
|
|
5
|
-
* - If no `&`, assume `&<predicate>` (append predicate to base selector)
|
|
6
|
-
*/
|
|
7
|
-
function applySelectorCondition(baseSelector, predicate) {
|
|
8
|
-
if (predicate.includes('&')) {
|
|
9
|
-
return predicate.replace(/&/g, baseSelector);
|
|
10
|
-
}
|
|
11
|
-
return `${baseSelector}${predicate}`;
|
|
12
|
-
}
|
|
13
|
-
export function generateId() {
|
|
14
|
-
return 'wi-12343210'.replace(/\d/g, c => String.fromCharCode((+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4) + 97) // 97 for "a"
|
|
15
|
-
);
|
|
16
|
-
}
|
|
17
|
-
export function createTransitionCSS(_ref) {
|
|
18
|
-
var _properties2;
|
|
19
|
-
let {
|
|
20
|
-
key,
|
|
21
|
-
effectId,
|
|
22
|
-
transition,
|
|
23
|
-
properties,
|
|
24
|
-
childSelector = '> :first-child',
|
|
25
|
-
selectorCondition
|
|
26
|
-
} = _ref;
|
|
27
|
-
let transitions = [];
|
|
28
|
-
if (transition != null && transition.styleProperties) {
|
|
29
|
-
const {
|
|
30
|
-
duration,
|
|
31
|
-
easing,
|
|
32
|
-
delay
|
|
33
|
-
} = transition;
|
|
34
|
-
if (duration) {
|
|
35
|
-
const hasCustomPropertiesTransition = transition.styleProperties.some(styleProperty => styleProperty.name.startsWith('--'));
|
|
36
|
-
if (hasCustomPropertiesTransition) {
|
|
37
|
-
// If there are custom properties in the transition, we need to fall back to Viewer's legacy implementation
|
|
38
|
-
transitions = [`all ${duration}ms ${getEasing(easing || 'ease')}${delay ? ` ${delay}ms` : ''}`, 'visibility 0s'];
|
|
39
|
-
} else {
|
|
40
|
-
transitions = transition.styleProperties.map(styleProperty => `${styleProperty.name} ${duration}ms ${getEasing(easing || 'ease')}${delay ? ` ${delay}ms` : ''}`);
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
properties = transition.styleProperties;
|
|
44
|
-
} else {
|
|
45
|
-
var _properties;
|
|
46
|
-
transitions = ((_properties = properties) == null ? void 0 : _properties.filter(property => property.duration).map(property => `${property.name} ${property.duration}ms ${getEasing(property.easing) || 'ease'}${property.delay ? ` ${property.delay}ms` : ''}`)) || [];
|
|
47
|
-
}
|
|
48
|
-
const styleProperties = ((_properties2 = properties) == null ? void 0 : _properties2.map(property => `${property.name}: ${property.value};`)) || [];
|
|
49
|
-
const escapedKey = key.replace(/"/g, "'");
|
|
50
|
-
|
|
51
|
-
// Build selectors, applying condition if present
|
|
52
|
-
const stateSelector = `:is(:state(${effectId}), :--${effectId}) ${childSelector}`;
|
|
53
|
-
const dataAttrSelector = `[data-interact-effect~="${effectId}"] ${childSelector}`;
|
|
54
|
-
const finalStateSelector = selectorCondition ? applySelectorCondition(stateSelector, selectorCondition) : stateSelector;
|
|
55
|
-
const finalDataAttrSelector = selectorCondition ? applySelectorCondition(dataAttrSelector, selectorCondition) : dataAttrSelector;
|
|
56
|
-
const result = [`${finalStateSelector},
|
|
57
|
-
${finalDataAttrSelector} {
|
|
58
|
-
${styleProperties.join(`
|
|
59
|
-
`)}
|
|
60
|
-
}`];
|
|
61
|
-
if (transitions.length) {
|
|
62
|
-
const transitionSelector = `[data-interact-key="${escapedKey}"] ${childSelector}`;
|
|
63
|
-
const finalTransitionSelector = selectorCondition ? applySelectorCondition(transitionSelector, selectorCondition) : transitionSelector;
|
|
64
|
-
result.push(`@media (prefers-reduced-motion: no-preference) { ${finalTransitionSelector} {
|
|
65
|
-
transition: ${transitions.join(', ')};
|
|
66
|
-
} }`);
|
|
67
|
-
}
|
|
68
|
-
return result;
|
|
69
|
-
}
|
|
70
|
-
export function getMediaQuery(conditionNames, conditions) {
|
|
71
|
-
const conditionContent = (conditionNames || []).filter(conditionName => {
|
|
72
|
-
var _conditions$condition;
|
|
73
|
-
return ((_conditions$condition = conditions[conditionName]) == null ? void 0 : _conditions$condition.type) === 'media' && conditions[conditionName].predicate;
|
|
74
|
-
}).map(conditionName => {
|
|
75
|
-
return conditions[conditionName].predicate;
|
|
76
|
-
}).join(') and (');
|
|
77
|
-
const condition = conditionContent && `(${conditionContent})`;
|
|
78
|
-
const mql = condition && window.matchMedia(condition);
|
|
79
|
-
if (mql) {
|
|
80
|
-
return mql;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
export function getSelectorCondition(conditionNames, conditions) {
|
|
84
|
-
for (const name of conditionNames || []) {
|
|
85
|
-
const condition = conditions[name];
|
|
86
|
-
if ((condition == null ? void 0 : condition.type) === 'selector' && condition.predicate) {
|
|
87
|
-
return condition.predicate;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
|
-
//# sourceMappingURL=utils.js.map
|
package/dist/esm/utils.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["getEasing","applySelectorCondition","baseSelector","predicate","includes","replace","generateId","c","String","fromCharCode","crypto","getRandomValues","Uint8Array","createTransitionCSS","_ref","_properties2","key","effectId","transition","properties","childSelector","selectorCondition","transitions","styleProperties","duration","easing","delay","hasCustomPropertiesTransition","some","styleProperty","name","startsWith","map","_properties","filter","property","value","escapedKey","stateSelector","dataAttrSelector","finalStateSelector","finalDataAttrSelector","result","join","length","transitionSelector","finalTransitionSelector","push","getMediaQuery","conditionNames","conditions","conditionContent","conditionName","_conditions$condition","type","condition","mql","window","matchMedia","getSelectorCondition"],"sources":["../../src/utils.ts"],"sourcesContent":["import { getEasing } from '@wix/motion';\nimport type { Condition, CreateTransitionCSSParams } from './types';\n\n/**\n * Applies a selector condition predicate to a base selector.\n * - If `&` is in the predicate, replace `&` with the base selector\n * - If no `&`, assume `&<predicate>` (append predicate to base selector)\n */\nfunction applySelectorCondition(\n baseSelector: string,\n predicate: string,\n): string {\n if (predicate.includes('&')) {\n return predicate.replace(/&/g, baseSelector);\n }\n return `${baseSelector}${predicate}`;\n}\n\nexport function generateId() {\n return 'wi-12343210'.replace(\n /\\d/g,\n (c) =>\n String.fromCharCode(\n (+c ^\n (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))) +\n 97,\n ), // 97 for \"a\"\n );\n}\n\nexport function createTransitionCSS({\n key,\n effectId,\n transition,\n properties,\n childSelector = '> :first-child',\n selectorCondition,\n}: CreateTransitionCSSParams): string[] {\n let transitions: string[] = [];\n\n if (transition?.styleProperties) {\n const { duration, easing, delay } = transition;\n\n if (duration) {\n const hasCustomPropertiesTransition = transition.styleProperties.some(\n (styleProperty) => styleProperty.name.startsWith('--'),\n );\n\n if (hasCustomPropertiesTransition) {\n // If there are custom properties in the transition, we need to fall back to Viewer's legacy implementation\n transitions = [\n `all ${duration}ms ${getEasing(easing || 'ease')}${\n delay ? ` ${delay}ms` : ''\n }`,\n 'visibility 0s',\n ];\n } else {\n transitions = transition.styleProperties.map(\n (styleProperty) =>\n `${styleProperty.name} ${duration}ms ${getEasing(\n easing || 'ease',\n )}${delay ? ` ${delay}ms` : ''}`,\n );\n }\n }\n\n properties = transition.styleProperties;\n } else {\n transitions =\n properties\n ?.filter((property) => property.duration)\n .map(\n (property) =>\n `${property.name} ${property.duration}ms ${\n getEasing(property.easing) || 'ease'\n }${property.delay ? ` ${property.delay}ms` : ''}`,\n ) || [];\n }\n\n const styleProperties =\n properties?.map((property) => `${property.name}: ${property.value};`) || [];\n const escapedKey = key.replace(/\"/g, \"'\");\n\n // Build selectors, applying condition if present\n const stateSelector = `:is(:state(${effectId}), :--${effectId}) ${childSelector}`;\n const dataAttrSelector = `[data-interact-effect~=\"${effectId}\"] ${childSelector}`;\n\n const finalStateSelector = selectorCondition\n ? applySelectorCondition(stateSelector, selectorCondition)\n : stateSelector;\n const finalDataAttrSelector = selectorCondition\n ? applySelectorCondition(dataAttrSelector, selectorCondition)\n : dataAttrSelector;\n\n const result = [\n `${finalStateSelector},\n ${finalDataAttrSelector} {\n ${styleProperties.join(`\n `)}\n }`,\n ];\n\n if (transitions.length) {\n const transitionSelector = `[data-interact-key=\"${escapedKey}\"] ${childSelector}`;\n const finalTransitionSelector = selectorCondition\n ? applySelectorCondition(transitionSelector, selectorCondition)\n : transitionSelector;\n result.push(`@media (prefers-reduced-motion: no-preference) { ${finalTransitionSelector} {\n transition: ${transitions.join(', ')};\n } }`);\n }\n return result;\n}\n\nexport function getMediaQuery(\n conditionNames: string[] | undefined,\n conditions: Record<string, Condition>,\n) {\n const conditionContent = (conditionNames || [])\n .filter((conditionName) => {\n return (\n conditions[conditionName]?.type === 'media' &&\n conditions[conditionName].predicate\n );\n })\n .map((conditionName) => {\n return conditions[conditionName].predicate;\n })\n .join(') and (');\n\n const condition = conditionContent && `(${conditionContent})`;\n const mql = condition && window.matchMedia(condition);\n\n if (mql) {\n return mql;\n }\n}\n\nexport function getSelectorCondition(\n conditionNames: string[] | undefined,\n conditions: Record<string, Condition>,\n): string | undefined {\n for (const name of conditionNames || []) {\n const condition = conditions[name];\n if (condition?.type === 'selector' && condition.predicate) {\n return condition.predicate;\n }\n }\n return;\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
File without changes
|