@gem-sdk/pages 1.41.0-dev.14 → 1.41.0-dev.16
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,25 +379,25 @@ const Toolbar = ()=>{
|
|
|
379
379
|
countShowOnboarding,
|
|
380
380
|
onCloseOnboarding
|
|
381
381
|
]);
|
|
382
|
-
const
|
|
383
|
-
if (
|
|
384
|
-
|
|
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
|
-
}
|
|
382
|
+
const getSelectorComponent = ({ componentUid, productId, marqueeKey })=>{
|
|
383
|
+
if (marqueeKey) {
|
|
384
|
+
return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
|
|
395
385
|
}
|
|
396
|
-
|
|
397
|
-
|
|
386
|
+
return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
387
|
+
};
|
|
388
|
+
const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 600, forceReActive, marqueeKey })=>{
|
|
389
|
+
if (!componentUid) return;
|
|
390
|
+
const selector = getSelectorComponent({
|
|
391
|
+
componentUid,
|
|
392
|
+
productId,
|
|
393
|
+
marqueeKey
|
|
394
|
+
});
|
|
395
|
+
const $component = await waitForElementToExist(selector, timeAwait);
|
|
396
|
+
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) {
|
|
399
|
+
removeActiveComponent();
|
|
398
400
|
}
|
|
399
|
-
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
|
|
400
|
-
if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
|
|
401
401
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
402
402
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
403
403
|
const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
|
|
@@ -405,7 +405,8 @@ const Toolbar = ()=>{
|
|
|
405
405
|
if ($toolbar) {
|
|
406
406
|
currentComponentActive.current = {
|
|
407
407
|
componentUid,
|
|
408
|
-
productId
|
|
408
|
+
productId,
|
|
409
|
+
marqueeKey
|
|
409
410
|
};
|
|
410
411
|
$toolbar.removeAttribute('style');
|
|
411
412
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
@@ -424,8 +425,9 @@ const Toolbar = ()=>{
|
|
|
424
425
|
if ($btnAddBottom) {
|
|
425
426
|
$btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
|
|
426
427
|
}
|
|
428
|
+
const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
|
|
427
429
|
// Active same element in product list
|
|
428
|
-
if (productId) {
|
|
430
|
+
if (productId || isChildOfMarquee) {
|
|
429
431
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
430
432
|
if ($relatedElements?.length) {
|
|
431
433
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -480,6 +482,7 @@ const Toolbar = ()=>{
|
|
|
480
482
|
const componentUid = currentComponentActive.current?.componentUid;
|
|
481
483
|
const productId = currentComponentActive.current?.productId;
|
|
482
484
|
const $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 500);
|
|
485
|
+
console.log(' $component', $component);
|
|
483
486
|
if ($component) {
|
|
484
487
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
485
488
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
@@ -675,7 +678,8 @@ const Toolbar = ()=>{
|
|
|
675
678
|
if (detail?.componentUid) {
|
|
676
679
|
setActiveComponent({
|
|
677
680
|
componentUid: detail.componentUid,
|
|
678
|
-
productId: detail.productId
|
|
681
|
+
productId: detail.productId,
|
|
682
|
+
marqueeKey: detail.marqueeKey
|
|
679
683
|
});
|
|
680
684
|
} else {
|
|
681
685
|
removeActiveComponent();
|
|
@@ -375,25 +375,25 @@ const Toolbar = ()=>{
|
|
|
375
375
|
countShowOnboarding,
|
|
376
376
|
onCloseOnboarding
|
|
377
377
|
]);
|
|
378
|
-
const
|
|
379
|
-
if (
|
|
380
|
-
|
|
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
|
-
}
|
|
378
|
+
const getSelectorComponent = ({ componentUid, productId, marqueeKey })=>{
|
|
379
|
+
if (marqueeKey) {
|
|
380
|
+
return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
|
|
391
381
|
}
|
|
392
|
-
|
|
393
|
-
|
|
382
|
+
return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
383
|
+
};
|
|
384
|
+
const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 600, forceReActive, marqueeKey })=>{
|
|
385
|
+
if (!componentUid) return;
|
|
386
|
+
const selector = getSelectorComponent({
|
|
387
|
+
componentUid,
|
|
388
|
+
productId,
|
|
389
|
+
marqueeKey
|
|
390
|
+
});
|
|
391
|
+
const $component = await waitForElementToExist(selector, timeAwait);
|
|
392
|
+
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) {
|
|
395
|
+
removeActiveComponent();
|
|
394
396
|
}
|
|
395
|
-
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
|
|
396
|
-
if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
|
|
397
397
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
398
398
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
399
399
|
const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
|
|
@@ -401,7 +401,8 @@ const Toolbar = ()=>{
|
|
|
401
401
|
if ($toolbar) {
|
|
402
402
|
currentComponentActive.current = {
|
|
403
403
|
componentUid,
|
|
404
|
-
productId
|
|
404
|
+
productId,
|
|
405
|
+
marqueeKey
|
|
405
406
|
};
|
|
406
407
|
$toolbar.removeAttribute('style');
|
|
407
408
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
@@ -420,8 +421,9 @@ const Toolbar = ()=>{
|
|
|
420
421
|
if ($btnAddBottom) {
|
|
421
422
|
$btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
|
|
422
423
|
}
|
|
424
|
+
const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
|
|
423
425
|
// Active same element in product list
|
|
424
|
-
if (productId) {
|
|
426
|
+
if (productId || isChildOfMarquee) {
|
|
425
427
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
426
428
|
if ($relatedElements?.length) {
|
|
427
429
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -476,6 +478,7 @@ const Toolbar = ()=>{
|
|
|
476
478
|
const componentUid = currentComponentActive.current?.componentUid;
|
|
477
479
|
const productId = currentComponentActive.current?.productId;
|
|
478
480
|
const $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 500);
|
|
481
|
+
console.log(' $component', $component);
|
|
479
482
|
if ($component) {
|
|
480
483
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
481
484
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
@@ -671,7 +674,8 @@ const Toolbar = ()=>{
|
|
|
671
674
|
if (detail?.componentUid) {
|
|
672
675
|
setActiveComponent({
|
|
673
676
|
componentUid: detail.componentUid,
|
|
674
|
-
productId: detail.productId
|
|
677
|
+
productId: detail.productId,
|
|
678
|
+
marqueeKey: detail.marqueeKey
|
|
675
679
|
});
|
|
676
680
|
} else {
|
|
677
681
|
removeActiveComponent();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "1.41.0-dev.
|
|
3
|
+
"version": "1.41.0-dev.16",
|
|
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.41.0-dev.
|
|
29
|
+
"@gem-sdk/core": "1.41.0-dev.16",
|
|
30
30
|
"@gem-sdk/plugin-cookie-bar": "1.41.0-staging.13",
|
|
31
31
|
"@gem-sdk/plugin-quick-view": "1.41.0-staging.13",
|
|
32
32
|
"@gem-sdk/plugin-sticky-add-to-cart": "1.41.0-staging.13"
|