@gem-sdk/pages 1.45.0 → 1.46.0-staging.1
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.
|
@@ -43,7 +43,7 @@ const PopupManager = ()=>{
|
|
|
43
43
|
}),
|
|
44
44
|
role: "button",
|
|
45
45
|
"aria-hidden": "true",
|
|
46
|
-
onClick: ()=>setModalActive(item?.uid),
|
|
46
|
+
onClick: ()=>setModalActive(item?.uid, true),
|
|
47
47
|
style: {
|
|
48
48
|
'--d': display?.desktop ? 'inline-flex' : 'none',
|
|
49
49
|
'--d-tablet': display?.tablet ? 'inline-flex' : 'none',
|
|
@@ -379,23 +379,30 @@ const Toolbar = ()=>{
|
|
|
379
379
|
countShowOnboarding,
|
|
380
380
|
onCloseOnboarding
|
|
381
381
|
]);
|
|
382
|
-
const getSelectorComponent = ({ componentUid, productId, articleId })=>{
|
|
382
|
+
const getSelectorComponent = ({ componentUid, productId, articleId, marqueeKey })=>{
|
|
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
|
+
}
|
|
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 =
|
|
391
|
+
const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 600, articleId, forceReActive, marqueeKey })=>{
|
|
389
392
|
if (!componentUid) return;
|
|
390
393
|
const selector = getSelectorComponent({
|
|
391
394
|
componentUid,
|
|
392
395
|
productId,
|
|
393
|
-
articleId
|
|
396
|
+
articleId,
|
|
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 && articleId == currentComponentActive.current?.articleId) return;
|
|
401
|
+
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
|
|
398
402
|
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
|
+
}
|
|
399
406
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
400
407
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
401
408
|
const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
|
|
@@ -404,7 +411,8 @@ const Toolbar = ()=>{
|
|
|
404
411
|
currentComponentActive.current = {
|
|
405
412
|
componentUid,
|
|
406
413
|
productId,
|
|
407
|
-
articleId
|
|
414
|
+
articleId,
|
|
415
|
+
marqueeKey
|
|
408
416
|
};
|
|
409
417
|
$toolbar.removeAttribute('style');
|
|
410
418
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
@@ -423,8 +431,9 @@ const Toolbar = ()=>{
|
|
|
423
431
|
if ($btnAddBottom) {
|
|
424
432
|
$btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
|
|
425
433
|
}
|
|
434
|
+
const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
|
|
426
435
|
// Active same element in product list
|
|
427
|
-
if (productId || articleId) {
|
|
436
|
+
if (productId || articleId || isChildOfMarquee) {
|
|
428
437
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
429
438
|
if ($relatedElements?.length) {
|
|
430
439
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -685,7 +694,8 @@ const Toolbar = ()=>{
|
|
|
685
694
|
setActiveComponent({
|
|
686
695
|
componentUid: detail.componentUid,
|
|
687
696
|
productId: detail.productId,
|
|
688
|
-
articleId: detail.articleId
|
|
697
|
+
articleId: detail.articleId,
|
|
698
|
+
marqueeKey: detail.marqueeKey
|
|
689
699
|
});
|
|
690
700
|
} else {
|
|
691
701
|
removeActiveComponent();
|
|
@@ -39,7 +39,7 @@ const PopupManager = ()=>{
|
|
|
39
39
|
}),
|
|
40
40
|
role: "button",
|
|
41
41
|
"aria-hidden": "true",
|
|
42
|
-
onClick: ()=>setModalActive(item?.uid),
|
|
42
|
+
onClick: ()=>setModalActive(item?.uid, true),
|
|
43
43
|
style: {
|
|
44
44
|
'--d': display?.desktop ? 'inline-flex' : 'none',
|
|
45
45
|
'--d-tablet': display?.tablet ? 'inline-flex' : 'none',
|
|
@@ -375,23 +375,30 @@ const Toolbar = ()=>{
|
|
|
375
375
|
countShowOnboarding,
|
|
376
376
|
onCloseOnboarding
|
|
377
377
|
]);
|
|
378
|
-
const getSelectorComponent = ({ componentUid, productId, articleId })=>{
|
|
378
|
+
const getSelectorComponent = ({ componentUid, productId, articleId, marqueeKey })=>{
|
|
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
|
+
}
|
|
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 =
|
|
387
|
+
const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 600, articleId, forceReActive, marqueeKey })=>{
|
|
385
388
|
if (!componentUid) return;
|
|
386
389
|
const selector = getSelectorComponent({
|
|
387
390
|
componentUid,
|
|
388
391
|
productId,
|
|
389
|
-
articleId
|
|
392
|
+
articleId,
|
|
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 && articleId == currentComponentActive.current?.articleId) return;
|
|
397
|
+
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
|
|
394
398
|
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
|
+
}
|
|
395
402
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
396
403
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
397
404
|
const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
|
|
@@ -400,7 +407,8 @@ const Toolbar = ()=>{
|
|
|
400
407
|
currentComponentActive.current = {
|
|
401
408
|
componentUid,
|
|
402
409
|
productId,
|
|
403
|
-
articleId
|
|
410
|
+
articleId,
|
|
411
|
+
marqueeKey
|
|
404
412
|
};
|
|
405
413
|
$toolbar.removeAttribute('style');
|
|
406
414
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
@@ -419,8 +427,9 @@ const Toolbar = ()=>{
|
|
|
419
427
|
if ($btnAddBottom) {
|
|
420
428
|
$btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
|
|
421
429
|
}
|
|
430
|
+
const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
|
|
422
431
|
// Active same element in product list
|
|
423
|
-
if (productId || articleId) {
|
|
432
|
+
if (productId || articleId || isChildOfMarquee) {
|
|
424
433
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
425
434
|
if ($relatedElements?.length) {
|
|
426
435
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -681,7 +690,8 @@ const Toolbar = ()=>{
|
|
|
681
690
|
setActiveComponent({
|
|
682
691
|
componentUid: detail.componentUid,
|
|
683
692
|
productId: detail.productId,
|
|
684
|
-
articleId: detail.articleId
|
|
693
|
+
articleId: detail.articleId,
|
|
694
|
+
marqueeKey: detail.marqueeKey
|
|
685
695
|
});
|
|
686
696
|
} else {
|
|
687
697
|
removeActiveComponent();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.46.0-staging.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"next": "latest"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@gem-sdk/core": "1.
|
|
29
|
+
"@gem-sdk/core": "1.46.0-staging.1",
|
|
30
30
|
"@gem-sdk/plugin-cookie-bar": "1.45.0",
|
|
31
31
|
"@gem-sdk/plugin-quick-view": "1.45.0",
|
|
32
32
|
"@gem-sdk/plugin-sticky-add-to-cart": "1.45.0"
|