@gem-sdk/core 1.46.0-staging.4 → 1.46.0-staging.44
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 +160 -104
- package/dist/cjs/components/ComponentWrapperPreview.js +16 -2
- package/dist/cjs/components/InteractionSuffix.js +107 -0
- package/dist/cjs/components/Render.liquid.js +38 -13
- package/dist/cjs/components/RenderPreview.js +1 -0
- package/dist/cjs/components/ai-generator/AIContentGenerator.js +1 -1
- package/dist/cjs/components/constant.js +2 -1
- package/dist/cjs/contexts/PageContext.js +29 -1
- package/dist/cjs/contexts/SectionContext.js +0 -1
- package/dist/cjs/graphql/queries/articles.generated.js +3 -1
- package/dist/cjs/graphql/queries/blogs.generated.js +3 -1
- package/dist/cjs/helpers/align.js +19 -0
- package/dist/cjs/helpers/colors.js +1 -1
- package/dist/cjs/helpers/loop-component.js +16 -0
- package/dist/cjs/helpers/pascal-to-kebab-case.js +7 -0
- package/dist/cjs/helpers/shadow.js +1 -1
- package/dist/cjs/helpers/third-party/addAppBlockId.js +20 -0
- package/dist/cjs/helpers/third-party/appConfig.js +59 -0
- package/dist/cjs/helpers/third-party/appSetting.js +112 -0
- package/dist/cjs/helpers/third-party/composeAppBlockId.js +11 -0
- package/dist/cjs/helpers/third-party/constant.js +18 -0
- package/dist/cjs/helpers/third-party/generateAppBlockConfigs.js +34 -0
- package/dist/cjs/helpers/third-party/getAppBlockConfig.js +24 -0
- package/dist/cjs/helpers/third-party/getAppBlockType.js +12 -0
- package/dist/cjs/helpers/third-party/getAppBlocks.js +30 -0
- package/dist/cjs/helpers/third-party/mergeBlock.js +19 -0
- package/dist/cjs/helpers/third-party/mergeBlockOrder.js +47 -0
- package/dist/cjs/helpers/third-party/removeGPAppItems.js +18 -0
- package/dist/cjs/hooks/animation/useApplyAnimation.js +1 -0
- package/dist/cjs/hooks/useFormatMoney.js +61 -60
- package/dist/cjs/hooks/useInteraction.js +19 -0
- package/dist/cjs/index.js +16 -0
- package/dist/cjs/types/custom.js +44 -0
- package/dist/esm/components/ComponentToolbarPreview.js +160 -104
- package/dist/esm/components/ComponentWrapperPreview.js +16 -2
- package/dist/esm/components/InteractionSuffix.js +105 -0
- package/dist/esm/components/Render.liquid.js +38 -13
- package/dist/esm/components/RenderPreview.js +1 -0
- package/dist/esm/components/ai-generator/AIContentGenerator.js +1 -1
- package/dist/esm/components/constant.js +2 -1
- package/dist/esm/contexts/PageContext.js +29 -1
- package/dist/esm/contexts/SectionContext.js +0 -1
- package/dist/esm/graphql/queries/articles.generated.js +3 -1
- package/dist/esm/graphql/queries/blogs.generated.js +3 -1
- package/dist/esm/helpers/align.js +17 -0
- package/dist/esm/helpers/colors.js +1 -1
- package/dist/esm/helpers/loop-component.js +14 -0
- package/dist/esm/helpers/pascal-to-kebab-case.js +5 -0
- package/dist/esm/helpers/shadow.js +1 -1
- package/dist/esm/helpers/third-party/addAppBlockId.js +18 -0
- package/dist/esm/helpers/third-party/appConfig.js +50 -0
- package/dist/esm/helpers/third-party/appSetting.js +109 -0
- package/dist/esm/helpers/third-party/composeAppBlockId.js +9 -0
- package/dist/esm/helpers/third-party/constant.js +15 -0
- package/dist/esm/helpers/third-party/generateAppBlockConfigs.js +32 -0
- package/dist/esm/helpers/third-party/getAppBlockConfig.js +22 -0
- package/dist/esm/helpers/third-party/getAppBlockType.js +10 -0
- package/dist/esm/helpers/third-party/getAppBlocks.js +28 -0
- package/dist/esm/helpers/third-party/mergeBlock.js +17 -0
- package/dist/esm/helpers/third-party/mergeBlockOrder.js +45 -0
- package/dist/esm/helpers/third-party/removeGPAppItems.js +15 -0
- package/dist/esm/hooks/animation/useApplyAnimation.js +1 -0
- package/dist/esm/hooks/useFormatMoney.js +61 -61
- package/dist/esm/hooks/useInteraction.js +17 -0
- package/dist/esm/index.js +5 -1
- package/dist/esm/types/custom.js +44 -0
- package/dist/types/index.d.ts +209 -11
- package/package.json +3 -2
|
@@ -7,6 +7,7 @@ var react = require('react');
|
|
|
7
7
|
require('zustand');
|
|
8
8
|
var BuilderPreviewContext = require('../contexts/BuilderPreviewContext.js');
|
|
9
9
|
var ShopContext = require('../contexts/ShopContext.js');
|
|
10
|
+
var PageContext = require('../contexts/PageContext.js');
|
|
10
11
|
require('@gem-sdk/adapter-shopify');
|
|
11
12
|
require('swr');
|
|
12
13
|
require('swr/mutation');
|
|
@@ -21,6 +22,7 @@ var useToolbarPostPurchase = require('../hooks/useToolbarPostPurchase.js');
|
|
|
21
22
|
var constant = require('./constant.js');
|
|
22
23
|
var AIContentGenerator = require('./ai-generator/AIContentGenerator.js');
|
|
23
24
|
var AIGenContentLoading = require('./ai-generator/AIGenContentLoading.js');
|
|
25
|
+
var InteractionSuffix = require('./InteractionSuffix.js');
|
|
24
26
|
require('../helpers/convert.js');
|
|
25
27
|
|
|
26
28
|
const SECTION_LIMIT = 25;
|
|
@@ -37,6 +39,7 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
37
39
|
const isShopifySection = props.isShopifySection;
|
|
38
40
|
const storefrontUrl = ShopContext.useShopStore((s)=>s.storefrontUrl);
|
|
39
41
|
const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
|
|
42
|
+
const interactionData = PageContext.usePageStore((s)=>s.interactionData);
|
|
40
43
|
const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
|
|
41
44
|
const root = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getItem('ROOT'));
|
|
42
45
|
const isThemeSectionEditor = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
|
|
@@ -47,6 +50,7 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
47
50
|
const [deleteTooltipPosition, setDeleteTooltipPosition] = react.useState('top');
|
|
48
51
|
const [isDisableDelete, setIsUnableDelete] = react.useState(false);
|
|
49
52
|
const [parentProductUid, setParentProductUid] = react.useState('');
|
|
53
|
+
const [articleUid, setArticleUid] = react.useState('');
|
|
50
54
|
const [tooltipText, setTooltipText] = react.useState({
|
|
51
55
|
width: '',
|
|
52
56
|
text: ''
|
|
@@ -55,12 +59,29 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
55
59
|
const isSaleFunnelPage = react.useMemo(()=>editingPageType === 'POST_PURCHASE', [
|
|
56
60
|
editingPageType
|
|
57
61
|
]);
|
|
62
|
+
const isSelectOnPage = react.useMemo(()=>interactionData?.isSelectOnPage, [
|
|
63
|
+
interactionData
|
|
64
|
+
]);
|
|
58
65
|
const { checkDisableDelete, getTooltipText, checkDisableDuplicate } = useToolbarPostPurchase.usePostPurchase(props.uid, props.tag || '');
|
|
59
66
|
const editProductElementList = [
|
|
60
67
|
'Product Title',
|
|
61
68
|
'Product Description',
|
|
62
69
|
'Product Price'
|
|
63
70
|
];
|
|
71
|
+
const editArticleElementList = [
|
|
72
|
+
'Article Title',
|
|
73
|
+
'Article Content',
|
|
74
|
+
'Article Image',
|
|
75
|
+
'Article Author',
|
|
76
|
+
'Article Category',
|
|
77
|
+
'Article Date',
|
|
78
|
+
'Article Excerpt',
|
|
79
|
+
'Article Tags'
|
|
80
|
+
];
|
|
81
|
+
const editAbleElementList = [
|
|
82
|
+
...editProductElementList,
|
|
83
|
+
...editArticleElementList
|
|
84
|
+
];
|
|
64
85
|
const isOverToolbarPosition = (el, parent)=>{
|
|
65
86
|
const parentLength = parents.length;
|
|
66
87
|
const rect = el.getBoundingClientRect();
|
|
@@ -106,15 +127,29 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
106
127
|
}, [
|
|
107
128
|
storefrontUrl
|
|
108
129
|
]);
|
|
109
|
-
const
|
|
110
|
-
return
|
|
130
|
+
const linkShopDefault = react.useMemo(()=>{
|
|
131
|
+
return `https://admin.shopify.com/store/${shopName}`;
|
|
111
132
|
}, [
|
|
112
|
-
productId,
|
|
113
133
|
shopName
|
|
114
134
|
]);
|
|
135
|
+
const linkEditProduct = react.useMemo(()=>{
|
|
136
|
+
return productId ? `${linkShopDefault}/products/${productId}` : '';
|
|
137
|
+
}, [
|
|
138
|
+
linkShopDefault,
|
|
139
|
+
productId
|
|
140
|
+
]);
|
|
141
|
+
const linkEditArticle = react.useMemo(()=>{
|
|
142
|
+
return articleUid ? `${linkShopDefault}/articles/${articleUid}` : '';
|
|
143
|
+
}, [
|
|
144
|
+
articleUid,
|
|
145
|
+
linkShopDefault
|
|
146
|
+
]);
|
|
115
147
|
// Get parents
|
|
116
148
|
const onActiveComponent = react.useCallback((e)=>{
|
|
117
149
|
const detail = e.detail;
|
|
150
|
+
if (detail?.articleId) {
|
|
151
|
+
setArticleUid(detail.articleId);
|
|
152
|
+
}
|
|
118
153
|
if (detail?.componentUid == props.uid) {
|
|
119
154
|
getDeleteTooltipPosition();
|
|
120
155
|
if (isSaleFunnelPage) {
|
|
@@ -206,7 +241,15 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
206
241
|
window.dispatchEvent(event);
|
|
207
242
|
};
|
|
208
243
|
const goToShopifyEditLink = ()=>{
|
|
209
|
-
|
|
244
|
+
if (editArticleElementList.includes(toolbarName() ?? '')) {
|
|
245
|
+
window.open(linkEditArticle, '_blank');
|
|
246
|
+
return;
|
|
247
|
+
}
|
|
248
|
+
if (editProductElementList.includes(toolbarName() ?? '')) {
|
|
249
|
+
window.open(linkEditProduct, '_blank');
|
|
250
|
+
return;
|
|
251
|
+
}
|
|
252
|
+
window.open(linkShopDefault, '_blank');
|
|
210
253
|
};
|
|
211
254
|
const onDelete = (e)=>{
|
|
212
255
|
e.preventDefault();
|
|
@@ -294,6 +337,11 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
294
337
|
const isEnableCreateThemeSection = ()=>{
|
|
295
338
|
return editingPageType !== 'STATIC' && editingPageType !== 'POST_PURCHASE';
|
|
296
339
|
};
|
|
340
|
+
const isEnableAIContent = ()=>{
|
|
341
|
+
const { isShopifySection, tag } = props;
|
|
342
|
+
if (isShopifySection || isThemeSection && !isThemeSectionEditor) return false;
|
|
343
|
+
return constant.ableGenerateContentElements.includes(tag);
|
|
344
|
+
};
|
|
297
345
|
// if (!isActive) return null;
|
|
298
346
|
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
299
347
|
children: [
|
|
@@ -456,109 +504,117 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
456
504
|
]
|
|
457
505
|
}, parent.uid);
|
|
458
506
|
}),
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
507
|
+
!isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
508
|
+
children: [
|
|
509
|
+
props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && !props.isShopifySection && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
|
|
510
|
+
...props
|
|
511
|
+
}),
|
|
512
|
+
isEnableAIContent() && /*#__PURE__*/ jsxRuntime.jsx(AIContentGenerator.AIContentGenerator, {
|
|
513
|
+
...props
|
|
514
|
+
}),
|
|
515
|
+
props.tag == 'Sticky' && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
516
|
+
"data-toolbar-zoom-out": true,
|
|
517
|
+
onClick: (e)=>onZoomOut(e),
|
|
518
|
+
"aria-hidden": "true",
|
|
519
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
520
|
+
width: "16",
|
|
521
|
+
height: "16",
|
|
522
|
+
viewBox: "0 0 16 16",
|
|
523
|
+
fill: "none",
|
|
524
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
525
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
526
|
+
fillRule: "evenodd",
|
|
527
|
+
clipRule: "evenodd",
|
|
528
|
+
d: "M14.5 7C14.7761 7 15 6.77614 15 6.5C15 6.22386 14.7761 6 14.5 6L10.7072 6L14.8536 1.85355C15.0489 1.65829 15.0489 1.34171 14.8536 1.14645C14.6584 0.951186 14.3418 0.951185 14.1465 1.14645L10 5.29297L10 1.5C10 1.22386 9.77614 1 9.5 1C9.22386 1 9 1.22386 9 1.5L9 6.5C9 6.77614 9.22386 7 9.5 7L14.5 7ZM6 10.7073L6 14.5C6 14.7761 6.22386 15 6.5 15C6.77614 15 7 14.7761 7 14.5L7 9.5C7 9.22386 6.77614 9 6.5 9H1.5C1.22386 9 1 9.22386 1 9.5C1 9.77614 1.22386 10 1.5 10H5.29306L1.14662 14.1464C0.951353 14.3417 0.951353 14.6583 1.14662 14.8536C1.34188 15.0488 1.65846 15.0488 1.85372 14.8536L6 10.7073Z",
|
|
529
|
+
fill: "currentColor"
|
|
530
|
+
})
|
|
531
|
+
})
|
|
532
|
+
}),
|
|
533
|
+
editAbleElementList.includes(toolbarName() ?? '') && /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
|
|
534
|
+
"data-toolbar-title": true,
|
|
535
|
+
enable: true,
|
|
536
|
+
"data-toolbar-disable": false,
|
|
537
|
+
text: "Edit content in Shopify",
|
|
538
|
+
position: "top",
|
|
539
|
+
onClick: goToShopifyEditLink,
|
|
540
|
+
"aria-hidden": "true",
|
|
541
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
542
|
+
width: "16",
|
|
543
|
+
height: "16",
|
|
544
|
+
viewBox: "0 0 16 16",
|
|
545
|
+
fill: "none",
|
|
546
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
547
|
+
children: [
|
|
548
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
549
|
+
fillRule: "evenodd",
|
|
550
|
+
clipRule: "evenodd",
|
|
551
|
+
d: "M8.61129 2.47348C8.61129 2.47348 8.47099 2.51557 8.23248 2.59274C8.19039 2.46647 8.13427 2.30512 8.05009 2.15079C7.78352 1.6387 7.39068 1.37212 6.91366 1.36511C6.87858 1.36511 6.85052 1.36511 6.81545 1.37212C6.80843 1.36511 6.80142 1.35634 6.7944 1.34757C6.78739 1.3388 6.78037 1.33003 6.77336 1.32302C6.56992 1.09854 6.30335 0.993314 5.98768 1.00033C5.37737 1.02137 4.76706 1.46332 4.269 2.249C3.91825 2.80319 3.65869 3.49767 3.58153 4.03082C3.38823 4.09074 3.21092 4.14586 3.05516 4.19429C2.64595 4.32151 2.3851 4.40261 2.37494 4.40261C2.01718 4.51485 2.01016 4.52888 1.96106 4.85859C1.92598 5.11113 1 12.2945 1 12.2945L7.14764 13.3583C7.18955 13.118 7.30454 12.8953 7.47848 12.7214L8.70249 11.4974V2.45945C8.66741 2.45945 8.63234 2.46647 8.61129 2.47348ZM6.82948 3.02767L6.62554 3.09101C6.27515 3.19989 5.90094 3.31617 5.5317 3.42752C5.65797 2.94349 5.89648 2.46647 6.19111 2.15079C6.30335 2.03154 6.45067 1.90527 6.63306 1.8281C6.80142 2.18587 6.83649 2.68393 6.82948 3.02767ZM5.99469 1.4072C6.13499 1.4072 6.26126 1.43526 6.36649 1.50541C6.19813 1.58959 6.0438 1.71586 5.88947 1.87721C5.50364 2.29109 5.202 2.94349 5.08274 3.56783C4.74459 3.66991 4.41804 3.77199 4.10838 3.8688L4.01646 3.89753C4.22691 2.90841 5.05468 1.43526 5.99469 1.4072ZM4.80214 7.0122C4.81874 7.26957 5.09737 7.44833 5.43473 7.66478C5.95252 7.99699 6.60867 8.41798 6.66813 9.3482C6.7453 10.5548 6.02977 11.3826 4.99154 11.4457C3.7569 11.5229 3.06943 10.7933 3.06943 10.7933L3.32899 9.67791C3.32899 9.67791 4.01646 10.197 4.56363 10.1619C4.92139 10.1409 5.04767 9.84627 5.04065 9.64283C5.01607 9.26796 4.73308 9.06671 4.41569 8.84101C4.00848 8.55142 3.54465 8.22157 3.49735 7.4331C3.42018 6.24756 4.19885 5.05501 5.91051 4.94277C6.57694 4.90068 6.91366 5.06904 6.91366 5.06904L6.52082 6.53518C6.52082 6.53518 6.08589 6.33876 5.56678 6.36682C4.80915 6.41592 4.79512 6.89294 4.80214 7.0122ZM7.23635 2.9014C7.22934 2.59274 7.19426 2.15781 7.04695 1.78601C7.50994 1.87721 7.74143 2.39632 7.83964 2.71199C7.70008 2.75665 7.54275 2.80575 7.37118 2.8593L7.23635 2.9014Z",
|
|
552
|
+
fill: "currentColor"
|
|
553
|
+
}),
|
|
554
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
555
|
+
d: "M10.7719 3.44156C10.7757 3.47543 11.1733 6.16931 11.541 8.65883L8.95503 11.2448V2.57871C9.16548 2.78214 9.71265 3.31528 9.71265 3.31528C9.71265 3.31528 10.6106 3.32931 10.6597 3.33633C10.7088 3.34334 10.7649 3.37842 10.7719 3.44156Z",
|
|
556
|
+
fill: "currentColor"
|
|
557
|
+
}),
|
|
558
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
559
|
+
d: "M14.8056 8.644L14.0424 7.88088C13.7832 7.62163 13.3629 7.62163 13.1036 7.88088L12.1519 8.83258L13.8539 10.5345L14.8056 9.58282C15.0648 9.32357 15.0648 8.90325 14.8056 8.644Z",
|
|
560
|
+
fill: "currentColor"
|
|
561
|
+
}),
|
|
562
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
563
|
+
d: "M7.85018 13.0942L11.6419 9.30246L13.3438 11.0044L9.55212 14.7961C9.43782 14.9104 9.28573 14.9791 9.1244 14.9892L7.93427 15.0641C7.73484 15.0767 7.56961 14.9114 7.58216 14.712L7.65706 13.5219C7.66721 13.3606 7.73588 13.2085 7.85018 13.0942Z",
|
|
564
|
+
fill: "currentColor"
|
|
565
|
+
})
|
|
566
|
+
]
|
|
567
|
+
})
|
|
568
|
+
}),
|
|
569
|
+
/*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
|
|
570
|
+
enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
|
|
571
|
+
text: "Page has reached Shopify’s 25 section-limit",
|
|
572
|
+
position: "bottom",
|
|
573
|
+
"data-toolbar-duplicate": true,
|
|
574
|
+
"data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT || isDisableDuplicate,
|
|
575
|
+
onClick: isDisableDuplicate ? undefined : (e)=>onDuplicate(e),
|
|
576
|
+
"aria-hidden": "true",
|
|
577
|
+
className: isDisableDuplicate ? '!gp-cursor-not-allowed' : '',
|
|
578
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
579
|
+
width: "16",
|
|
580
|
+
height: "16",
|
|
581
|
+
viewBox: "0 0 16 16",
|
|
582
|
+
fill: "none",
|
|
583
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
584
|
+
fillRule: "evenodd",
|
|
585
|
+
clipRule: "evenodd",
|
|
586
|
+
d: "M6.08423 1.21289C5.53194 1.21289 5.08423 1.66061 5.08423 2.21289V3.78711H4.26172C3.43329 3.78711 2.76172 4.45868 2.76172 5.28711V13.2871C2.76172 14.1155 3.43329 14.7871 4.26172 14.7871H10.2617C11.0901 14.7871 11.7617 14.1155 11.7617 13.2871V12.4629H13.0842C13.6365 12.4629 14.0842 12.0152 14.0842 11.4629V2.21289C14.0842 1.66061 13.6365 1.21289 13.0842 1.21289H6.08423ZM10.7617 12.4629H6.08423C5.53194 12.4629 5.08423 12.0152 5.08423 11.4629V4.78711H4.26172C3.98558 4.78711 3.76172 5.01097 3.76172 5.28711V13.2871C3.76172 13.5633 3.98558 13.7871 4.26172 13.7871H10.2617C10.5379 13.7871 10.7617 13.5633 10.7617 13.2871V12.4629Z",
|
|
587
|
+
fill: "currentColor"
|
|
588
|
+
})
|
|
589
|
+
})
|
|
590
|
+
}),
|
|
591
|
+
/*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
|
|
592
|
+
"data-toolbar-delete": true,
|
|
593
|
+
onClick: (e)=>isDisableDelete ? null : onDelete(e),
|
|
594
|
+
enable: isDisableDelete,
|
|
595
|
+
"data-toolbar-disable": isDisableDelete,
|
|
596
|
+
width: tooltipText.width,
|
|
597
|
+
text: tooltipText.text,
|
|
598
|
+
position: deleteTooltipPosition,
|
|
599
|
+
"aria-hidden": "true",
|
|
600
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
601
|
+
width: "16",
|
|
602
|
+
height: "16",
|
|
603
|
+
viewBox: "0 0 16 16",
|
|
604
|
+
fill: "none",
|
|
605
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
606
|
+
fillRule: "evenodd",
|
|
607
|
+
clipRule: "evenodd",
|
|
608
|
+
d: "M11 2.88965V2.38965C11 1.56122 10.3284 0.889648 9.5 0.889648H6.5C5.67157 0.889648 5 1.56122 5 2.38965V2.88965H2C1.72386 2.88965 1.5 3.11351 1.5 3.38965C1.5 3.66579 1.72386 3.88965 2 3.88965H3.21997V13.1099C3.21997 14.2144 4.1154 15.1099 5.21997 15.1099H11.22C12.3245 15.1099 13.22 14.2144 13.22 13.1099V3.88965H14C14.2761 3.88965 14.5 3.66579 14.5 3.38965C14.5 3.11351 14.2761 2.88965 14 2.88965H11ZM6 2.88965H10V2.38965C10 2.11351 9.77614 1.88965 9.5 1.88965H6.5C6.22386 1.88965 6 2.11351 6 2.38965V2.88965ZM6.24976 6.13965C6.66397 6.13965 6.99976 6.47543 6.99976 6.88965V11.3896C6.99976 11.8039 6.66397 12.1396 6.24976 12.1396C5.83554 12.1396 5.49976 11.8039 5.49976 11.3896V6.88965C5.49976 6.47543 5.83554 6.13965 6.24976 6.13965ZM10.4998 6.88965C10.4998 6.47543 10.164 6.13965 9.74976 6.13965C9.33554 6.13965 8.99976 6.47543 8.99976 6.88965V11.3896C8.99976 11.8039 9.33554 12.1396 9.74976 12.1396C10.164 12.1396 10.4998 11.8039 10.4998 11.3896V6.88965Z",
|
|
609
|
+
fill: "currentColor"
|
|
610
|
+
})
|
|
515
611
|
})
|
|
516
|
-
]
|
|
517
|
-
})
|
|
518
|
-
}),
|
|
519
|
-
/*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
|
|
520
|
-
enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
|
|
521
|
-
text: "Page has reached Shopify’s 25 section-limit",
|
|
522
|
-
position: "bottom",
|
|
523
|
-
"data-toolbar-duplicate": true,
|
|
524
|
-
"data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT || isDisableDuplicate,
|
|
525
|
-
onClick: isDisableDuplicate ? undefined : (e)=>onDuplicate(e),
|
|
526
|
-
"aria-hidden": "true",
|
|
527
|
-
className: isDisableDuplicate ? '!gp-cursor-not-allowed' : '',
|
|
528
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
529
|
-
width: "16",
|
|
530
|
-
height: "16",
|
|
531
|
-
viewBox: "0 0 16 16",
|
|
532
|
-
fill: "none",
|
|
533
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
534
|
-
fillRule: "evenodd",
|
|
535
|
-
clipRule: "evenodd",
|
|
536
|
-
d: "M6.08423 1.21289C5.53194 1.21289 5.08423 1.66061 5.08423 2.21289V3.78711H4.26172C3.43329 3.78711 2.76172 4.45868 2.76172 5.28711V13.2871C2.76172 14.1155 3.43329 14.7871 4.26172 14.7871H10.2617C11.0901 14.7871 11.7617 14.1155 11.7617 13.2871V12.4629H13.0842C13.6365 12.4629 14.0842 12.0152 14.0842 11.4629V2.21289C14.0842 1.66061 13.6365 1.21289 13.0842 1.21289H6.08423ZM10.7617 12.4629H6.08423C5.53194 12.4629 5.08423 12.0152 5.08423 11.4629V4.78711H4.26172C3.98558 4.78711 3.76172 5.01097 3.76172 5.28711V13.2871C3.76172 13.5633 3.98558 13.7871 4.26172 13.7871H10.2617C10.5379 13.7871 10.7617 13.5633 10.7617 13.2871V12.4629Z",
|
|
537
|
-
fill: "currentColor"
|
|
538
612
|
})
|
|
539
|
-
|
|
613
|
+
]
|
|
540
614
|
}),
|
|
541
|
-
/*#__PURE__*/ jsxRuntime.jsx(
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
enable: isDisableDelete,
|
|
545
|
-
"data-toolbar-disable": isDisableDelete,
|
|
546
|
-
width: tooltipText.width,
|
|
547
|
-
text: tooltipText.text,
|
|
548
|
-
position: deleteTooltipPosition,
|
|
549
|
-
"aria-hidden": "true",
|
|
550
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
551
|
-
width: "16",
|
|
552
|
-
height: "16",
|
|
553
|
-
viewBox: "0 0 16 16",
|
|
554
|
-
fill: "none",
|
|
555
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
556
|
-
fillRule: "evenodd",
|
|
557
|
-
clipRule: "evenodd",
|
|
558
|
-
d: "M11 2.88965V2.38965C11 1.56122 10.3284 0.889648 9.5 0.889648H6.5C5.67157 0.889648 5 1.56122 5 2.38965V2.88965H2C1.72386 2.88965 1.5 3.11351 1.5 3.38965C1.5 3.66579 1.72386 3.88965 2 3.88965H3.21997V13.1099C3.21997 14.2144 4.1154 15.1099 5.21997 15.1099H11.22C12.3245 15.1099 13.22 14.2144 13.22 13.1099V3.88965H14C14.2761 3.88965 14.5 3.66579 14.5 3.38965C14.5 3.11351 14.2761 2.88965 14 2.88965H11ZM6 2.88965H10V2.38965C10 2.11351 9.77614 1.88965 9.5 1.88965H6.5C6.22386 1.88965 6 2.11351 6 2.38965V2.88965ZM6.24976 6.13965C6.66397 6.13965 6.99976 6.47543 6.99976 6.88965V11.3896C6.99976 11.8039 6.66397 12.1396 6.24976 12.1396C5.83554 12.1396 5.49976 11.8039 5.49976 11.3896V6.88965C5.49976 6.47543 5.83554 6.13965 6.24976 6.13965ZM10.4998 6.88965C10.4998 6.47543 10.164 6.13965 9.74976 6.13965C9.33554 6.13965 8.99976 6.47543 8.99976 6.88965V11.3896C8.99976 11.8039 9.33554 12.1396 9.74976 12.1396C10.164 12.1396 10.4998 11.8039 10.4998 11.3896V6.88965Z",
|
|
559
|
-
fill: "currentColor"
|
|
560
|
-
})
|
|
561
|
-
})
|
|
615
|
+
/*#__PURE__*/ jsxRuntime.jsx(InteractionSuffix.InteractionSuffix, {
|
|
616
|
+
tag: props.tag,
|
|
617
|
+
uid: props.uid
|
|
562
618
|
})
|
|
563
619
|
]
|
|
564
620
|
}, props.uid),
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var react = require('react');
|
|
7
7
|
var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
|
|
8
|
+
var useInteraction = require('../hooks/useInteraction.js');
|
|
8
9
|
var constant = require('./constant.js');
|
|
9
10
|
var RenderCustomCode = require('./RenderCustomCode.js');
|
|
10
11
|
var ComponentToolbarPreview = require('./ComponentToolbarPreview.js');
|
|
@@ -32,6 +33,19 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
|
|
|
32
33
|
}, [
|
|
33
34
|
props.uid
|
|
34
35
|
]);
|
|
36
|
+
const currentProps = props;
|
|
37
|
+
const { getAnimationByUid } = useInteraction.useInteraction();
|
|
38
|
+
const animationByInteraction = getAnimationByUid(props.uid);
|
|
39
|
+
if (animationByInteraction) {
|
|
40
|
+
currentProps.advanced = {
|
|
41
|
+
...currentProps.advanced,
|
|
42
|
+
animation: {
|
|
43
|
+
desktop: animationByInteraction,
|
|
44
|
+
tablet: animationByInteraction,
|
|
45
|
+
mobile: animationByInteraction
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
}
|
|
35
49
|
const pageType = shop.usePageType();
|
|
36
50
|
if (props.type === 'section') {
|
|
37
51
|
return null;
|
|
@@ -136,7 +150,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
|
|
|
136
150
|
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
137
151
|
children: [
|
|
138
152
|
/*#__PURE__*/ jsxRuntime.jsx(ComponentAnimation.default, {
|
|
139
|
-
...
|
|
153
|
+
...currentProps
|
|
140
154
|
}),
|
|
141
155
|
/*#__PURE__*/ jsxRuntime.jsx(RenderCustomCode.default, {
|
|
142
156
|
uid: props.uid,
|
|
@@ -165,7 +179,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
|
|
|
165
179
|
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
166
180
|
children: [
|
|
167
181
|
/*#__PURE__*/ jsxRuntime.jsx(ComponentAnimation.default, {
|
|
168
|
-
...
|
|
182
|
+
...currentProps
|
|
169
183
|
}),
|
|
170
184
|
/*#__PURE__*/ jsxRuntime.jsx(RenderCustomCode.default, {
|
|
171
185
|
uid: props.uid,
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
require('zustand');
|
|
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('../helpers/convert.js');
|
|
18
|
+
|
|
19
|
+
const InteractionSuffix = ({ tag, uid })=>{
|
|
20
|
+
const currentInteraction = PageContext.usePageStore((s)=>s.interactionData?.item);
|
|
21
|
+
const isCurrentInteractionTarget = react.useMemo(()=>{
|
|
22
|
+
return currentInteraction?.targets?.find((t)=>t.uid === uid);
|
|
23
|
+
}, [
|
|
24
|
+
currentInteraction,
|
|
25
|
+
uid
|
|
26
|
+
]);
|
|
27
|
+
const isCurrentInteractionTrigger = react.useMemo(()=>{
|
|
28
|
+
return currentInteraction?.self?.uid === uid;
|
|
29
|
+
}, [
|
|
30
|
+
currentInteraction,
|
|
31
|
+
uid
|
|
32
|
+
]);
|
|
33
|
+
const isDisplay = react.useMemo(()=>{
|
|
34
|
+
return isCurrentInteractionTarget || isCurrentInteractionTrigger;
|
|
35
|
+
}, [
|
|
36
|
+
isCurrentInteractionTarget,
|
|
37
|
+
isCurrentInteractionTrigger
|
|
38
|
+
]);
|
|
39
|
+
const positionOffset = react.useMemo(()=>{
|
|
40
|
+
if (isCurrentInteractionTrigger && isCurrentInteractionTarget) {
|
|
41
|
+
return 80;
|
|
42
|
+
}
|
|
43
|
+
return 40;
|
|
44
|
+
}, [
|
|
45
|
+
isCurrentInteractionTrigger,
|
|
46
|
+
isCurrentInteractionTarget
|
|
47
|
+
]);
|
|
48
|
+
if (!isDisplay) {
|
|
49
|
+
return undefined;
|
|
50
|
+
}
|
|
51
|
+
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
52
|
+
children: [
|
|
53
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
54
|
+
className: "hidden gp-left-[-40px] gp-left-[-80px] gp-right-[-40px] gp-right-[-80px]"
|
|
55
|
+
}),
|
|
56
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
57
|
+
className: `gp-hidden gp-absolute interaction-suffix gp-gap-[8px] ${tag == 'Section' ? `gp-left-[-${positionOffset}px]` : `gp-right-[-${positionOffset}px]`}`,
|
|
58
|
+
children: [
|
|
59
|
+
isCurrentInteractionTrigger && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
60
|
+
className: `gp-h-8 gp-rounded-[8px] gp-w-8 gp-bg-[#212121] gp-flex gp-justify-center gp-items-center `,
|
|
61
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
62
|
+
width: "16",
|
|
63
|
+
height: "16",
|
|
64
|
+
viewBox: "0 0 16 16",
|
|
65
|
+
fill: "none",
|
|
66
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
67
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
68
|
+
fillRule: "evenodd",
|
|
69
|
+
clipRule: "evenodd",
|
|
70
|
+
d: "M12.9196 5.80449C13.0989 5.80449 13.1876 6.02216 13.0595 6.14749L4.83569 14.1892C4.69517 14.3267 4.46149 14.2002 4.49967 14.0074L5.50422 8.93537C5.53483 8.7808 5.41656 8.6368 5.25898 8.6368H3.08019C2.92551 8.6368 2.82938 8.46874 2.90779 8.33541L6.72099 1.85154C6.75692 1.79045 6.8225 1.75293 6.89338 1.75293H12.5729C12.7386 1.75293 12.8324 1.94273 12.7319 2.07435L10.1891 5.40272C10.0634 5.56724 10.1807 5.80449 10.3877 5.80449H12.9196Z",
|
|
71
|
+
fill: "#F9F9F9"
|
|
72
|
+
})
|
|
73
|
+
})
|
|
74
|
+
}),
|
|
75
|
+
isCurrentInteractionTarget && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
76
|
+
className: `gp-h-8 min-w-8 gp-rounded-[8px] gp-w-8 gp-bg-[#212121] gp-flex gp-justify-center gp-items-center`,
|
|
77
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
78
|
+
width: "16",
|
|
79
|
+
height: "16",
|
|
80
|
+
viewBox: "0 0 16 16",
|
|
81
|
+
fill: "none",
|
|
82
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
83
|
+
children: [
|
|
84
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
85
|
+
d: "M8.58987 2.11238C8.62815 2.66333 8.21254 3.141 7.66158 3.17928C6.73192 3.24386 5.84034 3.57396 5.09276 4.13034C4.34519 4.68673 3.77304 5.44602 3.44429 6.31801C3.11554 7.19 3.04401 8.13803 3.23821 9.04947C3.4324 9.96092 3.88415 10.7975 4.53978 11.4597C5.19541 12.122 6.02737 12.5821 6.93682 12.7854C7.84626 12.9888 8.79496 12.9268 9.67021 12.6068C10.5455 12.2869 11.3105 11.7224 11.8743 10.9804C12.4382 10.2385 12.7772 9.35025 12.8512 8.42129C12.895 7.87074 13.3768 7.45996 13.9273 7.50377C14.4779 7.54758 14.8887 8.0294 14.8449 8.57994C14.7406 9.8906 14.2622 11.1438 13.4667 12.1906C12.6711 13.2374 11.5918 14.0338 10.3569 14.4852C9.12204 14.9367 7.78353 15.0241 6.50041 14.7373C5.2173 14.4504 4.0435 13.8012 3.11848 12.8668C2.19345 11.9324 1.55609 10.7522 1.28211 9.46624C1.00813 8.1803 1.10905 6.84274 1.57287 5.61247C2.03669 4.3822 2.84393 3.31093 3.89867 2.52593C4.95342 1.74093 6.21133 1.27521 7.52297 1.18409C8.07393 1.14581 8.5516 1.56142 8.58987 2.11238Z",
|
|
86
|
+
fill: "#F9F9F9"
|
|
87
|
+
}),
|
|
88
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
89
|
+
fillRule: "evenodd",
|
|
90
|
+
clipRule: "evenodd",
|
|
91
|
+
d: "M11.9757 1.25658C12.184 1.31428 12.3452 1.47958 12.3976 1.68929L12.7872 3.24774L14.3457 3.63736C14.5554 3.68978 14.7207 3.85096 14.7784 4.05928C14.8361 4.2676 14.7773 4.49085 14.6244 4.64371L12.7167 6.55141C12.5677 6.70044 12.3514 6.76035 12.1469 6.70924L10.5688 6.3147L8.42436 8.45912C8.19005 8.69344 7.81015 8.69344 7.57583 8.45912C7.34152 8.22481 7.34152 7.84491 7.57583 7.61059L9.72025 5.46617L9.32572 3.88804C9.2746 3.68357 9.33451 3.46728 9.48354 3.31825L11.3912 1.41054C11.5441 1.25769 11.7674 1.19888 11.9757 1.25658ZM10.8795 5.15545L12.1084 5.46267L13.0266 4.54451L12.1469 4.3246C11.9319 4.27086 11.7641 4.10301 11.7104 3.88804L11.4904 3.0084L10.5723 3.92656L10.8795 5.15545Z",
|
|
92
|
+
fill: "#F9F9F9"
|
|
93
|
+
}),
|
|
94
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
95
|
+
d: "M7.35783 6.45343C7.87208 6.25201 8.12568 5.67185 7.92426 5.15761C7.72284 4.64336 7.14268 4.38976 6.62844 4.59118C6.05705 4.81498 5.55049 5.17772 5.15453 5.64655C4.75858 6.11538 4.4857 6.67552 4.36055 7.27631C4.23539 7.87709 4.26189 8.49961 4.43764 9.08758C4.6134 9.67555 4.93289 10.2105 5.36727 10.6439C5.80165 11.0774 6.33722 11.3958 6.92556 11.5702C7.51391 11.7445 8.13643 11.7695 8.73683 11.6427C9.33723 11.5158 9.89652 11.2413 10.3641 10.8439C10.8318 10.4465 11.1929 9.93885 11.4151 9.36679C11.615 8.85196 11.3597 8.27254 10.8449 8.07262C10.3301 7.87269 9.75066 8.12797 9.55073 8.6428C9.44887 8.9051 9.28329 9.1378 9.06901 9.3199C8.85474 9.50199 8.59851 9.62774 8.32352 9.68582C8.04853 9.7439 7.76341 9.73249 7.49394 9.65262C7.22445 9.57274 6.97907 9.42691 6.78001 9.22825C6.58093 9.0296 6.43446 8.78439 6.35386 8.51478C6.27327 8.24517 6.26112 7.9597 6.31851 7.6842C6.37591 7.4087 6.50102 7.1519 6.68251 6.93702C6.86399 6.72214 7.0961 6.55595 7.35783 6.45343Z",
|
|
96
|
+
fill: "#F9F9F9"
|
|
97
|
+
})
|
|
98
|
+
]
|
|
99
|
+
})
|
|
100
|
+
})
|
|
101
|
+
]
|
|
102
|
+
})
|
|
103
|
+
]
|
|
104
|
+
});
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
exports.InteractionSuffix = InteractionSuffix;
|
|
@@ -20,6 +20,7 @@ require('dayjs');
|
|
|
20
20
|
var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
|
|
21
21
|
var convert = require('../helpers/convert.js');
|
|
22
22
|
var render = require('../helpers/render.js');
|
|
23
|
+
var cssjson = require('cssjson');
|
|
23
24
|
|
|
24
25
|
const componentsRenderWithParentId = [
|
|
25
26
|
'CarouselItem'
|
|
@@ -39,7 +40,6 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
|
|
|
39
40
|
const item = builder[uid];
|
|
40
41
|
const Component = components[item?.tag];
|
|
41
42
|
if (!Component) {
|
|
42
|
-
console.log('Miss component: ', item);
|
|
43
43
|
return {
|
|
44
44
|
liquid: '',
|
|
45
45
|
extraFiles
|
|
@@ -76,6 +76,10 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
|
|
|
76
76
|
parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
|
|
77
77
|
pageContext,
|
|
78
78
|
...passProps,
|
|
79
|
+
builderAttrs: {
|
|
80
|
+
...passProps.builderAttrs,
|
|
81
|
+
'data-id': uid
|
|
82
|
+
},
|
|
79
83
|
rawChildren: item.childrens.map((id)=>{
|
|
80
84
|
return {
|
|
81
85
|
...builder[id],
|
|
@@ -111,11 +115,15 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
|
|
|
111
115
|
isText: componentTexts.includes(item.tag) ? true : null,
|
|
112
116
|
parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
|
|
113
117
|
pageContext,
|
|
114
|
-
...passProps
|
|
118
|
+
...passProps,
|
|
119
|
+
builderAttrs: {
|
|
120
|
+
...passProps.builderAttrs,
|
|
121
|
+
'data-id': uid
|
|
122
|
+
}
|
|
115
123
|
});
|
|
116
124
|
});
|
|
117
125
|
} else {
|
|
118
|
-
liquid = render.template`<div style="${!componentIconList.includes(item.tag) ? style : ''}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
|
|
126
|
+
liquid = render.template`<div gp-el-wrapper style="${!componentIconList.includes(item.tag) ? style : ''}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
|
|
119
127
|
${render.RenderIf(item?.childrens?.length, ()=>{
|
|
120
128
|
return Component({
|
|
121
129
|
builderProps: {
|
|
@@ -130,6 +138,10 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
|
|
|
130
138
|
},
|
|
131
139
|
pageContext,
|
|
132
140
|
...passProps,
|
|
141
|
+
builderAttrs: {
|
|
142
|
+
...passProps.builderAttrs,
|
|
143
|
+
'data-id': uid
|
|
144
|
+
},
|
|
133
145
|
rawChildren: item.childrens.map((id)=>{
|
|
134
146
|
return {
|
|
135
147
|
...builder[id],
|
|
@@ -166,7 +178,11 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
|
|
|
166
178
|
pageContext,
|
|
167
179
|
isText: componentTexts.includes(item.tag) ? true : null,
|
|
168
180
|
style: componentIconList.includes(item.tag) ? style : null,
|
|
169
|
-
...passProps
|
|
181
|
+
...passProps,
|
|
182
|
+
builderAttrs: {
|
|
183
|
+
...passProps.builderAttrs,
|
|
184
|
+
'data-id': uid
|
|
185
|
+
}
|
|
170
186
|
});
|
|
171
187
|
})}
|
|
172
188
|
</div>`;
|
|
@@ -181,19 +197,28 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
|
|
|
181
197
|
};
|
|
182
198
|
}
|
|
183
199
|
};
|
|
200
|
+
const isEmptyCSS = (cssString)=>{
|
|
201
|
+
if (!cssString) return true;
|
|
202
|
+
const cssJSON = cssjson.toJSON(cssString);
|
|
203
|
+
const isObjectEmpty = (obj)=>{
|
|
204
|
+
if (typeof obj !== 'object' || obj === null) return true;
|
|
205
|
+
return !Object.keys(obj).some((key)=>{
|
|
206
|
+
return key === 'attributes' && Object.keys(obj[key]).length > 0 || typeof obj[key] === 'object' && !isObjectEmpty(obj[key]);
|
|
207
|
+
});
|
|
208
|
+
};
|
|
209
|
+
return isObjectEmpty(cssJSON.children);
|
|
210
|
+
};
|
|
184
211
|
const RenderCustomCode = (item)=>{
|
|
185
212
|
const { css, javascript, rootClassName } = item.advanced?.editorData || {};
|
|
186
213
|
const replacedCSS = css?.replaceAll(rootClassName, item.uid);
|
|
187
214
|
const replacedJS = javascript?.replaceAll(rootClassName, item.uid);
|
|
188
|
-
const cssCode = render.RenderIf(!!css, render.template`
|
|
189
|
-
<style
|
|
190
|
-
|
|
191
|
-
|
|
215
|
+
const cssCode = render.RenderIf(!!css && !isEmptyCSS(replacedCSS), render.template`
|
|
216
|
+
<style id="${`custom-css-${item?.uid}`}">
|
|
217
|
+
${replacedCSS}
|
|
218
|
+
</style>
|
|
192
219
|
`);
|
|
193
220
|
const jsCode = render.RenderIf(!!javascript, render.template`
|
|
194
|
-
<script
|
|
195
|
-
id="${`custom-js-${item?.uid}`}"
|
|
196
|
-
>
|
|
221
|
+
<script id="${`custom-js-${item?.uid}`}">
|
|
197
222
|
try {
|
|
198
223
|
${replacedJS}
|
|
199
224
|
} catch(err){}
|
|
@@ -221,7 +246,6 @@ const appendAnimation = (props, liquid)=>{
|
|
|
221
246
|
const appearTablet = getAnimationType(getSettingsByDevice('tablet'), 'appear');
|
|
222
247
|
const appearMobile = getAnimationType(getSettingsByDevice('mobile'), 'appear');
|
|
223
248
|
const enableAnimation = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none';
|
|
224
|
-
if (!enableAnimation) return liquid;
|
|
225
249
|
const getInitVisibility = (device)=>getSettingsByDevice(device)?.enabled && ![
|
|
226
250
|
'shake',
|
|
227
251
|
'none'
|
|
@@ -236,7 +260,8 @@ const appendAnimation = (props, liquid)=>{
|
|
|
236
260
|
gp-data='${JSON.stringify({
|
|
237
261
|
config: animation,
|
|
238
262
|
tag,
|
|
239
|
-
opacity
|
|
263
|
+
opacity,
|
|
264
|
+
isEnableInit: enableAnimation
|
|
240
265
|
})}'
|
|
241
266
|
style="${{
|
|
242
267
|
display: 'contents'
|
|
@@ -45,6 +45,7 @@ const RenderPreview = ({ uid, ...passProps })=>{
|
|
|
45
45
|
setting: item.settings,
|
|
46
46
|
...passProps,
|
|
47
47
|
children: item.childrens.map((id)=>/*#__PURE__*/ jsxRuntime.jsx(RenderPreviewMemo, {
|
|
48
|
+
bundleItem: passProps?.bundleItem,
|
|
48
49
|
uid: id
|
|
49
50
|
}, id))
|
|
50
51
|
}) : /*#__PURE__*/ jsxRuntime.jsx(Component, {
|