@gem-sdk/core 1.31.0 → 1.31.4

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 (13) hide show
  1. package/dist/cjs/components/ComponentWrapper.js +18 -21
  2. package/dist/cjs/components/Render.js +43 -40
  3. package/dist/cjs/components/Render.liquid.js +1 -2
  4. package/dist/esm/components/ComponentWrapper.js +18 -21
  5. package/dist/esm/components/Render.js +43 -40
  6. package/dist/esm/components/Render.liquid.js +1 -2
  7. package/package.json +1 -1
  8. package/dist/cjs/components/animation/AnimationWrapper.js +0 -50
  9. package/dist/cjs/hooks/animation/animations.js +0 -227
  10. package/dist/cjs/hooks/animation/useLivePageAnimation.js +0 -230
  11. package/dist/esm/components/animation/AnimationWrapper.js +0 -46
  12. package/dist/esm/hooks/animation/animations.js +0 -225
  13. package/dist/esm/hooks/animation/useLivePageAnimation.js +0 -228
package/dist/cjs/components/ComponentWrapper.js CHANGED
@@ -7,32 +7,25 @@ var react = require('react');
7
7
  var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
8
8
  var constant = require('./constant.js');
9
9
  var RenderCustomCode = require('./RenderCustomCode.js');
10
- var AnimationWrapper = require('./animation/AnimationWrapper.js');
11
10
 
12
11
  const ComponentWrapper = ({ children, ...props })=>{
13
12
  if (props.type === 'section') return null;
14
13
  const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag);
15
14
  const advanced = props.advanced;
16
- const { animation } = advanced ?? {};
17
- const enableAnimation = animation?.desktop?.enabled || animation?.tablet?.enabled || animation?.mobile?.enabled;
18
- let dynamicChildren = /*#__PURE__*/ jsxRuntime.jsx("div", {
19
- style: style,
20
- className: `${props.uid} ${advanced?.cssClass}`,
21
- children: children
22
- });
23
15
  if (constant.disableWrap.includes(props.tag) && /*#__PURE__*/ react.isValidElement(children)) {
24
- dynamicChildren = /*#__PURE__*/ jsxRuntime.jsx(children.type, {
25
- className: advanced?.cssClass,
26
- ...children.props,
27
- style,
28
- advanced
29
- });
30
- }
31
- if (enableAnimation) {
32
- dynamicChildren = /*#__PURE__*/ jsxRuntime.jsx(AnimationWrapper.default, {
33
- children: dynamicChildren,
34
- settings: animation,
35
- tag: props.tag
16
+ return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
17
+ children: [
18
+ /*#__PURE__*/ jsxRuntime.jsx(RenderCustomCode.default, {
19
+ uid: props.uid,
20
+ advanced: advanced
21
+ }),
22
+ /*#__PURE__*/ jsxRuntime.jsx(children.type, {
23
+ className: advanced?.cssClass,
24
+ ...children.props,
25
+ style,
26
+ advanced
27
+ })
28
+ ]
36
29
  });
37
30
  }
38
31
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -41,7 +34,11 @@ const ComponentWrapper = ({ children, ...props })=>{
41
34
  uid: props.uid,
42
35
  advanced: advanced
43
36
  }),
44
- dynamicChildren
37
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
38
+ style: style,
39
+ className: `${props.uid} ${advanced?.cssClass}`,
40
+ children: children
41
+ })
45
42
  ]
46
43
  });
47
44
  };
package/dist/cjs/components/Render.js CHANGED
@@ -14,47 +14,50 @@ const Render = ({ uid, ...passProps })=>{
14
14
  const item = BuilderContext.useBuilderStore((s)=>s.getItem(uid));
15
15
  const Component = BuilderComponent.useBuilderComponent(item?.tag);
16
16
  if (!item) return null;
17
- if (item?.type === 'section') return /*#__PURE__*/ jsxRuntime.jsx(RenderSection.default, {
18
- sectionId: item.uid
19
- });
20
- return /*#__PURE__*/ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, {
21
- fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
22
- children: [
23
- /*#__PURE__*/ jsxRuntime.jsx("span", {
24
- "aria-label": "Error message",
25
- children: error.message
26
- }),
27
- /*#__PURE__*/ jsxRuntime.jsx("button", {
28
- type: "button",
29
- onClick: resetErrorBoundary,
30
- children: "Try again"
31
- })
32
- ]
33
- }),
34
- children: /*#__PURE__*/ jsxRuntime.jsx(ComponentWrapper.default, {
35
- ...item,
36
- children: item?.childrens?.length ? /*#__PURE__*/ jsxRuntime.jsx(Component, {
37
- builderProps: {
38
- uid,
39
- builderData: item
40
- },
41
- styles: item.styles,
42
- setting: item.settings,
43
- ...passProps,
44
- children: item.childrens.map((id)=>/*#__PURE__*/ jsxRuntime.jsx(RenderMemo, {
45
- uid: id
46
- }, id))
47
- }) : /*#__PURE__*/ jsxRuntime.jsx(Component, {
48
- builderProps: {
49
- uid,
50
- builderData: item
51
- },
52
- styles: item.styles,
53
- setting: item.settings,
54
- ...passProps
17
+ if (item?.type === 'section') {
18
+ return /*#__PURE__*/ jsxRuntime.jsx(RenderSection.default, {
19
+ sectionId: item.uid
20
+ });
21
+ } else {
22
+ return /*#__PURE__*/ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, {
23
+ fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
24
+ children: [
25
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
26
+ "aria-label": "Error message",
27
+ children: error.message
28
+ }),
29
+ /*#__PURE__*/ jsxRuntime.jsx("button", {
30
+ type: "button",
31
+ onClick: resetErrorBoundary,
32
+ children: "Try again"
33
+ })
34
+ ]
35
+ }),
36
+ children: /*#__PURE__*/ jsxRuntime.jsx(ComponentWrapper.default, {
37
+ ...item,
38
+ children: item?.childrens?.length ? /*#__PURE__*/ jsxRuntime.jsx(Component, {
39
+ builderProps: {
40
+ uid,
41
+ builderData: item
42
+ },
43
+ styles: item.styles,
44
+ setting: item.settings,
45
+ ...passProps,
46
+ children: item.childrens.map((id)=>/*#__PURE__*/ jsxRuntime.jsx(RenderMemo, {
47
+ uid: id
48
+ }, id))
49
+ }) : /*#__PURE__*/ jsxRuntime.jsx(Component, {
50
+ builderProps: {
51
+ uid,
52
+ builderData: item
53
+ },
54
+ styles: item.styles,
55
+ setting: item.settings,
56
+ ...passProps
57
+ })
55
58
  })
56
- })
57
- }, item.uid);
59
+ }, item.uid);
60
+ }
58
61
  };
