@gem-sdk/core 1.23.0-staging.284 → 1.23.0-staging.289

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 +21 -18
  2. package/dist/cjs/components/Render.js +40 -43
  3. package/dist/cjs/components/animation/AnimationWrapper.js +50 -0
  4. package/dist/cjs/helpers/queries/get-collection.js +1 -1
  5. package/dist/cjs/hooks/animation/animations.js +227 -0
  6. package/dist/cjs/hooks/animation/useLivePageAnimation.js +230 -0
  7. package/dist/esm/components/ComponentWrapper.js +21 -18
  8. package/dist/esm/components/Render.js +40 -43
  9. package/dist/esm/components/animation/AnimationWrapper.js +46 -0
  10. package/dist/esm/helpers/queries/get-collection.js +1 -1
  11. package/dist/esm/hooks/animation/animations.js +225 -0
  12. package/dist/esm/hooks/animation/useLivePageAnimation.js +228 -0
  13. package/package.json +1 -1
package/dist/cjs/components/ComponentWrapper.js CHANGED
@@ -7,25 +7,32 @@ 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');
10
11
 
11
12
  const ComponentWrapper = ({ children, ...props })=>{
12
13
  if (props.type === 'section') return null;
13
14
  const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag);
14
15
  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
+ });
15
23
  if (constant.disableWrap.includes(props.tag) && /*#__PURE__*/ react.isValidElement(children)) {
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
- ]
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
29
36
  });
30
37
  }
31
38
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -34,11 +41,7 @@ const ComponentWrapper = ({ children, ...props })=>{
34
41
  uid: props.uid,
35
42
  advanced: advanced
36
43
  }),
37
- /*#__PURE__*/ jsxRuntime.jsx("div", {
38
- style: style,
39
- className: `${props.uid} ${advanced?.cssClass}`,
40
- children: children
41
- })
44
+ dynamicChildren
42
45
  ]
43
46
  });
44
47
  };
package/dist/cjs/components/Render.js CHANGED
@@ -14,50 +14,47 @@ 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') {
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
- })
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
58
55
  })
59
- }, item.uid);
60
- }
56
+ })
57
+ }, item.uid);
61
58
  };
62
59
  const RenderMemo = /*#__PURE__*/ react.memo(Render);
63
60
  RenderMemo.displayName = 'RenderMemo';
package/dist/cjs/components/animation/AnimationWrapper.js ADDED
@@ -0,0 +1,50 @@
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/helpers/queries/get-collection.js CHANGED
@@ -78,7 +78,7 @@ const loopFetchCollection = async (fetcher, arg)=>{
78
78
  firstVariant: 1,
79
79
  firstMedia: 30,
80
80
  orderBy: {
81
- field: 'PLATFORM_CREATED_AT',
81
+ field: 'PLATFORM_UPDATED_AT',
82
82
  direction: 'DESC'
83
83
  },
84
84
  orderByMedia: {
package/dist/cjs/hooks/animation/animations.js ADDED
@@ -0,0 +1,227 @@
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 ADDED
@@ -0,0 +1,230 @@
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/ComponentWrapper.js CHANGED
@@ -3,25 +3,32 @@ 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';
6
7
 
7
8
  const ComponentWrapper = ({ children, ...props })=>{
8
9
  if (props.type === 'section') return null;
9
10
  const style = composeAdvanceStyle(props.advanced, props.tag);
10
11
  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
+ });
11
19
  if (disableWrap.includes(props.tag) && /*#__PURE__*/ isValidElement(children)) {
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
- ]
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
25
32
  });
26
33
  }
27
34
  return /*#__PURE__*/ jsxs(Fragment, {
@@ -30,11 +37,7 @@ const ComponentWrapper = ({ children, ...props })=>{
30
37
  uid: props.uid,
31
38
  advanced: advanced
32
39
  }),
33
- /*#__PURE__*/ jsx("div", {
34
- style: style,
35
- className: `${props.uid} ${advanced?.cssClass}`,
36
- children: children
37
- })
40
+ dynamicChildren
38
41
  ]
39
42
  });
40
43
  };
package/dist/esm/components/Render.js CHANGED
@@ -10,50 +10,47 @@ 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') {
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
- })
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
54
51
  })
55
- }, item.uid);
56
- }
52
+ })
53
+ }, item.uid);
57
54
  };
58
55
  const RenderMemo = /*#__PURE__*/ memo(Render);
59
56
  RenderMemo.displayName = 'RenderMemo';
package/dist/esm/components/animation/AnimationWrapper.js ADDED
@@ -0,0 +1,46 @@
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/helpers/queries/get-collection.js CHANGED
@@ -76,7 +76,7 @@ const loopFetchCollection = async (fetcher, arg)=>{
76
76
  firstVariant: 1,
77
77
  firstMedia: 30,
78
78
  orderBy: {
79
- field: 'PLATFORM_CREATED_AT',
79
+ field: 'PLATFORM_UPDATED_AT',
80
80
  direction: 'DESC'
81
81
  },
82
82
  orderByMedia: {
package/dist/esm/hooks/animation/animations.js ADDED
@@ -0,0 +1,225 @@
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 ADDED
@@ -0,0 +1,228 @@
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 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.23.0-staging.284",
3
+ "version": "1.23.0-staging.289",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",