@gem-sdk/pages 1.23.0-moon.60 → 1.23.0-moon.75

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 (8) hide show
  1. package/dist/cjs/components/builder/Toolbar.js +3 -29
  2. package/dist/cjs/components/builder/Toolbox.js +1 -1
  3. package/dist/cjs/pages/builder.js +5 -5
  4. package/dist/esm/components/builder/Toolbar.js +3 -29
  5. package/dist/esm/components/builder/Toolbox.js +1 -1
  6. package/dist/esm/pages/builder.js +5 -5
  7. package/dist/types/index.d.ts +1 -0
  8. package/package.json +5 -5
package/dist/cjs/components/builder/Toolbar.js CHANGED
@@ -11,7 +11,6 @@ const Toolbar = ()=>{
11
11
  const isDragging = react.useRef(false);
12
12
  const stopWatchReRenderComponent = react.useRef();
13
13
  const isResizeSpacing = react.useRef(false);
14
- const isResizeColumn = react.useRef(false);
15
14
  /* Functions */ const changePositionToolbar = ({ state, $toolbar, $component })=>{
16
15
  const $parentOverflow = findOverflowParent($component, $toolbar);
17
16
  if ($parentOverflow) {
@@ -48,7 +47,6 @@ const Toolbar = ()=>{
48
47
  const $outline = getChildrenByAttrSelector($component, 'data-outline');
49
48
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
50
49
  const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
51
- const $resizeColumn = getChildrenByAttrSelector($component, 'data-column');
52
50
  const $themeSectionStatus = getChildrenByAttrSelector($component, 'data-theme-section-status');
53
51
  if (isThemeSection && $themeSectionStatus) {
54
52
  $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
@@ -80,9 +78,6 @@ const Toolbar = ()=>{
80
78
  if ($btnAddBottom) {
81
79
  $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
82
80
  }
83
- if ($resizeColumn) {
84
- $resizeColumn.setAttribute('data-column-visible', 'true');
85
- }
86
81
  }, []);
87
82
  const setHoverComponentParents = react.useCallback(({ $component, componentUid })=>{
88
83
  if (!$component) {
@@ -172,8 +167,7 @@ const Toolbar = ()=>{
172
167
  'data-toolbar-hover-revert',
173
168
  'data-toolbar-hover-inside',
174
169
  'data-outline-hover',
175
- 'data-toolbar-add-hover',
176
- 'data-column-visible'
170
+ 'data-toolbar-add-hover'
177
171
  ];
178
172
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
179
173
  if ($elms) {
@@ -195,8 +189,7 @@ const Toolbar = ()=>{
195
189
  'data-toolbar-active-inside',
196
190
  'data-spacing-margin-bottom-active',
197
191
  'data-toolbar-force-hover',
198
- 'data-outline-force-hover',
199
- 'data-column-force-visible'
192
+ 'data-outline-force-hover'
200
193
  ];
201
194
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
202
195
  if ($elms) {
@@ -297,7 +290,6 @@ const Toolbar = ()=>{
297
290
  const $outline = getChildrenByAttrSelector($component, 'data-outline');
298
291
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
299
292
  const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
300
- const $resizeColumn = getChildrenByAttrSelector($component, 'data-column');
301
293
  if ($toolbar) {
302
294
  currentComponentActive.current = {
303
295
  componentUid,
@@ -320,9 +312,6 @@ const Toolbar = ()=>{
320
312
  if ($btnAddBottom) {
321
313
  $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
322
314
  }
323
- if ($resizeColumn) {
324
- $resizeColumn.setAttribute('data-column-force-visible', 'true');
325
- }
326
315
  // Active same element in product list
327
316
  if (productId) {
328
317
  const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
@@ -475,7 +464,6 @@ const Toolbar = ()=>{
475
464
  /* Event listener */ const onMouseMove = react.useCallback((e)=>{
476
465
  if (isDragging.current) return;
477
466
  if (isResizeSpacing.current) return;
478
- if (isResizeColumn.current) return;
479
467
  const $target = e.target;
480
468
  if (!$target) {
481
469
  removeHoverOverlayComponent();
@@ -620,17 +608,6 @@ const Toolbar = ()=>{
620
608
  }, [
621
609
  removeHoverComponent
622
610
  ]);
623
- const onResizeColumn = react.useCallback((e)=>{
624
- const detail = e.detail;
625
- if (detail?.value) {
626
- removeHoverComponent();
627
- isResizeColumn.current = true;
628
- } else {
629
- isResizeColumn.current = false;
630
- }
631
- }, [
632
- removeHoverComponent
633
- ]);
634
611
  /* Register event */ react.useEffect(()=>{
635
612
  document.addEventListener('mousemove', onMouseMove);
636
613
  window.addEventListener('editor:active-component', onActiveComponent);
@@ -639,7 +616,6 @@ const Toolbar = ()=>{
639
616
  window.addEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
640
617
  window.addEventListener('editor:toolbar:show-parents', onShowParents);
641
618
  window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
642
- window.addEventListener('editor:toolbar:resize-column', onResizeColumn);
643
619
  return ()=>{
644
620
  document.removeEventListener('mousemove', onMouseMove);
645
621
  window.removeEventListener('editor:active-component', onActiveComponent);
@@ -648,7 +624,6 @@ const Toolbar = ()=>{
648
624
  window.removeEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
649
625
  window.removeEventListener('editor:toolbar:show-parents', onShowParents);
650
626
  window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
651
- window.removeEventListener('editor:toolbar:resize-column', onResizeColumn);
652
627
  };
653
628
  }, [
654
629
  onMouseMove,
@@ -657,8 +632,7 @@ const Toolbar = ()=>{
657
632
  onIsDragging,
658
633
  onIsEditingTextEditor,
659
634
  onShowParents,
660
- onResizeSpacing,
661
- onResizeColumn
635
+ onResizeSpacing
662
636
  ]);
663
637
  return null;
664
638
  };
package/dist/cjs/components/builder/Toolbox.js CHANGED
@@ -60,7 +60,7 @@ const Toolbox = ()=>{
60
60
  });
61
61
  // append new fonts
62
62
  for (const font of fonts){
63
- if (font.type == 'google') {
63
+ if (font.type !== 'custom') {
64
64
  if (font.variants?.length) {
65
65
  for (const variant of font.variants){
66
66
  const cloneFont = JSON.parse(JSON.stringify(font));
package/dist/cjs/pages/builder.js CHANGED
@@ -14,7 +14,7 @@ var ImageToLayout = require('../components/image-to-layout/ImageToLayout.js');
14
14
  var AddSectionImageToLayout = require('../components/image-to-layout/AddSectionImageToLayout.js');
15
15
  var Toolbar = require('../components/builder/Toolbar.js');
16
16
 
17
- const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor })=>{
17
+ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar })=>{
18
18
  const [loadSuccess, setLoadSuccess] = react.useState(false);
19
19
  const initState = react.useMemo(()=>({
20
20
  ROOT: {
@@ -60,14 +60,14 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
60
60
  isThemeSectionEditor: isThemeSectionEditor,
61
61
  children: [
62
62
  /*#__PURE__*/ jsxRuntime.jsx(Toolbox.default, {}),
63
- /*#__PURE__*/ jsxRuntime.jsx(Toolbar.default, {}),
63
+ !hiddenToolbar && /*#__PURE__*/ jsxRuntime.jsx(Toolbar.default, {}),
64
64
  /*#__PURE__*/ jsxRuntime.jsx(PopupManager.default, {}),
65
65
  loadSuccess && /*#__PURE__*/ jsxRuntime.jsxs("div", {
66
66
  className: "builder z-1 relative",
67
67
  children: [
68
- isThemeSectionEditor ? /*#__PURE__*/ jsxRuntime.jsx("div", {
68
+ !hiddenToolbar && (isThemeSectionEditor ? /*#__PURE__*/ jsxRuntime.jsx("div", {
69
69
  className: "h-[40px] bg-[#f4f4f4]"
70
- }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {}),
70
+ }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {})),
71
71
  /*#__PURE__*/ jsxRuntime.jsx("div", {
72
72
  id: "storefront",
73
73
  className: isThemeSectionEditor ? 'theme-section-editor' : '',
@@ -88,7 +88,7 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
88
88
  /*#__PURE__*/ jsxRuntime.jsx("div", {
89
89
  id: "visual-content"
90
90
  }),
91
- !isThemeSectionEditor && /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {})
91
+ !isThemeSectionEditor && !hiddenToolbar && /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {})
92
92
  ]
93
93
  })
94
94
  ]
package/dist/esm/components/builder/Toolbar.js CHANGED
@@ -7,7 +7,6 @@ const Toolbar = ()=>{
7
7
  const isDragging = useRef(false);
8
8
  const stopWatchReRenderComponent = useRef();
9
9
  const isResizeSpacing = useRef(false);
10
- const isResizeColumn = useRef(false);
11
10
  /* Functions */ const changePositionToolbar = ({ state, $toolbar, $component })=>{
12
11
  const $parentOverflow = findOverflowParent($component, $toolbar);
13
12
  if ($parentOverflow) {
@@ -44,7 +43,6 @@ const Toolbar = ()=>{
44
43
  const $outline = getChildrenByAttrSelector($component, 'data-outline');
45
44
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
46
45
  const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
47
- const $resizeColumn = getChildrenByAttrSelector($component, 'data-column');
48
46
  const $themeSectionStatus = getChildrenByAttrSelector($component, 'data-theme-section-status');
49
47
  if (isThemeSection && $themeSectionStatus) {
50
48
  $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
@@ -76,9 +74,6 @@ const Toolbar = ()=>{
76
74
  if ($btnAddBottom) {
77
75
  $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
78
76
  }
79
- if ($resizeColumn) {
80
- $resizeColumn.setAttribute('data-column-visible', 'true');
81
- }
82
77
  }, []);
83
78
  const setHoverComponentParents = useCallback(({ $component, componentUid })=>{
84
79
  if (!$component) {
@@ -168,8 +163,7 @@ const Toolbar = ()=>{
168
163
  'data-toolbar-hover-revert',
169
164
  'data-toolbar-hover-inside',
170
165
  'data-outline-hover',
171
- 'data-toolbar-add-hover',
172
- 'data-column-visible'
166
+ 'data-toolbar-add-hover'
173
167
  ];
174
168
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
175
169
  if ($elms) {
@@ -191,8 +185,7 @@ const Toolbar = ()=>{
191
185
  'data-toolbar-active-inside',
192
186
  'data-spacing-margin-bottom-active',
193
187
  'data-toolbar-force-hover',
194
- 'data-outline-force-hover',
195
- 'data-column-force-visible'
188
+ 'data-outline-force-hover'
196
189
  ];
197
190
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
198
191
  if ($elms) {
@@ -293,7 +286,6 @@ const Toolbar = ()=>{
293
286
  const $outline = getChildrenByAttrSelector($component, 'data-outline');
294
287
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
295
288
  const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
296
- const $resizeColumn = getChildrenByAttrSelector($component, 'data-column');
297
289
  if ($toolbar) {
298
290
  currentComponentActive.current = {
299
291
  componentUid,
@@ -316,9 +308,6 @@ const Toolbar = ()=>{
316
308
  if ($btnAddBottom) {
317
309
  $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
318
310
  }
319
- if ($resizeColumn) {
320
- $resizeColumn.setAttribute('data-column-force-visible', 'true');
321
- }
322
311
  // Active same element in product list
323
312
  if (productId) {
324
313
  const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
@@ -471,7 +460,6 @@ const Toolbar = ()=>{
471
460
  /* Event listener */ const onMouseMove = useCallback((e)=>{
472
461
  if (isDragging.current) return;
473
462
  if (isResizeSpacing.current) return;
474
- if (isResizeColumn.current) return;
475
463
  const $target = e.target;
476
464
  if (!$target) {
477
465
  removeHoverOverlayComponent();
@@ -616,17 +604,6 @@ const Toolbar = ()=>{
616
604
  }, [
617
605
  removeHoverComponent
618
606
  ]);
619
- const onResizeColumn = useCallback((e)=>{
620
- const detail = e.detail;
621
- if (detail?.value) {
622
- removeHoverComponent();
623
- isResizeColumn.current = true;
624
- } else {
625
- isResizeColumn.current = false;
626
- }
627
- }, [
628
- removeHoverComponent
629
- ]);
630
607
  /* Register event */ useEffect(()=>{
631
608
  document.addEventListener('mousemove', onMouseMove);
632
609
  window.addEventListener('editor:active-component', onActiveComponent);
@@ -635,7 +612,6 @@ const Toolbar = ()=>{
635
612
  window.addEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
636
613
  window.addEventListener('editor:toolbar:show-parents', onShowParents);
637
614
  window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
638
- window.addEventListener('editor:toolbar:resize-column', onResizeColumn);
639
615
  return ()=>{
640
616
  document.removeEventListener('mousemove', onMouseMove);
641
617
  window.removeEventListener('editor:active-component', onActiveComponent);
@@ -644,7 +620,6 @@ const Toolbar = ()=>{
644
620
  window.removeEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
645
621
  window.removeEventListener('editor:toolbar:show-parents', onShowParents);
646
622
  window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
647
- window.removeEventListener('editor:toolbar:resize-column', onResizeColumn);
648
623
  };
649
624
  }, [
650
625
  onMouseMove,
@@ -653,8 +628,7 @@ const Toolbar = ()=>{
653
628
  onIsDragging,
654
629
  onIsEditingTextEditor,
655
630
  onShowParents,
656
- onResizeSpacing,
657
- onResizeColumn
631
+ onResizeSpacing
658
632
  ]);
659
633
  return null;
660
634
  };
package/dist/esm/components/builder/Toolbox.js CHANGED
@@ -56,7 +56,7 @@ const Toolbox = ()=>{
56
56
  });
57
57
  // append new fonts
58
58
  for (const font of fonts){
59
- if (font.type == 'google') {
59
+ if (font.type !== 'custom') {
60
60
  if (font.variants?.length) {
61
61
  for (const variant of font.variants){
62
62
  const cloneFont = JSON.parse(JSON.stringify(font));
package/dist/esm/pages/builder.js CHANGED
@@ -12,7 +12,7 @@ import ImageToLayout from '../components/image-to-layout/ImageToLayout.js';
12
12
  import AddSectionImageToLayout from '../components/image-to-layout/AddSectionImageToLayout.js';
13
13
  import Toolbar from '../components/builder/Toolbar.js';
14
14
 
15
- const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor })=>{
15
+ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar })=>{
16
16
  const [loadSuccess, setLoadSuccess] = useState(false);
17
17
  const initState = useMemo(()=>({
18
18
  ROOT: {
@@ -58,14 +58,14 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
58
58
  isThemeSectionEditor: isThemeSectionEditor,
59
59
  children: [
60
60
  /*#__PURE__*/ jsx(Toolbox, {}),
61
- /*#__PURE__*/ jsx(Toolbar, {}),
61
+ !hiddenToolbar && /*#__PURE__*/ jsx(Toolbar, {}),
62
62
  /*#__PURE__*/ jsx(PopupManager, {}),
63
63
  loadSuccess && /*#__PURE__*/ jsxs("div", {
64
64
  className: "builder z-1 relative",
65
65
  children: [
66
- isThemeSectionEditor ? /*#__PURE__*/ jsx("div", {
66
+ !hiddenToolbar && (isThemeSectionEditor ? /*#__PURE__*/ jsx("div", {
67
67
  className: "h-[40px] bg-[#f4f4f4]"
68
- }) : /*#__PURE__*/ jsx(Header, {}),
68
+ }) : /*#__PURE__*/ jsx(Header, {})),
69
69
  /*#__PURE__*/ jsx("div", {
70
70
  id: "storefront",
71
71
  className: isThemeSectionEditor ? 'theme-section-editor' : '',
@@ -86,7 +86,7 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
86
86
  /*#__PURE__*/ jsx("div", {
87
87
  id: "visual-content"
88
88
  }),
89
- !isThemeSectionEditor && /*#__PURE__*/ jsx(Footer, {})
89
+ !isThemeSectionEditor && !hiddenToolbar && /*#__PURE__*/ jsx(Footer, {})
90
90
  ]
91
91
  })
92
92
  ]
package/dist/types/index.d.ts CHANGED
@@ -147,6 +147,7 @@ type BuilderPageProps = {
147
147
  pageType: ShopType.PublishedThemePageType;
148
148
  editorImageToLayout?: boolean;
149
149
  isThemeSectionEditor?: boolean;
150
+ hiddenToolbar?: boolean;
150
151
  };
151
152
  declare const BuilderPage: React.FC<BuilderPageProps>;
152
153
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.23.0-moon.60",
3
+ "version": "1.23.0-moon.75",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -25,10 +25,10 @@
25
25
  "next-seo": "^6.0.0"
26
26
  },
27
27
  "devDependencies": {
28
- "@gem-sdk/core": "1.23.0-moon.60",
29
- "@gem-sdk/plugin-cookie-bar": "1.23.0-moon.58",
30
- "@gem-sdk/plugin-quick-view": "1.23.0-moon.58",
31
- "@gem-sdk/plugin-sticky-add-to-cart": "1.23.0-moon.58"
28
+ "@gem-sdk/core": "1.23.0-moon.75",
29
+ "@gem-sdk/plugin-cookie-bar": "1.23.0-moon.75",
30
+ "@gem-sdk/plugin-quick-view": "1.23.0-moon.75",
31
+ "@gem-sdk/plugin-sticky-add-to-cart": "1.23.0-moon.75"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "next": ">=13"