@gem-sdk/core 1.56.2 → 1.57.0-staging.2
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 +181 -107
- package/dist/cjs/components/ComponentWrapper.js +16 -1
- package/dist/cjs/components/ComponentWrapperPreview.js +16 -2
- package/dist/cjs/components/InteractionSuffix.js +42 -0
- package/dist/cjs/components/Render.liquid.js +22 -7
- package/dist/cjs/contexts/PageContext.js +37 -1
- package/dist/cjs/graphql/fragments/published-theme-page.generated.js +8 -0
- package/dist/cjs/helpers/animations.js +17 -8
- package/dist/cjs/helpers/background.js +7 -5
- package/dist/cjs/helpers/compose-advance-style.js +16 -4
- package/dist/cjs/helpers/interaction/index.js +105 -0
- package/dist/cjs/helpers/shadow.js +2 -2
- package/dist/cjs/helpers/third-party/appConfig.js +21 -0
- package/dist/cjs/helpers/third-party/appSetting.js +35 -1
- package/dist/cjs/helpers/third-party/constant.js +4 -1
- package/dist/cjs/helpers/third-party/getAppBlockConfig.js +8 -1
- package/dist/cjs/hooks/animation/useAnimationConfig.js +2 -1
- package/dist/cjs/hooks/animation/useAnimationTarget.js +5 -2
- package/dist/cjs/hooks/animation/useApplyAnimation.js +6 -4
- package/dist/cjs/hooks/useInteraction.js +19 -0
- package/dist/cjs/hooks/useToolbarPostPurchase.js +2 -2
- package/dist/cjs/index.js +14 -1
- package/dist/cjs/types/animations.js +2 -0
- package/dist/cjs/types/custom.js +51 -0
- package/dist/esm/components/ComponentToolbarPreview.js +181 -107
- package/dist/esm/components/ComponentWrapper.js +16 -1
- package/dist/esm/components/ComponentWrapperPreview.js +16 -2
- package/dist/esm/components/InteractionSuffix.js +40 -0
- package/dist/esm/components/Render.liquid.js +22 -7
- package/dist/esm/contexts/PageContext.js +37 -1
- package/dist/esm/graphql/fragments/published-theme-page.generated.js +8 -0
- package/dist/esm/helpers/animations.js +17 -8
- package/dist/esm/helpers/background.js +7 -5
- package/dist/esm/helpers/compose-advance-style.js +17 -5
- package/dist/esm/helpers/interaction/index.js +103 -0
- package/dist/esm/helpers/shadow.js +2 -2
- package/dist/esm/helpers/third-party/appConfig.js +19 -1
- package/dist/esm/helpers/third-party/appSetting.js +35 -1
- package/dist/esm/helpers/third-party/constant.js +5 -2
- package/dist/esm/helpers/third-party/getAppBlockConfig.js +8 -1
- package/dist/esm/hooks/animation/useAnimationConfig.js +2 -1
- package/dist/esm/hooks/animation/useAnimationTarget.js +5 -2
- package/dist/esm/hooks/animation/useApplyAnimation.js +6 -4
- package/dist/esm/hooks/useInteraction.js +17 -0
- package/dist/esm/hooks/useToolbarPostPurchase.js +2 -2
- 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 +134 -9
- package/package.json +3 -3
|
@@ -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;
|
|
@@ -46,6 +48,7 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
46
48
|
const [parents, setParents] = react.useState([]);
|
|
47
49
|
const [deleteTooltipPosition, setDeleteTooltipPosition] = react.useState('top');
|
|
48
50
|
const [isDisableDelete, setIsUnableDelete] = react.useState(false);
|
|
51
|
+
const [isActiveToolbarComponent, setIsActiveToolbarComponent] = react.useState(false);
|
|
49
52
|
const [productId, setProductId] = react.useState('');
|
|
50
53
|
const [articleUid, setArticleUid] = react.useState('');
|
|
51
54
|
const [tooltipText, setTooltipText] = react.useState({
|
|
@@ -53,6 +56,7 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
53
56
|
text: ''
|
|
54
57
|
});
|
|
55
58
|
const [isDisableDuplicate, setIsDisableDuplicate] = react.useState(false);
|
|
59
|
+
const interactionData = PageContext.usePageStore((s)=>s.interactionData);
|
|
56
60
|
const isSaleFunnelPage = react.useMemo(()=>editingPageType === 'POST_PURCHASE', [
|
|
57
61
|
editingPageType
|
|
58
62
|
]);
|
|
@@ -97,7 +101,7 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
97
101
|
};
|
|
98
102
|
const getDeleteTooltipPosition = react.useCallback(()=>{
|
|
99
103
|
if (props.tag == 'Section') return 'bottom';
|
|
100
|
-
const $toolbar = document.querySelector('[data-toolbar-active="true"]');
|
|
104
|
+
const $toolbar = document.body.querySelector('#storefront')?.querySelector('[data-toolbar-active="true"]');
|
|
101
105
|
if ($toolbar) {
|
|
102
106
|
const rect = $toolbar.getBoundingClientRect();
|
|
103
107
|
if (rect.top < 60) setDeleteTooltipPosition('bottom');
|
|
@@ -132,6 +136,33 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
132
136
|
articleUid,
|
|
133
137
|
linkShopDefault
|
|
134
138
|
]);
|
|
139
|
+
const isSelectOnPage = react.useMemo(()=>interactionData?.isSelectOnPage, [
|
|
140
|
+
interactionData?.isSelectOnPage
|
|
141
|
+
]);
|
|
142
|
+
const settingType = react.useMemo(()=>interactionData?.settingType, [
|
|
143
|
+
interactionData?.settingType
|
|
144
|
+
]);
|
|
145
|
+
const isShowIconInteractionTarget = react.useMemo(()=>{
|
|
146
|
+
return interactionData?.item?.targets?.find((t)=>t.uid === props.uid && t?.type !== 'PAGE') && settingType === 'TARGET';
|
|
147
|
+
}, [
|
|
148
|
+
interactionData?.item?.targets,
|
|
149
|
+
props.uid,
|
|
150
|
+
settingType
|
|
151
|
+
]);
|
|
152
|
+
const isShowIconInteractionTrigger = react.useMemo(()=>{
|
|
153
|
+
return interactionData?.item?.self?.uid === props.uid && interactionData?.item?.self.type !== 'PAGE' && settingType === 'TRIGGER';
|
|
154
|
+
}, [
|
|
155
|
+
interactionData?.item?.self?.type,
|
|
156
|
+
interactionData?.item?.self?.uid,
|
|
157
|
+
props.uid,
|
|
158
|
+
settingType
|
|
159
|
+
]);
|
|
160
|
+
const isDisplayIconDrag = react.useMemo(()=>{
|
|
161
|
+
return !isShowIconInteractionTarget && !isShowIconInteractionTrigger;
|
|
162
|
+
}, [
|
|
163
|
+
isShowIconInteractionTarget,
|
|
164
|
+
isShowIconInteractionTrigger
|
|
165
|
+
]);
|
|
135
166
|
// Get parents
|
|
136
167
|
const onActiveComponent = react.useCallback((e)=>{
|
|
137
168
|
const detail = e.detail;
|
|
@@ -142,6 +173,7 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
142
173
|
setProductId(detail.productId);
|
|
143
174
|
}
|
|
144
175
|
if (detail?.componentUid == props.uid) {
|
|
176
|
+
setIsActiveToolbarComponent(true);
|
|
145
177
|
getDeleteTooltipPosition();
|
|
146
178
|
if (isSaleFunnelPage) {
|
|
147
179
|
setIsUnableDelete(checkDisableDelete());
|
|
@@ -157,6 +189,7 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
157
189
|
}).slice(0, 3);
|
|
158
190
|
setParents(currentParents);
|
|
159
191
|
} else {
|
|
192
|
+
setIsActiveToolbarComponent(false);
|
|
160
193
|
setParents([]);
|
|
161
194
|
setIsShowParent(false);
|
|
162
195
|
}
|
|
@@ -344,7 +377,39 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
344
377
|
onClick: (e)=>onShowParent(e),
|
|
345
378
|
"aria-hidden": "true",
|
|
346
379
|
children: [
|
|
347
|
-
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
380
|
+
isShowIconInteractionTrigger && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
381
|
+
className: "gp-hidden gp-w-[12px] interaction-use-custom-element",
|
|
382
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
383
|
+
width: "12",
|
|
384
|
+
height: "13",
|
|
385
|
+
viewBox: "0 0 12 13",
|
|
386
|
+
fill: "none",
|
|
387
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
388
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
389
|
+
"fill-rule": "evenodd",
|
|
390
|
+
"clip-rule": "evenodd",
|
|
391
|
+
d: "M4.36799 0.430523C4.51596 0.205675 4.76709 0.0703125 5.03626 0.0703125H9.88576C10.2042 0.0703125 10.395 0.424378 10.2198 0.69034L8.36968 3.4992C8.28209 3.63218 8.37747 3.80922 8.53671 3.80922H10.749C11.1111 3.80922 11.2869 4.25204 11.0233 4.50036L3.03971 12.0217C2.7572 12.2878 2.29932 12.0361 2.37262 11.655L3.27994 6.93698C3.30366 6.81364 3.20915 6.69921 3.08354 6.69921H0.984651C0.66625 6.69921 0.475479 6.34529 0.650515 6.07932L4.36799 0.430523Z",
|
|
392
|
+
fill: "#F9F9F9"
|
|
393
|
+
})
|
|
394
|
+
})
|
|
395
|
+
}),
|
|
396
|
+
isShowIconInteractionTarget && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
397
|
+
className: "gp-hidden gp-w-[14px] interaction-use-custom-element",
|
|
398
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
399
|
+
width: "16",
|
|
400
|
+
height: "16",
|
|
401
|
+
viewBox: "0 0 16 16",
|
|
402
|
+
fill: "none",
|
|
403
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
404
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
405
|
+
"fill-rule": "evenodd",
|
|
406
|
+
"clip-rule": "evenodd",
|
|
407
|
+
d: "M7.32785 3.66159C7.87459 3.58351 8.25451 3.077 8.17643 2.53026C8.09836 1.98353 7.59184 1.6036 7.0451 1.68168C3.92866 2.12673 1.5332 4.80488 1.5332 8.04424C1.5332 11.594 4.41085 14.4716 7.9606 14.4716C11.1706 14.4716 13.8294 12.1194 14.3105 9.04446C14.3959 8.49881 14.0227 7.98727 13.4771 7.9019C12.9314 7.81654 12.4199 8.18967 12.3345 8.73531C12.0034 10.852 10.1702 12.4716 7.9606 12.4716C5.51541 12.4716 3.5332 10.4894 3.5332 8.04424C3.5332 5.81431 5.18273 3.96793 7.32785 3.66159ZM10.3432 1.97548C10.6232 1.69551 11.102 1.83654 11.1855 2.22355L11.6106 4.19339C11.6313 4.28936 11.7063 4.36432 11.8023 4.38503L13.7721 4.81013C14.1591 4.89365 14.3001 5.37247 14.0202 5.65243L12.3432 7.32945C12.1244 7.54819 11.8168 7.65338 11.5099 7.61436L10.1528 7.44178C9.84592 7.40276 9.53827 7.50795 9.31953 7.72669L8.66719 8.37903C8.35477 8.69145 7.86633 8.70954 7.57623 8.41943C7.28613 8.12933 7.30421 7.64089 7.61663 7.32847L8.26898 6.67613C8.48771 6.45739 8.5929 6.14974 8.55388 5.84287L8.38131 4.48575C8.34228 4.17888 8.44748 3.87123 8.66621 3.6525L10.3432 1.97548ZM8.19853 5.1916C8.35319 5.72179 8.04877 6.27697 7.51858 6.43163C6.83078 6.63226 6.32988 7.2683 6.32988 8.01873C6.32988 8.9316 7.06991 9.67164 7.98279 9.67164C8.73014 9.67164 9.36406 9.17486 9.56743 8.49131C9.72492 7.96195 10.2817 7.6605 10.8111 7.81799C11.3404 7.97548 11.6419 8.53227 11.4844 9.06163C11.0356 10.57 9.63916 11.6716 7.98279 11.6716C5.96535 11.6716 4.32988 10.0362 4.32988 8.01873C4.32988 6.35558 5.44054 4.95445 6.95851 4.51165C7.4887 4.35699 8.04387 4.66141 8.19853 5.1916Z",
|
|
408
|
+
fill: "#F9F9F9"
|
|
409
|
+
})
|
|
410
|
+
})
|
|
411
|
+
}),
|
|
412
|
+
isActiveToolbarComponent && isDisplayIconDrag && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
348
413
|
"data-toolbar-icon-drag": true,
|
|
349
414
|
children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
350
415
|
width: "16",
|
|
@@ -383,7 +448,7 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
383
448
|
"data-toolbar-name": true,
|
|
384
449
|
children: [
|
|
385
450
|
getSectionName(),
|
|
386
|
-
props.isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
451
|
+
isActiveToolbarComponent && props.isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
387
452
|
"data-toolbar-visibility": true,
|
|
388
453
|
width: "20",
|
|
389
454
|
height: "20",
|
|
@@ -416,7 +481,7 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
416
481
|
"data-toolbar-name": true,
|
|
417
482
|
children: toolbarName()
|
|
418
483
|
}),
|
|
419
|
-
props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
484
|
+
isActiveToolbarComponent && props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
420
485
|
"data-toolbar-icon-parent": true,
|
|
421
486
|
"data-toolbar-icon-parent-open": isShowParent,
|
|
422
487
|
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
@@ -432,7 +497,7 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
432
497
|
})
|
|
433
498
|
]
|
|
434
499
|
}),
|
|
435
|
-
isShowParent && parents.map((parent, index)=>{
|
|
500
|
+
isActiveToolbarComponent && isShowParent && parents.map((parent, index)=>{
|
|
436
501
|
// Update count columns of Row
|
|
437
502
|
const parentLength = parent?.childrens?.length ?? 0;
|
|
438
503
|
let parent_label = parent.label;
|
|
@@ -441,6 +506,7 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
441
506
|
}
|
|
442
507
|
return /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
443
508
|
"data-toolbar-parent": true,
|
|
509
|
+
"data-component-tag": parent.tag,
|
|
444
510
|
"data-parent-uid": parent.uid,
|
|
445
511
|
"data-toolbar-theme-section": isThemeSectionEditor,
|
|
446
512
|
"data-toolbar-parent-revert": isShowParentRevert,
|
|
@@ -491,109 +557,117 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
491
557
|
]
|
|
492
558
|
}, parent.uid);
|
|
493
559
|
}),
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
560
|
+
isActiveToolbarComponent && !isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
561
|
+
children: [
|
|
562
|
+
' ',
|
|
563
|
+
props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && !props.isShopifySection && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
|
|
564
|
+
...props
|
|
565
|
+
}),
|
|
566
|
+
isEnableAIContent() && /*#__PURE__*/ jsxRuntime.jsx(AIContentGenerator.AIContentGenerator, {
|
|
567
|
+
...props
|
|
568
|
+
}),
|
|
569
|
+
props.tag == 'Sticky' && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
570
|
+
"data-toolbar-zoom-out": true,
|
|
571
|
+
onClick: (e)=>onZoomOut(e),
|
|
572
|
+
"aria-hidden": "true",
|
|
573
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
574
|
+
width: "16",
|
|
575
|
+
height: "16",
|
|
576
|
+
viewBox: "0 0 16 16",
|
|
577
|
+
fill: "none",
|
|
578
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
579
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
580
|
+
fillRule: "evenodd",
|
|
581
|
+
clipRule: "evenodd",
|
|
582
|
+
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",
|
|
583
|
+
fill: "currentColor"
|
|
584
|
+
})
|
|
585
|
+
})
|
|
586
|
+
}),
|
|
587
|
+
editAbleElementList.includes(props.tag) && /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
|
|
588
|
+
"data-toolbar-title": true,
|
|
589
|
+
enable: true,
|
|
590
|
+
"data-toolbar-disable": false,
|
|
591
|
+
text: "Edit content in Shopify",
|
|
592
|
+
position: "top",
|
|
593
|
+
onClick: goToShopifyEditLink,
|
|
594
|
+
"aria-hidden": "true",
|
|
595
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
596
|
+
width: "16",
|
|
597
|
+
height: "16",
|
|
598
|
+
viewBox: "0 0 16 16",
|
|
599
|
+
fill: "none",
|
|
600
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
601
|
+
children: [
|
|
602
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
603
|
+
fillRule: "evenodd",
|
|
604
|
+
clipRule: "evenodd",
|
|
605
|
+
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",
|
|
606
|
+
fill: "currentColor"
|
|
607
|
+
}),
|
|
608
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
609
|
+
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",
|
|
610
|
+
fill: "currentColor"
|
|
611
|
+
}),
|
|
612
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
613
|
+
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",
|
|
614
|
+
fill: "currentColor"
|
|
615
|
+
}),
|
|
616
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
617
|
+
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",
|
|
618
|
+
fill: "currentColor"
|
|
619
|
+
})
|
|
620
|
+
]
|
|
621
|
+
})
|
|
622
|
+
}),
|
|
623
|
+
/*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
|
|
624
|
+
enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
|
|
625
|
+
text: "Page has reached Shopify’s 25 section-limit",
|
|
626
|
+
position: "bottom",
|
|
627
|
+
"data-toolbar-duplicate": true,
|
|
628
|
+
"data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT || isDisableDuplicate,
|
|
629
|
+
onClick: isDisableDuplicate ? undefined : (e)=>onDuplicate(e),
|
|
630
|
+
"aria-hidden": "true",
|
|
631
|
+
className: isDisableDuplicate ? '!gp-cursor-not-allowed' : '',
|
|
632
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
633
|
+
width: "16",
|
|
634
|
+
height: "16",
|
|
635
|
+
viewBox: "0 0 16 16",
|
|
636
|
+
fill: "none",
|
|
637
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
638
|
+
fillRule: "evenodd",
|
|
639
|
+
clipRule: "evenodd",
|
|
640
|
+
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",
|
|
641
|
+
fill: "currentColor"
|
|
642
|
+
})
|
|
643
|
+
})
|
|
644
|
+
}),
|
|
645
|
+
/*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
|
|
646
|
+
"data-toolbar-delete": true,
|
|
647
|
+
onClick: (e)=>isDisableDelete ? null : onDelete(e),
|
|
648
|
+
enable: isDisableDelete,
|
|
649
|
+
"data-toolbar-disable": isDisableDelete,
|
|
650
|
+
width: tooltipText.width,
|
|
651
|
+
text: tooltipText.text,
|
|
652
|
+
position: deleteTooltipPosition,
|
|
653
|
+
"aria-hidden": "true",
|
|
654
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
655
|
+
width: "16",
|
|
656
|
+
height: "16",
|
|
657
|
+
viewBox: "0 0 16 16",
|
|
658
|
+
fill: "none",
|
|
659
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
660
|
+
fillRule: "evenodd",
|
|
661
|
+
clipRule: "evenodd",
|
|
662
|
+
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",
|
|
663
|
+
fill: "currentColor"
|
|
664
|
+
})
|
|
550
665
|
})
|
|
551
|
-
]
|
|
552
|
-
})
|
|
553
|
-
}),
|
|
554
|
-
/*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
|
|
555
|
-
enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
|
|
556
|
-
text: "Page has reached Shopify’s 25 section-limit",
|
|
557
|
-
position: "bottom",
|
|
558
|
-
"data-toolbar-duplicate": true,
|
|
559
|
-
"data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT || isDisableDuplicate,
|
|
560
|
-
onClick: isDisableDuplicate ? undefined : (e)=>onDuplicate(e),
|
|
561
|
-
"aria-hidden": "true",
|
|
562
|
-
className: isDisableDuplicate ? '!gp-cursor-not-allowed' : '',
|
|
563
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
564
|
-
width: "16",
|
|
565
|
-
height: "16",
|
|
566
|
-
viewBox: "0 0 16 16",
|
|
567
|
-
fill: "none",
|
|
568
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
569
|
-
fillRule: "evenodd",
|
|
570
|
-
clipRule: "evenodd",
|
|
571
|
-
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",
|
|
572
|
-
fill: "currentColor"
|
|
573
666
|
})
|
|
574
|
-
|
|
667
|
+
]
|
|
575
668
|
}),
|
|
576
|
-
/*#__PURE__*/ jsxRuntime.jsx(
|
|
577
|
-
|
|
578
|
-
onClick: (e)=>isDisableDelete ? null : onDelete(e),
|
|
579
|
-
enable: isDisableDelete,
|
|
580
|
-
"data-toolbar-disable": isDisableDelete,
|
|
581
|
-
width: tooltipText.width,
|
|
582
|
-
text: tooltipText.text,
|
|
583
|
-
position: deleteTooltipPosition,
|
|
584
|
-
"aria-hidden": "true",
|
|
585
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
586
|
-
width: "16",
|
|
587
|
-
height: "16",
|
|
588
|
-
viewBox: "0 0 16 16",
|
|
589
|
-
fill: "none",
|
|
590
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
591
|
-
fillRule: "evenodd",
|
|
592
|
-
clipRule: "evenodd",
|
|
593
|
-
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",
|
|
594
|
-
fill: "currentColor"
|
|
595
|
-
})
|
|
596
|
-
})
|
|
669
|
+
/*#__PURE__*/ jsxRuntime.jsx(InteractionSuffix.InteractionSuffix, {
|
|
670
|
+
uid: props.uid
|
|
597
671
|
})
|
|
598
672
|
]
|
|
599
673
|
}, props.uid),
|
|
@@ -651,10 +725,10 @@ const ComponentToolbarPreview = (props)=>{
|
|
|
651
725
|
})
|
|
652
726
|
]
|
|
653
727
|
}),
|
|
654
|
-
constant.ableGenerateContentElements.includes(props.tag) && /*#__PURE__*/ jsxRuntime.jsx(AIGenContentLoading.AIGenContentLoading, {
|
|
728
|
+
constant.ableGenerateContentElements.includes(props.tag) && isActiveToolbarComponent && /*#__PURE__*/ jsxRuntime.jsx(AIGenContentLoading.AIGenContentLoading, {
|
|
655
729
|
...props
|
|
656
730
|
}),
|
|
657
|
-
/*#__PURE__*/ jsxRuntime.jsx(Resize.default, {
|
|
731
|
+
isActiveToolbarComponent && /*#__PURE__*/ jsxRuntime.jsx(Resize.default, {
|
|
658
732
|
...props
|
|
659
733
|
})
|
|
660
734
|
]
|
|
@@ -12,6 +12,16 @@ const ComponentWrapper = ({ children, pageType, ...props })=>{
|
|
|
12
12
|
if (props.type === 'section') return null;
|
|
13
13
|
const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag, pageType);
|
|
14
14
|
const advanced = props.advanced;
|
|
15
|
+
const interactionAttributes = ()=>{
|
|
16
|
+
let result = {};
|
|
17
|
+
if (props.advanced?.displayInitInteraction !== undefined) {
|
|
18
|
+
result = {
|
|
19
|
+
'display-init': props.advanced?.displayInitInteraction === false ? 'hide' : 'show',
|
|
20
|
+
'gp-interaction-wrapper': ''
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
15
25
|
if (constant.disableWrap.includes(props.tag) && /*#__PURE__*/ react.isValidElement(children)) {
|
|
16
26
|
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
17
27
|
children: [
|
|
@@ -23,7 +33,11 @@ const ComponentWrapper = ({ children, pageType, ...props })=>{
|
|
|
23
33
|
className: advanced?.cssClass,
|
|
24
34
|
...children.props,
|
|
25
35
|
style,
|
|
26
|
-
advanced
|
|
36
|
+
advanced,
|
|
37
|
+
builderAttrs: {
|
|
38
|
+
...children.props.builderAttrs,
|
|
39
|
+
...interactionAttributes()
|
|
40
|
+
}
|
|
27
41
|
})
|
|
28
42
|
]
|
|
29
43
|
});
|
|
@@ -36,6 +50,7 @@ const ComponentWrapper = ({ children, pageType, ...props })=>{
|
|
|
36
50
|
}),
|
|
37
51
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
38
52
|
style: style,
|
|
53
|
+
...interactionAttributes(),
|
|
39
54
|
className: `${props.uid} ${advanced?.cssClass}`,
|
|
40
55
|
children: children
|
|
41
56
|
})
|
|
@@ -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,42 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = 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
|
+
var index = require('../helpers/interaction/index.js');
|
|
18
|
+
require('../helpers/convert.js');
|
|
19
|
+
|
|
20
|
+
const InteractionSuffix = ({ uid })=>{
|
|
21
|
+
const { closeSelectOnPage, selectInteractionElement } = index.useInteraction();
|
|
22
|
+
const settingType = PageContext.usePageStore((s)=>s.interactionData?.settingType || '');
|
|
23
|
+
const isSelectOnPage = PageContext.usePageStore((s)=>s.interactionData?.isSelectOnPage);
|
|
24
|
+
const onClick = (e)=>{
|
|
25
|
+
selectInteractionElement({
|
|
26
|
+
$target: e.target,
|
|
27
|
+
componentUid: uid,
|
|
28
|
+
settingType
|
|
29
|
+
});
|
|
30
|
+
closeSelectOnPage();
|
|
31
|
+
};
|
|
32
|
+
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
33
|
+
children: isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx("button", {
|
|
34
|
+
className: "gp-bg-[#F4F4F4] gp-px-2 gp-h-[24px] gp-py-0.5 gp-rounded-lg gp-text-[#212121] gp-text-xs gp-font-medium gp-hidden interaction-use-custom-element ",
|
|
35
|
+
onClick: onClick,
|
|
36
|
+
"data-setup-interaction": true,
|
|
37
|
+
children: settingType === 'TRIGGER' ? 'Set as trigger' : 'Set as target'
|
|
38
|
+
})
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
exports.InteractionSuffix = InteractionSuffix;
|
|
@@ -39,7 +39,6 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
|
|
|
39
39
|
const item = builder[uid];
|
|
40
40
|
const Component = components[item?.tag];
|
|
41
41
|
if (!Component) {
|
|
42
|
-
console.log('Miss component: ', item);
|
|
43
42
|
return {
|
|
44
43
|
liquid: '',
|
|
45
44
|
extraFiles
|
|
@@ -76,6 +75,9 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
|
|
|
76
75
|
parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
|
|
77
76
|
pageContext,
|
|
78
77
|
...passProps,
|
|
78
|
+
builderAttrs: {
|
|
79
|
+
...passProps.builderAttrs
|
|
80
|
+
},
|
|
79
81
|
rawChildren: item.childrens.map((id)=>{
|
|
80
82
|
return {
|
|
81
83
|
...builder[id],
|
|
@@ -111,11 +113,14 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
|
|
|
111
113
|
isText: componentTexts.includes(item.tag) ? true : null,
|
|
112
114
|
parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
|
|
113
115
|
pageContext,
|
|
114
|
-
...passProps
|
|
116
|
+
...passProps,
|
|
117
|
+
builderAttrs: {
|
|
118
|
+
...passProps.builderAttrs
|
|
119
|
+
}
|
|
115
120
|
});
|
|
116
121
|
});
|
|
117
122
|
} else {
|
|
118
|
-
liquid = render.template`<div style="${!componentIconList.includes(item.tag) ? style : ''}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
|
|
123
|
+
liquid = render.template`<div gp-el-wrapper style="${!componentIconList.includes(item.tag) ? style : ''}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
|
|
119
124
|
${render.RenderIf(item?.childrens?.length, ()=>{
|
|
120
125
|
return Component({
|
|
121
126
|
builderProps: {
|
|
@@ -130,6 +135,9 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
|
|
|
130
135
|
},
|
|
131
136
|
pageContext,
|
|
132
137
|
...passProps,
|
|
138
|
+
builderAttrs: {
|
|
139
|
+
...passProps.builderAttrs
|
|
140
|
+
},
|
|
133
141
|
rawChildren: item.childrens.map((id)=>{
|
|
134
142
|
return {
|
|
135
143
|
...builder[id],
|
|
@@ -166,7 +174,10 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
|
|
|
166
174
|
pageContext,
|
|
167
175
|
isText: componentTexts.includes(item.tag) ? true : null,
|
|
168
176
|
style: componentIconList.includes(item.tag) ? style : null,
|
|
169
|
-
...passProps
|
|
177
|
+
...passProps,
|
|
178
|
+
builderAttrs: {
|
|
179
|
+
...passProps.builderAttrs
|
|
180
|
+
}
|
|
170
181
|
});
|
|
171
182
|
})}
|
|
172
183
|
</div>`;
|
|
@@ -204,7 +215,7 @@ const RenderCustomCode = (item)=>{
|
|
|
204
215
|
};
|
|
205
216
|
const appendAnimation = (props, liquid)=>{
|
|
206
217
|
const { advanced, tag } = props;
|
|
207
|
-
const { animation, op: opacity } = advanced ?? {};
|
|
218
|
+
const { animation, op: opacity, hasAnimationInteraction, displayInitInteraction } = advanced ?? {};
|
|
208
219
|
const getAnimationType = (settings, type)=>{
|
|
209
220
|
return settings?.triggerConfig?.[type]?.animation ?? 'none';
|
|
210
221
|
};
|
|
@@ -218,7 +229,8 @@ const appendAnimation = (props, liquid)=>{
|
|
|
218
229
|
const hoverDesktop = getAnimationType(getSettingsByDevice('desktop'), 'hover');
|
|
219
230
|
const appearTablet = getAnimationType(getSettingsByDevice('tablet'), 'appear');
|
|
220
231
|
const appearMobile = getAnimationType(getSettingsByDevice('mobile'), 'appear');
|
|
221
|
-
const enableAnimation = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none';
|
|
232
|
+
const enableAnimation = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none' || !!hasAnimationInteraction;
|
|
233
|
+
const enableAnimationWhenInit = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none';
|
|
222
234
|
if (!enableAnimation) return liquid;
|
|
223
235
|
const getInitVisibility = (device)=>getSettingsByDevice(device)?.enabled && ![
|
|
224
236
|
'shake',
|
|
@@ -231,10 +243,13 @@ const appendAnimation = (props, liquid)=>{
|
|
|
231
243
|
};
|
|
232
244
|
return render.template`
|
|
233
245
|
<gp-animation
|
|
246
|
+
gp-interaction-wrapper
|
|
247
|
+
display-init="${displayInitInteraction === false ? 'hide' : 'show'}"
|
|
234
248
|
gp-data='${JSON.stringify({
|
|
235
249
|
config: animation,
|
|
236
250
|
tag,
|
|
237
|
-
opacity
|
|
251
|
+
opacity,
|
|
252
|
+
notEnableAnimationWhenInit: !enableAnimationWhenInit
|
|
238
253
|
})}'
|
|
239
254
|
style="${{
|
|
240
255
|
display: 'contents'
|