@gem-sdk/core 1.51.0 → 1.53.0-dev.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/ComponentToolbarPreview.js +115 -104
- package/dist/cjs/components/ComponentWrapperPreview.js +16 -2
- package/dist/cjs/components/InteractionSuffix.js +115 -0
- package/dist/cjs/components/Render.liquid.js +21 -7
- package/dist/cjs/contexts/PageContext.js +29 -1
- package/dist/cjs/graphql/fragments/published-theme-page.generated.js +8 -0
- package/dist/cjs/graphql-app-api/queries/ShopLibraryPage.generated.js +17 -0
- package/dist/cjs/helpers/animations.js +6 -6
- package/dist/cjs/helpers/background.js +1 -1
- package/dist/cjs/helpers/compose-advance-style.js +6 -3
- package/dist/cjs/helpers/interaction/index.js +66 -0
- package/dist/cjs/helpers/shadow.js +15 -3
- package/dist/cjs/helpers/third-party/appConfig.js +14 -0
- package/dist/cjs/helpers/third-party/appSetting.js +19 -1
- package/dist/cjs/helpers/third-party/constant.js +3 -1
- package/dist/cjs/helpers/typography.js +4 -3
- package/dist/cjs/hooks/animation/useApplyAnimation.js +2 -0
- package/dist/cjs/hooks/useInteraction.js +19 -0
- package/dist/cjs/index.js +14 -0
- package/dist/cjs/types/animations.js +2 -0
- package/dist/cjs/types/custom.js +51 -0
- package/dist/esm/components/ComponentToolbarPreview.js +115 -104
- package/dist/esm/components/ComponentWrapperPreview.js +16 -2
- package/dist/esm/components/InteractionSuffix.js +113 -0
- package/dist/esm/components/Render.liquid.js +21 -7
- package/dist/esm/contexts/PageContext.js +29 -1
- package/dist/esm/graphql/fragments/published-theme-page.generated.js +8 -0
- package/dist/esm/graphql-app-api/queries/ShopLibraryPage.generated.js +15 -0
- package/dist/esm/helpers/animations.js +6 -6
- package/dist/esm/helpers/background.js +1 -1
- package/dist/esm/helpers/compose-advance-style.js +7 -4
- package/dist/esm/helpers/interaction/index.js +64 -0
- package/dist/esm/helpers/shadow.js +15 -4
- package/dist/esm/helpers/third-party/appConfig.js +13 -1
- package/dist/esm/helpers/third-party/appSetting.js +19 -1
- package/dist/esm/helpers/third-party/constant.js +4 -2
- package/dist/esm/helpers/typography.js +4 -3
- package/dist/esm/hooks/animation/useApplyAnimation.js +2 -0
- package/dist/esm/hooks/useInteraction.js +17 -0
- package/dist/esm/index.js +4 -1
- package/dist/esm/types/animations.js +2 -0
- package/dist/esm/types/custom.js +51 -0
- package/dist/types/index.d.ts +4866 -891
- package/package.json +3 -3
|
@@ -46,7 +46,7 @@ const animations = ()=>{
|
|
|
46
46
|
});
|
|
47
47
|
return cloneOptions;
|
|
48
48
|
};
|
|
49
|
-
const slide = (target, options)=>{
|
|
49
|
+
const slide = (target, options, reverse)=>{
|
|
50
50
|
const normalizedOptions = normalizeOptions(options);
|
|
51
51
|
const { direction, distance } = normalizedOptions;
|
|
52
52
|
const coordinate = [
|
|
@@ -67,11 +67,11 @@ const animations = ()=>{
|
|
|
67
67
|
transform: `translate${coordinate}(0)`
|
|
68
68
|
}
|
|
69
69
|
];
|
|
70
|
-
return generateAnimationInstance(target, preset, {
|
|
70
|
+
return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
|
|
71
71
|
...generateOptions(normalizedOptions, 500)
|
|
72
72
|
});
|
|
73
73
|
};
|
|
74
|
-
const fade = (target, options)=>{
|
|
74
|
+
const fade = (target, options, reverse)=>{
|
|
75
75
|
const normalizedOptions = normalizeOptions(options);
|
|
76
76
|
const preset = [
|
|
77
77
|
{
|
|
@@ -81,7 +81,7 @@ const animations = ()=>{
|
|
|
81
81
|
opacity: 1
|
|
82
82
|
}
|
|
83
83
|
];
|
|
84
|
-
return generateAnimationInstance(target, preset, {
|
|
84
|
+
return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
|
|
85
85
|
...generateOptions(normalizedOptions, 500)
|
|
86
86
|
});
|
|
87
87
|
};
|
|
@@ -101,7 +101,7 @@ const animations = ()=>{
|
|
|
101
101
|
easing: EASING[easing ?? 'linear']
|
|
102
102
|
};
|
|
103
103
|
};
|
|
104
|
-
const zoom = (target, options)=>{
|
|
104
|
+
const zoom = (target, options, reverse)=>{
|
|
105
105
|
const normalizedOptions = normalizeOptions(options);
|
|
106
106
|
const { scale, zoomDirection, isFade } = normalizedOptions;
|
|
107
107
|
const [i1, i2] = scale.in;
|
|
@@ -127,7 +127,7 @@ const animations = ()=>{
|
|
|
127
127
|
}
|
|
128
128
|
];
|
|
129
129
|
const zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
|
|
130
|
-
return generateAnimationInstance(target, zoomPreset, {
|
|
130
|
+
return generateAnimationInstance(target, reverse ? zoomPreset.reverse() : zoomPreset, {
|
|
131
131
|
...generateOptions(normalizedOptions, 700)
|
|
132
132
|
});
|
|
133
133
|
};
|
|
@@ -121,7 +121,7 @@ const getBgAttachmentByDevice = (background, device)=>{
|
|
|
121
121
|
return background?.[device]?.attachment;
|
|
122
122
|
};
|
|
123
123
|
const composeBackgroundCss = (backgroundColor)=>{
|
|
124
|
-
return `${backgroundColor ? `background-color: ${colors.getSingleColorVariable(backgroundColor)}
|
|
124
|
+
return `${backgroundColor ? `background-color: ${colors.getSingleColorVariable(backgroundColor)};` : undefined}`;
|
|
125
125
|
};
|
|
126
126
|
const makeFixedBgAttachment = (background)=>{
|
|
127
127
|
if (!background) return;
|
|
@@ -101,6 +101,9 @@ function composeAdvanceStyle(data, tag, pageType) {
|
|
|
101
101
|
if (attr === 'rounded') {
|
|
102
102
|
Object.assign(styles, radius.composeRadius(value));
|
|
103
103
|
}
|
|
104
|
+
if (attr === 'boxShadow') {
|
|
105
|
+
Object.assign(styles, shadow.getResonsiveStyleShadow(value, 'box-shadow', hasBoxShadow));
|
|
106
|
+
}
|
|
104
107
|
if (composeAttr === 'desktop') {
|
|
105
108
|
switch(attr){
|
|
106
109
|
case 'padding':
|
|
@@ -215,20 +218,20 @@ function composeAdvanceStyle(data, tag, pageType) {
|
|
|
215
218
|
}));
|
|
216
219
|
}
|
|
217
220
|
}
|
|
218
|
-
if (attr === 'blockPadding' && pageType ===
|
|
221
|
+
if (attr === 'blockPadding' && pageType === 'POST_PURCHASE') {
|
|
219
222
|
const valueMapped = postPurchasePaddingMapping[value];
|
|
220
223
|
styles[`--pb`] = getAttrValue(attr, valueMapped, tag);
|
|
221
224
|
styles[`--pt`] = getAttrValue(attr, valueMapped, tag);
|
|
222
225
|
styles[`--mb`] = '0px';
|
|
223
226
|
styles[`--mt`] = '0px';
|
|
224
227
|
}
|
|
225
|
-
if (attr === 'inlinePadding' && pageType ===
|
|
228
|
+
if (attr === 'inlinePadding' && pageType === 'POST_PURCHASE') {
|
|
226
229
|
const valueMapped = postPurchasePaddingMapping[value];
|
|
227
230
|
styles[`--pl`] = getAttrValue(attr, valueMapped, tag);
|
|
228
231
|
styles[`--pr`] = getAttrValue(attr, valueMapped, tag);
|
|
229
232
|
}
|
|
230
233
|
});
|
|
231
|
-
const advancedPostPurchaseStyles = pageType ===
|
|
234
|
+
const advancedPostPurchaseStyles = pageType === 'POST_PURCHASE' ? composeAdvanceStyleForPostPurchase(data, tag) : {};
|
|
232
235
|
return {
|
|
233
236
|
...styles,
|
|
234
237
|
...advancedPostPurchaseStyles
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('react/jsx-runtime');
|
|
4
|
+
require('zustand');
|
|
5
|
+
require('react');
|
|
6
|
+
require('swr');
|
|
7
|
+
var PageContext = require('../../contexts/PageContext.js');
|
|
8
|
+
require('@gem-sdk/adapter-shopify');
|
|
9
|
+
require('swr/mutation');
|
|
10
|
+
require('swr/infinite');
|
|
11
|
+
require('vanilla-lazyload');
|
|
12
|
+
require('../../hooks/useCartUI.js');
|
|
13
|
+
require('react-transition-group');
|
|
14
|
+
require('@gem-sdk/core');
|
|
15
|
+
require('classnames');
|
|
16
|
+
require('dayjs');
|
|
17
|
+
require('../convert.js');
|
|
18
|
+
|
|
19
|
+
const useInteraction = ()=>{
|
|
20
|
+
const setInteractionIsSelectOnPage = PageContext.usePageStore((s)=>s.setInteractionIsSelectOnPage);
|
|
21
|
+
const onListener = ({ event, selector }, callback)=>{
|
|
22
|
+
const element = document.querySelector(selector);
|
|
23
|
+
if (!element) return;
|
|
24
|
+
element.addEventListener(event, (e)=>{
|
|
25
|
+
const event = e;
|
|
26
|
+
const params = event.detail;
|
|
27
|
+
if (callback) callback(params);
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
const trigger = ({ event, data, selector })=>{
|
|
31
|
+
const element = document.querySelector(selector);
|
|
32
|
+
if (!element) return;
|
|
33
|
+
const eventDispatch = new CustomEvent(event, {
|
|
34
|
+
bubbles: false,
|
|
35
|
+
cancelable: true,
|
|
36
|
+
detail: {
|
|
37
|
+
data
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
element.dispatchEvent(eventDispatch);
|
|
41
|
+
};
|
|
42
|
+
const saveToElementInteractionData = (element, key, value)=>{
|
|
43
|
+
const interactionData = element.getAttribute('gp-data-interaction');
|
|
44
|
+
const interactionDataJson = JSON.parse(interactionData || '{}');
|
|
45
|
+
element.setAttribute('gp-data-interaction', JSON.stringify({
|
|
46
|
+
...interactionDataJson,
|
|
47
|
+
[key]: value
|
|
48
|
+
}));
|
|
49
|
+
};
|
|
50
|
+
const closeSelectOnPage = ()=>{
|
|
51
|
+
setInteractionIsSelectOnPage(false);
|
|
52
|
+
const event = new CustomEvent('editor:interaction:change-select-on-page', {
|
|
53
|
+
bubbles: true,
|
|
54
|
+
detail: false
|
|
55
|
+
});
|
|
56
|
+
window.dispatchEvent(event);
|
|
57
|
+
};
|
|
58
|
+
return {
|
|
59
|
+
onListener,
|
|
60
|
+
trigger,
|
|
61
|
+
saveToElementInteractionData,
|
|
62
|
+
closeSelectOnPage
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
exports.useInteraction = useInteraction;
|
|
@@ -27,10 +27,10 @@ const getStyleShadow = (shadowStyle, isActiveState = false)=>{
|
|
|
27
27
|
if (typeof value.distance == 'undefined') return {};
|
|
28
28
|
const { value: distance, unit: unitDistance } = parseValueWithUnit(`${value?.distance}`);
|
|
29
29
|
return {
|
|
30
|
-
[`-${!isActiveState ? constant.stateMapping?.[state] || '' : ''}-${getShortname.getShortName(styleAppliedFor)}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${colors.getSingleColorVariable(value?.color)}` : 'none'
|
|
30
|
+
[`-${!isActiveState ? constant.stateMapping?.[state] || '' : ''}-${getShortname.getShortName(styleAppliedFor)}${shadowStyle.screen ? `-${shadowStyle.screen}` : ''}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${colors.getSingleColorVariable(value?.color)}` : 'none'
|
|
31
31
|
};
|
|
32
32
|
};
|
|
33
|
-
const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{
|
|
33
|
+
const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow, screen)=>{
|
|
34
34
|
if (!shadow || !styleAppliedFor) return {};
|
|
35
35
|
const style = {};
|
|
36
36
|
for (const [key, value] of Object.entries(shadow)){
|
|
@@ -38,11 +38,22 @@ const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{
|
|
|
38
38
|
value: value,
|
|
39
39
|
state: key,
|
|
40
40
|
styleAppliedFor,
|
|
41
|
-
isEnableShadow: isEnableShadow?.[key]
|
|
41
|
+
isEnableShadow: isEnableShadow?.[key],
|
|
42
|
+
screen: screen ?? ''
|
|
42
43
|
}));
|
|
43
44
|
}
|
|
44
45
|
return style;
|
|
45
46
|
};
|
|
47
|
+
const getResonsiveStyleShadow = (value, styleAppliedFor, isEnableShadow)=>{
|
|
48
|
+
if (!value) return undefined;
|
|
49
|
+
if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
|
|
50
|
+
return {
|
|
51
|
+
...getStyleShadowState(value.desktop, styleAppliedFor, isEnableShadow.desktop),
|
|
52
|
+
...value.tablet && (isEnableShadow.tablet ?? isEnableShadow.desktop) ? getStyleShadowState(value.tablet, styleAppliedFor, isEnableShadow.tablet ?? isEnableShadow.desktop, 'tablet') : undefined,
|
|
53
|
+
...value.mobile && (isEnableShadow.mobile ?? isEnableShadow.tablet ?? isEnableShadow.desktop) ? getStyleShadowState(value.mobile, styleAppliedFor, isEnableShadow.mobile ?? isEnableShadow.tablet ?? isEnableShadow.desktop, 'mobile') : undefined
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
};
|
|
46
57
|
const composeShadowCss = ({ hasBoxShadow, boxShadowValue, important })=>{
|
|
47
58
|
if (!hasBoxShadow) return undefined;
|
|
48
59
|
if (!boxShadowValue) return undefined;
|
|
@@ -52,6 +63,7 @@ const composeShadowCss = ({ hasBoxShadow, boxShadowValue, important })=>{
|
|
|
52
63
|
};
|
|
53
64
|
|
|
54
65
|
exports.composeShadowCss = composeShadowCss;
|
|
66
|
+
exports.getResonsiveStyleShadow = getResonsiveStyleShadow;
|
|
55
67
|
exports.getStyleShadow = getStyleShadow;
|
|
56
68
|
exports.getStyleShadowState = getStyleShadowState;
|
|
57
69
|
exports.parseValueWithUnit = parseValueWithUnit;
|
|
@@ -102,6 +102,18 @@ const JunipProductReviewsUgcConfig = {
|
|
|
102
102
|
appId: 'dc14f5a8-ed15-41b1-ad08-cfba23f9789b'
|
|
103
103
|
}
|
|
104
104
|
};
|
|
105
|
+
const PreorderNowWodPresaleConfig = {
|
|
106
|
+
PreorderNowWodPresale: {
|
|
107
|
+
appName: 'preorder-now-wod-presale',
|
|
108
|
+
appId: 'fdf17d17-ef12-4a7b-8383-20cc1fc2a4b6'
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
const YotpoReviewsV3UgcConfig = {
|
|
112
|
+
YotpoReviews: {
|
|
113
|
+
appName: 'yotpo-product-reviews-ugc',
|
|
114
|
+
appId: 'eb7dfd7d-db44-4334-bc49-c893b51b36cf'
|
|
115
|
+
}
|
|
116
|
+
};
|
|
105
117
|
|
|
106
118
|
exports.BonLoyaltyRewardsReferralsConfig = BonLoyaltyRewardsReferralsConfig;
|
|
107
119
|
exports.EasyBundleBuilderSkailamaConfig = EasyBundleBuilderSkailamaConfig;
|
|
@@ -111,6 +123,7 @@ exports.JunipProductReviewsUgcConfig = JunipProductReviewsUgcConfig;
|
|
|
111
123
|
exports.KiteFreeGiftDiscountConfig = KiteFreeGiftDiscountConfig;
|
|
112
124
|
exports.LoopSubscriptionsConfig = LoopSubscriptionsConfig;
|
|
113
125
|
exports.PreorderNowPreOrderPqConfig = PreorderNowPreOrderPqConfig;
|
|
126
|
+
exports.PreorderNowWodPresaleConfig = PreorderNowWodPresaleConfig;
|
|
114
127
|
exports.PumperBundlesVolumeDiscountConfig = PumperBundlesVolumeDiscountConfig;
|
|
115
128
|
exports.RechargeSubscriptionsConfig = RechargeSubscriptionsConfig;
|
|
116
129
|
exports.ReviewxpoProductReviewsAppConfig = ReviewxpoProductReviewsAppConfig;
|
|
@@ -120,3 +133,4 @@ exports.SimpleBundlesKitsConfig = SimpleBundlesKitsConfig;
|
|
|
120
133
|
exports.SkioSubscriptionsYcS20Config = SkioSubscriptionsYcS20Config;
|
|
121
134
|
exports.SubifySubscriptionsConfig = SubifySubscriptionsConfig;
|
|
122
135
|
exports.UnlimitedBundlesDiscountsConfig = UnlimitedBundlesDiscountsConfig;
|
|
136
|
+
exports.YotpoReviewsV3UgcConfig = YotpoReviewsV3UgcConfig;
|
|
@@ -191,9 +191,26 @@ const JunipProductReviewsUgc = {
|
|
|
191
191
|
}
|
|
192
192
|
}
|
|
193
193
|
};
|
|
194
|
+
const PreorderNowWodPresale = {
|
|
195
|
+
PreorderNowWodPresale: {
|
|
196
|
+
'app-block': null,
|
|
197
|
+
'popups-block': null
|
|
198
|
+
}
|
|
199
|
+
};
|
|
200
|
+
const YotpoReviews = {
|
|
201
|
+
YotpoReviews: {
|
|
202
|
+
reviews: {
|
|
203
|
+
product: '{{ product }}'
|
|
204
|
+
},
|
|
205
|
+
'star-rating': {
|
|
206
|
+
product: '{{ product }}'
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
};
|
|
194
210
|
const composeSettingsByWidgetType = {
|
|
195
211
|
...JunipProductReviewsUgc,
|
|
196
212
|
...FlyBundlesUpsellsFbt,
|
|
213
|
+
...PreorderNowWodPresale,
|
|
197
214
|
...PreorderNowPreOrderPq,
|
|
198
215
|
...EasyBundleBuilderSkailama,
|
|
199
216
|
...FastBundleBundlesDiscounts,
|
|
@@ -208,7 +225,8 @@ const composeSettingsByWidgetType = {
|
|
|
208
225
|
...RechargeSubscriptions,
|
|
209
226
|
...LoyaltyRewardsReferrals,
|
|
210
227
|
...SubifySubscriptions,
|
|
211
|
-
...SelleasyWidget
|
|
228
|
+
...SelleasyWidget,
|
|
229
|
+
...YotpoReviews
|
|
212
230
|
};
|
|
213
231
|
|
|
214
232
|
exports.composeSettingsByWidgetType = composeSettingsByWidgetType;
|
|
@@ -19,7 +19,9 @@ const mapShopifyAppMeta = {
|
|
|
19
19
|
...appConfig.EasyBundleBuilderSkailamaConfig,
|
|
20
20
|
...appConfig.PreorderNowPreOrderPqConfig,
|
|
21
21
|
...appConfig.FlyBundlesUpsellsFbtConfig,
|
|
22
|
-
...appConfig.JunipProductReviewsUgcConfig
|
|
22
|
+
...appConfig.JunipProductReviewsUgcConfig,
|
|
23
|
+
...appConfig.PreorderNowWodPresaleConfig,
|
|
24
|
+
...appConfig.YotpoReviewsV3UgcConfig
|
|
23
25
|
};
|
|
24
26
|
const THIRD_PARTY_APP_BLOCK_ID_PREFIX = 'gp_app';
|
|
25
27
|
|
|
@@ -28,7 +28,8 @@ const composeTypographyV2Css = (typography, isImportant)=>{
|
|
|
28
28
|
const composeImportant = isImportant ? '!important' : '';
|
|
29
29
|
return `
|
|
30
30
|
${fontFamily ? `font-family: ${composeFontFamilyTypographyV2({
|
|
31
|
-
fontFamily
|
|
31
|
+
fontFamily,
|
|
32
|
+
type: typography?.type
|
|
32
33
|
})} ${composeImportant}` : ''};
|
|
33
34
|
${fontSize?.desktop ? `font-size: ${fontSize?.desktop} ${composeImportant}` : ''};
|
|
34
35
|
${bold ? `font-weight: bold ${composeImportant}` : fontWeight ? `font-weight: ${fontWeight} ${composeImportant}` : ''};
|
|
@@ -76,7 +77,7 @@ const composeTypographyV2 = (value, attrs)=>{
|
|
|
76
77
|
});
|
|
77
78
|
};
|
|
78
79
|
const composeFontFamilyTypographyV2 = (value)=>{
|
|
79
|
-
const { fontFamily, isCustom, fallbackFontFamily } = value || {};
|
|
80
|
+
const { fontFamily, isCustom, fallbackFontFamily, type } = value || {};
|
|
80
81
|
if (!fontFamily) {
|
|
81
82
|
return isCustom ? fallbackFontFamily : undefined;
|
|
82
83
|
}
|
|
@@ -93,7 +94,7 @@ const composeFontFamilyTypographyV2 = (value)=>{
|
|
|
93
94
|
default:
|
|
94
95
|
return getFontUsedByTypographyV2({
|
|
95
96
|
fontFamily: fontFamily.value,
|
|
96
|
-
fallbackFontFamily:
|
|
97
|
+
fallbackFontFamily: composeFallbackTypographyStyle(type ?? 'heading')
|
|
97
98
|
});
|
|
98
99
|
}
|
|
99
100
|
}
|
|
@@ -8,6 +8,7 @@ var useAnimationTarget = require('./useAnimationTarget.js');
|
|
|
8
8
|
var useAnimationConfig = require('./useAnimationConfig.js');
|
|
9
9
|
var useAnimationActions = require('./useAnimationActions.js');
|
|
10
10
|
var useAnimationPreview = require('./useAnimationPreview.js');
|
|
11
|
+
require('../../types/custom.js');
|
|
11
12
|
var animations = require('../../types/animations.js');
|
|
12
13
|
|
|
13
14
|
const useApplyAnimation = ({ props })=>{
|
|
@@ -40,6 +41,7 @@ const useApplyAnimation = ({ props })=>{
|
|
|
40
41
|
setting,
|
|
41
42
|
target: item.target
|
|
42
43
|
}));
|
|
44
|
+
console.log('listAnimations', listAnimations);
|
|
43
45
|
cancelAnimation();
|
|
44
46
|
setAnimation(listAnimations);
|
|
45
47
|
}, [
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var PageContext = require('../contexts/PageContext.js');
|
|
4
|
+
|
|
5
|
+
const useInteraction = ()=>{
|
|
6
|
+
const interactionData = PageContext.usePageStore((state)=>state.interactionData);
|
|
7
|
+
const { item } = interactionData || {};
|
|
8
|
+
const getAnimationByUid = (uid)=>{
|
|
9
|
+
const targets = item?.targets;
|
|
10
|
+
const targetByUid = targets?.find((target)=>target.uid === uid);
|
|
11
|
+
const metaDataContainsAnimation = targetByUid?.events?.find((it)=>it.condition?.metaData?.animation);
|
|
12
|
+
return metaDataContainsAnimation?.condition?.metaData?.animation;
|
|
13
|
+
};
|
|
14
|
+
return {
|
|
15
|
+
getAnimationByUid
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
exports.useInteraction = useInteraction;
|
package/dist/cjs/index.js
CHANGED
|
@@ -30,6 +30,7 @@ var LibraryTemplate_generated = require('./graphql-app-api/queries/LibraryTempla
|
|
|
30
30
|
var ThemePage_generated = require('./graphql-app-api/queries/ThemePage.generated.js');
|
|
31
31
|
var SaleFunnelDiscounts_generated = require('./graphql-app-api/queries/SaleFunnelDiscounts.generated.js');
|
|
32
32
|
var LibrarySaleFunnelDiscount_generated = require('./graphql-app-api/queries/LibrarySaleFunnelDiscount.generated.js');
|
|
33
|
+
var ShopLibraryPage_generated = require('./graphql-app-api/queries/ShopLibraryPage.generated.js');
|
|
33
34
|
var borders = require('./helpers/borders.js');
|
|
34
35
|
var carousel = require('./helpers/carousel.js');
|
|
35
36
|
var cls = require('./helpers/cls.js');
|
|
@@ -98,6 +99,7 @@ var useProductList = require('./hooks/useProductList.js');
|
|
|
98
99
|
var useSuspenseFetch = require('./hooks/useSuspenseFetch.js');
|
|
99
100
|
var useSwatchesOptions = require('./hooks/useSwatchesOptions.js');
|
|
100
101
|
var useInitialSwatchesOptions = require('./hooks/useInitialSwatchesOptions.js');
|
|
102
|
+
var custom = require('./types/custom.js');
|
|
101
103
|
var shop$1 = require('./types/shop.js');
|
|
102
104
|
var appAPI = require('./types/appAPI.js');
|
|
103
105
|
var globalStyle = require('./types/global-style.js');
|
|
@@ -107,6 +109,7 @@ var getProduct = require('./helpers/queries/get-product.js');
|
|
|
107
109
|
var getProductBySlug = require('./helpers/queries/get-product-by-slug.js');
|
|
108
110
|
var getAppBlocks = require('./helpers/third-party/getAppBlocks.js');
|
|
109
111
|
var addAppBlockId = require('./helpers/third-party/addAppBlockId.js');
|
|
112
|
+
var index = require('./helpers/interaction/index.js');
|
|
110
113
|
|
|
111
114
|
|
|
112
115
|
|
|
@@ -158,6 +161,7 @@ exports.LibraryTemplateDocument = LibraryTemplate_generated.LibraryTemplateDocum
|
|
|
158
161
|
exports.ThemePageDocument = ThemePage_generated.ThemePageDocument;
|
|
159
162
|
exports.SaleFunnelDiscountsDocument = SaleFunnelDiscounts_generated.SaleFunnelDiscountsDocument;
|
|
160
163
|
exports.LibrarySaleFunnelDocument = LibrarySaleFunnelDiscount_generated.LibrarySaleFunnelDocument;
|
|
164
|
+
exports.ShopLibraryPageDocument = ShopLibraryPage_generated.ShopLibraryPageDocument;
|
|
161
165
|
exports.composeBorderCss = borders.composeBorderCss;
|
|
162
166
|
exports.getBorderRadiusStyle = borders.getBorderRadiusStyle;
|
|
163
167
|
exports.getBorderStyle = borders.getBorderStyle;
|
|
@@ -266,6 +270,7 @@ exports.removeUndefinedValuesFromObject = render.removeUndefinedValuesFromObject
|
|
|
266
270
|
exports.styles = render.styles;
|
|
267
271
|
exports.template = render.template;
|
|
268
272
|
exports.composeShadowCss = shadow.composeShadowCss;
|
|
273
|
+
exports.getResonsiveStyleShadow = shadow.getResonsiveStyleShadow;
|
|
269
274
|
exports.getStyleShadow = shadow.getStyleShadow;
|
|
270
275
|
exports.getStyleShadowState = shadow.getStyleShadowState;
|
|
271
276
|
exports.parseValueWithUnit = shadow.parseValueWithUnit;
|
|
@@ -359,6 +364,14 @@ exports.useProductListStyles = useProductList.useProductListStyles;
|
|
|
359
364
|
exports.useSuspenseFetch = useSuspenseFetch.default;
|
|
360
365
|
exports.useSwatchesOptions = useSwatchesOptions.default;
|
|
361
366
|
exports.useInitialSwatchesOptions = useInitialSwatchesOptions.default;
|
|
367
|
+
Object.defineProperty(exports, 'InteractionTargetEvent', {
|
|
368
|
+
enumerable: true,
|
|
369
|
+
get: function () { return custom.InteractionTargetEvent; }
|
|
370
|
+
});
|
|
371
|
+
Object.defineProperty(exports, 'InteractionTriggerEvent', {
|
|
372
|
+
enumerable: true,
|
|
373
|
+
get: function () { return custom.InteractionTriggerEvent; }
|
|
374
|
+
});
|
|
362
375
|
exports.ShopType = shop$1;
|
|
363
376
|
exports.AppAPIType = appAPI;
|
|
364
377
|
exports.OptionNormalStyle = globalStyle.OptionNormalStyle;
|
|
@@ -395,3 +408,4 @@ exports.getProduct = getProduct.getProduct;
|
|
|
395
408
|
exports.getProductBySlug = getProductBySlug.getProductBySlug;
|
|
396
409
|
exports.getAppBlocks = getAppBlocks.getAppBlocks;
|
|
397
410
|
exports.addAppBlockId = addAppBlockId.addAppBlockId;
|
|
411
|
+
exports.useInteraction = index.useInteraction;
|
|
@@ -32,6 +32,8 @@ exports.AnimationTriggerType = void 0;
|
|
|
32
32
|
(function(AnimationTriggerType) {
|
|
33
33
|
AnimationTriggerType["Appear"] = 'appear';
|
|
34
34
|
AnimationTriggerType["Hover"] = 'hover';
|
|
35
|
+
AnimationTriggerType["Hidden"] = 'hidden';
|
|
36
|
+
AnimationTriggerType["AppearByTrigger"] = 'appearByTrigger';
|
|
35
37
|
})(exports.AnimationTriggerType || (exports.AnimationTriggerType = {}));
|
|
36
38
|
exports.AnimationZoomDirectionType = void 0;
|
|
37
39
|
(function(AnimationZoomDirectionType) {
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
exports.InteractionTargetEvent = void 0;
|
|
4
|
+
(function(InteractionTargetEvent) {
|
|
5
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-background-color'] = 0] = 'gp:change-background-color';
|
|
6
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:run-animation'] = 1] = 'gp:run-animation';
|
|
7
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:toggle-element-visibility'] = 2] = 'gp:toggle-element-visibility';
|
|
8
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-text'] = 3] = 'gp:change-text';
|
|
9
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:scroll-to'] = 4] = 'gp:scroll-to';
|
|
10
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-text-style'] = 5] = 'gp:change-text-style';
|
|
11
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-content'] = 6] = 'gp:change-content';
|
|
12
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-button-style'] = 7] = 'gp:change-button-style';
|
|
13
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:copy-text'] = 8] = 'gp:copy-text';
|
|
14
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-image'] = 9] = 'gp:change-image';
|
|
15
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:toggle-video-play'] = 10] = 'gp:toggle-video-play';
|
|
16
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-slider-ratio'] = 11] = 'gp:change-slider-ratio';
|
|
17
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-icon-style'] = 12] = 'gp:change-icon-style';
|
|
18
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-expanded-item'] = 13] = 'gp:change-expanded-item';
|
|
19
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-active-item'] = 14] = 'gp:change-active-item';
|
|
20
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-slide'] = 15] = 'gp:change-slide';
|
|
21
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-image-step'] = 16] = 'gp:change-image-step';
|
|
22
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-text-value'] = 17] = 'gp:change-text-value';
|
|
23
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:toggle-popup-open'] = 18] = 'gp:toggle-popup-open';
|
|
24
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:show-or-hide'] = 19] = 'gp:show-or-hide';
|
|
25
|
+
InteractionTargetEvent[InteractionTargetEvent['gp:change-banner'] = 20] = 'gp:change-banner';
|
|
26
|
+
})(exports.InteractionTargetEvent || (exports.InteractionTargetEvent = {}));
|
|
27
|
+
exports.InteractionTriggerEvent = void 0;
|
|
28
|
+
(function(InteractionTriggerEvent) {
|
|
29
|
+
InteractionTriggerEvent[InteractionTriggerEvent['click'] = 0] = 'click';
|
|
30
|
+
InteractionTriggerEvent[InteractionTriggerEvent["active"] = 1] = "active";
|
|
31
|
+
InteractionTriggerEvent[InteractionTriggerEvent['mouseover'] = 2] = 'mouseover';
|
|
32
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:appear'] = 3] = 'gp:appear';
|
|
33
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:item-selected'] = 4] = 'gp:item-selected';
|
|
34
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:item-unselected'] = 5] = 'gp:item-unselected';
|
|
35
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:item-hovered'] = 6] = 'gp:item-hovered';
|
|
36
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:item-click'] = 7] = 'gp:item-click';
|
|
37
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:after-submit'] = 8] = 'gp:after-submit';
|
|
38
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:quantity-change'] = 9] = 'gp:quantity-change';
|
|
39
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:after-checked-value'] = 10] = 'gp:after-checked-value';
|
|
40
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:after-add-to-cart'] = 11] = 'gp:after-add-to-cart';
|
|
41
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:popup-open'] = 12] = 'gp:popup-open';
|
|
42
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:popup-close'] = 13] = 'gp:popup-close';
|
|
43
|
+
InteractionTriggerEvent[InteractionTriggerEvent['scroll-up'] = 14] = 'scroll-up';
|
|
44
|
+
InteractionTriggerEvent[InteractionTriggerEvent['scroll-down'] = 15] = 'scroll-down';
|
|
45
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:price-change'] = 16] = 'gp:price-change';
|
|
46
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:rollback-price-change'] = 17] = 'gp:rollback-price-change';
|
|
47
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:compare-price-change'] = 18] = 'gp:compare-price-change';
|
|
48
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:rollback:compare-price-change'] = 19] = 'gp:rollback:compare-price-change';
|
|
49
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:stock-change'] = 20] = 'gp:stock-change';
|
|
50
|
+
InteractionTriggerEvent[InteractionTriggerEvent['gp:rollback:stock-change'] = 21] = 'gp:rollback:stock-change';
|
|
51
|
+
})(exports.InteractionTriggerEvent || (exports.InteractionTriggerEvent = {}));
|