59
62
  const RenderMemo = /*#__PURE__*/ react.memo(Render);
60
63
  RenderMemo.displayName = 'RenderMemo';
package/dist/cjs/components/Render.liquid.js CHANGED
@@ -225,8 +225,7 @@ const appendAnimation = (props, liquid)=>{
225
225
  mobile: getInitOpacity('mobile')
226
226
  };
227
227
  const inheritParentStyle = {
228
- all: tag === 'Section' ? '' : 'inherit',
229
- position: 'static'
228
+ all: tag === 'Section' ? '' : 'inherit'
230
229
  };
231
230
  return render.template`
232
231
  ${render.RenderIf(convert.isLocalEnv, `<script src="{{ 'gp-animation.js' | asset_url }}" defer="defer"></script>`, `<script src="${convert.baseAssetURL}/assets/gp-animation.js" defer="defer"></script>`)}
package/dist/esm/components/ComponentWrapper.js CHANGED
@@ -3,32 +3,25 @@ import { isValidElement } from 'react';
3
3
  import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
4
4
  import { disableWrap } from './constant.js';
5
5
  import RenderCustomCode from './RenderCustomCode.js';
6
- import AnimationWrapper from './animation/AnimationWrapper.js';
7
6
 
8
7
  const ComponentWrapper = ({ children, ...props })=>{
9
8
  if (props.type === 'section') return null;
10
9
  const style = composeAdvanceStyle(props.advanced, props.tag);
11
10
  const advanced = props.advanced;
12
- const { animation } = advanced ?? {};
13
- const enableAnimation = animation?.desktop?.enabled || animation?.tablet?.enabled || animation?.mobile?.enabled;
14
- let dynamicChildren = /*#__PURE__*/ jsx("div", {
15
- style: style,
16
- className: `${props.uid} ${advanced?.cssClass}`,
17
- children: children
18
- });
19
11
  if (disableWrap.includes(props.tag) && /*#__PURE__*/ isValidElement(children)) {
20
- dynamicChildren = /*#__PURE__*/ jsx(children.type, {
21
- className: advanced?.cssClass,
22
- ...children.props,
23
- style,
24
- advanced
25
- });
26
- }
27
- if (enableAnimation) {
28
- dynamicChildren = /*#__PURE__*/ jsx(AnimationWrapper, {
29
- children: dynamicChildren,
30
- settings: animation,
31
- tag: props.tag
12
+ return /*#__PURE__*/ jsxs(Fragment, {
13
+ children: [
14
+ /*#__PURE__*/ jsx(RenderCustomCode, {
15
+ uid: props.uid,
16
+ advanced: advanced
17
+ }),
18
+ /*#__PURE__*/ jsx(children.type, {
19
+ className: advanced?.cssClass,
20
+ ...children.props,
21
+ style,
22
+ advanced
23
+ })
24
+ ]
32
25
  });
33
26
  }
34
27
  return /*#__PURE__*/ jsxs(Fragment, {
@@ -37,7 +30,11 @@ const ComponentWrapper = ({ children, ...props })=>{
37
30
  uid: props.uid,
38
31
  advanced: advanced
39
32
  }),
40
- dynamicChildren
33
+ /*#__PURE__*/ jsx("div", {
34
+ style: style,
35
+ className: `${props.uid} ${advanced?.cssClass}`,
36
+ children: children
37
+ })
41
38
  ]
42
39
  });
43
40
  };
package/dist/esm/components/Render.js CHANGED
@@ -10,47 +10,50 @@ const Render = ({ uid, ...passProps })=>{
10
10
  const item = useBuilderStore((s)=>s.getItem(uid));
11
11
  const Component = useBuilderComponent(item?.tag);
12
12
  if (!item) return null;
13
- if (item?.type === 'section') return /*#__PURE__*/ jsx(RenderSectionMemo, {
14
- sectionId: item.uid
15
- });
16
- return /*#__PURE__*/ jsx(ErrorBoundary, {
17
- fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxs(Fragment, {
18
- children: [
19
- /*#__PURE__*/ jsx("span", {
20
- "aria-label": "Error message",
21
- children: error.message
22
- }),
23
- /*#__PURE__*/ jsx("button", {
24
- type: "button",
25
- onClick: resetErrorBoundary,
26
- children: "Try again"
27
- })
28
- ]
29
- }),
30
- children: /*#__PURE__*/ jsx(ComponentWrapper, {
31
- ...item,
32
- children: item?.childrens?.length ? /*#__PURE__*/ jsx(Component, {
33
- builderProps: {
34
- uid,
35
- builderData: item
36
- },
37
- styles: item.styles,
38
- setting: item.settings,
39
- ...passProps,
40
- children: item.childrens.map((id)=>/*#__PURE__*/ jsx(RenderMemo, {
41
- uid: id
42
- }, id))
43
- }) : /*#__PURE__*/ jsx(Component, {
44
- builderProps: {
45
- uid,
46
- builderData: item
47
- },
48
- styles: item.styles,
49
- setting: item.settings,
50
- ...passProps
13
+ if (item?.type === 'section') {
14
+ return /*#__PURE__*/ jsx(RenderSectionMemo, {
15
+ sectionId: item.uid
16
+ });
17
+ } else {
18
+ return /*#__PURE__*/ jsx(ErrorBoundary, {
19
+ fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxs(Fragment, {
20
+ children: [
21
+ /*#__PURE__*/ jsx("span", {
22
+ "aria-label": "Error message",
23
+ children: error.message
24
+ }),
25
+ /*#__PURE__*/ jsx("button", {
26
+ type: "button",
27
+ onClick: resetErrorBoundary,
28
+ children: "Try again"
29
+ })
30
+ ]
31
+ }),
32
+ children: /*#__PURE__*/ jsx(ComponentWrapper, {
33
+ ...item,
34
+ children: item?.childrens?.length ? /*#__PURE__*/ jsx(Component, {
35
+ builderProps: {
36
+ uid,
37
+ builderData: item
38
+ },
39
+ styles: item.styles,
40
+ setting: item.settings,
41
+ ...passProps,
42
+ children: item.childrens.map((id)=>/*#__PURE__*/ jsx(RenderMemo, {
43
+ uid: id
44
+ }, id))
45
+ }) : /*#__PURE__*/ jsx(Component, {
46
+ builderProps: {
47
+ uid,
48
+ builderData: item
49
+ },
50
+ styles: item.styles,
51
+ setting: item.settings,
52
+ ...passProps
53
+ })
51
54
  })
52
- })
53
- }, item.uid);
55
+ }, item.uid);
56
+ }
54
57
  };
55
58
  const RenderMemo = /*#__PURE__*/ memo(Render);
56
59
  RenderMemo.displayName = 'RenderMemo';
package/dist/esm/components/Render.liquid.js CHANGED
@@ -221,8 +221,7 @@ const appendAnimation = (props, liquid)=>{
221
221
  mobile: getInitOpacity('mobile')
222
222
  };
223
223
  const inheritParentStyle = {
224
- all: tag === 'Section' ? '' : 'inherit',
225
- position: 'static'
224
+ all: tag === 'Section' ? '' : 'inherit'
226
225
  };
227
226
  return template`
