@gem-sdk/pages 1.43.0-dev.93 → 1.43.0-dev.94
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,23 +379,27 @@ const Toolbar = ()=>{
|
|
|
379
379
|
countShowOnboarding,
|
|
380
380
|
onCloseOnboarding
|
|
381
381
|
]);
|
|
382
|
-
const getSelectorComponent = ({ componentUid, productId, marqueeKey })=>{
|
|
382
|
+
const getSelectorComponent = ({ componentUid, productId, articleId, marqueeKey })=>{
|
|
383
383
|
if (marqueeKey) {
|
|
384
384
|
return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
|
|
385
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
|
+
}
|
|
386
389
|
return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
387
390
|
};
|
|
388
|
-
const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 600, forceReActive, marqueeKey })=>{
|
|
391
|
+
const setActiveComponent = react.useCallback(async ({ componentUid, productId, articleId, timeAwait = 600, forceReActive, marqueeKey })=>{
|
|
389
392
|
if (!componentUid) return;
|
|
390
393
|
const selector = getSelectorComponent({
|
|
391
394
|
componentUid,
|
|
392
395
|
productId,
|
|
396
|
+
articleId,
|
|
393
397
|
marqueeKey
|
|
394
398
|
});
|
|
395
399
|
const $component = await waitForElementToExist(selector, timeAwait);
|
|
396
400
|
if (!$component) return;
|
|
397
|
-
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
|
|
398
|
-
if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
|
|
401
|
+
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
|
|
402
|
+
if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
|
|
399
403
|
removeActiveComponent();
|
|
400
404
|
}
|
|
401
405
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
@@ -406,6 +410,7 @@ const Toolbar = ()=>{
|
|
|
406
410
|
currentComponentActive.current = {
|
|
407
411
|
componentUid,
|
|
408
412
|
productId,
|
|
413
|
+
articleId,
|
|
409
414
|
marqueeKey
|
|
410
415
|
};
|
|
411
416
|
$toolbar.removeAttribute('style');
|
|
@@ -427,7 +432,7 @@ const Toolbar = ()=>{
|
|
|
427
432
|
}
|
|
428
433
|
const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
|
|
429
434
|
// Active same element in product list
|
|
430
|
-
if (productId || isChildOfMarquee) {
|
|
435
|
+
if (productId || isChildOfMarquee || articleId) {
|
|
431
436
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
432
437
|
if ($relatedElements?.length) {
|
|
433
438
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -455,6 +460,7 @@ const Toolbar = ()=>{
|
|
|
455
460
|
setActiveComponent({
|
|
456
461
|
componentUid,
|
|
457
462
|
productId,
|
|
463
|
+
articleId,
|
|
458
464
|
timeAwait: 2000,
|
|
459
465
|
forceReActive: true
|
|
460
466
|
});
|
|
@@ -557,18 +563,27 @@ const Toolbar = ()=>{
|
|
|
557
563
|
const isElementInsideProduct = async ()=>{
|
|
558
564
|
const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
|
|
559
565
|
const $product = $component?.closest('[data-product-id]');
|
|
560
|
-
|
|
561
|
-
|
|
566
|
+
return !!($product?.getAttribute('data-product-id') || '');
|
|
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') || '');
|
|
562
572
|
};
|
|
563
573
|
let productId = '';
|
|
574
|
+
let articleId = '';
|
|
564
575
|
if (await isElementInsideProduct()) {
|
|
565
576
|
productId = currentComponentActive.current?.productId || '';
|
|
566
577
|
}
|
|
578
|
+
if (await isElementInsideArticle()) {
|
|
579
|
+
articleId = currentComponentActive.current?.articleId || '';
|
|
580
|
+
}
|
|
567
581
|
const event = new CustomEvent('editor:toolbar:force-active-component', {
|
|
568
582
|
bubbles: true,
|
|
569
583
|
detail: {
|
|
570
584
|
componentUid: uid,
|
|
571
|
-
productId
|
|
585
|
+
productId,
|
|
586
|
+
articleId
|
|
572
587
|
}
|
|
573
588
|
});
|
|
574
589
|
outHover($parent);
|
|
@@ -678,6 +693,7 @@ const Toolbar = ()=>{
|
|
|
678
693
|
setActiveComponent({
|
|
679
694
|
componentUid: detail.componentUid,
|
|
680
695
|
productId: detail.productId,
|
|
696
|
+
articleId: detail.articleId,
|
|
681
697
|
marqueeKey: detail.marqueeKey
|
|
682
698
|
});
|
|
683
699
|
} else {
|
|
@@ -375,23 +375,27 @@ const Toolbar = ()=>{
|
|
|
375
375
|
countShowOnboarding,
|
|
376
376
|
onCloseOnboarding
|
|
377
377
|
]);
|
|
378
|
-
const getSelectorComponent = ({ componentUid, productId, marqueeKey })=>{
|
|
378
|
+
const getSelectorComponent = ({ componentUid, productId, articleId, marqueeKey })=>{
|
|
379
379
|
if (marqueeKey) {
|
|
380
380
|
return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
|
|
381
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
|
+
}
|
|
382
385
|
return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
383
386
|
};
|
|
384
|
-
const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 600, forceReActive, marqueeKey })=>{
|
|
387
|
+
const setActiveComponent = useCallback(async ({ componentUid, productId, articleId, timeAwait = 600, forceReActive, marqueeKey })=>{
|
|
385
388
|
if (!componentUid) return;
|
|
386
389
|
const selector = getSelectorComponent({
|
|
387
390
|
componentUid,
|
|
388
391
|
productId,
|
|
392
|
+
articleId,
|
|
389
393
|
marqueeKey
|
|
390
394
|
});
|
|
391
395
|
const $component = await waitForElementToExist(selector, timeAwait);
|
|
392
396
|
if (!$component) return;
|
|
393
|
-
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
|
|
394
|
-
if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
|
|
397
|
+
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
|
|
398
|
+
if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
|
|
395
399
|
removeActiveComponent();
|
|
396
400
|
}
|
|
397
401
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
@@ -402,6 +406,7 @@ const Toolbar = ()=>{
|
|
|
402
406
|
currentComponentActive.current = {
|
|
403
407
|
componentUid,
|
|
404
408
|
productId,
|
|
409
|
+
articleId,
|
|
405
410
|
marqueeKey
|
|
406
411
|
};
|
|
407
412
|
$toolbar.removeAttribute('style');
|
|
@@ -423,7 +428,7 @@ const Toolbar = ()=>{
|
|
|
423
428
|
}
|
|
424
429
|
const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
|
|
425
430
|
// Active same element in product list
|
|
426
|
-
if (productId || isChildOfMarquee) {
|
|
431
|
+
if (productId || isChildOfMarquee || articleId) {
|
|
427
432
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
428
433
|
if ($relatedElements?.length) {
|
|
429
434
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -451,6 +456,7 @@ const Toolbar = ()=>{
|
|
|
451
456
|
setActiveComponent({
|
|
452
457
|
componentUid,
|
|
453
458
|
productId,
|
|
459
|
+
articleId,
|
|
454
460
|
timeAwait: 2000,
|
|
455
461
|
forceReActive: true
|
|
456
462
|
});
|
|
@@ -553,18 +559,27 @@ const Toolbar = ()=>{
|
|
|
553
559
|
const isElementInsideProduct = async ()=>{
|
|
554
560
|
const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
|
|
555
561
|
const $product = $component?.closest('[data-product-id]');
|
|
556
|
-
|
|
557
|
-
|
|
562
|
+
return !!($product?.getAttribute('data-product-id') || '');
|
|
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') || '');
|
|
558
568
|
};
|
|
559
569
|
let productId = '';
|
|
570
|
+
let articleId = '';
|
|
560
571
|
if (await isElementInsideProduct()) {
|
|
561
572
|
productId = currentComponentActive.current?.productId || '';
|
|
562
573
|
}
|
|
574
|
+
if (await isElementInsideArticle()) {
|
|
575
|
+
articleId = currentComponentActive.current?.articleId || '';
|
|
576
|
+
}
|
|
563
577
|
const event = new CustomEvent('editor:toolbar:force-active-component', {
|
|
564
578
|
bubbles: true,
|
|
565
579
|
detail: {
|
|
566
580
|
componentUid: uid,
|
|
567
|
-
productId
|
|
581
|
+
productId,
|
|
582
|
+
articleId
|
|
568
583
|
}
|
|
569
584
|
});
|
|
570
585
|
outHover($parent);
|
|
@@ -674,6 +689,7 @@ const Toolbar = ()=>{
|
|
|
674
689
|
setActiveComponent({
|
|
675
690
|
componentUid: detail.componentUid,
|
|
676
691
|
productId: detail.productId,
|
|
692
|
+
articleId: detail.articleId,
|
|
677
693
|
marqueeKey: detail.marqueeKey
|
|
678
694
|
});
|
|
679
695
|
} else {
|