@gem-sdk/pages 1.23.0-staging.186 → 1.23.0-staging.206

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 +64 -31
  2. package/dist/cjs/components/builder/toolbar/Onboarding.js +2 -1
  3. package/dist/esm/components/builder/Toolbar.js +64 -31
  4. package/dist/esm/components/builder/toolbar/Onboarding.js +2 -1
  5. package/package.json +2 -2
package/dist/cjs/components/builder/Toolbar.js CHANGED
@@ -54,6 +54,15 @@ const Toolbar = ()=>{
54
54
  $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
55
55
  }
56
56
  }
57
+ // fix Popup overflow right position
58
+ const popupEl = $component?.closest('[aria-label="Dialog body"]');
59
+ if (popupEl) {
60
+ const rectPopupEl = popupEl.getBoundingClientRect();
61
+ const popupElRightPosition = rectPopupEl.left + rectPopupEl.width - 20;
62
+ if (rectComponent.left + rect.width > popupElRightPosition) {
63
+ $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
64
+ }
65
+ }
57
66
  };
58
67
  const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
59
68
  if (!$component && !componentUid) return;
@@ -293,39 +302,53 @@ const Toolbar = ()=>{
293
302
  }
294
303
  }
295
304
  }, []);
305
+ const calculateOnboardingPosition = ()=>{
306
+ const toolbar = document.querySelector('[data-toolbar-active]');
307
+ const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
308
+ if (toolbar && toolbarOnboading) {
309
+ toolbarOnboading?.removeAttribute('data-onboarding-active');
310
+ setTimeout(()=>{
311
+ const rect = toolbar.getBoundingClientRect();
312
+ const rectTop = rect.top || 0;
313
+ const rectOnboading = toolbarOnboading?.getBoundingClientRect();
314
+ const onboardingHeight = rectOnboading?.height || 0;
315
+ const $iframe = parent.document.querySelector('.iframe');
316
+ const $iframeWin = $iframe?.contentWindow;
317
+ const iframeWinScrollY = $iframeWin?.scrollY || 0;
318
+ const iframeHeight = $iframe?.clientHeight || 0;
319
+ if (rectTop + onboardingHeight > iframeHeight) {
320
+ const oboardingTop = rect.top + iframeWinScrollY - onboardingHeight - 8;
321
+ toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
322
+ setOnboardingPosition('top');
323
+ if ($iframeWin && oboardingTop < rect.top + iframeWinScrollY) {
324
+ setTimeout(()=>{
325
+ const toTop = oboardingTop - 20;
326
+ $iframeWin.scrollTo({
327
+ top: toTop,
328
+ behavior: 'smooth'
329
+ });
330
+ }, 200);
331
+ }
332
+ } else {
333
+ const oboardingTop = rect.top + iframeWinScrollY + rect.height + 8;
334
+ toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
335
+ setOnboardingPosition('bottom');
336
+ }
337
+ setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
338
+ toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
339
+ }, 100);
340
+ }
341
+ };
296
342
  const setToolbarOnboarding = react.useCallback(({ $component })=>{
297
343
  if (!$component) return;
298
344
  if (isSection($component) || isPopup($component) || isSticky($component)) return;
299
- const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
300
- if (toolbar) {
301
- const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
302
- // only show one time
303
- if (countShowOnboarding == 0) {
304
- setTimeout(()=>{
305
- const rect = toolbar.getBoundingClientRect();
306
- const rectTop = rect.top || 0;
307
- const rectOnboading = toolbarOnboading?.getBoundingClientRect();
308
- const onboardingHeight = rectOnboading?.height || 0;
309
- const $iframe = parent.document.querySelector('.iframe');
310
- const $iframeWin = $iframe?.contentWindow;
311
- const iframeWinScrollY = $iframeWin?.scrollY || 0;
312
- const iframeHeight = $iframe?.clientHeight || 0;
313
- if (rectTop + onboardingHeight > iframeHeight) {
314
- const _top = rect.top + iframeWinScrollY - onboardingHeight - 8;
315
- toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
316
- setOnboardingPosition('top');
317
- } else {
318
- const _top = rect.top + iframeWinScrollY + rect.height + 8;
319
- toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
320
- setOnboardingPosition('bottom');
321
- }
322
- setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
323
- toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
324
- }, 250);
325
- } else {
326
- onCloseOnboarding();
327
- toolbarOnboading?.removeAttribute('data-onboarding-active');
328
- }
345
+ const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
346
+ // only show one time
347
+ if (countShowOnboarding == 0) {
348
+ calculateOnboardingPosition();
349
+ } else {
350
+ onCloseOnboarding();
351
+ toolbarOnboading?.removeAttribute('data-onboarding-active');
329
352
  }
330
353
  }, [
331
354
  countShowOnboarding,
@@ -712,6 +735,13 @@ const Toolbar = ()=>{
712
735
  setIsOnboarding(true);
713
736
  }
714
737
  }, []);
738
+ const onWindowResize = react.useCallback(()=>{
739
+ if (isOnboarding) {
740
+ calculateOnboardingPosition();
741
+ }
742
+ }, [
743
+ isOnboarding
744
+ ]);
715
745
  /* Register event */ react.useEffect(()=>{
716
746
  document.addEventListener('mousemove', onMouseMove);
717
747
  window.addEventListener('editor:active-component', onActiveComponent);
@@ -722,6 +752,7 @@ const Toolbar = ()=>{
722
752
  window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
723
753
  window.addEventListener('editor:hover-component', onHoverComponent);
724
754
  window.addEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
755
+ window.addEventListener('resize', onWindowResize);
725
756
  return ()=>{
726
757
  document.removeEventListener('mousemove', onMouseMove);
727
758
  window.removeEventListener('editor:active-component', onActiveComponent);
@@ -732,6 +763,7 @@ const Toolbar = ()=>{
732
763
  window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
733
764
  window.removeEventListener('editor:hover-component', onHoverComponent);
734
765
  window.removeEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
766
+ window.removeEventListener('resize', onWindowResize);
735
767
  };
736
768
  }, [
737
769
  onMouseMove,
@@ -742,7 +774,8 @@ const Toolbar = ()=>{
742
774
  onShowParents,
743
775
  onResizeSpacing,
744
776
  onHoverComponent,
745
- onToolbarOnboarding
777
+ onToolbarOnboarding,
778
+ onWindowResize
746
779
  ]);
747
780
  return isOnboarding && /*#__PURE__*/ jsxRuntime.jsx(Onboarding.default, {
748
781
  enable: true,
package/dist/cjs/components/builder/toolbar/Onboarding.js CHANGED
@@ -27,6 +27,7 @@ const Onboarding = ({ enable, position, onCloseOnboarding })=>{
27
27
  ]
28
28
  });
29
29
  };
30
+ const MemoVideo = /*#__PURE__*/ react.memo(Video);
30
31
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
31
32
  "data-toolbar-onboarding": true,
32
33
  "data-toolbar-onboarding-position": position,
@@ -86,7 +87,7 @@ const Onboarding = ({ enable, position, onCloseOnboarding })=>{
86
87
  ]
87
88
  })
88
89
  }),