228
227
  ${RenderIf(isLocalEnv, `<script src="{{ 'gp-animation.js' | asset_url }}" defer="defer"></script>`, `<script src="${baseAssetURL}/assets/gp-animation.js" defer="defer"></script>`)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.31.0",
3
+ "version": "1.31.4",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
package/dist/cjs/components/animation/AnimationWrapper.js DELETED
@@ -1,50 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var makeStyle = require('../../helpers/make-style.js');
7
- var react = require('react');
8
- require('zustand');
9
- require('swr');
10
- require('@gem-sdk/adapter-shopify');
11
- require('swr/mutation');
12
- require('vanilla-lazyload');
13
- require('../../hooks/useCartUI.js');
14
- require('react-transition-group');
15
- require('@gem-sdk/core');
16
- require('../../helpers/convert.js');
17
- var useLivePageAnimation = require('../../hooks/animation/useLivePageAnimation.js');
18
-
19
- const AnimationWrapper = ({ children, settings, tag })=>{
20
- const wrapperRef = react.useRef(null);
21
- const getAnimationType = (settings, type)=>{
22
- return settings?.triggerConfig?.[type]?.animation ?? 'none';
23
- };
24
- const getSettingsByDevice = (device)=>{
25
- if (device === 'desktop') return settings?.desktop;
26
- else if (device === 'tablet') return settings?.tablet ?? settings?.desktop;
27
- else if (device === 'mobile') return settings?.mobile ?? settings?.tablet ?? settings?.desktop;
28
- return settings?.desktop;
29
- };
30
- const getInitOpacity = (device)=>+!(getSettingsByDevice(device)?.enabled && ![
31
- 'shake',
32
- 'none'
33
- ].includes(getAnimationType(getSettingsByDevice(device), 'appear')));
34
- const opacityObject = {
35
- desktop: getInitOpacity('desktop'),
36
- tablet: getInitOpacity('tablet'),
37
- mobile: getInitOpacity('mobile')
38
- };
39
- // const inheritParentStyle = { all: tag === 'Section' ? '' : 'inherit' };
40
- useLivePageAnimation.useLivePageAnimation(wrapperRef, settings, tag);
41
- return /*#__PURE__*/ jsxRuntime.jsx("div", {
42
- ref: wrapperRef,
43
- style: {
44
- ...makeStyle.makeStyleResponsive('op', opacityObject)
45
- },
46
- children: children
47
- });
48
- };
49
-
50
- exports.default = AnimationWrapper;
package/dist/cjs/hooks/animation/animations.js DELETED
@@ -1,227 +0,0 @@
1
- 'use strict';
2
-
3
- // Any logic changes made to this file must also be applied to
4
- // packages/web-components/src/helpers/animations.ts, and vice versa.
5
- const EASING = {
6
- ease: 'cubic-bezier(0.46,0.03,0.52,0.96)',
7
- 'ease-in': 'cubic-bezier(0.55,0.08,0.68,0.53)',
8
- 'ease-out': 'cubic-bezier(0.46,0.03,0.52,0.96)',
9
- linear: 'linear'
10
- };
11
- const animations = ()=>{
12
- const normalizeOptions = (options)=>{
13
- const cloneOptions = JSON.parse(JSON.stringify(options));
14
- const numberMember = [
15
- 'delay',
16
- 'speed',
17
- 'scale',
18
- 'intensity'
19
- ];
20
- numberMember.forEach((keyName)=>{
21
- if (!cloneOptions?.[keyName]) return;
22
- if (keyName === 'scale') {
23
- if (!cloneOptions?.zoomDirection) throw new TypeError(`zoomDirection not found on zoom preset`);
24
- const [i1, i2] = cloneOptions?.scale?.in ?? [
25
- 1,
26
- 1
27
- ];
28
- const [o1, o2] = cloneOptions?.scale?.out ?? [
29
- 1,
30
- 1
31
- ];
32
- cloneOptions[keyName] = {
33
- in: [
34
- Number(i1) / 100,
35
- Number(i2) / 100
36
- ],
37
- out: [
38
- Number(o1) / 100,
39
- Number(o2) / 100
40
- ]
41
- };
42
- return;
43
- }
44
- const num = Number(cloneOptions?.[keyName]);
45
- if (keyName === 'delay') cloneOptions[keyName] = num * 1000;
46
- else cloneOptions[keyName] = num;
47
- if (!isFinite(num)) throw new TypeError(`${keyName} must be a number`);
48
- });
49
- return cloneOptions;
50
- };
51
- const slide = (target, options)=>{
52
- const normalizedOptions = normalizeOptions(options);
53
- const { direction, distance } = normalizedOptions;
54
- const coordinate = [
55
- 'left',
56
- 'right'
57
- ].includes(direction ?? '') ? 'X' : 'Y';
58
- const isNeg = [
59
- 'left',
60
- 'down'
61
- ].includes(direction ?? '') ? '-' : '';
62
- const preset = [
63
- {
64
- opacity: 0,
65
- transform: `translate${coordinate}(${isNeg}${distance ?? 50}%)`
66
- },
67
- {
68
- opacity: 1,
69
- transform: `translate${coordinate}(0)`
70
- }
71
- ];
72
- return generateAnimationInstance(target, preset, {
73
- ...generateOptions(normalizedOptions, 500),
74
- fill: 'forwards'
75
- });
76
- };
77
- const fade = (target, options)=>{
78
- const normalizedOptions = normalizeOptions(options);
79
- const preset = [
80
- {
81
- opacity: 0
82
- },
83
- {
84
- opacity: 1
85
- }
86
- ];
87
- return generateAnimationInstance(target, preset, {
88
- ...generateOptions(normalizedOptions, 500)
89
- });
90
- };
91
- const generateOptions = (options, defaultDuration)=>{
92
- const convertSpeedToDuration = (speed)=>{
93
- if (!speed) return defaultDuration;
94
- return 1.5 / speed * 1000;
95
- };
96
- const { loop, delay, speed, easing } = options ?? {};
97
- const duration = convertSpeedToDuration(speed);
98
- const actualDelay = delay ?? 0;
99
- const actualDuration = loop ? duration + actualDelay : duration;
100
- return {
101
- iterations: loop ? Infinity : 1,
102
- duration: actualDuration,
103
- delay: actualDelay,
104
- easing: EASING[easing ?? 'linear']
105
- };
106
- };
107
- const zoom = (target, options)=>{
108
- const normalizedOptions = normalizeOptions(options);
109
- const { scale, zoomDirection, isFade } = normalizedOptions;
110
- const [i1, i2] = scale.in;
111
- const [o1, o2] = scale.out;
112
- const zoomInPreset = [
113
- {
114
- transform: `scale(${i1}, ${i1})`,
115
- opacity: isFade ? 0 : 1
116
- },
117
- {
118
- transform: `scale(${i2 ?? 1.2}, ${i2 ?? 1.2})`,
119
- opacity: 1
120
- }
121
- ];
122
- const zoomOutPreset = [
123
- {
124
- transform: `scale(${o1}, ${o1})`,
125
- opacity: isFade ? 0 : 1
126
- },
127
- {
128
- transform: `scale(${o2 ?? 0.8}, ${o2 ?? 0.8})`,
129
- opacity: 1
130
- }
131
- ];
132
- const zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
133
- return generateAnimationInstance(target, zoomPreset, {
134
- ...generateOptions(normalizedOptions, 700),
135
- fill: 'forwards'
136
- });
137
- };
138
- const generateLoopDelayEffect = (keyframes, delay, duration)=>{
139
- if (!delay) return keyframes;
140
- const offset = delay / duration;
141
- const keyframe = [
142
- ...keyframes
143
- ].pop();
144
- return [
145
- ...keyframes,
146
- {
147
- ...keyframe,
148
- offset: 1 - offset
149
- }
150
- ];
151
- };
152
- const shake = (target, options)=>{
153
- const normalizedOptions = normalizeOptions(options);
154
- const { intensity } = normalizedOptions ?? {};
155
- const zeroIntensity = [
156
- {
157
- transform: 'translate3d(0, 0, 0)',
158
- opacity: 1
159
- }
160
- ];
161
- const unitIntensity = [
162
- {
163
- transform: 'translate3d(4px, 0, 0)',
164
- opacity: 1
165
- },
166
- {
167
- transform: 'translate3d(-4px, 0, 0)',
168
- opacity: 1
169
- },
170
- {
171
- transform: 'translate3d(4px, 0, 0)',
172
- opacity: 1
173
- }
174
- ];
175
- let keyframes = [];
176
- Array.from(Array(intensity ?? 1).keys()).forEach(()=>{
177
- keyframes = [
178
- ...keyframes,
179
- ...unitIntensity
180
- ];
181
- });
182
- const shakePreset = [
183
- {
184
- transform: 'translate3d(-1px, 0, 0)',
185
- opacity: 1
186
- },
187
- {
188
- transform: 'translate3d(2px, 0, 0)',
189
- opacity: 1
190
- },
191
- {
192
- transform: 'translate3d(-4px, 0, 0)',
193
- opacity: 1
194
- },
195
- ...keyframes,
196
- {
197
- transform: 'translate3d(-4px, 0, 0)',
198
- opacity: 1
199
- },
200
- {
201
- transform: 'translate3d(2px, 0, 0)',
202
- opacity: 1
203
- },
204
- {
205
- transform: 'translate3d(-1px, 0, 0)',
206
- opacity: 1
207
- }
208
- ];
209
- return generateAnimationInstance(target, intensity ? shakePreset : zeroIntensity, {
210
- ...generateOptions(normalizedOptions ?? {}, 820)
211
- });
212
- };
213
- const generateAnimationInstance = (target, effectPreset, options)=>{
214
- const effect = new KeyframeEffect(target, options.iterations && options.iterations === 1 ? effectPreset : generateLoopDelayEffect(effectPreset, options?.delay ?? 0, (options?.duration) ?? 0), {
215
- ...options
216
- });
217
- return new Animation(effect, document.timeline);
218
- };
219
- return {
220
- zoom,
221
- shake,
222
- fade,
223
- slide
224
- };
225
- };
226
-
227
- exports.animations = animations;
package/dist/cjs/hooks/animation/useLivePageAnimation.js DELETED
@@ -1,230 +0,0 @@
1
- 'use strict';
2
-
3
- var react = require('react');
4
- var animations = require('./animations.js');
5
-
6
- // Any logic changes made to this file must also be applied to
7
- // packages/web-components/src/gp-animation.ts, and vice versa.
8
- const TAGS_SELECTOR = {
9
- Button: '.gp-button-base',
10
- Sticky: 'gp-sticky',
11
- Dialog: 'div[role=dialog]',
12
- Icon: 'div div',
13
- ProductTag: 'div div div'
14
- };
15
- const useLivePageAnimation = (wrapperRef, settings, tag)=>{
16
- const animation = animations.animations();
17
- const [isAppearLoop, setIsAppearLoop] = react.useState(false);
18
- const observer = react.useRef(undefined);
19
- const appearAfterHoverTimer = react.useRef(undefined);
20
- const animationElement = react.useRef(null);
21
- const animationAppearType = react.useRef('none');
22
- const animationHoverType = react.useRef('none');
23
- const animationAppearInstance = react.useRef(null);
24
- const animationHoverInstance = react.useRef(null);
25
- const currentDevice = react.useRef(null);
26
- const wrapperId = react.useRef('animation-wrapper-');
27
- const appearPlay = react.useCallback((rate)=>{
28
- if (!animationAppearInstance.current) return;
29
- animationAppearInstance.current.playbackRate = rate ?? 1;
30
- animationAppearInstance.current.play();
31
- }, [
32
- animationAppearInstance
33
- ]);
34
- const hoverPlay = react.useCallback((rate)=>{
35
- if (!animationHoverInstance.current) return;
36
- animationHoverInstance.current.playbackRate = rate ?? 1;
37
- animationHoverInstance.current.play();
38
- }, [
39
- animationHoverInstance
40
- ]);
41
- const removeZeroOpacity = react.useCallback(()=>{
42
- if (wrapperRef.current) wrapperRef.current.style.opacity = '1';
43
- if (animationElement.current) animationElement.current.style.opacity = '1';
44
- }, [
45
- wrapperRef
46
- ]);
47
- const applyInitOpacity = react.useCallback(()=>{
48
- if (wrapperRef.current) wrapperRef.current.style.opacity = '1';
49
- if (animationElement.current) animationElement.current.style.opacity = '0';
50
- }, [
51
- wrapperRef
52
- ]);
53
- const playAppear = react.useCallback((e)=>{
54
- e && e.stopPropagation();
55
- applyInitOpacity();
56
- if (!animationAppearInstance.current) return;
57
- animationHoverInstance.current?.cancel();
58
- appearPlay();
59
- animationAppearInstance.current.finished.then(()=>{
60
- if (!animationElement.current) return;
61
- removeZeroOpacity();
62
- });
63
- animationElement.current && observer?.current?.unobserve(animationElement.current);
64
- }, [
65
- applyInitOpacity,
66
- appearPlay,
67
- removeZeroOpacity
68
- ]);
69
- const cancelAppear = react.useCallback(()=>{
70
- if (!animationAppearInstance.current) return;
71
- animationAppearInstance.current.cancel();
72
- }, [
73
- animationAppearInstance
74
- ]);
75
- const playHover = react.useCallback((e)=>{
76
- e && e.stopPropagation();
77
- if (!animationHoverInstance.current) return;
78
- cancelAppear();
79
- hoverPlay();
80
- }, [
81
- animationHoverInstance,
82
- cancelAppear,
83
- hoverPlay
84
- ]);
85
- const cancelHover = react.useCallback(()=>{
86
- if (!animationHoverInstance.current) return;
87
- if (animationHoverType.current === 'zoom') {
88
- hoverPlay(-1);
89
- if (!isAppearLoop) return;
90
- animationHoverInstance.current.finished.then(()=>{
91
- clearTimeout(appearAfterHoverTimer.current);
92
- appearAfterHoverTimer.current = setTimeout(()=>{
93
- playAppear();
94
- }, 100);
95
- });
96
- return;
97
- }
98
- animationHoverInstance.current.cancel();
99
- if (isAppearLoop) playAppear();
100
- return;
101
- }, [
102
- hoverPlay,
103
- isAppearLoop,
104
- playAppear
105
- ]);
106
- const getSettingByDevice = react.useCallback(()=>{
107
- if (currentDevice.current === 'desktop') return settings?.desktop;
108
- else if (currentDevice.current === 'tablet') return settings?.tablet ?? settings?.desktop;
109
- else if (currentDevice.current === 'mobile') return settings?.mobile ?? settings?.tablet ?? settings?.desktop;
110
- return settings?.desktop;
111
- }, [
112
- settings?.desktop,
113
- settings?.mobile,
114
- settings?.tablet
115
- ]);
116
- const getAnimationType = (settings, type)=>{
117
- return settings?.triggerConfig?.[type]?.animation ?? 'none';
118
- };
119
- const initAppearInstance = react.useCallback((settings)=>{
120
- if (animationAppearType.current === 'none') return;
121
- const animationConfig = settings?.triggerConfig?.['appear']?.setting?.[animationAppearType.current];
122
- setIsAppearLoop(animationConfig.loop);
123
- animationAppearInstance.current = animation?.[animationAppearType.current]?.(animationElement.current, animationConfig);
124
- }, [
125
- animation
126
- ]);
127
- const initHoverInstance = react.useCallback((settings)=>{
128
- if (animationHoverType.current === 'none') return;
129
- const animationConfig = settings?.triggerConfig?.['hover']?.setting?.[animationHoverType.current];
130
- animationHoverInstance.current = animation?.[animationHoverType.current]?.(animationElement.current, animationConfig);
131
- }, [
132
- animation
133
- ]);
134
- const reset = react.useCallback(()=>{
135
- if (animationAppearInstance.current) {
136
- animationAppearInstance.current = null;
137
- if (animationElement.current) {
138
- observer.current?.unobserve(animationElement.current);
139
- }
140
- }
141
- if (animationHoverInstance) {
142
- animationHoverInstance.current = null;
143
- if (animationElement.current) {
144
- animationElement.current.removeEventListener('mouseenter', playHover);
145
- animationElement.current.removeEventListener('mouseleave', cancelHover);
146
- }
147
- }
148
- }, [
149
- cancelHover,
150
- playHover
151
- ]);
152
- const initAnimation = react.useCallback((settings)=>{
153
- reset();
154
- if (!animationElement.current) return;
155
- if (!settings?.enabled) {
156
- removeZeroOpacity();
157
- return;
158
- }
159
- animationAppearType.current = getAnimationType(settings, 'appear');
160
- animationHoverType.current = getAnimationType(settings, 'hover');
161
- if (animationAppearType.current === 'none') removeZeroOpacity();
162
- if (animationHoverType.current !== 'none' && currentDevice.current === 'desktop') {
163
- initHoverInstance(settings);
164
- animationElement.current.addEventListener('mouseenter', playHover);
165
- animationElement.current.addEventListener('mouseleave', cancelHover);
166
- }
167
- if (animationAppearType.current !== 'none') {
168
- initAppearInstance(settings);
169
- observer.current = new IntersectionObserver((entries)=>{
170
- entries.forEach((entry)=>{
171
- if (entry.intersectionRatio > 0.1) playAppear();
172
- });
173
- }, {
174
- root: null,
175
- rootMargin: '0px',
176
- threshold: [
177
- 0.1
178
- ]
179
- });
180
- observer.current.observe(animationElement.current);
181
- } else removeZeroOpacity();
182
- }, [
183
- cancelHover,
184
- initAppearInstance,
185
- initHoverInstance,
186
- playAppear,
187
- playHover,
188
- removeZeroOpacity,
189
- reset
190
- ]);
191
- const initResizeObserver = react.useCallback(()=>{
192
- const screen = document.querySelector('html');
193
- if (!animationElement.current || !screen) return;
194
- const resizeObserver = new ResizeObserver(([entry])=>{
195
- const deviceWidth = entry?.target.getBoundingClientRect().width ?? 0;
196
- let device;
197
- if (deviceWidth >= 1024) device = 'desktop';
198
- else if (deviceWidth >= 768) device = 'tablet';
199
- else device = 'mobile';
200
- if (currentDevice.current === device) return;
201
- currentDevice.current = device;
202
- initAnimation(getSettingByDevice());
203
- });
204
- resizeObserver.observe(screen);
205
- return ()=>resizeObserver.disconnect();
206
- }, [
207
- getSettingByDevice,
208
- initAnimation
209
- ]);
210
- react.useEffect(()=>{
211
- setTimeout(()=>{
212
- if (!settings || !wrapperRef.current) return;
213
- wrapperId.current = `animation-wrapper-${Math.random().toString(36).substr(2, 5)}`;
214
- wrapperRef.current.setAttribute('data-animationid', wrapperId.current);
215
- if (Object.keys(TAGS_SELECTOR).includes(tag)) animationElement.current = document.querySelector(`[data-animationid='${wrapperId.current}'] ${TAGS_SELECTOR?.[tag] ?? ''}`);
216
- else animationElement.current = document.querySelector(`[data-animationid='${wrapperId.current}'] > :first-child`);
217
- return initResizeObserver();
218
- }, 100);
219
- }, [
220
- initResizeObserver,
221
- settings,
222
- tag,
223
- wrapperRef
224
- ]);
225
- return {
226
- initAnimation
227
- };
228
- };
229
-
230
- exports.useLivePageAnimation = useLivePageAnimation;
package/dist/esm/components/animation/AnimationWrapper.js DELETED
@@ -1,46 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { makeStyleResponsive } from '../../helpers/make-style.js';
3
- import { useRef } from 'react';
4
- import 'zustand';
5
- import 'swr';
6
- import '@gem-sdk/adapter-shopify';
7
- import 'swr/mutation';
8
- import 'vanilla-lazyload';
9
- import '../../hooks/useCartUI.js';
10
- import 'react-transition-group';
11
- import '@gem-sdk/core';
12
- import '../../helpers/convert.js';
13
- import { useLivePageAnimation } from '../../hooks/animation/useLivePageAnimation.js';
14
-
15
- const AnimationWrapper = ({ children, settings, tag })=>{
16
- const wrapperRef = useRef(null);
17
- const getAnimationType = (settings, type)=>{
18
- return settings?.triggerConfig?.[type]?.animation ?? 'none';
19
- };
20
- const getSettingsByDevice = (device)=>{
21
- if (device === 'desktop') return settings?.desktop;
22
- else if (device === 'tablet') return settings?.tablet ?? settings?.desktop;
23
- else if (device === 'mobile') return settings?.mobile ?? settings?.tablet ?? settings?.desktop;
24
- return settings?.desktop;
25
- };
26
- const getInitOpacity = (device)=>+!(getSettingsByDevice(device)?.enabled && ![
27
- 'shake',
28
- 'none'
29
- ].includes(getAnimationType(getSettingsByDevice(device), 'appear')));
30
- const opacityObject = {
31
- desktop: getInitOpacity('desktop'),
32
- tablet: getInitOpacity('tablet'),
33
- mobile: getInitOpacity('mobile')
34
- };
35
- // const inheritParentStyle = { all: tag === 'Section' ? '' : 'inherit' };
36
- useLivePageAnimation(wrapperRef, settings, tag);
37
- return /*#__PURE__*/ jsx("div", {
38
- ref: wrapperRef,
39
- style: {
40
- ...makeStyleResponsive('op', opacityObject)
41
- },
42
- children: children
43
- });
44
- };
45
-
46
- export { AnimationWrapper as default };
package/dist/esm/hooks/animation/animations.js DELETED
@@ -1,225 +0,0 @@
1
- // Any logic changes made to this file must also be applied to
2
- // packages/web-components/src/helpers/animations.ts, and vice versa.
3
- const EASING = {
4
- ease: 'cubic-bezier(0.46,0.03,0.52,0.96)',
5
- 'ease-in': 'cubic-bezier(0.55,0.08,0.68,0.53)',
6
- 'ease-out': 'cubic-bezier(0.46,0.03,0.52,0.96)',
7
- linear: 'linear'
8
- };
9
- const animations = ()=>{
10
- const normalizeOptions = (options)=>{
11
- const cloneOptions = JSON.parse(JSON.stringify(options));
12
- const numberMember = [
13
- 'delay',
14
- 'speed',
15
- 'scale',
16
- 'intensity'
17
- ];
18
- numberMember.forEach((keyName)=>{
19
- if (!cloneOptions?.[keyName]) return;
20
- if (keyName === 'scale') {
21
- if (!cloneOptions?.zoomDirection) throw new TypeError(`zoomDirection not found on zoom preset`);
22
- const [i1, i2] = cloneOptions?.scale?.in ?? [
23
- 1,
24
- 1
25
- ];
26
- const [o1, o2] = cloneOptions?.scale?.out ?? [
27
- 1,
28
- 1
29
- ];
30
- cloneOptions[keyName] = {
31
- in: [
32
- Number(i1) / 100,
33
- Number(i2) / 100
34
- ],
35
- out: [
36
- Number(o1) / 100,
37
- Number(o2) / 100
38
- ]
39
- };
40
- return;
41
- }
42
- const num = Number(cloneOptions?.[keyName]);
43
- if (keyName === 'delay') cloneOptions[keyName] = num * 1000;
44
- else cloneOptions[keyName] = num;
45
- if (!isFinite(num)) throw new TypeError(`${keyName} must be a number`);
46
- });
47
- return cloneOptions;
48
- };
49
- const slide = (target, options)=>{
50
- const normalizedOptions = normalizeOptions(options);
51
- const { direction, distance } = normalizedOptions;
52
- const coordinate = [
53
- 'left',
54
- 'right'
55
- ].includes(direction ?? '') ? 'X' : 'Y';
56
- const isNeg = [
57
- 'left',
58
- 'down'
59
- ].includes(direction ?? '') ? '-' : '';
60
- const preset = [
61
- {
62
- opacity: 0,
63
- transform: `translate${coordinate}(${isNeg}${distance ?? 50}%)`
64
- },
65
- {
66
- opacity: 1,
67
- transform: `translate${coordinate}(0)`
68
- }
69
- ];
70
- return generateAnimationInstance(target, preset, {
71
- ...generateOptions(normalizedOptions, 500),
72
- fill: 'forwards'
73
- });
74
- };
75
- const fade = (target, options)=>{
76
- const normalizedOptions = normalizeOptions(options);
77
- const preset = [
78
- {
79
- opacity: 0
80
- },
81
- {
82
- opacity: 1
83
- }
84
- ];
85
- return generateAnimationInstance(target, preset, {
86
- ...generateOptions(normalizedOptions, 500)
87
- });
88
- };
89
- const generateOptions = (options, defaultDuration)=>{
90
- const convertSpeedToDuration = (speed)=>{
91
- if (!speed) return defaultDuration;
92
- return 1.5 / speed * 1000;
93
- };
94
- const { loop, delay, speed, easing } = options ?? {};
95
- const duration = convertSpeedToDuration(speed);
96
- const actualDelay = delay ?? 0;
97
- const actualDuration = loop ? duration + actualDelay : duration;
98
- return {
99
- iterations: loop ? Infinity : 1,
100
- duration: actualDuration,
101
- delay: actualDelay,
102
- easing: EASING[easing ?? 'linear']
103
- };
104
- };
105
- const zoom = (target, options)=>{
106
- const normalizedOptions = normalizeOptions(options);
107
- const { scale, zoomDirection, isFade } = normalizedOptions;
108
- const [i1, i2] = scale.in;
109
- const [o1, o2] = scale.out;
110
- const zoomInPreset = [
111
- {
112
- transform: `scale(${i1}, ${i1})`,
113
- opacity: isFade ? 0 : 1
114
- },
115
- {
116
- transform: `scale(${i2 ?? 1.2}, ${i2 ?? 1.2})`,
117
- opacity: 1
118
- }
119
- ];
120
- const zoomOutPreset = [
121
- {
122
- transform: `scale(${o1}, ${o1})`,
123
- opacity: isFade ? 0 : 1
124
- },
125
- {
126
- transform: `scale(${o2 ?? 0.8}, ${o2 ?? 0.8})`,
127
- opacity: 1
128
- }
129
- ];
130
- const zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
131
- return generateAnimationInstance(target, zoomPreset, {
132
- ...generateOptions(normalizedOptions, 700),
133
- fill: 'forwards'
134
- });
135
- };
136
- const generateLoopDelayEffect = (keyframes, delay, duration)=>{
137
- if (!delay) return keyframes;
138
- const offset = delay / duration;
139
- const keyframe = [
140
- ...keyframes
141
- ].pop();
142
- return [
143
- ...keyframes,
144
- {
145
- ...keyframe,
146
- offset: 1 - offset
147
- }
148
- ];
149
- };
150
- const shake = (target, options)=>{
151
- const normalizedOptions = normalizeOptions(options);
152
- const { intensity } = normalizedOptions ?? {};
153
- const zeroIntensity = [
154
- {
155
- transform: 'translate3d(0, 0, 0)',
156
- opacity: 1
157
- }
158
- ];
159
- const unitIntensity = [
160
- {
161
- transform: 'translate3d(4px, 0, 0)',
162
- opacity: 1
163
- },
164
- {
165
- transform: 'translate3d(-4px, 0, 0)',
166
- opacity: 1
167
- },
168
- {
169
- transform: 'translate3d(4px, 0, 0)',
170
- opacity: 1
171
- }
172
- ];
173
- let keyframes = [];
174
- Array.from(Array(intensity ?? 1).keys()).forEach(()=>{
175
- keyframes = [
176
- ...keyframes,
177
- ...unitIntensity
178
- ];
179
- });
180
- const shakePreset = [
181
- {
182
- transform: 'translate3d(-1px, 0, 0)',
183
- opacity: 1
184
- },
185
- {
186
- transform: 'translate3d(2px, 0, 0)',
187
- opacity: 1
188
- },
189
- {
190
- transform: 'translate3d(-4px, 0, 0)',
191
- opacity: 1
192
- },
193
- ...keyframes,
194
- {
195
- transform: 'translate3d(-4px, 0, 0)',
196
- opacity: 1
197
- },
198
- {
199
- transform: 'translate3d(2px, 0, 0)',
200
- opacity: 1
201
- },
202
- {
203
- transform: 'translate3d(-1px, 0, 0)',
204
- opacity: 1
205
- }
206
- ];
207
- return generateAnimationInstance(target, intensity ? shakePreset : zeroIntensity, {
208
- ...generateOptions(normalizedOptions ?? {}, 820)
209
- });
210
- };
211
- const generateAnimationInstance = (target, effectPreset, options)=>{
212
- const effect = new KeyframeEffect(target, options.iterations && options.iterations === 1 ? effectPreset : generateLoopDelayEffect(effectPreset, options?.delay ?? 0, (options?.duration) ?? 0), {
213
- ...options
214
- });
215
- return new Animation(effect, document.timeline);
216
- };
217
- return {
218
- zoom,
219
- shake,
220
- fade,
221
- slide
222
- };
223
- };
224
-
225
- export { animations };
package/dist/esm/hooks/animation/useLivePageAnimation.js DELETED
@@ -1,228 +0,0 @@
1
- import { useState, useRef, useCallback, useEffect } from 'react';
2
- import { animations } from './animations.js';
3
-
4
- // Any logic changes made to this file must also be applied to
5
- // packages/web-components/src/gp-animation.ts, and vice versa.
6
- const TAGS_SELECTOR = {
7
- Button: '.gp-button-base',
8
- Sticky: 'gp-sticky',
9
- Dialog: 'div[role=dialog]',
10
- Icon: 'div div',
11
- ProductTag: 'div div div'
12
- };
13
- const useLivePageAnimation = (wrapperRef, settings, tag)=>{
14
- const animation = animations();
15
- const [isAppearLoop, setIsAppearLoop] = useState(false);
16
- const observer = useRef(undefined);
17
- const appearAfterHoverTimer = useRef(undefined);
18
- const animationElement = useRef(null);
19
- const animationAppearType = useRef('none');
20
- const animationHoverType = useRef('none');
21
- const animationAppearInstance = useRef(null);
22
- const animationHoverInstance = useRef(null);
23
- const currentDevice = useRef(null);
24
- const wrapperId = useRef('animation-wrapper-');
25
- const appearPlay = useCallback((rate)=>{
26
- if (!animationAppearInstance.current) return;
27
- animationAppearInstance.current.playbackRate = rate ?? 1;
28
- animationAppearInstance.current.play();
29
- }, [
30
- animationAppearInstance
31
- ]);
32
- const hoverPlay = useCallback((rate)=>{
33
- if (!animationHoverInstance.current) return;
34
- animationHoverInstance.current.playbackRate = rate ?? 1;
35
- animationHoverInstance.current.play();
36
- }, [
37
- animationHoverInstance
38
- ]);
39
- const removeZeroOpacity = useCallback(()=>{
40
- if (wrapperRef.current) wrapperRef.current.style.opacity = '1';
41
- if (animationElement.current) animationElement.current.style.opacity = '1';
42
- }, [
43
- wrapperRef
44
- ]);
45
- const applyInitOpacity = useCallback(()=>{
46
- if (wrapperRef.current) wrapperRef.current.style.opacity = '1';
47
- if (animationElement.current) animationElement.current.style.opacity = '0';
48
- }, [
49
- wrapperRef
50
- ]);
51
- const playAppear = useCallback((e)=>{
52
- e && e.stopPropagation();
53
- applyInitOpacity();
54
- if (!animationAppearInstance.current) return;
55
- animationHoverInstance.current?.cancel();
56
- appearPlay();
57
- animationAppearInstance.current.finished.then(()=>{
58
- if (!animationElement.current) return;
59
- removeZeroOpacity();
60
- });
61
- animationElement.current && observer?.current?.unobserve(animationElement.current);
62
- }, [
63
- applyInitOpacity,
64
- appearPlay,
65
- removeZeroOpacity
66
- ]);
67
- const cancelAppear = useCallback(()=>{
68
- if (!animationAppearInstance.current) return;
69
- animationAppearInstance.current.cancel();
70
- }, [
71
- animationAppearInstance
72
- ]);
73
- const playHover = useCallback((e)=>{
74
- e && e.stopPropagation();
75
- if (!animationHoverInstance.current) return;
76
- cancelAppear();
77
- hoverPlay();
78
- }, [
79
- animationHoverInstance,
80
- cancelAppear,
81
- hoverPlay
82
- ]);
83
- const cancelHover = useCallback(()=>{
84
- if (!animationHoverInstance.current) return;
85
- if (animationHoverType.current === 'zoom') {
86
- hoverPlay(-1);
87
- if (!isAppearLoop) return;
88
- animationHoverInstance.current.finished.then(()=>{
89
- clearTimeout(appearAfterHoverTimer.current);
90
- appearAfterHoverTimer.current = setTimeout(()=>{
91
- playAppear();
92
- }, 100);
93
- });
94
- return;
95
- }
96
- animationHoverInstance.current.cancel();
97
- if (isAppearLoop) playAppear();
98
- return;
99
- }, [
100
- hoverPlay,
101
- isAppearLoop,
102
- playAppear
103
- ]);
104
- const getSettingByDevice = useCallback(()=>{
105
- if (currentDevice.current === 'desktop') return settings?.desktop;
106
- else if (currentDevice.current === 'tablet') return settings?.tablet ?? settings?.desktop;
107
- else if (currentDevice.current === 'mobile') return settings?.mobile ?? settings?.tablet ?? settings?.desktop;
108
- return settings?.desktop;
109
- }, [
110
- settings?.desktop,
111
- settings?.mobile,
112
- settings?.tablet
113
- ]);
114
- const getAnimationType = (settings, type)=>{
115
- return settings?.triggerConfig?.[type]?.animation ?? 'none';
116
- };
117
- const initAppearInstance = useCallback((settings)=>{
118
- if (animationAppearType.current === 'none') return;
119
- const animationConfig = settings?.triggerConfig?.['appear']?.setting?.[animationAppearType.current];
120
- setIsAppearLoop(animationConfig.loop);
121
- animationAppearInstance.current = animation?.[animationAppearType.current]?.(animationElement.current, animationConfig);
122
- }, [
123
- animation
124
- ]);
125
- const initHoverInstance = useCallback((settings)=>{
126
- if (animationHoverType.current === 'none') return;
127
- const animationConfig = settings?.triggerConfig?.['hover']?.setting?.[animationHoverType.current];
128
- animationHoverInstance.current = animation?.[animationHoverType.current]?.(animationElement.current, animationConfig);
129
- }, [
130
- animation
131
- ]);
132
- const reset = useCallback(()=>{
133
- if (animationAppearInstance.current) {
134
- animationAppearInstance.current = null;
135
- if (animationElement.current) {
136
- observer.current?.unobserve(animationElement.current);
137
- }
138
- }
139
- if (animationHoverInstance) {
140
- animationHoverInstance.current = null;
141
- if (animationElement.current) {
142
- animationElement.current.removeEventListener('mouseenter', playHover);
143
- animationElement.current.removeEventListener('mouseleave', cancelHover);
144
- }
145
- }
146
- }, [
147
- cancelHover,
148
- playHover
149
- ]);
150
- const initAnimation = useCallback((settings)=>{
151
- reset();
152
- if (!animationElement.current) return;
153
- if (!settings?.enabled) {
154
- removeZeroOpacity();
155
- return;
156
- }
157
- animationAppearType.current = getAnimationType(settings, 'appear');
158
- animationHoverType.current = getAnimationType(settings, 'hover');
159
- if (animationAppearType.current === 'none') removeZeroOpacity();
160
- if (animationHoverType.current !== 'none' && currentDevice.current === 'desktop') {
161
- initHoverInstance(settings);
162
- animationElement.current.addEventListener('mouseenter', playHover);
163
- animationElement.current.addEventListener('mouseleave', cancelHover);
164
- }
165
- if (animationAppearType.current !== 'none') {
166
- initAppearInstance(settings);
167
- observer.current = new IntersectionObserver((entries)=>{
168
- entries.forEach((entry)=>{
169
- if (entry.intersectionRatio > 0.1) playAppear();
170
- });
171
- }, {
172
- root: null,
173
- rootMargin: '0px',
174
- threshold: [
175
- 0.1
176
- ]
177
- });
178
- observer.current.observe(animationElement.current);
179
- } else removeZeroOpacity();
180
- }, [
181
- cancelHover,
182
- initAppearInstance,
183
- initHoverInstance,
184
- playAppear,
185
- playHover,
186
- removeZeroOpacity,
187
- reset
188
- ]);
189
- const initResizeObserver = useCallback(()=>{
190
- const screen = document.querySelector('html');
191
- if (!animationElement.current || !screen) return;
192
- const resizeObserver = new ResizeObserver(([entry])=>{
193
- const deviceWidth = entry?.target.getBoundingClientRect().width ?? 0;
194
- let device;
195
- if (deviceWidth >= 1024) device = 'desktop';
196
- else if (deviceWidth >= 768) device = 'tablet';
197
- else device = 'mobile';
198
- if (currentDevice.current === device) return;
199
- currentDevice.current = device;
200
- initAnimation(getSettingByDevice());
201
- });
202
- resizeObserver.observe(screen);
203
- return ()=>resizeObserver.disconnect();
204
- }, [
205
- getSettingByDevice,
206
- initAnimation
207
- ]);
208
- useEffect(()=>{
209
- setTimeout(()=>{
210
- if (!settings || !wrapperRef.current) return;
211
- wrapperId.current = `animation-wrapper-${Math.random().toString(36).substr(2, 5)}`;
212
- wrapperRef.current.setAttribute('data-animationid', wrapperId.current);
213
- if (Object.keys(TAGS_SELECTOR).includes(tag)) animationElement.current = document.querySelector(`[data-animationid='${wrapperId.current}'] ${TAGS_SELECTOR?.[tag] ?? ''}`);
214
- else animationElement.current = document.querySelector(`[data-animationid='${wrapperId.current}'] > :first-child`);
215
- return initResizeObserver();
216
- }, 100);
217
- }, [
218
- initResizeObserver,
219
- settings,
220
- tag,
221
- wrapperRef
222
- ]);
223
- return {
224
- initAnimation
225
- };
226
- };
227
-
228
- export { useLivePageAnimation };