@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.
Files changed (179) hide show
  1. package/dist/cjs/index.js +2 -23
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/react.js +15 -0
  4. package/dist/cjs/react.js.map +1 -0
  5. package/dist/cjs/web.js +2 -0
  6. package/dist/cjs/web.js.map +1 -0
  7. package/dist/es/index.js +8 -0
  8. package/dist/es/index.js.map +1 -0
  9. package/dist/es/react.js +650 -0
  10. package/dist/es/react.js.map +1 -0
  11. package/dist/es/web.js +56 -0
  12. package/dist/es/web.js.map +1 -0
  13. package/dist/index-C8QxOkui.mjs +7940 -0
  14. package/dist/index-C8QxOkui.mjs.map +1 -0
  15. package/dist/index-DEPRHaUt.js +18 -0
  16. package/dist/index-DEPRHaUt.js.map +1 -0
  17. package/dist/tsconfig.build.tsbuildinfo +1 -0
  18. package/dist/types/core/Interact.d.ts +17 -7
  19. package/dist/types/core/Interact.d.ts.map +1 -0
  20. package/dist/types/core/InteractionController.d.ts +19 -0
  21. package/dist/types/core/InteractionController.d.ts.map +1 -0
  22. package/dist/types/core/add.d.ts +4 -3
  23. package/dist/types/core/add.d.ts.map +1 -0
  24. package/dist/types/core/css.d.ts +3 -0
  25. package/dist/types/core/css.d.ts.map +1 -0
  26. package/dist/types/core/remove.d.ts +3 -1
  27. package/dist/types/core/remove.d.ts.map +1 -0
  28. package/dist/types/core/utilities.d.ts +1 -0
  29. package/dist/types/core/utilities.d.ts.map +1 -0
  30. package/dist/types/dom/api.d.ts +3 -0
  31. package/dist/types/dom/api.d.ts.map +1 -0
  32. package/dist/types/handlers/animationEnd.d.ts +3 -2
  33. package/dist/types/handlers/animationEnd.d.ts.map +1 -0
  34. package/dist/types/handlers/click.d.ts +3 -2
  35. package/dist/types/handlers/click.d.ts.map +1 -0
  36. package/dist/types/handlers/hover.d.ts +3 -2
  37. package/dist/types/handlers/hover.d.ts.map +1 -0
  38. package/dist/types/handlers/index.d.ts +1 -0
  39. package/dist/types/handlers/index.d.ts.map +1 -0
  40. package/dist/types/handlers/pointerMove.d.ts +3 -2
  41. package/dist/types/handlers/pointerMove.d.ts.map +1 -0
  42. package/dist/types/handlers/utilities.d.ts +1 -0
  43. package/dist/types/handlers/utilities.d.ts.map +1 -0
  44. package/dist/types/handlers/viewEnter.d.ts +3 -2
  45. package/dist/types/handlers/viewEnter.d.ts.map +1 -0
  46. package/dist/types/handlers/viewProgress.d.ts +4 -3
  47. package/dist/types/handlers/viewProgress.d.ts.map +1 -0
  48. package/dist/types/index.d.ts +3 -2
  49. package/dist/types/index.d.ts.map +1 -0
  50. package/dist/types/react/Interaction.d.ts +10 -0
  51. package/dist/types/react/Interaction.d.ts.map +1 -0
  52. package/dist/types/react/index.d.ts +8 -0
  53. package/dist/types/react/index.d.ts.map +1 -0
  54. package/dist/types/react/interactRef.d.ts +3 -0
  55. package/dist/types/react/interactRef.d.ts.map +1 -0
  56. package/dist/types/types.d.ts +23 -10
  57. package/dist/types/types.d.ts.map +1 -0
  58. package/dist/types/utils.d.ts +2 -1
  59. package/dist/types/utils.d.ts.map +1 -0
  60. package/dist/types/{InteractElement.d.ts → web/InteractElement.d.ts} +115 -77
  61. package/dist/types/web/InteractElement.d.ts.map +1 -0
  62. package/dist/types/web/defineInteractElement.d.ts +2 -0
  63. package/dist/types/web/defineInteractElement.d.ts.map +1 -0
  64. package/dist/types/web/index.d.ts +6 -0
  65. package/dist/types/web/index.d.ts.map +1 -0
  66. package/docs/README.md +211 -0
  67. package/docs/advanced/README.md +164 -0
  68. package/docs/api/README.md +157 -0
  69. package/docs/api/element-selection.md +607 -0
  70. package/docs/api/functions.md +638 -0
  71. package/docs/api/interact-class.md +663 -0
  72. package/docs/api/interact-element.md +565 -0
  73. package/docs/api/interaction-controller.md +450 -0
  74. package/docs/api/types.md +957 -0
  75. package/docs/examples/README.md +212 -0
  76. package/docs/examples/click-interactions.md +977 -0
  77. package/docs/examples/entrance-animations.md +935 -0
  78. package/docs/examples/hover-effects.md +930 -0
  79. package/docs/examples/list-patterns.md +737 -0
  80. package/docs/guides/README.md +49 -0
  81. package/docs/guides/conditions-and-media-queries.md +1068 -0
  82. package/docs/guides/configuration-structure.md +726 -0
  83. package/docs/guides/custom-elements.md +327 -0
  84. package/docs/guides/effects-and-animations.md +634 -0
  85. package/docs/guides/getting-started.md +379 -0
  86. package/docs/guides/lists-and-dynamic-content.md +713 -0
  87. package/docs/guides/state-management.md +747 -0
  88. package/docs/guides/understanding-triggers.md +690 -0
  89. package/docs/integration/README.md +264 -0
  90. package/docs/integration/react.md +605 -0
  91. package/package.json +73 -56
  92. package/rules/Integration.md +255 -0
  93. package/rules/click-rules.md +533 -0
  94. package/rules/full-lean.md +346 -0
  95. package/rules/hover-rules.md +593 -0
  96. package/rules/pointermove-rules.md +1341 -0
  97. package/rules/scroll-list-rules.md +900 -0
  98. package/rules/viewenter-rules.md +1015 -0
  99. package/rules/viewprogress-rules.md +1044 -0
  100. package/dist/cjs/InteractElement.js +0 -163
  101. package/dist/cjs/InteractElement.js.map +0 -1
  102. package/dist/cjs/__tests__/interact.spec.js +0 -2094
  103. package/dist/cjs/__tests__/interact.spec.js.map +0 -1
  104. package/dist/cjs/__tests__/viewEnter.spec.js +0 -207
  105. package/dist/cjs/__tests__/viewEnter.spec.js.map +0 -1
  106. package/dist/cjs/core/Interact.js +0 -257
  107. package/dist/cjs/core/Interact.js.map +0 -1
  108. package/dist/cjs/core/add.js +0 -250
  109. package/dist/cjs/core/add.js.map +0 -1
  110. package/dist/cjs/core/remove.js +0 -35
  111. package/dist/cjs/core/remove.js.map +0 -1
  112. package/dist/cjs/core/utilities.js +0 -16
  113. package/dist/cjs/core/utilities.js.map +0 -1
  114. package/dist/cjs/external-types.d.js +0 -2
  115. package/dist/cjs/external-types.d.js.map +0 -1
  116. package/dist/cjs/handlers/animationEnd.js +0 -37
  117. package/dist/cjs/handlers/animationEnd.js.map +0 -1
  118. package/dist/cjs/handlers/click.js +0 -122
  119. package/dist/cjs/handlers/click.js.map +0 -1
  120. package/dist/cjs/handlers/hover.js +0 -147
  121. package/dist/cjs/handlers/hover.js.map +0 -1
  122. package/dist/cjs/handlers/index.js +0 -32
  123. package/dist/cjs/handlers/index.js.map +0 -1
  124. package/dist/cjs/handlers/pointerMove.js +0 -49
  125. package/dist/cjs/handlers/pointerMove.js.map +0 -1
  126. package/dist/cjs/handlers/utilities.js +0 -49
  127. package/dist/cjs/handlers/utilities.js.map +0 -1
  128. package/dist/cjs/handlers/viewEnter.js +0 -131
  129. package/dist/cjs/handlers/viewEnter.js.map +0 -1
  130. package/dist/cjs/handlers/viewProgress.js +0 -79
  131. package/dist/cjs/handlers/viewProgress.js.map +0 -1
  132. package/dist/cjs/test-types.d.js +0 -2
  133. package/dist/cjs/test-types.d.js.map +0 -1
  134. package/dist/cjs/types.js +0 -2
  135. package/dist/cjs/types.js.map +0 -1
  136. package/dist/cjs/utils.js +0 -98
  137. package/dist/cjs/utils.js.map +0 -1
  138. package/dist/esm/InteractElement.js +0 -157
  139. package/dist/esm/InteractElement.js.map +0 -1
  140. package/dist/esm/__tests__/interact.spec.js +0 -2102
  141. package/dist/esm/__tests__/interact.spec.js.map +0 -1
  142. package/dist/esm/__tests__/viewEnter.spec.js +0 -210
  143. package/dist/esm/__tests__/viewEnter.spec.js.map +0 -1
  144. package/dist/esm/core/Interact.js +0 -251
  145. package/dist/esm/core/Interact.js.map +0 -1
  146. package/dist/esm/core/add.js +0 -245
  147. package/dist/esm/core/add.js.map +0 -1
  148. package/dist/esm/core/remove.js +0 -30
  149. package/dist/esm/core/remove.js.map +0 -1
  150. package/dist/esm/core/utilities.js +0 -14
  151. package/dist/esm/core/utilities.js.map +0 -1
  152. package/dist/esm/external-types.d.js +0 -2
  153. package/dist/esm/external-types.d.js.map +0 -1
  154. package/dist/esm/handlers/animationEnd.js +0 -33
  155. package/dist/esm/handlers/animationEnd.js.map +0 -1
  156. package/dist/esm/handlers/click.js +0 -122
  157. package/dist/esm/handlers/click.js.map +0 -1
  158. package/dist/esm/handlers/hover.js +0 -147
  159. package/dist/esm/handlers/hover.js.map +0 -1
  160. package/dist/esm/handlers/index.js +0 -27
  161. package/dist/esm/handlers/index.js.map +0 -1
  162. package/dist/esm/handlers/pointerMove.js +0 -48
  163. package/dist/esm/handlers/pointerMove.js.map +0 -1
  164. package/dist/esm/handlers/utilities.js +0 -43
  165. package/dist/esm/handlers/utilities.js.map +0 -1
  166. package/dist/esm/handlers/viewEnter.js +0 -133
  167. package/dist/esm/handlers/viewEnter.js.map +0 -1
  168. package/dist/esm/handlers/viewProgress.js +0 -75
  169. package/dist/esm/handlers/viewProgress.js.map +0 -1
  170. package/dist/esm/index.js +0 -5
  171. package/dist/esm/index.js.map +0 -1
  172. package/dist/esm/test-types.d.js +0 -2
  173. package/dist/esm/test-types.d.js.map +0 -1
  174. package/dist/esm/types.js +0 -2
  175. package/dist/esm/types.js.map +0 -1
  176. package/dist/esm/utils.js +0 -92
  177. package/dist/esm/utils.js.map +0 -1
  178. package/dist/types/__tests__/interact.spec.d.ts +0 -1
  179. package/dist/types/__tests__/viewEnter.spec.d.ts +0 -0