89
- /*#__PURE__*/ jsxRuntime.jsx(Video, {}),
90
+ /*#__PURE__*/ jsxRuntime.jsx(MemoVideo, {}),
90
91
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
91
92
  "data-content": true,
92
93
  children: [
package/dist/esm/components/builder/Toolbar.js CHANGED
@@ -50,6 +50,15 @@ const Toolbar = ()=>{
50
50
  $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
51
51
  }
52
52
  }
53
+ // fix Popup overflow right position
54
+ const popupEl = $component?.closest('[aria-label="Dialog body"]');
55
+ if (popupEl) {
56
+ const rectPopupEl = popupEl.getBoundingClientRect();
57
+ const popupElRightPosition = rectPopupEl.left + rectPopupEl.width - 20;
58
+ if (rectComponent.left + rect.width > popupElRightPosition) {
59
+ $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
60
+ }
61
+ }
53
62
  };
54
63
  const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
55
64
  if (!$component && !componentUid) return;
@@ -289,39 +298,53 @@ const Toolbar = ()=>{
289
298
  }
290
299
  }
291
300
  }, []);
301
+ const calculateOnboardingPosition = ()=>{
302
+ const toolbar = document.querySelector('[data-toolbar-active]');
303
+ const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
304
+ if (toolbar && toolbarOnboading) {
305
+ toolbarOnboading?.removeAttribute('data-onboarding-active');
306
+ setTimeout(()=>{
307
+ const rect = toolbar.getBoundingClientRect();
308
+ const rectTop = rect.top || 0;
309
+ const rectOnboading = toolbarOnboading?.getBoundingClientRect();
310
+ const onboardingHeight = rectOnboading?.height || 0;
311
+ const $iframe = parent.document.querySelector('.iframe');
312
+ const $iframeWin = $iframe?.contentWindow;
313
+ const iframeWinScrollY = $iframeWin?.scrollY || 0;
314
+ const iframeHeight = $iframe?.clientHeight || 0;
315
+ if (rectTop + onboardingHeight > iframeHeight) {
316
+ const oboardingTop = rect.top + iframeWinScrollY - onboardingHeight - 8;
317
+ toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
318
+ setOnboardingPosition('top');
319
+ if ($iframeWin && oboardingTop < rect.top + iframeWinScrollY) {
320
+ setTimeout(()=>{
321
+ const toTop = oboardingTop - 20;
322
+ $iframeWin.scrollTo({
323
+ top: toTop,
324
+ behavior: 'smooth'
325
+ });
326
+ }, 200);
327
+ }
328
+ } else {
329
+ const oboardingTop = rect.top + iframeWinScrollY + rect.height + 8;
330
+ toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
331
+ setOnboardingPosition('bottom');
332
+ }
333
+ setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
334
+ toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
335
+ }, 100);
336
+ }
337
+ };
292
338
  const setToolbarOnboarding = useCallback(({ $component })=>{
293
339
  if (!$component) return;
294
340
  if (isSection($component) || isPopup($component) || isSticky($component)) return;
295
- const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
296
- if (toolbar) {
297
- const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
298
- // only show one time
299
- if (countShowOnboarding == 0) {
300
- setTimeout(()=>{
301
- const rect = toolbar.getBoundingClientRect();
302
- const rectTop = rect.top || 0;
303
- const rectOnboading = toolbarOnboading?.getBoundingClientRect();
304
- const onboardingHeight = rectOnboading?.height || 0;
305
- const $iframe = parent.document.querySelector('.iframe');
306
- const $iframeWin = $iframe?.contentWindow;
307
- const iframeWinScrollY = $iframeWin?.scrollY || 0;
308
- const iframeHeight = $iframe?.clientHeight || 0;
309
- if (rectTop + onboardingHeight > iframeHeight) {
310
- const _top = rect.top + iframeWinScrollY - onboardingHeight - 8;
311
- toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
312
- setOnboardingPosition('top');
313
- } else {
314
- const _top = rect.top + iframeWinScrollY + rect.height + 8;
315
- toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
316
- setOnboardingPosition('bottom');
317
- }
318
- setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
319
- toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
320
- }, 250);
321
- } else {
322
- onCloseOnboarding();
323
- toolbarOnboading?.removeAttribute('data-onboarding-active');
324
- }
341
+ const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
342
+ // only show one time
343
+ if (countShowOnboarding == 0) {
344
+ calculateOnboardingPosition();
345
+ } else {
346
+ onCloseOnboarding();
347
+ toolbarOnboading?.removeAttribute('data-onboarding-active');
325
348
  }
326
349
  }, [
327
350
  countShowOnboarding,
@@ -708,6 +731,13 @@ const Toolbar = ()=>{
708
731
  setIsOnboarding(true);
709
732
  }
710
733
  }, []);
734
+ const onWindowResize = useCallback(()=>{
735
+ if (isOnboarding) {
736
+ calculateOnboardingPosition();
737
+ }
738
+ }, [
739
+ isOnboarding
740
+ ]);
711
741
  /* Register event */ useEffect(()=>{
712
742
  document.addEventListener('mousemove', onMouseMove);
713
743
  window.addEventListener('editor:active-component', onActiveComponent);
@@ -718,6 +748,7 @@ const Toolbar = ()=>{
718
748
  window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
719
749
  window.addEventListener('editor:hover-component', onHoverComponent);
720
750
  window.addEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
751
+ window.addEventListener('resize', onWindowResize);
721
752
  return ()=>{
722
753
  document.removeEventListener('mousemove', onMouseMove);
723
754
  window.removeEventListener('editor:active-component', onActiveComponent);
@@ -728,6 +759,7 @@ const Toolbar = ()=>{
728
759
  window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
729
760
  window.removeEventListener('editor:hover-component', onHoverComponent);
730
761
  window.removeEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
762
+ window.removeEventListener('resize', onWindowResize);
731
763
  };
732
764
  }, [
733
765
  onMouseMove,
@@ -738,7 +770,8 @@ const Toolbar = ()=>{
738
770
  onShowParents,
739
771
  onResizeSpacing,
740
772
  onHoverComponent,
741
- onToolbarOnboarding
773
+ onToolbarOnboarding,
774
+ onWindowResize
742
775
  ]);
743
776
  return isOnboarding && /*#__PURE__*/ jsx(Onboarding, {
744
777
  enable: true,
package/dist/esm/components/builder/toolbar/Onboarding.js CHANGED
@@ -23,6 +23,7 @@ const Onboarding = ({ enable, position, onCloseOnboarding })=>{
23
23
  ]
24
24
  });
25
25
  };
26
+ const MemoVideo = /*#__PURE__*/ memo(Video);
26
27
  return /*#__PURE__*/ jsx("div", {
27
28
  "data-toolbar-onboarding": true,
28
29
  "data-toolbar-onboarding-position": position,
@@ -82,7 +83,7 @@ const Onboarding = ({ enable, position, onCloseOnboarding })=>{
82
83
  ]
83
84
  })
84
85
  }),
85
- /*#__PURE__*/ jsx(Video, {}),
86
+ /*#__PURE__*/ jsx(MemoVideo, {}),
86
87
  /*#__PURE__*/ jsxs("div", {
87
88
  "data-content": true,
88
89
  children: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.23.0-staging.186",
3
+ "version": "1.23.0-staging.206",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
25
25
  "next-seo": "^6.0.0"
26
26
  },
27
27
  "devDependencies": {
28
- "@gem-sdk/core": "1.23.0-staging.173",
28
+ "@gem-sdk/core": "1.23.0-staging.204",
29
29
  "@gem-sdk/plugin-cookie-bar": "1.23.0-staging.26",
30
30
  "@gem-sdk/plugin-quick-view": "1.23.0-staging.26",
31
31
  "@gem-sdk/plugin-sticky-add-to-cart": "1.23.0-staging.26"