@wix/interact 1.92.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 +25 -10
- package/dist/types/types.d.ts.map +1 -0
- package/dist/types/utils.d.ts +4 -2
- 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 -162
- package/dist/cjs/InteractElement.js.map +0 -1
- package/dist/cjs/__tests__/interact.spec.js +0 -1930
- 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 -246
- 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 -33
- package/dist/cjs/handlers/animationEnd.js.map +0 -1
- package/dist/cjs/handlers/click.js +0 -116
- package/dist/cjs/handlers/click.js.map +0 -1
- package/dist/cjs/handlers/hover.js +0 -141
- 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 -127
- package/dist/cjs/handlers/viewEnter.js.map +0 -1
- package/dist/cjs/handlers/viewProgress.js +0 -65
- 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 -68
- package/dist/cjs/utils.js.map +0 -1
- package/dist/esm/InteractElement.js +0 -156
- package/dist/esm/InteractElement.js.map +0 -1
- package/dist/esm/__tests__/interact.spec.js +0 -1937
- 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 -241
- 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 -29
- package/dist/esm/handlers/animationEnd.js.map +0 -1
- package/dist/esm/handlers/click.js +0 -116
- package/dist/esm/handlers/click.js.map +0 -1
- package/dist/esm/handlers/hover.js +0 -141
- 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 -129
- package/dist/esm/handlers/viewEnter.js.map +0 -1
- package/dist/esm/handlers/viewProgress.js +0 -61
- 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 -63
- 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,25 +1,21 @@
|
|
|
1
|
-
import type { StateParams } from '
|
|
1
|
+
import type { IInteractionController, StateParams } from '../types';
|
|
2
2
|
export declare const INTERACT_EFFECT_DATA_ATTR = "interactEffect";
|
|
3
3
|
export declare function getInteractElement(): {
|
|
4
4
|
new (): {
|
|
5
5
|
_internals: (ElementInternals & {
|
|
6
6
|
states: Set<string>;
|
|
7
7
|
}) | null;
|
|
8
|
-
|
|
9
|
-
sheet: CSSStyleSheet | null;
|
|
10
|
-
_observers: WeakMap<HTMLElement, MutationObserver>;
|
|
8
|
+
controller: IInteractionController;
|
|
11
9
|
connectedCallback(): void;
|
|
12
10
|
disconnectedCallback(): void;
|
|
13
|
-
disconnect(): void;
|
|
14
11
|
connect(key?: string): void;
|
|
15
|
-
|
|
16
|
-
toggleEffect(effectId: string, method: StateParams[
|
|
12
|
+
disconnect(): void;
|
|
13
|
+
toggleEffect(effectId: string, method: StateParams["method"], item?: HTMLElement | null): void;
|
|
17
14
|
getActiveEffects(): string[];
|
|
18
|
-
watchChildList(listContainer: string): void;
|
|
19
|
-
_childListChangeHandler(listContainer: string, entries: MutationRecord[]): void;
|
|
20
15
|
accessKey: string;
|
|
21
16
|
readonly accessKeyLabel: string;
|
|
22
17
|
autocapitalize: string;
|
|
18
|
+
autocorrect: boolean;
|
|
23
19
|
dir: string;
|
|
24
20
|
draggable: boolean;
|
|
25
21
|
hidden: boolean;
|
|
@@ -32,30 +28,39 @@ export declare function getInteractElement(): {
|
|
|
32
28
|
readonly offsetTop: number;
|
|
33
29
|
readonly offsetWidth: number;
|
|
34
30
|
outerText: string;
|
|
31
|
+
popover: string | null;
|
|
35
32
|
spellcheck: boolean;
|
|
36
33
|
title: string;
|
|
37
34
|
translate: boolean;
|
|
35
|
+
writingSuggestions: string;
|
|
38
36
|
attachInternals(): ElementInternals;
|
|
39
37
|
click(): void;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
hidePopover(): void;
|
|
39
|
+
showPopover(): void;
|
|
40
|
+
togglePopover(options?: boolean): boolean;
|
|
41
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
42
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
43
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
44
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
44
45
|
readonly attributes: NamedNodeMap;
|
|
45
|
-
|
|
46
|
+
get classList(): DOMTokenList;
|
|
47
|
+
set classList(value: string);
|
|
46
48
|
className: string;
|
|
47
49
|
readonly clientHeight: number;
|
|
48
50
|
readonly clientLeft: number;
|
|
49
51
|
readonly clientTop: number;
|
|
50
52
|
readonly clientWidth: number;
|
|
53
|
+
readonly currentCSSZoom: number;
|
|
51
54
|
id: string;
|
|
55
|
+
innerHTML: string;
|
|
52
56
|
readonly localName: string;
|
|
53
57
|
readonly namespaceURI: string | null;
|
|
54
58
|
onfullscreenchange: ((this: Element, ev: Event) => any) | null;
|
|
55
59
|
onfullscreenerror: ((this: Element, ev: Event) => any) | null;
|
|
56
60
|
outerHTML: string;
|
|
57
61
|
readonly ownerDocument: Document;
|
|
58
|
-
|
|
62
|
+
get part(): DOMTokenList;
|
|
63
|
+
set part(value: string);
|
|
59
64
|
readonly prefix: string | null;
|
|
60
65
|
readonly scrollHeight: number;
|
|
61
66
|
scrollLeft: number;
|
|
@@ -65,9 +70,12 @@ export declare function getInteractElement(): {
|
|
|
65
70
|
slot: string;
|
|
66
71
|
readonly tagName: string;
|
|
67
72
|
attachShadow(init: ShadowRootInit): ShadowRoot;
|
|
68
|
-
|
|
69
|
-
closest<
|
|
73
|
+
checkVisibility(options?: CheckVisibilityOptions): boolean;
|
|
74
|
+
closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
|
|
75
|
+
closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
|
|
76
|
+
closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
|
|
70
77
|
closest<E extends Element = Element>(selectors: string): E | null;
|
|
78
|
+
computedStyleMap(): StylePropertyMapReadOnly;
|
|
71
79
|
getAttribute(qualifiedName: string): string | null;
|
|
72
80
|
getAttributeNS(namespace: string | null, localName: string): string | null;
|
|
73
81
|
getAttributeNames(): string[];
|
|
@@ -76,40 +84,47 @@ export declare function getInteractElement(): {
|
|
|
76
84
|
getBoundingClientRect(): DOMRect;
|
|
77
85
|
getClientRects(): DOMRectList;
|
|
78
86
|
getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
|
|
79
|
-
getElementsByTagName<
|
|
80
|
-
getElementsByTagName<
|
|
87
|
+
getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
|
|
88
|
+
getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
|
|
89
|
+
getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
|
|
90
|
+
getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
|
|
81
91
|
getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
|
|
82
92
|
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
|
|
83
93
|
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
|
|
94
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
|
|
84
95
|
getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
|
|
96
|
+
getHTML(options?: GetHTMLOptions): string;
|
|
85
97
|
hasAttribute(qualifiedName: string): boolean;
|
|
86
98
|
hasAttributeNS(namespace: string | null, localName: string): boolean;
|
|
87
99
|
hasAttributes(): boolean;
|
|
88
100
|
hasPointerCapture(pointerId: number): boolean;
|
|
89
101
|
insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
|
|
90
|
-
insertAdjacentHTML(position: InsertPosition,
|
|
102
|
+
insertAdjacentHTML(position: InsertPosition, string: string): void;
|
|
91
103
|
insertAdjacentText(where: InsertPosition, data: string): void;
|
|
92
104
|
matches(selectors: string): boolean;
|
|
93
105
|
releasePointerCapture(pointerId: number): void;
|
|
94
106
|
removeAttribute(qualifiedName: string): void;
|
|
95
107
|
removeAttributeNS(namespace: string | null, localName: string): void;
|
|
96
108
|
removeAttributeNode(attr: Attr): Attr;
|
|
97
|
-
requestFullscreen(options?: FullscreenOptions
|
|
98
|
-
requestPointerLock(): void
|
|
99
|
-
scroll(options?: ScrollToOptions
|
|
109
|
+
requestFullscreen(options?: FullscreenOptions): Promise<void>;
|
|
110
|
+
requestPointerLock(options?: PointerLockOptions): Promise<void>;
|
|
111
|
+
scroll(options?: ScrollToOptions): void;
|
|
100
112
|
scroll(x: number, y: number): void;
|
|
101
|
-
scrollBy(options?: ScrollToOptions
|
|
113
|
+
scrollBy(options?: ScrollToOptions): void;
|
|
102
114
|
scrollBy(x: number, y: number): void;
|
|
103
|
-
scrollIntoView(arg?: boolean | ScrollIntoViewOptions
|
|
104
|
-
scrollTo(options?: ScrollToOptions
|
|
115
|
+
scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
|
|
116
|
+
scrollTo(options?: ScrollToOptions): void;
|
|
105
117
|
scrollTo(x: number, y: number): void;
|
|
106
118
|
setAttribute(qualifiedName: string, value: string): void;
|
|
107
119
|
setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
|
|
108
120
|
setAttributeNode(attr: Attr): Attr | null;
|
|
109
121
|
setAttributeNodeNS(attr: Attr): Attr | null;
|
|
122
|
+
setHTMLUnsafe(html: string): void;
|
|
110
123
|
setPointerCapture(pointerId: number): void;
|
|
111
|
-
toggleAttribute(qualifiedName: string, force?: boolean
|
|
124
|
+
toggleAttribute(qualifiedName: string, force?: boolean): boolean;
|
|
112
125
|
webkitMatchesSelector(selectors: string): boolean;
|
|
126
|
+
get textContent(): string;
|
|
127
|
+
set textContent(value: string | null);
|
|
113
128
|
readonly baseURI: string;
|
|
114
129
|
readonly childNodes: NodeListOf<ChildNode>;
|
|
115
130
|
readonly firstChild: ChildNode | null;
|
|
@@ -122,67 +137,78 @@ export declare function getInteractElement(): {
|
|
|
122
137
|
readonly parentElement: HTMLElement | null;
|
|
123
138
|
readonly parentNode: ParentNode | null;
|
|
124
139
|
readonly previousSibling: ChildNode | null;
|
|
125
|
-
textContent: string | null;
|
|
126
140
|
appendChild<T extends Node>(node: T): T;
|
|
127
|
-
cloneNode(
|
|
141
|
+
cloneNode(subtree?: boolean): Node;
|
|
128
142
|
compareDocumentPosition(other: Node): number;
|
|
129
143
|
contains(other: Node | null): boolean;
|
|
130
|
-
getRootNode(options?: GetRootNodeOptions
|
|
144
|
+
getRootNode(options?: GetRootNodeOptions): Node;
|
|
131
145
|
hasChildNodes(): boolean;
|
|
132
|
-
insertBefore<
|
|
146
|
+
insertBefore<T extends Node>(node: T, child: Node | null): T;
|
|
133
147
|
isDefaultNamespace(namespace: string | null): boolean;
|
|
134
148
|
isEqualNode(otherNode: Node | null): boolean;
|
|
135
149
|
isSameNode(otherNode: Node | null): boolean;
|
|
136
150
|
lookupNamespaceURI(prefix: string | null): string | null;
|
|
137
151
|
lookupPrefix(namespace: string | null): string | null;
|
|
138
152
|
normalize(): void;
|
|
139
|
-
removeChild<
|
|
140
|
-
replaceChild<
|
|
141
|
-
readonly
|
|
142
|
-
readonly
|
|
143
|
-
readonly
|
|
144
|
-
readonly
|
|
145
|
-
readonly
|
|
146
|
-
readonly
|
|
147
|
-
readonly
|
|
148
|
-
readonly
|
|
149
|
-
readonly
|
|
150
|
-
readonly
|
|
151
|
-
readonly
|
|
152
|
-
readonly
|
|
153
|
-
readonly
|
|
154
|
-
readonly
|
|
155
|
-
readonly
|
|
156
|
-
readonly
|
|
157
|
-
readonly
|
|
158
|
-
readonly
|
|
153
|
+
removeChild<T extends Node>(child: T): T;
|
|
154
|
+
replaceChild<T extends Node>(node: Node, child: T): T;
|
|
155
|
+
readonly ELEMENT_NODE: 1;
|
|
156
|
+
readonly ATTRIBUTE_NODE: 2;
|
|
157
|
+
readonly TEXT_NODE: 3;
|
|
158
|
+
readonly CDATA_SECTION_NODE: 4;
|
|
159
|
+
readonly ENTITY_REFERENCE_NODE: 5;
|
|
160
|
+
readonly ENTITY_NODE: 6;
|
|
161
|
+
readonly PROCESSING_INSTRUCTION_NODE: 7;
|
|
162
|
+
readonly COMMENT_NODE: 8;
|
|
163
|
+
readonly DOCUMENT_NODE: 9;
|
|
164
|
+
readonly DOCUMENT_TYPE_NODE: 10;
|
|
165
|
+
readonly DOCUMENT_FRAGMENT_NODE: 11;
|
|
166
|
+
readonly NOTATION_NODE: 12;
|
|
167
|
+
readonly DOCUMENT_POSITION_DISCONNECTED: 1;
|
|
168
|
+
readonly DOCUMENT_POSITION_PRECEDING: 2;
|
|
169
|
+
readonly DOCUMENT_POSITION_FOLLOWING: 4;
|
|
170
|
+
readonly DOCUMENT_POSITION_CONTAINS: 8;
|
|
171
|
+
readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
|
|
172
|
+
readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
|
|
159
173
|
dispatchEvent(event: Event): boolean;
|
|
174
|
+
ariaActiveDescendantElement: Element | null;
|
|
160
175
|
ariaAtomic: string | null;
|
|
161
176
|
ariaAutoComplete: string | null;
|
|
177
|
+
ariaBrailleLabel: string | null;
|
|
178
|
+
ariaBrailleRoleDescription: string | null;
|
|
162
179
|
ariaBusy: string | null;
|
|
163
180
|
ariaChecked: string | null;
|
|
164
181
|
ariaColCount: string | null;
|
|
165
182
|
ariaColIndex: string | null;
|
|
166
183
|
ariaColIndexText: string | null;
|
|
167
184
|
ariaColSpan: string | null;
|
|
185
|
+
ariaControlsElements: ReadonlyArray<Element> | null;
|
|
168
186
|
ariaCurrent: string | null;
|
|
187
|
+
ariaDescribedByElements: ReadonlyArray<Element> | null;
|
|
188
|
+
ariaDescription: string | null;
|
|
189
|
+
ariaDetailsElements: ReadonlyArray<Element> | null;
|
|
169
190
|
ariaDisabled: string | null;
|
|
191
|
+
ariaErrorMessageElements: ReadonlyArray<Element> | null;
|
|
170
192
|
ariaExpanded: string | null;
|
|
193
|
+
ariaFlowToElements: ReadonlyArray<Element> | null;
|
|
171
194
|
ariaHasPopup: string | null;
|
|
172
195
|
ariaHidden: string | null;
|
|
173
196
|
ariaInvalid: string | null;
|
|
174
197
|
ariaKeyShortcuts: string | null;
|
|
175
198
|
ariaLabel: string | null;
|
|
199
|
+
ariaLabelledByElements: ReadonlyArray<Element> | null;
|
|
176
200
|
ariaLevel: string | null;
|
|
177
201
|
ariaLive: string | null;
|
|
178
202
|
ariaModal: string | null;
|
|
179
203
|
ariaMultiLine: string | null;
|
|
180
204
|
ariaMultiSelectable: string | null;
|
|
181
205
|
ariaOrientation: string | null;
|
|
206
|
+
ariaOwnsElements: ReadonlyArray<Element> | null;
|
|
182
207
|
ariaPlaceholder: string | null;
|
|
183
208
|
ariaPosInSet: string | null;
|
|
184
209
|
ariaPressed: string | null;
|
|
185
210
|
ariaReadOnly: string | null;
|
|
211
|
+
ariaRelevant: string | null;
|
|
186
212
|
ariaRequired: string | null;
|
|
187
213
|
ariaRoleDescription: string | null;
|
|
188
214
|
ariaRowCount: string | null;
|
|
@@ -197,33 +223,35 @@ export declare function getInteractElement(): {
|
|
|
197
223
|
ariaValueNow: string | null;
|
|
198
224
|
ariaValueText: string | null;
|
|
199
225
|
role: string | null;
|
|
200
|
-
animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions
|
|
201
|
-
getAnimations(options?: GetAnimationsOptions
|
|
202
|
-
after(...nodes: (
|
|
203
|
-
before(...nodes: (
|
|
226
|
+
animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
|
|
227
|
+
getAnimations(options?: GetAnimationsOptions): Animation[];
|
|
228
|
+
after(...nodes: (Node | string)[]): void;
|
|
229
|
+
before(...nodes: (Node | string)[]): void;
|
|
204
230
|
remove(): void;
|
|
205
|
-
replaceWith(...nodes: (
|
|
206
|
-
innerHTML: string;
|
|
231
|
+
replaceWith(...nodes: (Node | string)[]): void;
|
|
207
232
|
readonly nextElementSibling: Element | null;
|
|
208
233
|
readonly previousElementSibling: Element | null;
|
|
209
234
|
readonly childElementCount: number;
|
|
210
235
|
readonly children: HTMLCollection;
|
|
211
236
|
readonly firstElementChild: Element | null;
|
|
212
237
|
readonly lastElementChild: Element | null;
|
|
213
|
-
append(...nodes: (
|
|
214
|
-
prepend(...nodes: (
|
|
215
|
-
querySelector<
|
|
216
|
-
querySelector<
|
|
217
|
-
querySelector<
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
querySelectorAll<
|
|
221
|
-
|
|
238
|
+
append(...nodes: (Node | string)[]): void;
|
|
239
|
+
prepend(...nodes: (Node | string)[]): void;
|
|
240
|
+
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
|
|
241
|
+
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
|
|
242
|
+
querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
|
|
243
|
+
querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
|
|
244
|
+
querySelector<E extends Element = Element>(selectors: string): E | null;
|
|
245
|
+
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
|
|
246
|
+
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
|
|
247
|
+
querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
|
|
248
|
+
querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
|
|
249
|
+
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
|
|
250
|
+
replaceChildren(...nodes: (Node | string)[]): void;
|
|
222
251
|
readonly assignedSlot: HTMLSlotElement | null;
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
readonly style: CSSStyleDeclaration;
|
|
252
|
+
readonly attributeStyleMap: StylePropertyMap;
|
|
253
|
+
get style(): CSSStyleDeclaration;
|
|
254
|
+
set style(cssText: string);
|
|
227
255
|
contentEditable: string;
|
|
228
256
|
enterKeyHint: string;
|
|
229
257
|
inputMode: string;
|
|
@@ -233,17 +261,23 @@ export declare function getInteractElement(): {
|
|
|
233
261
|
onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
234
262
|
onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
235
263
|
onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
236
|
-
onauxclick: ((this: GlobalEventHandlers, ev:
|
|
264
|
+
onauxclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
237
265
|
onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
|
|
266
|
+
onbeforematch: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
267
|
+
onbeforetoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
|
|
238
268
|
onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
|
239
269
|
oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
240
270
|
oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
241
271
|
oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
242
272
|
onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
243
|
-
onclick: ((this: GlobalEventHandlers, ev:
|
|
273
|
+
onclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
244
274
|
onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
245
|
-
|
|
275
|
+
oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
276
|
+
oncontextmenu: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
277
|
+
oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
278
|
+
oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
246
279
|
oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
280
|
+
oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
247
281
|
ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
248
282
|
ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
249
283
|
ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
@@ -276,6 +310,7 @@ export declare function getInteractElement(): {
|
|
|
276
310
|
onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
277
311
|
onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
278
312
|
onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
313
|
+
onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
279
314
|
onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
280
315
|
onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
281
316
|
onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
@@ -286,12 +321,14 @@ export declare function getInteractElement(): {
|
|
|
286
321
|
onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
287
322
|
onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
288
323
|
onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
324
|
+
onpointerrawupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
289
325
|
onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
290
|
-
onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent
|
|
326
|
+
onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
|
|
291
327
|
onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
292
328
|
onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
293
329
|
onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
|
|
294
330
|
onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
331
|
+
onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
295
332
|
onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
|
|
296
333
|
onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
297
334
|
onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
@@ -303,7 +340,7 @@ export declare function getInteractElement(): {
|
|
|
303
340
|
onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
|
|
304
341
|
onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
305
342
|
ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
306
|
-
ontoggle: ((this: GlobalEventHandlers, ev:
|
|
343
|
+
ontoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
|
|
307
344
|
ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
308
345
|
ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
309
346
|
ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
@@ -321,9 +358,10 @@ export declare function getInteractElement(): {
|
|
|
321
358
|
onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
|
|
322
359
|
autofocus: boolean;
|
|
323
360
|
readonly dataset: DOMStringMap;
|
|
324
|
-
nonce?: string
|
|
361
|
+
nonce?: string;
|
|
325
362
|
tabIndex: number;
|
|
326
363
|
blur(): void;
|
|
327
|
-
focus(options?: FocusOptions
|
|
364
|
+
focus(options?: FocusOptions): void;
|
|
328
365
|
};
|
|
329
366
|
};
|
|
367
|
+
//# sourceMappingURL=InteractElement.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InteractElement.d.ts","sourceRoot":"","sources":["../../../src/web/InteractElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpE,eAAO,MAAM,yBAAyB,mBAAmB,CAAC;AAE1D,wBAAgB,kBAAkB;;oBAKlB,CAAC,gBAAgB,GAAG;YAAE,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;SAAE,CAAC,GAAG,IAAI;oBACnD,sBAAsB;;;sBAiCpB,MAAM;;+BAYG,MAAM,UAAU,WAAW,CAAC,QAAQ,CAAC,SAAS,WAAW,GAAG,IAAI;4BA0BnE,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAS/B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defineInteractElement.d.ts","sourceRoot":"","sources":["../../../src/web/defineInteractElement.ts"],"names":[],"mappings":"AAEA,wBAAgB,qBAAqB,YASpC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/web/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAI5C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,CAAC;AAEpB,cAAc,UAAU,CAAC"}
|
package/docs/README.md
ADDED
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
# @wix/interact Documentation
|
|
2
|
+
|
|
3
|
+
Welcome to the complete documentation for the `@wix/interact` package - a powerful, declarative interaction library for creating engaging web animations and effects.
|
|
4
|
+
|
|
5
|
+
## Package Entry Points
|
|
6
|
+
|
|
7
|
+
| Entry Point | Use Case | Key Exports |
|
|
8
|
+
|-------------|----------|-------------|
|
|
9
|
+
| `@wix/interact/react` | React applications | `Interact`, `generate`, `Interaction` |
|
|
10
|
+
| `@wix/interact/web` | Web Components | `Interact`, `generate` |
|
|
11
|
+
| `@wix/interact` | Vanilla JS | `Interact`, `add`, `remove`, `generate` |
|
|
12
|
+
|
|
13
|
+
## Table of Contents
|
|
14
|
+
|
|
15
|
+
### **API Reference**
|
|
16
|
+
Complete reference documentation for all classes, methods, and types.
|
|
17
|
+
|
|
18
|
+
- [**Core API**](api/README.md) - Main classes and functions
|
|
19
|
+
- [Interact Class](api/interact-class.md) - Main interaction manager
|
|
20
|
+
- [InteractionController](api/interaction-controller.md) - Controller class for element interactions
|
|
21
|
+
- [Standalone Functions](api/functions.md) - `add()`, `remove()`, `generate()`, `addListItems()`, `removeListItems()`
|
|
22
|
+
- [Custom Element](api/interact-element.md) - `<interact-element>` API
|
|
23
|
+
- [Element Selection](api/element-selection.md) - Selection priority and patterns
|
|
24
|
+
- [**Type Definitions**](api/types.md) - Complete TypeScript interfaces
|
|
25
|
+
- [Configuration Types](api/types.md#configuration-types) - `InteractConfig`, `Interaction`, `Effect`
|
|
26
|
+
- [Controller Types](api/types.md#controller-and-element-types) - `IInteractionController`, `IInteractElement`
|
|
27
|
+
- [Trigger Types](api/types.md#trigger-types) - All trigger parameters and types
|
|
28
|
+
- [Effect Types](api/types.md#effect-types) - Time, scrub, and transition effects
|
|
29
|
+
- [React Types](api/types.md#react-types) - `InteractRef` and React-specific types
|
|
30
|
+
|
|
31
|
+
### **Guides & Tutorials**
|
|
32
|
+
Learn the concepts and patterns for building effective interactions.
|
|
33
|
+
|
|
34
|
+
- [**Getting Started**](guides/getting-started.md) - Your first interaction in 5 minutes
|
|
35
|
+
- [**Core Concepts**](guides/README.md) - Understanding the interaction system
|
|
36
|
+
- [Understanding Triggers](guides/understanding-triggers.md) - When interactions happen
|
|
37
|
+
- [Working with Effects](guides/effects-and-animations.md) - What happens during interactions
|
|
38
|
+
- [Configuration Structure](guides/configuration-structure.md) - Organizing complex interactions
|
|
39
|
+
- [Custom Elements](guides/custom-elements.md) - How `interact-element` works
|
|
40
|
+
- [Lists and Dynamic Content](guides/lists-and-dynamic-content.md) - Working with repeating elements
|
|
41
|
+
- [State Management](guides/state-management.md) - CSS states vs data attributes
|
|
42
|
+
- [Conditions & Media Queries](guides/conditions-and-media-queries.md) - Responsive interactions
|
|
43
|
+
- [**Performance**](guides/performance.md) - Optimization tips and best practices
|
|
44
|
+
|
|
45
|
+
### **Examples & Patterns**
|
|
46
|
+
Practical examples and common interaction patterns.
|
|
47
|
+
|
|
48
|
+
- [**Basic Examples**](examples/README.md) - Simple, copy-paste examples
|
|
49
|
+
- [Entrance Animations](examples/entrance-animations.md) - Viewport-triggered effects
|
|
50
|
+
- [Click Interactions](examples/click-interactions.md) - User-triggered actions
|
|
51
|
+
- [Hover Effects](examples/hover-effects.md) - Mouse interaction patterns
|
|
52
|
+
- [Scroll Animations](examples/scroll-animations.md) - Progress-based effects
|
|
53
|
+
- [List Patterns](examples/list-patterns.md) - 20+ list and grid animation patterns
|
|
54
|
+
- [**Advanced Patterns**](examples/advanced-patterns.md) - Complex interaction sequences
|
|
55
|
+
- [**Real-world Examples**](examples/real-world.md) - Production-ready implementations
|
|
56
|
+
|
|
57
|
+
### **Integration Guides**
|
|
58
|
+
Framework-specific integration and migration guides.
|
|
59
|
+
|
|
60
|
+
- [**Framework Integration**](integration/README.md) - Using with different frameworks
|
|
61
|
+
- [React Integration](integration/react.md) - `Interaction` component, `createInteractRef`, hooks
|
|
62
|
+
- [Vanilla JavaScript](integration/vanilla-js.md) - Direct DOM usage
|
|
63
|
+
- [Other Frameworks](integration/other-frameworks.md) - Vue, Angular, Svelte, etc.
|
|
64
|
+
- [**Migration Guides**](integration/migration.md) - Coming from other libraries
|
|
65
|
+
- [**Testing**](integration/testing.md) - Testing interaction behaviors
|
|
66
|
+
- [**Debugging**](integration/debugging.md) - Development tools and techniques
|
|
67
|
+
|
|
68
|
+
### **Advanced Topics**
|
|
69
|
+
Deep-dive technical documentation for power users.
|
|
70
|
+
|
|
71
|
+
- [**Architecture**](advanced/architecture.md) - System design and decisions
|
|
72
|
+
- [**Custom Triggers**](advanced/custom-triggers.md) - Building your own triggers
|
|
73
|
+
- [**Browser Compatibility**](advanced/browser-support.md) - Polyfills and fallbacks
|
|
74
|
+
- [**Performance Deep Dive**](advanced/performance-optimization.md) - Advanced optimization
|
|
75
|
+
- [**Contributing**](advanced/contributing.md) - Development and contribution guide
|
|
76
|
+
|
|
77
|
+
## Quick Navigation
|
|
78
|
+
|
|
79
|
+
### I want to...
|
|
80
|
+
|
|
81
|
+
**Get started quickly**
|
|
82
|
+
→ [Getting Started Guide](guides/getting-started.md)
|
|
83
|
+
|
|
84
|
+
**Use with React**
|
|
85
|
+
→ [React Integration](integration/react.md)
|
|
86
|
+
|
|
87
|
+
**Understand the concepts**
|
|
88
|
+
→ [Core Concepts](guides/README.md)
|
|
89
|
+
|
|
90
|
+
**See code examples**
|
|
91
|
+
→ [Examples & Patterns](examples/README.md)
|
|
92
|
+
|
|
93
|
+
**Look up API details**
|
|
94
|
+
→ [API Reference](api/README.md)
|
|
95
|
+
|
|
96
|
+
**Integrate with my framework**
|
|
97
|
+
→ [Integration Guides](integration/README.md)
|
|
98
|
+
|
|
99
|
+
**Debug an issue**
|
|
100
|
+
→ [Debugging Guide](integration/debugging.md)
|
|
101
|
+
|
|
102
|
+
**Optimize performance**
|
|
103
|
+
→ [Performance Guide](guides/performance.md)
|
|
104
|
+
|
|
105
|
+
**Extend functionality**
|
|
106
|
+
→ [Advanced Topics](advanced/README.md)
|
|
107
|
+
|
|
108
|
+
## Quick Start
|
|
109
|
+
|
|
110
|
+
### React
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
import { useEffect } from 'react';
|
|
114
|
+
import { Interact, Interaction } from '@wix/interact/react';
|
|
115
|
+
|
|
116
|
+
const config = {
|
|
117
|
+
interactions: [{
|
|
118
|
+
key: 'card',
|
|
119
|
+
trigger: 'hover',
|
|
120
|
+
effects: [{
|
|
121
|
+
keyframeEffect: {
|
|
122
|
+
name: 'lift',
|
|
123
|
+
keyframes: [{ transform: 'translateY(-4px)' }]
|
|
124
|
+
},
|
|
125
|
+
duration: 200
|
|
126
|
+
}]
|
|
127
|
+
}],
|
|
128
|
+
effects: {}
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
function App() {
|
|
132
|
+
useEffect(() => {
|
|
133
|
+
const instance = Interact.create(config);
|
|
134
|
+
return () => instance.destroy();
|
|
135
|
+
}, []);
|
|
136
|
+
|
|
137
|
+
return (
|
|
138
|
+
<Interaction tagName="div" interactKey="card" className="card">
|
|
139
|
+
<h2>Hover me!</h2>
|
|
140
|
+
</Interaction>
|
|
141
|
+
);
|
|
142
|
+
}
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### Web Components
|
|
146
|
+
|
|
147
|
+
```html
|
|
148
|
+
<interact-element data-interact-key="card">
|
|
149
|
+
<div class="card">
|
|
150
|
+
<h2>Hover me!</h2>
|
|
151
|
+
</div>
|
|
152
|
+
</interact-element>
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
```javascript
|
|
156
|
+
import { Interact } from '@wix/interact/web';
|
|
157
|
+
|
|
158
|
+
Interact.create({
|
|
159
|
+
interactions: [{
|
|
160
|
+
key: 'card',
|
|
161
|
+
trigger: 'hover',
|
|
162
|
+
effects: [{
|
|
163
|
+
keyframeEffect: {
|
|
164
|
+
name: 'lift',
|
|
165
|
+
keyframes: [{ transform: 'translateY(-4px)' }]
|
|
166
|
+
},
|
|
167
|
+
duration: 200
|
|
168
|
+
}]
|
|
169
|
+
}],
|
|
170
|
+
effects: {}
|
|
171
|
+
});
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### Vanilla JS
|
|
175
|
+
|
|
176
|
+
```html
|
|
177
|
+
<div class="card" data-interact-key="nice-card">
|
|
178
|
+
<h2>Hover me!</h2>
|
|
179
|
+
</div>
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
```javascript
|
|
183
|
+
import { Interact, add } from '@wix/interact';
|
|
184
|
+
|
|
185
|
+
const niceCard = document.querySelector('[data-interact-key="nice-card"]');
|
|
186
|
+
|
|
187
|
+
add(niceCard);
|
|
188
|
+
|
|
189
|
+
Interact.create({
|
|
190
|
+
interactions: [{
|
|
191
|
+
key: 'nice-card',
|
|
192
|
+
trigger: 'hover',
|
|
193
|
+
effects: [{
|
|
194
|
+
keyframeEffect: {
|
|
195
|
+
name: 'lift',
|
|
196
|
+
keyframes: [{ transform: 'translateY(-4px)' }]
|
|
197
|
+
},
|
|
198
|
+
duration: 200
|
|
199
|
+
}]
|
|
200
|
+
}],
|
|
201
|
+
effects: {}
|
|
202
|
+
});
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
## Version Information
|
|
206
|
+
|
|
207
|
+
This documentation is for `@wix/interact` v1.0.0. For earlier versions or migration information, see the [Migration Guide](integration/migration.md).
|
|
208
|
+
|
|
209
|
+
## Feedback
|
|
210
|
+
|
|
211
|
+
Found an issue with the documentation? Please [open an issue](https://github.com/wix-incubator/wow-libs/issues) or contribute improvements via pull request.
|