@gem-sdk/core 1.23.0-staging.296 → 1.23.0-staging.297

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 -233
  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 -231
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.23.0-staging.296",
3
+ "version": "1.23.0-staging.297",
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,233 +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
- Carousel: '.gp-carousel-wrapper',
11
- Sticky: 'gp-sticky',
12
- Dialog: 'div[role=dialog]',
13
- Icon: 'div div',
14
- ProductTag: 'div div div'
15
- };
16
- const useLivePageAnimation = (wrapperRef, settings, tag)=>{
17
- const animation = animations.animations();
18
- const [isAppearLoop, setIsAppearLoop] = react.useState(false);
19
- const observer = react.useRef(undefined);
20
- const appearAfterHoverTimer = react.useRef(undefined);
21
- const animationElement = react.useRef(null);
22
- const animationAppearType = react.useRef('none');
23
- const animationHoverType = react.useRef('none');
24
- const animationAppearInstance = react.useRef(null);
25
- const animationHoverInstance = react.useRef(null);
26
- const currentDevice = react.useRef(null);
27
- const wrapperId = react.useRef('animation-wrapper-');
28
- const appearPlay = react.useCallback((rate)=>{
29
- if (!animationAppearInstance.current) return;
30
- animationAppearInstance.current.playbackRate = rate ?? 1;
31
- animationAppearInstance.current.play();
32
- }, [
33
- animationAppearInstance
34
- ]);
35
- const hoverPlay = react.useCallback((rate)=>{
36
- if (!animationHoverInstance.current) return;
37
- animationHoverInstance.current.playbackRate = rate ?? 1;
38
- animationHoverInstance.current.play();
39
- }, [
40
- animationHoverInstance
41
- ]);
42
- const removeZeroOpacity = react.useCallback(()=>{
43
- if (wrapperRef.current) wrapperRef.current.style.opacity = '1';
44
- if (animationElement.current) animationElement.current.style.opacity = '1';
45
- }, [
46
- wrapperRef
47
- ]);
48
- const applyInitOpacity = react.useCallback(()=>{
49
- if (wrapperRef.current) wrapperRef.current.style.opacity = '1';
50
- if (animationElement.current) animationElement.current.style.opacity = '0';
51
- }, [
52
- wrapperRef
53
- ]);
54
- const playAppear = react.useCallback((e)=>{
55
- e && e.stopPropagation();
56
- applyInitOpacity();
57
- if (!animationAppearInstance.current) return;
58
- animationHoverInstance.current?.cancel();
59
- appearPlay();
60
- animationAppearInstance.current.finished.then(()=>{
61
- if (!animationElement.current) return;
62
- removeZeroOpacity();
63
- });
64
- animationElement.current && observer?.current?.unobserve(animationElement.current);
65
- }, [
66
- applyInitOpacity,
67
- appearPlay,
68
- removeZeroOpacity
69
- ]);
70
- const cancelAppear = react.useCallback(()=>{
71
- removeZeroOpacity();
72
- if (!animationAppearInstance.current) return;
73
- animationAppearInstance.current.cancel();
74
- }, [
75
- removeZeroOpacity,
76
- animationAppearInstance
77
- ]);
78
- const playHover = react.useCallback((e)=>{
79
- e && e.stopPropagation();
80
- if (!animationHoverInstance.current) return;
81
- cancelAppear();
82
- hoverPlay();
83
- }, [
84
- animationHoverInstance,
85
- cancelAppear,
86
- hoverPlay
87
- ]);
88
- const cancelHover = react.useCallback(()=>{
89
- if (!animationHoverInstance.current) return;
90
- if (animationHoverType.current === 'zoom') {
91
- hoverPlay(-1);
92
- if (!isAppearLoop) return;
93
- animationHoverInstance.current.finished.then(()=>{
94
- clearTimeout(appearAfterHoverTimer.current);
95
- appearAfterHoverTimer.current = setTimeout(()=>{
96
- playAppear();
97
- }, 100);
98
- });
99
- return;
100
- }
101
- animationHoverInstance.current.cancel();
102
- if (isAppearLoop) playAppear();
103
- return;
104
- }, [
105
- hoverPlay,
106
- isAppearLoop,
107
- playAppear
108
- ]);
109
- const getSettingByDevice = react.useCallback(()=>{
110
- if (currentDevice.current === 'desktop') return settings?.desktop;
111
- else if (currentDevice.current === 'tablet') return settings?.tablet ?? settings?.desktop;
112
- else if (currentDevice.current === 'mobile') return settings?.mobile ?? settings?.tablet ?? settings?.desktop;
113
- return settings?.desktop;
114
- }, [
115
- settings?.desktop,
116
- settings?.mobile,
117
- settings?.tablet
118
- ]);
119
- const getAnimationType = (settings, type)=>{
120
- return settings?.triggerConfig?.[type]?.animation ?? 'none';
121
- };
122
- const initAppearInstance = react.useCallback((settings)=>{
123
- if (animationAppearType.current === 'none') return;
124
- const animationConfig = settings?.triggerConfig?.['appear']?.setting?.[animationAppearType.current];
125
- setIsAppearLoop(animationConfig.loop);
126
- animationAppearInstance.current = animation?.[animationAppearType.current]?.(animationElement.current, animationConfig);
127
- }, [
128
- animation
129
- ]);
130
- const initHoverInstance = react.useCallback((settings)=>{
131
- if (animationHoverType.current === 'none') return;
132
- const animationConfig = settings?.triggerConfig?.['hover']?.setting?.[animationHoverType.current];
133
- animationHoverInstance.current = animation?.[animationHoverType.current]?.(animationElement.current, animationConfig);
134
- }, [
135
- animation
136
- ]);
137
- const reset = react.useCallback(()=>{
138
- if (animationAppearInstance.current) {
139
- animationAppearInstance.current = null;
140
- if (animationElement.current) {
141
- observer.current?.unobserve(animationElement.current);
142
- }
143
- }
144
- if (animationHoverInstance) {
145
- animationHoverInstance.current = null;
146
- if (animationElement.current) {
147
- animationElement.current.removeEventListener('mouseenter', playHover);
148
- animationElement.current.removeEventListener('mouseleave', cancelHover);
149
- }
150
- }
151
- }, [
152
- cancelHover,
153
- playHover
154
- ]);
155
- const initAnimation = react.useCallback((settings)=>{
156
- reset();
157
- if (!animationElement.current) return;
158
- if (!settings?.enabled) {
159
- removeZeroOpacity();
160
- return;
161
- }
162
- animationAppearType.current = getAnimationType(settings, 'appear');
163
- animationHoverType.current = getAnimationType(settings, 'hover');
164
- if (animationAppearType.current === 'none') removeZeroOpacity();
165
- if (animationHoverType.current !== 'none' && currentDevice.current === 'desktop') {
166
- initHoverInstance(settings);
167
- animationElement.current.addEventListener('mouseenter', playHover);
168
- animationElement.current.addEventListener('mouseleave', cancelHover);
169
- }
170
- if (animationAppearType.current !== 'none') {
171
- initAppearInstance(settings);
172
- observer.current = new IntersectionObserver((entries)=>{
173
- entries.forEach((entry)=>{
174
- if (entry.intersectionRatio > 0.1) playAppear();
175
- });
176
- }, {
177
- root: null,
178
- rootMargin: '0px',
179
- threshold: [
180
- 0.1
181
- ]
182
- });
183
- observer.current.observe(animationElement.current);
184
- } else removeZeroOpacity();
185
- }, [
186
- cancelHover,
187
- initAppearInstance,
188
- initHoverInstance,
189
- playAppear,
190
- playHover,
191
- removeZeroOpacity,
192
- reset
193
- ]);
194
- const initResizeObserver = react.useCallback(()=>{
195
- const screen = document.querySelector('html');
196
- if (!animationElement.current || !screen) return;
197
- const resizeObserver = new ResizeObserver(([entry])=>{
198
- const deviceWidth = entry?.target.getBoundingClientRect().width ?? 0;
199
- let device;
200
- if (deviceWidth >= 1024) device = 'desktop';
201
- else if (deviceWidth >= 768) device = 'tablet';
202
- else device = 'mobile';
203
- if (currentDevice.current === device) return;
204
- currentDevice.current = device;
205
- initAnimation(getSettingByDevice());
206
- });
207
- resizeObserver.observe(screen);
208
- return ()=>resizeObserver.disconnect();
209
- }, [
210
- getSettingByDevice,
211
- initAnimation
212
- ]);
213
- react.useEffect(()=>{
214
- setTimeout(()=>{
215
- if (!settings || !wrapperRef.current) return;
216
- wrapperId.current = `animation-wrapper-${Math.random().toString(36).substr(2, 5)}`;
217
- wrapperRef.current.setAttribute('data-animationid', wrapperId.current);
218
- if (Object.keys(TAGS_SELECTOR).includes(tag)) animationElement.current = document.querySelector(`[data-animationid='${wrapperId.current}'] ${TAGS_SELECTOR?.[tag] ?? ''}`);
219
- else animationElement.current = document.querySelector(`[data-animationid='${wrapperId.current}'] > :first-of-type:not(script,link)`);
220
- return initResizeObserver();
221
- }, 100);
222
- }, [
223
- initResizeObserver,
224
- settings,
225
- tag,
226
- wrapperRef
227
- ]);
228
- return {
229
- initAnimation
230
- };
231
- };
232
-
233
- 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,231 +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
- Carousel: '.gp-carousel-wrapper',
9
- Sticky: 'gp-sticky',
10
- Dialog: 'div[role=dialog]',
11
- Icon: 'div div',
12
- ProductTag: 'div div div'
13
- };
14
- const useLivePageAnimation = (wrapperRef, settings, tag)=>{
15
- const animation = animations();
16
- const [isAppearLoop, setIsAppearLoop] = useState(false);
17
- const observer = useRef(undefined);
18
- const appearAfterHoverTimer = useRef(undefined);
19
- const animationElement = useRef(null);
20
- const animationAppearType = useRef('none');
21
- const animationHoverType = useRef('none');
22
- const animationAppearInstance = useRef(null);
23
- const animationHoverInstance = useRef(null);
24
- const currentDevice = useRef(null);
25
- const wrapperId = useRef('animation-wrapper-');
26
- const appearPlay = useCallback((rate)=>{
27
- if (!animationAppearInstance.current) return;
28
- animationAppearInstance.current.playbackRate = rate ?? 1;
29
- animationAppearInstance.current.play();
30
- }, [
31
- animationAppearInstance
32
- ]);
33
- const hoverPlay = useCallback((rate)=>{
34
- if (!animationHoverInstance.current) return;
35
- animationHoverInstance.current.playbackRate = rate ?? 1;
36
- animationHoverInstance.current.play();
37
- }, [
38
- animationHoverInstance
39
- ]);
40
- const removeZeroOpacity = useCallback(()=>{
41
- if (wrapperRef.current) wrapperRef.current.style.opacity = '1';
42
- if (animationElement.current) animationElement.current.style.opacity = '1';
43
- }, [
44
- wrapperRef
45
- ]);
46
- const applyInitOpacity = useCallback(()=>{
47
- if (wrapperRef.current) wrapperRef.current.style.opacity = '1';
48
- if (animationElement.current) animationElement.current.style.opacity = '0';
49
- }, [
50
- wrapperRef
51
- ]);
52
- const playAppear = useCallback((e)=>{
53
- e && e.stopPropagation();
54
- applyInitOpacity();
55
- if (!animationAppearInstance.current) return;
56
- animationHoverInstance.current?.cancel();
57
- appearPlay();
58
- animationAppearInstance.current.finished.then(()=>{
59
- if (!animationElement.current) return;
60
- removeZeroOpacity();
61
- });
62
- animationElement.current && observer?.current?.unobserve(animationElement.current);
63
- }, [
64
- applyInitOpacity,
65
- appearPlay,
66
- removeZeroOpacity
67
- ]);
68
- const cancelAppear = useCallback(()=>{
69
- removeZeroOpacity();
70
- if (!animationAppearInstance.current) return;
71
- animationAppearInstance.current.cancel();
72
- }, [
73
- removeZeroOpacity,
74
- animationAppearInstance
75
- ]);
76
- const playHover = useCallback((e)=>{
77
- e && e.stopPropagation();
78
- if (!animationHoverInstance.current) return;
79
- cancelAppear();
80
- hoverPlay();
81
- }, [
82
- animationHoverInstance,
83
- cancelAppear,
84
- hoverPlay
85
- ]);
86
- const cancelHover = useCallback(()=>{
87
- if (!animationHoverInstance.current) return;
88
- if (animationHoverType.current === 'zoom') {
89
- hoverPlay(-1);
90
- if (!isAppearLoop) return;
91
- animationHoverInstance.current.finished.then(()=>{
92
- clearTimeout(appearAfterHoverTimer.current);
93
- appearAfterHoverTimer.current = setTimeout(()=>{
94
- playAppear();
95
- }, 100);
96
- });
97
- return;
98
- }
99
- animationHoverInstance.current.cancel();
100
- if (isAppearLoop) playAppear();
101
- return;
102
- }, [
103
- hoverPlay,
104
- isAppearLoop,
105
- playAppear
106
- ]);
107
- const getSettingByDevice = useCallback(()=>{
108
- if (currentDevice.current === 'desktop') return settings?.desktop;
109
- else if (currentDevice.current === 'tablet') return settings?.tablet ?? settings?.desktop;
110
- else if (currentDevice.current === 'mobile') return settings?.mobile ?? settings?.tablet ?? settings?.desktop;
111
- return settings?.desktop;
112
- }, [
113
- settings?.desktop,
114
- settings?.mobile,
115
- settings?.tablet
116
- ]);
117
- const getAnimationType = (settings, type)=>{
118
- return settings?.triggerConfig?.[type]?.animation ?? 'none';
119
- };
120
- const initAppearInstance = useCallback((settings)=>{
121
- if (animationAppearType.current === 'none') return;
122
- const animationConfig = settings?.triggerConfig?.['appear']?.setting?.[animationAppearType.current];
123
- setIsAppearLoop(animationConfig.loop);
124
- animationAppearInstance.current = animation?.[animationAppearType.current]?.(animationElement.current, animationConfig);
125
- }, [
126
- animation
127
- ]);
128
- const initHoverInstance = useCallback((settings)=>{
129
- if (animationHoverType.current === 'none') return;
130
- const animationConfig = settings?.triggerConfig?.['hover']?.setting?.[animationHoverType.current];
131
- animationHoverInstance.current = animation?.[animationHoverType.current]?.(animationElement.current, animationConfig);
132
- }, [
133
- animation
134
- ]);
135
- const reset = useCallback(()=>{
136
- if (animationAppearInstance.current) {
137
- animationAppearInstance.current = null;
138
- if (animationElement.current) {
139
- observer.current?.unobserve(animationElement.current);
140
- }
141
- }
142
- if (animationHoverInstance) {
143
- animationHoverInstance.current = null;
144
- if (animationElement.current) {
145
- animationElement.current.removeEventListener('mouseenter', playHover);
146
- animationElement.current.removeEventListener('mouseleave', cancelHover);
147
- }
148
- }
149
- }, [
150
- cancelHover,
151
- playHover
152
- ]);
153
- const initAnimation = useCallback((settings)=>{
154
- reset();
155
- if (!animationElement.current) return;
156
- if (!settings?.enabled) {
157
- removeZeroOpacity();
158
- return;
159
- }
160
- animationAppearType.current = getAnimationType(settings, 'appear');
161
- animationHoverType.current = getAnimationType(settings, 'hover');
162
- if (animationAppearType.current === 'none') removeZeroOpacity();
163
- if (animationHoverType.current !== 'none' && currentDevice.current === 'desktop') {
164
- initHoverInstance(settings);
165
- animationElement.current.addEventListener('mouseenter', playHover);
166
- animationElement.current.addEventListener('mouseleave', cancelHover);
167
- }
168
- if (animationAppearType.current !== 'none') {
169
- initAppearInstance(settings);
170
- observer.current = new IntersectionObserver((entries)=>{
171
- entries.forEach((entry)=>{
172
- if (entry.intersectionRatio > 0.1) playAppear();
173
- });
174
- }, {
175
- root: null,
176
- rootMargin: '0px',
177
- threshold: [
178
- 0.1
179
- ]
180
- });
181
- observer.current.observe(animationElement.current);
182
- } else removeZeroOpacity();
183
- }, [
184
- cancelHover,
185
- initAppearInstance,
186
- initHoverInstance,
187
- playAppear,
188
- playHover,
189
- removeZeroOpacity,
190
- reset
191
- ]);
192
- const initResizeObserver = useCallback(()=>{
193
- const screen = document.querySelector('html');
194
- if (!animationElement.current || !screen) return;
195
- const resizeObserver = new ResizeObserver(([entry])=>{
196
- const deviceWidth = entry?.target.getBoundingClientRect().width ?? 0;
197
- let device;
198
- if (deviceWidth >= 1024) device = 'desktop';
199
- else if (deviceWidth >= 768) device = 'tablet';
200
- else device = 'mobile';
201
- if (currentDevice.current === device) return;
202
- currentDevice.current = device;
203
- initAnimation(getSettingByDevice());
204
- });
205
- resizeObserver.observe(screen);
206
- return ()=>resizeObserver.disconnect();
207
- }, [
208
- getSettingByDevice,
209
- initAnimation
210
- ]);
211
- useEffect(()=>{
212
- setTimeout(()=>{
213
- if (!settings || !wrapperRef.current) return;
214
- wrapperId.current = `animation-wrapper-${Math.random().toString(36).substr(2, 5)}`;
215
- wrapperRef.current.setAttribute('data-animationid', wrapperId.current);
216
- if (Object.keys(TAGS_SELECTOR).includes(tag)) animationElement.current = document.querySelector(`[data-animationid='${wrapperId.current}'] ${TAGS_SELECTOR?.[tag] ?? ''}`);
217
- else animationElement.current = document.querySelector(`[data-animationid='${wrapperId.current}'] > :first-of-type:not(script,link)`);
218
- return initResizeObserver();
219
- }, 100);
220
- }, [
221
- initResizeObserver,
222
- settings,
223
- tag,
224
- wrapperRef
225
- ]);
226
- return {
227
- initAnimation
228
- };
229
- };
230
-
231
- export { useLivePageAnimation };