@gem-sdk/pages 1.41.0-dev.14 → 1.41.0-dev.19

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.
Files changed (5) hide show
  1. package/dist/cjs/components/builder/Toolbar.js +24 -20
  2. package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js +2 -2
  3. package/dist/esm/components/builder/Toolbar.js +24 -20
  4. package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js +2 -2
  5. package/package.json +2 -2
package/dist/cjs/components/builder/Toolbar.js CHANGED
@@ -379,25 +379,25 @@ const Toolbar = ()=>{
379
379
  countShowOnboarding,
380
380
  onCloseOnboarding
381
381
  ]);
382
- const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
383
- if (!componentUid) return;
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
- }
382
+ const getSelectorComponent = ({ componentUid, productId, marqueeKey })=>{
383
+ if (marqueeKey) {
384
+ return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
395
385
  }
396
- if (!$component) {
397
- return;
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();
package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js CHANGED
@@ -100,12 +100,12 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
100
100
  }),
101
101
  ACTIONS_DATA.map((action)=>{
102
102
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
103
- className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] 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'}`,
103
+ className: `gp-relative gp-mx-1 gp-h-[60px] mobile:gp-h-[72px] gp-w-[172px] 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'}`,
104
104
  id: action.id,
105
105
  "aria-hidden": true,
106
106
  children: [
107
107
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
108
- className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
108
+ className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121] mobile:gp-flex-col mobile:gp-items-center mobile:gp-gap-0",
109
109
  children: [
110
110
  action.title,
111
111
  action.hasAILogo && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
package/dist/esm/components/builder/Toolbar.js CHANGED
@@ -375,25 +375,25 @@ const Toolbar = ()=>{
375
375
  countShowOnboarding,
376
376
  onCloseOnboarding
377
377
  ]);
378
- const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
379
- if (!componentUid) return;
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
- }
378
+ const getSelectorComponent = ({ componentUid, productId, marqueeKey })=>{
379
+ if (marqueeKey) {
380
+ return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
391
381
  }
392
- if (!$component) {
393
- return;
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/dist/esm/components/image-to-layout/AddSectionImageToLayout.js CHANGED
@@ -96,12 +96,12 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
96
96
  }),
97
97
  ACTIONS_DATA.map((action)=>{
98
98
  return /*#__PURE__*/ jsxs("div", {
99
- className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] 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'}`,
99
+ className: `gp-relative gp-mx-1 gp-h-[60px] mobile:gp-h-[72px] gp-w-[172px] 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'}`,
100
100
  id: action.id,
101
101
  "aria-hidden": true,
102
102
  children: [
103
103
  /*#__PURE__*/ jsxs("div", {
104
- className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
104
+ className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121] mobile:gp-flex-col mobile:gp-items-center mobile:gp-gap-0",
105
105
  children: [
106
106
  action.title,
107
107
  action.hasAILogo && /*#__PURE__*/ jsxs("svg", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.41.0-dev.14",
3
+ "version": "1.41.0-dev.19",
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.14",
29
+ "@gem-sdk/core": "1.41.0-dev.18",
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"