@@ -1,131 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- exports.__esModule = true;
5
- exports.default = void 0;
6
- var _motion = require("@wix/motion");
7
- var _utilities = require("./utilities");
8
- var _fastdom = _interopRequireDefault(require("fastdom"));
9
- const SAFE_OBSERVER_CONFIG = {
10
- root: null,
11
- rootMargin: '0px 0px -10% 0px',
12
- threshold: [0]
13
- };
14
- const observers = {};
15
- const handlerMap = new WeakMap();
16
- const elementFirstRun = new WeakSet();
17
- const elementObserverMap = new WeakMap();
18
- let viewEnterOptions = {};
19
- function setOptions(options) {
20
- viewEnterOptions = options;
21
- }
22
- function getObserver(options, isSafeMode = false) {
23
- const key = JSON.stringify({
24
- ...options,
25
- isSafeMode
26
- });
27
- if (observers[key]) {
28
- return observers[key];
29
- }
30
- const config = isSafeMode ? SAFE_OBSERVER_CONFIG : {
31
- root: null,
32
- rootMargin: options.inset ? `${options.inset} 0px ${options.inset}` : '0px',
33
- threshold: options.threshold
34
- };
35
- const observer = new IntersectionObserver(entries => {
36
- entries.forEach(entry => {
37
- const target = entry.target;
38
- const isFirstRun = !elementFirstRun.has(target);
39
- if (isFirstRun) {
40
- elementFirstRun.add(target);
41
- if (options.useSafeViewEnter && !entry.isIntersecting) {
42
- _fastdom.default.measure(() => {
43
- var _entry$rootBounds;
44
- const sourceHeight = entry.boundingClientRect.height;
45
- const rootHeight = (_entry$rootBounds = entry.rootBounds) == null ? void 0 : _entry$rootBounds.height;
46
- if (!rootHeight) {
47
- return;
48
- }
49
- const threshold = Array.isArray(options.threshold) ? Math.min(...options.threshold) : options.threshold;
50
- const needsSafeObserver = threshold && sourceHeight * threshold > rootHeight;
51
- if (needsSafeObserver) {
52
- _fastdom.default.mutate(() => {
53
- observer.unobserve(target);
54
- const safeObserver = getObserver(options, true);
55
- elementObserverMap.set(target, safeObserver);
56
- safeObserver.observe(target);
57
- });
58
- }
59
- });
60
- return;
61
- }
62
- }
63
- if (entry.isIntersecting) {
64
- const handlers = handlerMap.get(target);
65
- handlers == null || handlers.forEach(({
66
- source,
67
- handler
68
- }) => {
69
- if (source === entry.target) {
70
- handler();
71
- }
72
- });
73
- if (options.type === 'once') {
74
- observer.unobserve(entry.target);
75
- elementFirstRun.delete(target);
76
- }
77
- }
78
- });
79
- }, config);
80
- observers[key] = observer;
81
- return observer;
82
- }
83
- function addViewEnterHandler(source, target, effect, options = {}, globalOptions) {
84
- const observer = getObserver({
85
- ...viewEnterOptions,
86
- ...options
87
- });
88
- const animation = (0, _motion.getAnimation)(target, (0, _utilities.effectToAnimationOptions)(effect), undefined, globalOptions == null ? void 0 : globalOptions.reducedMotion);
89
- if (animation != null && animation.isCSS && options.type === 'once') {
90
- animation.onFinish(() => {
91
- target.dataset.motionEnter = 'done';
92
- });
93
- }
94
- const {
95
- selectorCondition
96
- } = globalOptions || {};
97
- const handler = () => {
98
- if (selectorCondition && !target.matches(selectorCondition)) return;
99
- animation.play(() => {
100
- if (!animation.isCSS) {
101
- target.dataset.motionEnter = 'done';
102
- }
103
- });
104
- };
105
- const cleanup = () => {
106
- const currentObserver = elementObserverMap.get(source) || observer;
107
- currentObserver.unobserve(source);
108
- animation.cancel();
109
- elementFirstRun.delete(source);
110
- elementObserverMap.delete(source);
111
- };
112
- const handlerObj = {
113
- source,
114
- target,
115
- handler,
116
- cleanup
117
- };
118
- (0, _utilities.addHandlerToMap)(handlerMap, source, handlerObj);
119
- (0, _utilities.addHandlerToMap)(handlerMap, target, handlerObj);
120
- elementObserverMap.set(source, observer);
121
- observer.observe(source);
122
- }
123
- function removeViewEnterHandler(element) {
124
- (0, _utilities.removeElementFromHandlerMap)(handlerMap, element);
125
- }
126
- var _default = exports.default = {
127
- add: addViewEnterHandler,
128
- remove: removeViewEnterHandler,
129
- setOptions
130
- };
131
- //# sourceMappingURL=viewEnter.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_motion","require","_utilities","_fastdom","_interopRequireDefault","SAFE_OBSERVER_CONFIG","root","rootMargin","threshold","observers","handlerMap","WeakMap","elementFirstRun","WeakSet","elementObserverMap","viewEnterOptions","setOptions","options","getObserver","isSafeMode","key","JSON","stringify","config","inset","observer","IntersectionObserver","entries","forEach","entry","target","isFirstRun","has","add","useSafeViewEnter","isIntersecting","fastdom","measure","_entry$rootBounds","sourceHeight","boundingClientRect","height","rootHeight","rootBounds","Array","isArray","Math","min","needsSafeObserver","mutate","unobserve","safeObserver","set","observe","handlers","get","source","handler","type","delete","addViewEnterHandler","effect","globalOptions","animation","getAnimation","effectToAnimationOptions","undefined","reducedMotion","isCSS","onFinish","dataset","motionEnter","selectorCondition","matches","play","cleanup","currentObserver","cancel","handlerObj","addHandlerToMap","removeViewEnterHandler","element","removeElementFromHandlerMap","_default","exports","default","remove"],"sources":["../../../src/handlers/viewEnter.ts"],"sourcesContent":["import type { AnimationGroup } from '@wix/motion';\nimport { getAnimation } from '@wix/motion';\nimport type {\n TimeEffect,\n HandlerObjectMap,\n ViewEnterParams,\n InteractionGlobalOptions,\n} from '../types';\nimport {\n effectToAnimationOptions,\n addHandlerToMap,\n removeElementFromHandlerMap,\n} from './utilities';\nimport fastdom from 'fastdom';\n\nconst SAFE_OBSERVER_CONFIG: IntersectionObserverInit = {\n root: null,\n rootMargin: '0px 0px -10% 0px',\n threshold: [0],\n};\n\nconst observers: Record<string, IntersectionObserver> = {};\nconst handlerMap = new WeakMap() as HandlerObjectMap;\nconst elementFirstRun = new WeakSet<HTMLElement>();\nconst elementObserverMap = new WeakMap<HTMLElement, IntersectionObserver>();\nlet viewEnterOptions: Partial<ViewEnterParams> = {};\n\nfunction setOptions(options: Partial<ViewEnterParams>) {\n viewEnterOptions = options;\n}\n\nfunction getObserver(options: ViewEnterParams, isSafeMode: boolean = false) {\n const key = JSON.stringify({ ...options, isSafeMode });\n\n if (observers[key]) {\n return observers[key];\n }\n\n const config: IntersectionObserverInit = isSafeMode\n ? SAFE_OBSERVER_CONFIG\n : {\n root: null,\n rootMargin: options.inset\n ? `${options.inset} 0px ${options.inset}`\n : '0px',\n threshold: options.threshold,\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n const target = entry.target as HTMLElement;\n const isFirstRun = !elementFirstRun.has(target);\n\n if (isFirstRun) {\n elementFirstRun.add(target);\n\n if (options.useSafeViewEnter && !entry.isIntersecting) {\n fastdom.measure(() => {\n const sourceHeight = entry.boundingClientRect.height;\n const rootHeight = entry.rootBounds?.height;\n\n if (!rootHeight) {\n return;\n }\n\n const threshold = Array.isArray(options.threshold)\n ? Math.min(...options.threshold)\n : options.threshold;\n\n const needsSafeObserver =\n threshold && sourceHeight * threshold > rootHeight;\n\n if (needsSafeObserver) {\n fastdom.mutate(() => {\n observer.unobserve(target);\n const safeObserver = getObserver(options, true);\n elementObserverMap.set(target, safeObserver);\n safeObserver.observe(target);\n });\n }\n });\n return;\n }\n }\n\n if (entry.isIntersecting) {\n const handlers = handlerMap.get(target);\n\n handlers?.forEach(({ source, handler }) => {\n if (source === entry.target) {\n handler!();\n }\n });\n\n if (options.type === 'once') {\n observer.unobserve(entry.target);\n elementFirstRun.delete(target);\n }\n }\n });\n }, config);\n\n observers[key] = observer;\n\n return observer;\n}\n\nfunction addViewEnterHandler(\n source: HTMLElement,\n target: HTMLElement,\n effect: TimeEffect,\n options: ViewEnterParams = {},\n globalOptions?: InteractionGlobalOptions,\n) {\n const observer = getObserver({ ...viewEnterOptions, ...options });\n const animation = getAnimation(\n target,\n effectToAnimationOptions(effect),\n undefined,\n globalOptions?.reducedMotion,\n ) as AnimationGroup;\n\n if (animation?.isCSS && options.type === 'once') {\n animation.onFinish(() => {\n target.dataset.motionEnter = 'done';\n });\n }\n 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,79 +0,0 @@
1
- "use strict";
2
-
3
- exports.__esModule = true;
4
- exports.default = void 0;
5
- var _motion = require("@wix/motion");
6
- var _fizban = require("fizban");
7
- var _utilities = require("./utilities");
8
- const scrollManagerMap = new WeakMap();
9
- let scrollOptionsGetter = () => ({});
10
- function registerOptionsGetter(getter) {
11
- scrollOptionsGetter = getter;
12
- }
13
- function addViewProgressHandler(source, target, effect, __, globalOptions) {
14
- if (globalOptions != null && globalOptions.reducedMotion) {
15
- return;
16
- }
17
- const triggerParams = {
18
- trigger: 'view-progress',
19
- element: source
20
- };
21
- const effectOptions = (0, _utilities.effectToAnimationOptions)(effect);
22
- let cleanup;
23
- if ('ViewTimeline' in window) {
24
- // Use ViewTimeline for modern browsers
25
- const animationGroup = (0, _motion.getWebAnimation)(target, effectOptions, triggerParams);
26
- if (animationGroup) {
27
- animationGroup.play();
28
- cleanup = () => {
29
- animationGroup.ready.then(() => {
30
- animationGroup.cancel();
31
- });
32
- };
33
- const handlerObj = {
34
- source,
35
- target,
36
- cleanup
37
- };
38
- (0, _utilities.addHandlerToMap)(scrollManagerMap, source, handlerObj);
39
- (0, _utilities.addHandlerToMap)(scrollManagerMap, target, handlerObj);
40
- }
41
- } else {
42
- const scene = (0, _motion.getScrubScene)(target, effectOptions, triggerParams);
43
- if (scene) {
44
- const scenes = Array.isArray(scene) ? scene : [scene];
45
- const scroll = new _fizban.Scroll({
46
- viewSource: source,
47
- scenes,
48
- observeViewportEntry: false,
49
- observeViewportResize: false,
50
- observeSourcesResize: true,
51
- root: document.body,
52
- ...scrollOptionsGetter()
53
- });
54
- cleanup = () => {
55
- scroll.destroy();
56
- };
57
- Promise.all(scenes.map(s => s.ready || Promise.resolve())).then(() => {
58
- scroll.start();
59
- });
60
- }
61
- }
62
- if (!cleanup) return;
63
- const handlerObj = {
64
- source,
65
- target,
66
- cleanup
67
- };
68
- (0, _utilities.addHandlerToMap)(scrollManagerMap, source, handlerObj);
69
- (0, _utilities.addHandlerToMap)(scrollManagerMap, target, handlerObj);
70
- }
71
- function removeViewProgressHandler(element) {
72
- (0, _utilities.removeElementFromHandlerMap)(scrollManagerMap, element);
73
- }
74
- var _default = exports.default = {
75
- add: addViewProgressHandler,
76
- remove: removeViewProgressHandler,
77
- registerOptionsGetter
78
- };
79
- //# sourceMappingURL=viewProgress.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_motion","require","_fizban","_utilities","scrollManagerMap","WeakMap","scrollOptionsGetter","registerOptionsGetter","getter","addViewProgressHandler","source","target","effect","__","globalOptions","reducedMotion","triggerParams","trigger","element","effectOptions","effectToAnimationOptions","cleanup","window","animationGroup","getWebAnimation","play","ready","then","cancel","handlerObj","addHandlerToMap","scene","getScrubScene","scenes","Array","isArray","scroll","Scroll","viewSource","observeViewportEntry","observeViewportResize","observeSourcesResize","root","document","body","destroy","Promise","all","map","s","resolve","start","removeViewProgressHandler","removeElementFromHandlerMap","_default","exports","default","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":[]}
@@ -1,2 +0,0 @@
1
- /// <reference types="@wix/jest-yoshi-preset/types" />
2
- //# sourceMappingURL=test-types.d.js.map
@@ -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/cjs/types.js DELETED
@@ -1,2 +0,0 @@
1
-
2
- //# sourceMappingURL=types.js.map
@@ -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/cjs/utils.js DELETED
@@ -1,98 +0,0 @@
1
- "use strict";
2
-
3
- exports.__esModule = true;
4
- exports.createTransitionCSS = createTransitionCSS;
5
- exports.generateId = generateId;
6
- exports.getMediaQuery = getMediaQuery;
7
- exports.getSelectorCondition = getSelectorCondition;
8
- var _motion = require("@wix/motion");
9
- /**
10
- * Applies a selector condition predicate to a base selector.
11
- * - If `&` is in the predicate, replace `&` with the base selector
12
- * - If no `&`, assume `&<predicate>` (append predicate to base selector)
13
- */
14
- function applySelectorCondition(baseSelector, predicate) {
15
- if (predicate.includes('&')) {
16
- return predicate.replace(/&/g, baseSelector);
17
- }
18
- return `${baseSelector}${predicate}`;
19
- }
20
- function generateId() {
21
- return 'wi-12343210'.replace(/\d/g, c => String.fromCharCode((+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4) + 97) // 97 for "a"
22
- );
23
- }
24
- function createTransitionCSS({
25
- key,
26
- effectId,
27
- transition,
28
- properties,
29
- childSelector = '> :first-child',
30
- selectorCondition
31
- }) {
32
- var _properties2;
33
- let transitions = [];
34
- if (transition != null && transition.styleProperties) {
35
- const {
36
- duration,
37
- easing,
38
- delay
39
- } = transition;
40
- if (duration) {
41
- const hasCustomPropertiesTransition = transition.styleProperties.some(styleProperty => styleProperty.name.startsWith('--'));
42
- if (hasCustomPropertiesTransition) {
43
- // If there are custom properties in the transition, we need to fall back to Viewer's legacy implementation
44
- transitions = [`all ${duration}ms ${(0, _motion.getEasing)(easing || 'ease')}${delay ? ` ${delay}ms` : ''}`, 'visibility 0s'];
45
- } else {
46
- transitions = transition.styleProperties.map(styleProperty => `${styleProperty.name} ${duration}ms ${(0, _motion.getEasing)(easing || 'ease')}${delay ? ` ${delay}ms` : ''}`);
47
- }
48
- }
49
- properties = transition.styleProperties;
50
- } else {
51
- var _properties;
52
- transitions = ((_properties = properties) == null ? void 0 : _properties.filter(property => property.duration).map(property => `${property.name} ${property.duration}ms ${(0, _motion.getEasing)(property.easing) || 'ease'}${property.delay ? ` ${property.delay}ms` : ''}`)) || [];
53
- }
54
- const styleProperties = ((_properties2 = properties) == null ? void 0 : _properties2.map(property => `${property.name}: ${property.value};`)) || [];
55
- const escapedKey = key.replace(/"/g, "'");
56
-
57
- // Build selectors, applying condition if present
58
- const stateSelector = `:is(:state(${effectId}), :--${effectId}) ${childSelector}`;
59
- const dataAttrSelector = `[data-interact-effect~="${effectId}"] ${childSelector}`;
60
- const finalStateSelector = selectorCondition ? applySelectorCondition(stateSelector, selectorCondition) : stateSelector;
61
- const finalDataAttrSelector = selectorCondition ? applySelectorCondition(dataAttrSelector, selectorCondition) : dataAttrSelector;
62
- const result = [`${finalStateSelector},
63
- ${finalDataAttrSelector} {
64
- ${styleProperties.join(`
65
- `)}
66
- }`];
67
- if (transitions.length) {
68
- const transitionSelector = `[data-interact-key="${escapedKey}"] ${childSelector}`;
69
- const finalTransitionSelector = selectorCondition ? applySelectorCondition(transitionSelector, selectorCondition) : transitionSelector;
70
- result.push(`@media (prefers-reduced-motion: no-preference) { ${finalTransitionSelector} {
71
- transition: ${transitions.join(', ')};
72
- } }`);
73
- }
74
- return result;
75
- }
76
- function getMediaQuery(conditionNames, conditions) {
77
- const conditionContent = (conditionNames || []).filter(conditionName => {
78
- var _conditions$condition;
79
- return ((_conditions$condition = conditions[conditionName]) == null ? void 0 : _conditions$condition.type) === 'media' && conditions[conditionName].predicate;
80
- }).map(conditionName => {
81
- return conditions[conditionName].predicate;
82
- }).join(') and (');
83
- const condition = conditionContent && `(${conditionContent})`;
84
- const mql = condition && window.matchMedia(condition);
85
- if (mql) {
86
- return mql;
87
- }
88
- }
89
- function getSelectorCondition(conditionNames, conditions) {
90
- for (const name of conditionNames || []) {
91
- const condition = conditions[name];
92
- if ((condition == null ? void 0 : condition.type) === 'selector' && condition.predicate) {
93
- return condition.predicate;
94
- }
95
- }
96
- return;
97
- }
98
- //# sourceMappingURL=utils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_motion","require","applySelectorCondition","baseSelector","predicate","includes","replace","generateId","c","String","fromCharCode","crypto","getRandomValues","Uint8Array","createTransitionCSS","key","effectId","transition","properties","childSelector","selectorCondition","_properties2","transitions","styleProperties","duration","easing","delay","hasCustomPropertiesTransition","some","styleProperty","name","startsWith","getEasing","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,157 +0,0 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- import { add, addListItems } from './core/add';
3
- import { remove, removeListItems } from './core/remove';
4
- export const INTERACT_EFFECT_DATA_ATTR = 'interactEffect';
5
- export function getInteractElement() {
6
- let checkedForLegacyStateSyntax = false;
7
- let isLegacyStateSyntax = false;
8
- return class InteractElement extends HTMLElement {
9
- constructor() {
10
- super();
11
- _defineProperty(this, "_internals", void 0);
12
- _defineProperty(this, "connected", void 0);
13
- _defineProperty(this, "sheet", void 0);
14
- _defineProperty(this, "_observers", void 0);
15
- this.connected = false;
16
- this.sheet = null;
17
- this._observers = new WeakMap();
18
- if (this.attachInternals) {
19
- this._internals = this.attachInternals();
20
- if (!checkedForLegacyStateSyntax) {
21
- checkedForLegacyStateSyntax = true;
22
- try {
23
- this._internals.states.add('test');
24
- this._internals.states.delete('test');
25
- } catch (e) {
26
- isLegacyStateSyntax = true;
27
- }
28
- }
29
- } else {
30
- checkedForLegacyStateSyntax = true; // custom states not supported - skip syntax check
31
- this._internals = null;
32
- }
33
- }
34
- connectedCallback() {
35
- this.connect();
36
- }
37
- disconnectedCallback() {
38
- this.disconnect();
39
- }
40
- disconnect() {
41
- const key = this.dataset.interactKey;
42
- if (key) {
43
- remove(key);
44
- }
45
- if (this.sheet) {
46
- const index = document.adoptedStyleSheets.indexOf(this.sheet);
47
- document.adoptedStyleSheets.splice(index, 1);
48
- }
49
- this._observers = new WeakMap();
50
- this.sheet = null;
51
- this.connected = false;
52
- }
53
- connect(key) {
54
- if (this.connected) {
55
- return;
56
- }
57
- key = key || this.dataset.interactKey;
58
- if (!key) {
59
- console.warn('InteractElement: No key provided');
60
- return;
61
- }
62
- this.connected = add(this, key);
63
- }
64
- renderStyle(cssRules) {
65
- if (!this.sheet) {
66
- this.sheet = new CSSStyleSheet();
67
- void this.sheet.replace(cssRules.join('\n'));
68
- document.adoptedStyleSheets.push(this.sheet);
69
- } else {
70
- let position = this.sheet.cssRules.length;
71
- for (const cssRule of cssRules) {
72
- try {
73
- this.sheet.insertRule(cssRule, position);
74
- position++;
75
- } catch (e) {
76
- console.error(e);
77
- }
78
- }
79
- }
80
- }
81
- toggleEffect(effectId, method, item) {
82
- if (item === null) {
83
- return;
84
- }
85
- if (isLegacyStateSyntax) {
86
- effectId = `--${effectId}`;
87
- }
88
- if (this._internals && !item) {
89
- if (method === 'toggle') {
90
- this._internals.states.has(effectId) ? this._internals.states.delete(effectId) : this._internals.states.add(effectId);
91
- } else if (method === 'add') {
92
- this._internals.states.add(effectId);
93
- } else if (method === 'remove') {
94
- this._internals.states.delete(effectId);
95
- } else if (method === 'clear') {
96
- this._internals.states.clear();
97
- }
98
- } else {
99
- var _this$dataset$INTERAC;
100
- const currentEffects = new Set(((_this$dataset$INTERAC = this.dataset[INTERACT_EFFECT_DATA_ATTR]) == null ? void 0 : _this$dataset$INTERAC.split(' ')) || []);
101
- if (method === 'toggle') {
102
- currentEffects.has(effectId) ? currentEffects.delete(effectId) : currentEffects.add(effectId);
103
- } else if (method === 'add') {
104
- currentEffects.add(effectId);
105
- } else if (method === 'remove') {
106
- currentEffects.delete(effectId);
107
- } else if (method === 'clear') {
108
- currentEffects.clear();
109
- }
110
- (item || this).dataset[INTERACT_EFFECT_DATA_ATTR] = Array.from(currentEffects).join(' ');
111
- }
112
- }
113
- getActiveEffects() {
114
- if (this._internals) {
115
- const effects = Array.from(this._internals.states);
116
- return isLegacyStateSyntax ? effects.map(effect => effect.replace(/^--/g, '')) : effects;
117
- }
118
- const raw = this.dataset[INTERACT_EFFECT_DATA_ATTR] || '';
119
- const trimmed = raw.trim();
120
- return trimmed ? trimmed.split(/\s+/) : [];
121
- }
122
- watchChildList(listContainer) {
123
- const list = this.querySelector(listContainer);
124
- if (list) {
125
- // TODO: we can probably improve this and use less observers, this impl. uses one per container element
126
- let observer = this._observers.get(list);
127
- if (!observer) {
128
- observer = new MutationObserver(this._childListChangeHandler.bind(this, listContainer));
129
- this._observers.set(list, observer);
130
- observer.observe(list, {
131
- childList: true
132
- });
133
- }
134
- }
135
- }
136
- _childListChangeHandler(listContainer, entries) {
137
- const key = this.dataset.interactKey;
138
- const removedElements = [];
139
- const addedElements = [];
140
- entries.forEach(entry => {
141
- entry.removedNodes.forEach(el => {
142
- if (el instanceof HTMLElement) {
143
- removedElements.push(el);
144
- }
145
- });
146
- entry.addedNodes.forEach(el => {
147
- if (el instanceof HTMLElement) {
148
- addedElements.push(el);
149
- }
150
- });
151
- });
152
- removeListItems(removedElements);
153
- key && addListItems(this, key, listContainer, addedElements);
154
- }
155
- };
156
- }
157
- //# sourceMappingURL=InteractElement.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["add","addListItems","remove","removeListItems","INTERACT_EFFECT_DATA_ATTR","getInteractElement","checkedForLegacyStateSyntax","isLegacyStateSyntax","InteractElement","HTMLElement","constructor","_defineProperty","connected","sheet","_observers","WeakMap","attachInternals","_internals","states","delete","e","connectedCallback","connect","disconnectedCallback","disconnect","key","dataset","interactKey","index","document","adoptedStyleSheets","indexOf","splice","console","warn","renderStyle","cssRules","CSSStyleSheet","replace","join","push","position","length","cssRule","insertRule","error","toggleEffect","effectId","method","item","has","clear","_this$dataset$INTERAC","currentEffects","Set","split","Array","from","getActiveEffects","effects","map","effect","raw","trimmed","trim","watchChildList","listContainer","list","querySelector","observer","get","MutationObserver","_childListChangeHandler","bind","set","observe","childList","entries","removedElements","addedElements","forEach","entry","removedNodes","el","addedNodes"],"sources":["../../src/InteractElement.ts"],"sourcesContent":["import type { StateParams } from './types';\nimport { add, addListItems } from './core/add';\nimport { remove, removeListItems } from './core/remove';\n\nexport const INTERACT_EFFECT_DATA_ATTR = 'interactEffect';\n\nexport function getInteractElement() {\n let checkedForLegacyStateSyntax = false;\n let isLegacyStateSyntax = false;\n\n return class InteractElement extends HTMLElement {\n _internals: (ElementInternals & { states: Set<string> }) | null;\n connected: boolean;\n sheet: CSSStyleSheet | null;\n _observers: WeakMap<HTMLElement, MutationObserver>;\n\n constructor() {\n super();\n\n this.connected = false;\n this.sheet = null;\n this._observers = new WeakMap();\n\n if (this.attachInternals) {\n this._internals = this.attachInternals() as ElementInternals & {\n states: Set<string>;\n };\n\n if (!checkedForLegacyStateSyntax) {\n checkedForLegacyStateSyntax = true;\n\n try {\n this._internals.states.add('test');\n this._internals.states.delete('test');\n } catch (e) {\n isLegacyStateSyntax = true;\n }\n }\n } else {\n checkedForLegacyStateSyntax = true; // custom states not supported - skip syntax check\n this._internals = null;\n }\n }\n connectedCallback() {\n this.connect();\n }\n\n disconnectedCallback() {\n this.disconnect();\n }\n\n disconnect() {\n const key = this.dataset.interactKey;\n\n if (key) {\n remove(key);\n }\n\n if (this.sheet) {\n const index = document.adoptedStyleSheets.indexOf(this.sheet);\n document.adoptedStyleSheets.splice(index, 1);\n }\n\n this._observers = new WeakMap();\n this.sheet = null;\n this.connected = false;\n }\n\n connect(key?: string) {\n if (this.connected) {\n return;\n }\n\n key = key || this.dataset.interactKey;\n\n if (!key) {\n console.warn('InteractElement: No key provided');\n return;\n }\n\n this.connected = add(this, key);\n }\n\n renderStyle(cssRules: string[]) {\n if (!this.sheet) {\n this.sheet = new CSSStyleSheet();\n void this.sheet.replace(cssRules.join('\\n'));\n\n document.adoptedStyleSheets.push(this.sheet);\n } else {\n let position = this.sheet.cssRules.length;\n\n for (const cssRule of cssRules) {\n try {\n this.sheet.insertRule(cssRule, position);\n position++;\n } catch (e) {\n console.error(e);\n }\n }\n }\n }\n\n toggleEffect(\n effectId: string,\n method: StateParams['method'],\n item?: HTMLElement | null,\n ) {\n if (item === null) {\n return;\n }\n if (isLegacyStateSyntax) {\n effectId = `--${effectId}`;\n }\n\n if (this._internals && !item) {\n if (method === 'toggle') {\n this._internals.states.has(effectId)\n ? this._internals.states.delete(effectId)\n : this._internals.states.add(effectId);\n } else if (method === 'add') {\n this._internals.states.add(effectId);\n } else if (method === 'remove') {\n this._internals.states.delete(effectId);\n } else if (method === 'clear') {\n this._internals.states.clear();\n }\n } else {\n const currentEffects = new Set(\n this.dataset[INTERACT_EFFECT_DATA_ATTR]?.split(' ') || [],\n );\n\n if (method === 'toggle') {\n currentEffects.has(effectId)\n ? currentEffects.delete(effectId)\n : currentEffects.add(effectId);\n } else if (method === 'add') {\n currentEffects.add(effectId);\n } else if (method === 'remove') {\n currentEffects.delete(effectId);\n } else if (method === 'clear') {\n currentEffects.clear();\n }\n\n (item || this).dataset[INTERACT_EFFECT_DATA_ATTR] =\n Array.from(currentEffects).join(' ');\n }\n }\n\n getActiveEffects(): string[] {\n if (this._internals) {\n const effects = Array.from(this._internals.states);\n return isLegacyStateSyntax\n ? effects.map((effect) => effect.replace(/^--/g, ''))\n : effects;\n }\n\n const raw = this.dataset[INTERACT_EFFECT_DATA_ATTR] || '';\n const trimmed = raw.trim();\n return trimmed ? trimmed.split(/\\s+/) : [];\n }\n\n watchChildList(listContainer: string): void {\n const list = this.querySelector(listContainer);\n\n if (list) {\n // TODO: we can probably improve this and use less observers, this impl. uses one per container element\n let observer = this._observers.get(list as HTMLElement);\n\n if (!observer) {\n observer = new MutationObserver(\n this._childListChangeHandler.bind(this, listContainer),\n );\n\n this._observers.set(list as HTMLElement, observer);\n\n observer.observe(list as HTMLElement, { childList: true });\n }\n }\n }\n\n _childListChangeHandler(listContainer: string, entries: MutationRecord[]) {\n const key = this.dataset.interactKey;\n const removedElements: HTMLElement[] = [];\n const addedElements: HTMLElement[] = [];\n\n entries.forEach((entry) => {\n entry.removedNodes.forEach((el) => {\n if (el instanceof HTMLElement) {\n removedElements.push(el);\n }\n });\n\n entry.addedNodes.forEach((el) => {\n if (el instanceof HTMLElement) {\n addedElements.push(el);\n }\n });\n });\n\n removeListItems(removedElements);\n key && addListItems(this, key, listContainer, addedElements);\n }\n };\n}\n"],"mappings":"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","ignoreList":[]}