@gem-sdk/pages 1.45.0-dev.91 → 1.45.0
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/builder/Header.js +1 -4
- package/dist/cjs/components/builder/PopupManager.js +1 -1
- package/dist/cjs/components/builder/Toolbar.js +7 -17
- package/dist/cjs/components/builder/Toolbox.js +1 -21
- package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js +2 -2
- package/dist/cjs/libs/google-fonts.js +1 -1
- package/dist/cjs/pages/builder.js +1 -1
- package/dist/esm/components/builder/Header.js +2 -5
- package/dist/esm/components/builder/PopupManager.js +1 -1
- package/dist/esm/components/builder/Toolbar.js +7 -17
- package/dist/esm/components/builder/Toolbox.js +1 -21
- package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js +2 -2
- package/dist/esm/libs/google-fonts.js +1 -1
- package/dist/esm/pages/builder.js +1 -1
- package/package.json +5 -5
- package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js +0 -61
- package/dist/esm/components/builder/InteractionSelectOnPageHeader.js +0 -57
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var core = require('@gem-sdk/core');
|
|
7
7
|
var SwitchView = require('./SwitchView.js');
|
|
8
|
-
var InteractionSelectOnPageHeader = require('./InteractionSelectOnPageHeader.js');
|
|
9
8
|
|
|
10
9
|
const defaultMargin = {
|
|
11
10
|
desktop: '16px',
|
|
@@ -22,7 +21,6 @@ const sizeCheck = {
|
|
|
22
21
|
const Header = (props)=>{
|
|
23
22
|
const { pageType, isOriginTemplate } = props;
|
|
24
23
|
const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
|
|
25
|
-
const isSelectOnPage = core.usePageStore((s)=>s.interactionData?.isSelectOnPage);
|
|
26
24
|
const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
|
|
27
25
|
const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
|
|
28
26
|
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
@@ -179,8 +177,7 @@ const Header = (props)=>{
|
|
|
179
177
|
})
|
|
180
178
|
]
|
|
181
179
|
})
|
|
182
|
-
})
|
|
183
|
-
isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx(InteractionSelectOnPageHeader.default, {})
|
|
180
|
+
})
|
|
184
181
|
]
|
|
185
182
|
});
|
|
186
183
|
};
|
|
@@ -379,30 +379,23 @@ const Toolbar = ()=>{
|
|
|
379
379
|
countShowOnboarding,
|
|
380
380
|
onCloseOnboarding
|
|
381
381
|
]);
|
|
382
|
-
const getSelectorComponent = ({ componentUid, productId, articleId
|
|
382
|
+
const getSelectorComponent = ({ componentUid, productId, articleId })=>{
|
|
383
383
|
if (articleId) {
|
|
384
384
|
return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
385
385
|
}
|
|
386
|
-
if (marqueeKey) {
|
|
387
|
-
return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
|
|
388
|
-
}
|
|
389
386
|
return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
390
387
|
};
|
|
391
|
-
const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait =
|
|
388
|
+
const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, articleId, forceReActive })=>{
|
|
392
389
|
if (!componentUid) return;
|
|
393
390
|
const selector = getSelectorComponent({
|
|
394
391
|
componentUid,
|
|
395
392
|
productId,
|
|
396
|
-
articleId
|
|
397
|
-
marqueeKey
|
|
393
|
+
articleId
|
|
398
394
|
});
|
|
399
395
|
const $component = await waitForElementToExist(selector, timeAwait);
|
|
400
396
|
if (!$component) return;
|
|
401
|
-
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId
|
|
397
|
+
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId) return;
|
|
402
398
|
if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || forceReActive) removeActiveComponent();
|
|
403
|
-
if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
|
|
404
|
-
removeActiveComponent();
|
|
405
|
-
}
|
|
406
399
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
407
400
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
408
401
|
const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
|
|
@@ -411,8 +404,7 @@ const Toolbar = ()=>{
|
|
|
411
404
|
currentComponentActive.current = {
|
|
412
405
|
componentUid,
|
|
413
406
|
productId,
|
|
414
|
-
articleId
|
|
415
|
-
marqueeKey
|
|
407
|
+
articleId
|
|
416
408
|
};
|
|
417
409
|
$toolbar.removeAttribute('style');
|
|
418
410
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
@@ -431,9 +423,8 @@ const Toolbar = ()=>{
|
|
|
431
423
|
if ($btnAddBottom) {
|
|
432
424
|
$btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
|
|
433
425
|
}
|
|
434
|
-
const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
|
|
435
426
|
// Active same element in product list
|
|
436
|
-
if (productId || articleId
|
|
427
|
+
if (productId || articleId) {
|
|
437
428
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
438
429
|
if ($relatedElements?.length) {
|
|
439
430
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -694,8 +685,7 @@ const Toolbar = ()=>{
|
|
|
694
685
|
setActiveComponent({
|
|
695
686
|
componentUid: detail.componentUid,
|
|
696
687
|
productId: detail.productId,
|
|
697
|
-
articleId: detail.articleId
|
|
698
|
-
marqueeKey: detail.marqueeKey
|
|
688
|
+
articleId: detail.articleId
|
|
699
689
|
});
|
|
700
690
|
} else {
|
|
701
691
|
removeActiveComponent();
|
|
@@ -36,8 +36,6 @@ const Toolbox = ()=>{
|
|
|
36
36
|
const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
|
|
37
37
|
const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
|
|
38
38
|
const clearModal = core.useModalStore((s)=>s.clearModal);
|
|
39
|
-
const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
|
|
40
|
-
const setInteractionItem = core.usePageStore((s)=>s.setInteractionItem);
|
|
41
39
|
const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
|
|
42
40
|
state
|
|
43
41
|
]);
|
|
@@ -331,18 +329,6 @@ const Toolbox = ()=>{
|
|
|
331
329
|
}, [
|
|
332
330
|
setSalePageProductId
|
|
333
331
|
]);
|
|
334
|
-
const onUpdateInteractionIsSelectOnPage = react.useCallback((e)=>{
|
|
335
|
-
const isSelectOnPage = e.detail;
|
|
336
|
-
setInteractionIsSelectOnPage(isSelectOnPage);
|
|
337
|
-
}, [
|
|
338
|
-
setInteractionIsSelectOnPage
|
|
339
|
-
]);
|
|
340
|
-
const onUpdateInteractionItem = react.useCallback((e)=>{
|
|
341
|
-
const interactionItem = e.detail;
|
|
342
|
-
setInteractionItem(interactionItem);
|
|
343
|
-
}, [
|
|
344
|
-
setInteractionItem
|
|
345
|
-
]);
|
|
346
332
|
react.useEffect(()=>{
|
|
347
333
|
if (fonts) {
|
|
348
334
|
setFontsToHead('google-font-element', fonts);
|
|
@@ -370,8 +356,6 @@ const Toolbox = ()=>{
|
|
|
370
356
|
window.addEventListener('update-item-attribute', onUpdateItemAttribute);
|
|
371
357
|
window.addEventListener('set-product-offer', onUpdateProductOffers);
|
|
372
358
|
window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
|
|
373
|
-
window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
|
|
374
|
-
window.addEventListener('update-interaction-item', onUpdateInteractionItem);
|
|
375
359
|
return ()=>{
|
|
376
360
|
window.removeEventListener('update-shop-info', onChangeShopInfo);
|
|
377
361
|
window.removeEventListener('revalidate-query', onRevalidateQuery);
|
|
@@ -391,8 +375,6 @@ const Toolbox = ()=>{
|
|
|
391
375
|
window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
|
|
392
376
|
window.removeEventListener('set-product-offer', onUpdateProductOffers);
|
|
393
377
|
window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
|
|
394
|
-
window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
|
|
395
|
-
window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
|
|
396
378
|
};
|
|
397
379
|
}, [
|
|
398
380
|
onAddEntity,
|
|
@@ -413,9 +395,7 @@ const Toolbox = ()=>{
|
|
|
413
395
|
onUpdateItemName,
|
|
414
396
|
onUpdateItemAttribute,
|
|
415
397
|
onUpdateProductOffers,
|
|
416
|
-
onUpdateSalePageProductId
|
|
417
|
-
onUpdateInteractionItem,
|
|
418
|
-
onUpdateInteractionIsSelectOnPage
|
|
398
|
+
onUpdateSalePageProductId
|
|
419
399
|
]);
|
|
420
400
|
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
421
401
|
className: "toolbox"
|
|
@@ -89,12 +89,12 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
|
|
|
89
89
|
}),
|
|
90
90
|
ACTIONS_DATA.map((action)=>{
|
|
91
91
|
return /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
92
|
-
className: `gp-relative gp-mx-1 gp-h-[60px]
|
|
92
|
+
className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
|
|
93
93
|
id: action.id,
|
|
94
94
|
"aria-hidden": true,
|
|
95
95
|
children: [
|
|
96
96
|
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
97
|
-
className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]
|
|
97
|
+
className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
|
|
98
98
|
children: [
|
|
99
99
|
action.title,
|
|
100
100
|
action.hasAILogo && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
@@ -68,7 +68,7 @@ async function getFonts(fonts, option, isImportFontByUrl = true) {
|
|
|
68
68
|
getFontForUA(url, IE_UA),
|
|
69
69
|
getFontForUA(url, CHROME_UA)
|
|
70
70
|
]);
|
|
71
|
-
const maxSize =
|
|
71
|
+
const maxSize = 50; // 50KB
|
|
72
72
|
const value = ie + chrome;
|
|
73
73
|
if (maxSize) {
|
|
74
74
|
const textEncoder = new TextEncoder();
|
|
@@ -71,7 +71,7 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
|
|
|
71
71
|
className: "builder gp-z-1 gp-relative",
|
|
72
72
|
children: [
|
|
73
73
|
!hiddenToolbar && (isDisableHeaderFooter() ? /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
74
|
-
className: "gp-h-[40px] gp-bg-[#
|
|
74
|
+
className: "gp-h-[40px] gp-bg-[#ffffff] gp-border-b-[1px] gp-border-[#eeeeee]",
|
|
75
75
|
children: /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {})
|
|
76
76
|
}) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {
|
|
77
77
|
pageType: pageType,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useShopStore,
|
|
2
|
+
import { useShopStore, cls, makeStyleResponsive } from '@gem-sdk/core';
|
|
3
3
|
import Devices from './SwitchView.js';
|
|
4
|
-
import InteractionSelectOnPageHeader from './InteractionSelectOnPageHeader.js';
|
|
5
4
|
|
|
6
5
|
const defaultMargin = {
|
|
7
6
|
desktop: '16px',
|
|
@@ -18,7 +17,6 @@ const sizeCheck = {
|
|
|
18
17
|
const Header = (props)=>{
|
|
19
18
|
const { pageType, isOriginTemplate } = props;
|
|
20
19
|
const layoutSetting = useShopStore((s)=>s.layoutSettings);
|
|
21
|
-
const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
|
|
22
20
|
const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
|
|
23
21
|
const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
|
|
24
22
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
@@ -175,8 +173,7 @@ const Header = (props)=>{
|
|
|
175
173
|
})
|
|
176
174
|
]
|
|
177
175
|
})
|
|
178
|
-
})
|
|
179
|
-
isSelectOnPage && /*#__PURE__*/ jsx(InteractionSelectOnPageHeader, {})
|
|
176
|
+
})
|
|
180
177
|
]
|
|
181
178
|
});
|
|
182
179
|
};
|
|
@@ -375,30 +375,23 @@ const Toolbar = ()=>{
|
|
|
375
375
|
countShowOnboarding,
|
|
376
376
|
onCloseOnboarding
|
|
377
377
|
]);
|
|
378
|
-
const getSelectorComponent = ({ componentUid, productId, articleId
|
|
378
|
+
const getSelectorComponent = ({ componentUid, productId, articleId })=>{
|
|
379
379
|
if (articleId) {
|
|
380
380
|
return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
381
381
|
}
|
|
382
|
-
if (marqueeKey) {
|
|
383
|
-
return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
|
|
384
|
-
}
|
|
385
382
|
return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
386
383
|
};
|
|
387
|
-
const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait =
|
|
384
|
+
const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, articleId, forceReActive })=>{
|
|
388
385
|
if (!componentUid) return;
|
|
389
386
|
const selector = getSelectorComponent({
|
|
390
387
|
componentUid,
|
|
391
388
|
productId,
|
|
392
|
-
articleId
|
|
393
|
-
marqueeKey
|
|
389
|
+
articleId
|
|
394
390
|
});
|
|
395
391
|
const $component = await waitForElementToExist(selector, timeAwait);
|
|
396
392
|
if (!$component) return;
|
|
397
|
-
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId
|
|
393
|
+
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId) return;
|
|
398
394
|
if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || forceReActive) removeActiveComponent();
|
|
399
|
-
if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
|
|
400
|
-
removeActiveComponent();
|
|
401
|
-
}
|
|
402
395
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
403
396
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
404
397
|
const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
|
|
@@ -407,8 +400,7 @@ const Toolbar = ()=>{
|
|
|
407
400
|
currentComponentActive.current = {
|
|
408
401
|
componentUid,
|
|
409
402
|
productId,
|
|
410
|
-
articleId
|
|
411
|
-
marqueeKey
|
|
403
|
+
articleId
|
|
412
404
|
};
|
|
413
405
|
$toolbar.removeAttribute('style');
|
|
414
406
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
@@ -427,9 +419,8 @@ const Toolbar = ()=>{
|
|
|
427
419
|
if ($btnAddBottom) {
|
|
428
420
|
$btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
|
|
429
421
|
}
|
|
430
|
-
const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
|
|
431
422
|
// Active same element in product list
|
|
432
|
-
if (productId || articleId
|
|
423
|
+
if (productId || articleId) {
|
|
433
424
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
434
425
|
if ($relatedElements?.length) {
|
|
435
426
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -690,8 +681,7 @@ const Toolbar = ()=>{
|
|
|
690
681
|
setActiveComponent({
|
|
691
682
|
componentUid: detail.componentUid,
|
|
692
683
|
productId: detail.productId,
|
|
693
|
-
articleId: detail.articleId
|
|
694
|
-
marqueeKey: detail.marqueeKey
|
|
684
|
+
articleId: detail.articleId
|
|
695
685
|
});
|
|
696
686
|
} else {
|
|
697
687
|
removeActiveComponent();
|
|
@@ -32,8 +32,6 @@ const Toolbox = ()=>{
|
|
|
32
32
|
const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
|
|
33
33
|
const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
|
|
34
34
|
const clearModal = useModalStore((s)=>s.clearModal);
|
|
35
|
-
const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
|
|
36
|
-
const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
|
|
37
35
|
const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
|
|
38
36
|
state
|
|
39
37
|
]);
|
|
@@ -327,18 +325,6 @@ const Toolbox = ()=>{
|
|
|
327
325
|
}, [
|
|
328
326
|
setSalePageProductId
|
|
329
327
|
]);
|
|
330
|
-
const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
|
|
331
|
-
const isSelectOnPage = e.detail;
|
|
332
|
-
setInteractionIsSelectOnPage(isSelectOnPage);
|
|
333
|
-
}, [
|
|
334
|
-
setInteractionIsSelectOnPage
|
|
335
|
-
]);
|
|
336
|
-
const onUpdateInteractionItem = useCallback((e)=>{
|
|
337
|
-
const interactionItem = e.detail;
|
|
338
|
-
setInteractionItem(interactionItem);
|
|
339
|
-
}, [
|
|
340
|
-
setInteractionItem
|
|
341
|
-
]);
|
|
342
328
|
useEffect(()=>{
|
|
343
329
|
if (fonts) {
|
|
344
330
|
setFontsToHead('google-font-element', fonts);
|
|
@@ -366,8 +352,6 @@ const Toolbox = ()=>{
|
|
|
366
352
|
window.addEventListener('update-item-attribute', onUpdateItemAttribute);
|
|
367
353
|
window.addEventListener('set-product-offer', onUpdateProductOffers);
|
|
368
354
|
window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
|
|
369
|
-
window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
|
|
370
|
-
window.addEventListener('update-interaction-item', onUpdateInteractionItem);
|
|
371
355
|
return ()=>{
|
|
372
356
|
window.removeEventListener('update-shop-info', onChangeShopInfo);
|
|
373
357
|
window.removeEventListener('revalidate-query', onRevalidateQuery);
|
|
@@ -387,8 +371,6 @@ const Toolbox = ()=>{
|
|
|
387
371
|
window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
|
|
388
372
|
window.removeEventListener('set-product-offer', onUpdateProductOffers);
|
|
389
373
|
window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
|
|
390
|
-
window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
|
|
391
|
-
window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
|
|
392
374
|
};
|
|
393
375
|
}, [
|
|
394
376
|
onAddEntity,
|
|
@@ -409,9 +391,7 @@ const Toolbox = ()=>{
|
|
|
409
391
|
onUpdateItemName,
|
|
410
392
|
onUpdateItemAttribute,
|
|
411
393
|
onUpdateProductOffers,
|
|
412
|
-
onUpdateSalePageProductId
|
|
413
|
-
onUpdateInteractionItem,
|
|
414
|
-
onUpdateInteractionIsSelectOnPage
|
|
394
|
+
onUpdateSalePageProductId
|
|
415
395
|
]);
|
|
416
396
|
return /*#__PURE__*/ jsx("div", {
|
|
417
397
|
className: "toolbox"
|
|
@@ -85,12 +85,12 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
|
|
|
85
85
|
}),
|
|
86
86
|
ACTIONS_DATA.map((action)=>{
|
|
87
87
|
return /*#__PURE__*/ jsxs("div", {
|
|
88
|
-
className: `gp-relative gp-mx-1 gp-h-[60px]
|
|
88
|
+
className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
|
|
89
89
|
id: action.id,
|
|
90
90
|
"aria-hidden": true,
|
|
91
91
|
children: [
|
|
92
92
|
/*#__PURE__*/ jsxs("div", {
|
|
93
|
-
className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]
|
|
93
|
+
className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
|
|
94
94
|
children: [
|
|
95
95
|
action.title,
|
|
96
96
|
action.hasAILogo && /*#__PURE__*/ jsxs("svg", {
|
|
@@ -66,7 +66,7 @@ async function getFonts(fonts, option, isImportFontByUrl = true) {
|
|
|
66
66
|
getFontForUA(url, IE_UA),
|
|
67
67
|
getFontForUA(url, CHROME_UA)
|
|
68
68
|
]);
|
|
69
|
-
const maxSize =
|
|
69
|
+
const maxSize = 50; // 50KB
|
|
70
70
|
const value = ie + chrome;
|
|
71
71
|
if (maxSize) {
|
|
72
72
|
const textEncoder = new TextEncoder();
|
|
@@ -69,7 +69,7 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
|
|
|
69
69
|
className: "builder gp-z-1 gp-relative",
|
|
70
70
|
children: [
|
|
71
71
|
!hiddenToolbar && (isDisableHeaderFooter() ? /*#__PURE__*/ jsx("div", {
|
|
72
|
-
className: "gp-h-[40px] gp-bg-[#
|
|
72
|
+
className: "gp-h-[40px] gp-bg-[#ffffff] gp-border-b-[1px] gp-border-[#eeeeee]",
|
|
73
73
|
children: /*#__PURE__*/ jsx(Devices, {})
|
|
74
74
|
}) : /*#__PURE__*/ jsx(Header, {
|
|
75
75
|
pageType: pageType,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "1.45.0
|
|
3
|
+
"version": "1.45.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"next": "latest"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@gem-sdk/core": "1.45.0
|
|
30
|
-
"@gem-sdk/plugin-cookie-bar": "1.45.0
|
|
31
|
-
"@gem-sdk/plugin-quick-view": "1.45.0
|
|
32
|
-
"@gem-sdk/plugin-sticky-add-to-cart": "1.45.0
|
|
29
|
+
"@gem-sdk/core": "1.45.0",
|
|
30
|
+
"@gem-sdk/plugin-cookie-bar": "1.45.0",
|
|
31
|
+
"@gem-sdk/plugin-quick-view": "1.45.0",
|
|
32
|
+
"@gem-sdk/plugin-sticky-add-to-cart": "1.45.0"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"next": ">=13"
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var core = require('@gem-sdk/core');
|
|
7
|
-
|
|
8
|
-
const InteractionSelectOnPageHeader = ()=>{
|
|
9
|
-
const selectType = core.usePageStore((s)=>s.interactionData?.selectType);
|
|
10
|
-
const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
|
|
11
|
-
const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
|
|
12
|
-
const closeSelectOnPage = ()=>{
|
|
13
|
-
setInteractionIsSelectOnPage(false);
|
|
14
|
-
const event = new CustomEvent('editor:interaction:change-select-on-page', {
|
|
15
|
-
bubbles: true,
|
|
16
|
-
detail: false
|
|
17
|
-
});
|
|
18
|
-
window.dispatchEvent(event);
|
|
19
|
-
};
|
|
20
|
-
console.log('selectType123', selectType);
|
|
21
|
-
return /*#__PURE__*/ jsxRuntime.jsxs("header", {
|
|
22
|
-
className: "gp-flex gp-justify-between gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full",
|
|
23
|
-
children: [
|
|
24
|
-
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
25
|
-
className: "gp-h-10 gp-w-10"
|
|
26
|
-
}),
|
|
27
|
-
/*#__PURE__*/ jsxRuntime.jsxs("section", {
|
|
28
|
-
className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-p-1 gp-gap-1",
|
|
29
|
-
children: [
|
|
30
|
-
/*#__PURE__*/ jsxRuntime.jsx("button", {
|
|
31
|
-
onClick: ()=>setInteractionSelectType('element'),
|
|
32
|
-
className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-[6px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
|
|
33
|
-
children: "Select an element"
|
|
34
|
-
}),
|
|
35
|
-
/*#__PURE__*/ jsxRuntime.jsx("button", {
|
|
36
|
-
onClick: ()=>setInteractionSelectType('page'),
|
|
37
|
-
className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-[6px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
|
|
38
|
-
children: "Choose entire page"
|
|
39
|
-
})
|
|
40
|
-
]
|
|
41
|
-
}),
|
|
42
|
-
/*#__PURE__*/ jsxRuntime.jsx("button", {
|
|
43
|
-
onClick: closeSelectOnPage,
|
|
44
|
-
className: "gp-h-10 gp-w-10 gp-bg-[#3C67FF]/[0.15] gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
|
|
45
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
46
|
-
width: "20",
|
|
47
|
-
height: "20",
|
|
48
|
-
viewBox: "0 0 20 20",
|
|
49
|
-
fill: "none",
|
|
50
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
51
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
52
|
-
d: "M3.94194 3.05806C3.69786 2.81398 3.30214 2.81398 3.05806 3.05806C2.81398 3.30214 2.81398 3.69786 3.05806 3.94194L9.11612 10L3.05806 16.0581C2.81398 16.3021 2.81398 16.6979 3.05806 16.9419C3.30214 17.186 3.69786 17.186 3.94194 16.9419L10 10.8839L16.0581 16.9419C16.3021 17.186 16.6979 17.186 16.9419 16.9419C17.186 16.6979 17.186 16.3021 16.9419 16.0581L10.8839 10L16.9419 3.94194C17.186 3.69786 17.186 3.30214 16.9419 3.05806C16.6979 2.81398 16.3021 2.81398 16.0581 3.05806L10 9.11612L3.94194 3.05806Z",
|
|
53
|
-
fill: "#3C67FF"
|
|
54
|
-
})
|
|
55
|
-
})
|
|
56
|
-
})
|
|
57
|
-
]
|
|
58
|
-
});
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
exports.default = InteractionSelectOnPageHeader;
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { usePageStore } from '@gem-sdk/core';
|
|
3
|
-
|
|
4
|
-
const InteractionSelectOnPageHeader = ()=>{
|
|
5
|
-
const selectType = usePageStore((s)=>s.interactionData?.selectType);
|
|
6
|
-
const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
|
|
7
|
-
const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
|
|
8
|
-
const closeSelectOnPage = ()=>{
|
|
9
|
-
setInteractionIsSelectOnPage(false);
|
|
10
|
-
const event = new CustomEvent('editor:interaction:change-select-on-page', {
|
|
11
|
-
bubbles: true,
|
|
12
|
-
detail: false
|
|
13
|
-
});
|
|
14
|
-
window.dispatchEvent(event);
|
|
15
|
-
};
|
|
16
|
-
console.log('selectType123', selectType);
|
|
17
|
-
return /*#__PURE__*/ jsxs("header", {
|
|
18
|
-
className: "gp-flex gp-justify-between gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full",
|
|
19
|
-
children: [
|
|
20
|
-
/*#__PURE__*/ jsx("div", {
|
|
21
|
-
className: "gp-h-10 gp-w-10"
|
|
22
|
-
}),
|
|
23
|
-
/*#__PURE__*/ jsxs("section", {
|
|
24
|
-
className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-p-1 gp-gap-1",
|
|
25
|
-
children: [
|
|
26
|
-
/*#__PURE__*/ jsx("button", {
|
|
27
|
-
onClick: ()=>setInteractionSelectType('element'),
|
|
28
|
-
className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-[6px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
|
|
29
|
-
children: "Select an element"
|
|
30
|
-
}),
|
|
31
|
-
/*#__PURE__*/ jsx("button", {
|
|
32
|
-
onClick: ()=>setInteractionSelectType('page'),
|
|
33
|
-
className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium gp-flex gp-rounded-[6px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
|
|
34
|
-
children: "Choose entire page"
|
|
35
|
-
})
|
|
36
|
-
]
|
|
37
|
-
}),
|
|
38
|
-
/*#__PURE__*/ jsx("button", {
|
|
39
|
-
onClick: closeSelectOnPage,
|
|
40
|
-
className: "gp-h-10 gp-w-10 gp-bg-[#3C67FF]/[0.15] gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
|
|
41
|
-
children: /*#__PURE__*/ jsx("svg", {
|
|
42
|
-
width: "20",
|
|
43
|
-
height: "20",
|
|
44
|
-
viewBox: "0 0 20 20",
|
|
45
|
-
fill: "none",
|
|
46
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
47
|
-
children: /*#__PURE__*/ jsx("path", {
|
|
48
|
-
d: "M3.94194 3.05806C3.69786 2.81398 3.30214 2.81398 3.05806 3.05806C2.81398 3.30214 2.81398 3.69786 3.05806 3.94194L9.11612 10L3.05806 16.0581C2.81398 16.3021 2.81398 16.6979 3.05806 16.9419C3.30214 17.186 3.69786 17.186 3.94194 16.9419L10 10.8839L16.0581 16.9419C16.3021 17.186 16.6979 17.186 16.9419 16.9419C17.186 16.6979 17.186 16.3021 16.9419 16.0581L10.8839 10L16.9419 3.94194C17.186 3.69786 17.186 3.30214 16.9419 3.05806C16.6979 2.81398 16.3021 2.81398 16.0581 3.05806L10 9.11612L3.94194 3.05806Z",
|
|
49
|
-
fill: "#3C67FF"
|
|
50
|
-
})
|
|
51
|
-
})
|
|
52
|
-
})
|
|
53
|
-
]
|
|
54
|
-
});
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
export { InteractionSelectOnPageHeader as default };
|