@gem-sdk/pages 1.44.0-dev.56 → 1.44.0-staging.57
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.
|
@@ -379,29 +379,25 @@ const Toolbar = ()=>{
|
|
|
379
379
|
countShowOnboarding,
|
|
380
380
|
onCloseOnboarding
|
|
381
381
|
]);
|
|
382
|
-
const
|
|
383
|
-
if (marqueeKey) {
|
|
384
|
-
return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
|
|
385
|
-
}
|
|
386
|
-
if (articleId) {
|
|
387
|
-
return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
388
|
-
}
|
|
389
|
-
return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
390
|
-
};
|
|
391
|
-
const setActiveComponent = react.useCallback(async ({ componentUid, productId, articleId, timeAwait = 600, forceReActive, marqueeKey })=>{
|
|
382
|
+
const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
|
|
392
383
|
if (!componentUid) return;
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
384
|
+
let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`, timeAwait);
|
|
385
|
+
// check element fetch data: product, product list
|
|
386
|
+
if (!$component) {
|
|
387
|
+
const isLoading = document.querySelector(`.gp-loading-placeholder`);
|
|
388
|
+
if (!isLoading) {
|
|
389
|
+
return;
|
|
390
|
+
}
|
|
391
|
+
if (isLoading) {
|
|
392
|
+
// await element onload
|
|
393
|
+
$component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 15000);
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
if (!$component) {
|
|
397
|
+
return;
|
|
404
398
|
}
|
|
399
|
+
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
|
|
400
|
+
if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
|
|
405
401
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
406
402
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
407
403
|
const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
|
|
@@ -409,9 +405,7 @@ const Toolbar = ()=>{
|
|
|
409
405
|
if ($toolbar) {
|
|
410
406
|
currentComponentActive.current = {
|
|
411
407
|
componentUid,
|
|
412
|
-
productId
|
|
413
|
-
articleId,
|
|
414
|
-
marqueeKey
|
|
408
|
+
productId
|
|
415
409
|
};
|
|
416
410
|
$toolbar.removeAttribute('style');
|
|
417
411
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
@@ -430,9 +424,8 @@ const Toolbar = ()=>{
|
|
|
430
424
|
if ($btnAddBottom) {
|
|
431
425
|
$btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
|
|
432
426
|
}
|
|
433
|
-
const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
|
|
434
427
|
// Active same element in product list
|
|
435
|
-
if (productId
|
|
428
|
+
if (productId) {
|
|
436
429
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
437
430
|
if ($relatedElements?.length) {
|
|
438
431
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -460,7 +453,6 @@ const Toolbar = ()=>{
|
|
|
460
453
|
setActiveComponent({
|
|
461
454
|
componentUid,
|
|
462
455
|
productId,
|
|
463
|
-
articleId,
|
|
464
456
|
timeAwait: 2000,
|
|
465
457
|
forceReActive: true
|
|
466
458
|
});
|
|
@@ -525,7 +517,7 @@ const Toolbar = ()=>{
|
|
|
525
517
|
if (!value) {
|
|
526
518
|
return;
|
|
527
519
|
}
|
|
528
|
-
const $component = await waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` :
|
|
520
|
+
const $component = await waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` : ''}[data-uid="${currentComponentActive.current?.componentUid}"]`, 500);
|
|
529
521
|
if ($component) {
|
|
530
522
|
const $parents = $component?.querySelectorAll('[data-toolbar-parent]');
|
|
531
523
|
if ($parents.length) {
|
|
@@ -563,27 +555,18 @@ const Toolbar = ()=>{
|
|
|
563
555
|
const isElementInsideProduct = async ()=>{
|
|
564
556
|
const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
|
|
565
557
|
const $product = $component?.closest('[data-product-id]');
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
const isElementInsideArticle = async ()=>{
|
|
569
|
-
const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
|
|
570
|
-
const $article = $component?.closest('[data-article-id]');
|
|
571
|
-
return !!($article?.getAttribute('data-article-id') || '');
|
|
558
|
+
const productId = $product?.getAttribute('data-product-id') || '';
|
|
559
|
+
return productId ? true : false;
|
|
572
560
|
};
|
|
573
561
|
let productId = '';
|
|
574
|
-
let articleId = '';
|
|
575
562
|
if (await isElementInsideProduct()) {
|
|
576
563
|
productId = currentComponentActive.current?.productId || '';
|
|
577
564
|
}
|
|
578
|
-
if (await isElementInsideArticle()) {
|
|
579
|
-
articleId = currentComponentActive.current?.articleId || '';
|
|
580
|
-
}
|
|
581
565
|
const event = new CustomEvent('editor:toolbar:force-active-component', {
|
|
582
566
|
bubbles: true,
|
|
583
567
|
detail: {
|
|
584
568
|
componentUid: uid,
|
|
585
|
-
productId
|
|
586
|
-
articleId
|
|
569
|
+
productId: productId
|
|
587
570
|
}
|
|
588
571
|
});
|
|
589
572
|
outHover($parent);
|
|
@@ -692,9 +675,7 @@ const Toolbar = ()=>{
|
|
|
692
675
|
if (detail?.componentUid) {
|
|
693
676
|
setActiveComponent({
|
|
694
677
|
componentUid: detail.componentUid,
|
|
695
|
-
productId: detail.productId
|
|
696
|
-
articleId: detail.articleId,
|
|
697
|
-
marqueeKey: detail.marqueeKey
|
|
678
|
+
productId: detail.productId
|
|
698
679
|
});
|
|
699
680
|
} else {
|
|
700
681
|
removeActiveComponent();
|
|
@@ -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", {
|
|
@@ -375,29 +375,25 @@ const Toolbar = ()=>{
|
|
|
375
375
|
countShowOnboarding,
|
|
376
376
|
onCloseOnboarding
|
|
377
377
|
]);
|
|
378
|
-
const
|
|
379
|
-
if (marqueeKey) {
|
|
380
|
-
return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
|
|
381
|
-
}
|
|
382
|
-
if (articleId) {
|
|
383
|
-
return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
384
|
-
}
|
|
385
|
-
return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
386
|
-
};
|
|
387
|
-
const setActiveComponent = useCallback(async ({ componentUid, productId, articleId, timeAwait = 600, forceReActive, marqueeKey })=>{
|
|
378
|
+
const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
|
|
388
379
|
if (!componentUid) return;
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
380
|
+
let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`, timeAwait);
|
|
381
|
+
// check element fetch data: product, product list
|
|
382
|
+
if (!$component) {
|
|
383
|
+
const isLoading = document.querySelector(`.gp-loading-placeholder`);
|
|
384
|
+
if (!isLoading) {
|
|
385
|
+
return;
|
|
386
|
+
}
|
|
387
|
+
if (isLoading) {
|
|
388
|
+
// await element onload
|
|
389
|
+
$component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 15000);
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
if (!$component) {
|
|
393
|
+
return;
|
|
400
394
|
}
|
|
395
|
+
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
|
|
396
|
+
if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
|
|
401
397
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
402
398
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
403
399
|
const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
|
|
@@ -405,9 +401,7 @@ const Toolbar = ()=>{
|
|
|
405
401
|
if ($toolbar) {
|
|
406
402
|
currentComponentActive.current = {
|
|
407
403
|
componentUid,
|
|
408
|
-
productId
|
|
409
|
-
articleId,
|
|
410
|
-
marqueeKey
|
|
404
|
+
productId
|
|
411
405
|
};
|
|
412
406
|
$toolbar.removeAttribute('style');
|
|
413
407
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
@@ -426,9 +420,8 @@ const Toolbar = ()=>{
|
|
|
426
420
|
if ($btnAddBottom) {
|
|
427
421
|
$btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
|
|
428
422
|
}
|
|
429
|
-
const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
|
|
430
423
|
// Active same element in product list
|
|
431
|
-
if (productId
|
|
424
|
+
if (productId) {
|
|
432
425
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
433
426
|
if ($relatedElements?.length) {
|
|
434
427
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -456,7 +449,6 @@ const Toolbar = ()=>{
|
|
|
456
449
|
setActiveComponent({
|
|
457
450
|
componentUid,
|
|
458
451
|
productId,
|
|
459
|
-
articleId,
|
|
460
452
|
timeAwait: 2000,
|
|
461
453
|
forceReActive: true
|
|
462
454
|
});
|
|
@@ -521,7 +513,7 @@ const Toolbar = ()=>{
|
|
|
521
513
|
if (!value) {
|
|
522
514
|
return;
|
|
523
515
|
}
|
|
524
|
-
const $component = await waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` :
|
|
516
|
+
const $component = await waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` : ''}[data-uid="${currentComponentActive.current?.componentUid}"]`, 500);
|
|
525
517
|
if ($component) {
|
|
526
518
|
const $parents = $component?.querySelectorAll('[data-toolbar-parent]');
|
|
527
519
|
if ($parents.length) {
|
|
@@ -559,27 +551,18 @@ const Toolbar = ()=>{
|
|
|
559
551
|
const isElementInsideProduct = async ()=>{
|
|
560
552
|
const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
|
|
561
553
|
const $product = $component?.closest('[data-product-id]');
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
const isElementInsideArticle = async ()=>{
|
|
565
|
-
const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
|
|
566
|
-
const $article = $component?.closest('[data-article-id]');
|
|
567
|
-
return !!($article?.getAttribute('data-article-id') || '');
|
|
554
|
+
const productId = $product?.getAttribute('data-product-id') || '';
|
|
555
|
+
return productId ? true : false;
|
|
568
556
|
};
|
|
569
557
|
let productId = '';
|
|
570
|
-
let articleId = '';
|
|
571
558
|
if (await isElementInsideProduct()) {
|
|
572
559
|
productId = currentComponentActive.current?.productId || '';
|
|
573
560
|
}
|
|
574
|
-
if (await isElementInsideArticle()) {
|
|
575
|
-
articleId = currentComponentActive.current?.articleId || '';
|
|
576
|
-
}
|
|
577
561
|
const event = new CustomEvent('editor:toolbar:force-active-component', {
|
|
578
562
|
bubbles: true,
|
|
579
563
|
detail: {
|
|
580
564
|
componentUid: uid,
|
|
581
|
-
productId
|
|
582
|
-
articleId
|
|
565
|
+
productId: productId
|
|
583
566
|
}
|
|
584
567
|
});
|
|
585
568
|
outHover($parent);
|
|
@@ -688,9 +671,7 @@ const Toolbar = ()=>{
|
|
|
688
671
|
if (detail?.componentUid) {
|
|
689
672
|
setActiveComponent({
|
|
690
673
|
componentUid: detail.componentUid,
|
|
691
|
-
productId: detail.productId
|
|
692
|
-
articleId: detail.articleId,
|
|
693
|
-
marqueeKey: detail.marqueeKey
|
|
674
|
+
productId: detail.productId
|
|
694
675
|
});
|
|
695
676
|
} else {
|
|
696
677
|
removeActiveComponent();
|
|
@@ -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", {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "1.44.0-
|
|
3
|
+
"version": "1.44.0-staging.57",
|
|
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.44.0-
|
|
30
|
-
"@gem-sdk/plugin-cookie-bar": "1.44.0-
|
|
31
|
-
"@gem-sdk/plugin-quick-view": "1.44.0-
|
|
32
|
-
"@gem-sdk/plugin-sticky-add-to-cart": "1.44.0-
|
|
29
|
+
"@gem-sdk/core": "1.44.0-staging.57",
|
|
30
|
+
"@gem-sdk/plugin-cookie-bar": "1.44.0-staging.49",
|
|
31
|
+
"@gem-sdk/plugin-quick-view": "1.44.0-staging.49",
|
|
32
|
+
"@gem-sdk/plugin-sticky-add-to-cart": "1.44.0-staging.49"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"next": ">=13"
|