@gem-sdk/pages 1.23.0-staging.156 → 1.23.0-staging.182

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 +34 -43
  2. package/dist/cjs/libs/google-fonts.js +6 -1
  3. package/dist/esm/components/builder/Toolbar.js +34 -43
  4. package/dist/esm/libs/google-fonts.js +6 -1
  5. package/package.json +2 -2
package/dist/cjs/components/builder/Toolbar.js CHANGED
@@ -13,25 +13,34 @@ const Toolbar = ()=>{
13
13
  const isResizeSpacing = react.useRef(false);
14
14
  /* Functions */ const changePositionToolbar = ({ state, $toolbar, $component })=>{
15
15
  const $parentOverflow = findOverflowParent($component, $toolbar);
16
+ const rect = $toolbar.getBoundingClientRect();
17
+ const rectComponent = $component.getBoundingClientRect();
18
+ const windowWidth = window.innerWidth;
16
19
  if ($parentOverflow) {
17
- const rect = $component.getBoundingClientRect();
18
- if (rect?.height <= 60) {
20
+ if (rectComponent?.height <= 60) {
19
21
  $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
20
22
  } else {
21
23
  $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
22
24
  }
25
+ // fix toolbar overflow right side
26
+ if (rectComponent.left + rect.width > windowWidth) {
27
+ $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
28
+ }
23
29
  } else {
24
- const rectComponent = $component.getBoundingClientRect();
25
- if (rectComponent.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
30
+ if (rect.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
26
31
  if (rectComponent?.height <= 60) {
27
32
  $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
28
33
  } else {
29
34
  $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
30
35
  }
31
36
  }
37
+ // fix toolbar overflow right side
38
+ if (rectComponent.left + rect.width > windowWidth) {
39
+ $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
40
+ }
32
41
  }
33
42
  };
34
- const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection })=>{
43
+ const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
35
44
  if (!$component && !componentUid) return;
36
45
  if (!$component) {
37
46
  const $c = document.querySelector(`[data-uid="${componentUid}"]`);
@@ -53,7 +62,9 @@ const Toolbar = ()=>{
53
62
  }
54
63
  if ($toolbar) {
55
64
  $toolbar.removeAttribute('style');
56
- $toolbar.setAttribute('data-toolbar-hover', 'true');
65
+ if (!isParent) {
66
+ $toolbar.setAttribute('data-toolbar-hover', 'true');
67
+ }
57
68
  if (focus) {
58
69
  $toolbar.setAttribute('data-toolbar-hover-focus', 'true');
59
70
  }
@@ -65,6 +76,9 @@ const Toolbar = ()=>{
65
76
  }
66
77
  if ($outline) {
67
78
  $outline.setAttribute('data-outline-hover', 'true');
79
+ if (isParent) {
80
+ $outline.setAttribute('data-outline-parent-hover', 'true');
81
+ }
68
82
  if (isThemeSection) {
69
83
  $outline.setAttribute('data-outline-overlay-theme-section', 'true');
70
84
  }
@@ -73,10 +87,14 @@ const Toolbar = ()=>{
73
87
  }
74
88
  }
75
89
  if ($btnAddTop) {
76
- $btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
90
+ if (!isParent) {
91
+ $btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
92
+ }
77
93
  }
78
94
  if ($btnAddBottom) {
79
- $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
95
+ if (!isParent) {
96
+ $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
97
+ }
80
98
  }
81
99
  }, []);
82
100
  const setHoverComponentParents = react.useCallback(({ $component, componentUid })=>{
@@ -85,12 +103,13 @@ const Toolbar = ()=>{
85
103
  if (!$c) return;
86
104
  $component = $c;
87
105
  }
88
- const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])');
106
+ const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])', 1);
89
107
  if ($parents.length) {
90
108
  for (const $parent of $parents){
91
109
  if ($parent) {
92
110
  setHoverComponent({
93
- $component: $parent
111
+ $component: $parent,
112
+ isParent: true
94
113
  });
95
114
  }
96
115
  }
@@ -167,7 +186,9 @@ const Toolbar = ()=>{
167
186
  'data-toolbar-hover-revert',
168
187
  'data-toolbar-hover-inside',
169
188
  'data-outline-hover',
170
- 'data-toolbar-add-hover'
189
+ 'data-toolbar-add-hover',
190
+ 'data-outline-parent-hover',
191
+ 'data-toolbar-hover-overflow'
171
192
  ];
172
193
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
173
194
  if ($elms) {
@@ -189,7 +210,8 @@ const Toolbar = ()=>{
189
210
  'data-toolbar-active-inside',
190
211
  'data-spacing-margin-bottom-active',
191
212
  'data-toolbar-force-hover',
192
- 'data-outline-force-hover'
213
+ 'data-outline-force-hover',
214
+ 'data-toolbar-active-overflow'
193
215
  ];
194
216
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
195
217
  if ($elms) {
@@ -238,35 +260,6 @@ const Toolbar = ()=>{
238
260
  }
239
261
  }
240
262
  }, []);
241
- const setActiveComponentForceHoverSection = react.useCallback(($component, value)=>{
242
- const $section = $component.closest('[data-toolbar-wrap][data-component-tag="Section"]');
243
- if ($section) {
244
- if (value) {
245
- const $toolbar = getChildrenByAttrSelector($section, 'data-toolbar');
246
- const $outline = getChildrenByAttrSelector($section, 'data-outline');
247
- if ($toolbar) {
248
- $toolbar.setAttribute('data-toolbar-force-hover', 'true');
249
- changePositionToolbar({
250
- $toolbar,
251
- $component,
252
- state: 'hover'
253
- });
254
- }
255
- if ($outline) {
256
- $outline.setAttribute('data-outline-force-hover', 'true');
257
- }
258
- } else {
259
- const $toolbar = getChildrenByAttrSelector($section, 'data-toolbar');
260
- const $outline = getChildrenByAttrSelector($section, 'data-outline');
261
- if ($toolbar) {
262
- $toolbar.removeAttribute('data-toolbar-force-hover');
263
- }
264
- if ($outline) {
265
- $outline.removeAttribute('data-outline-force-hover');
266
- }
267
- }
268
- }
269
- }, []);
270
263
  const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
271
264
  if (!componentUid) return;
272
265
  let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
@@ -327,7 +320,6 @@ const Toolbar = ()=>{
327
320
  setActiveComponentSpacing({
328
321
  $component
329
322
  });
330
- setActiveComponentForceHoverSection($component, true);
331
323
  removeHoverComponent();
332
324
  // Reactive when component re-render
333
325
  watchComponentReRender($component, ()=>{
@@ -341,7 +333,6 @@ const Toolbar = ()=>{
341
333
  }, [
342
334
  removeActiveComponent,
343
335
  removeHoverComponent,
344
- setActiveComponentForceHoverSection,
345
336
  setActiveComponentSpacing
346
337
  ]);
347
338
  const setFocusTextEditor = async (value)=>{
package/dist/cjs/libs/google-fonts.js CHANGED
@@ -9,7 +9,12 @@ async function getFontForUA(url, UA) {
9
9
  headers: {
10
10
  'User-Agent': UA
11
11
  }
12
- }).then((res)=>res.text());
12
+ }).then((res)=>{
13
+ if (res.status === 200) {
14
+ return res.text();
15
+ }
16
+ return '';
17
+ });
13
18
  }
14
19
  const composeFonts = (fonts)=>{
15
20
  const uniqFonts = fonts.filter((font, index, arr)=>{
package/dist/esm/components/builder/Toolbar.js CHANGED
@@ -9,25 +9,34 @@ const Toolbar = ()=>{
9
9
  const isResizeSpacing = useRef(false);
10
10
  /* Functions */ const changePositionToolbar = ({ state, $toolbar, $component })=>{
11
11
  const $parentOverflow = findOverflowParent($component, $toolbar);
12
+ const rect = $toolbar.getBoundingClientRect();
13
+ const rectComponent = $component.getBoundingClientRect();
14
+ const windowWidth = window.innerWidth;
12
15
  if ($parentOverflow) {
13
- const rect = $component.getBoundingClientRect();
14
- if (rect?.height <= 60) {
16
+ if (rectComponent?.height <= 60) {
15
17
  $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
16
18
  } else {
17
19
  $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
18
20
  }
21
+ // fix toolbar overflow right side
22
+ if (rectComponent.left + rect.width > windowWidth) {
23
+ $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
24
+ }
19
25
  } else {
20
- const rectComponent = $component.getBoundingClientRect();
21
- if (rectComponent.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
26
+ if (rect.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
22
27
  if (rectComponent?.height <= 60) {
23
28
  $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
24
29
  } else {
25
30
  $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
26
31
  }
27
32
  }
33
+ // fix toolbar overflow right side
34
+ if (rectComponent.left + rect.width > windowWidth) {
35
+ $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
36
+ }
28
37
  }
29
38
  };
30
- const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection })=>{
39
+ const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
31
40
  if (!$component && !componentUid) return;
32
41
  if (!$component) {
33
42
  const $c = document.querySelector(`[data-uid="${componentUid}"]`);
@@ -49,7 +58,9 @@ const Toolbar = ()=>{
49
58
  }
50
59
  if ($toolbar) {
51
60
  $toolbar.removeAttribute('style');
52
- $toolbar.setAttribute('data-toolbar-hover', 'true');
61
+ if (!isParent) {
62
+ $toolbar.setAttribute('data-toolbar-hover', 'true');
63
+ }
53
64
  if (focus) {
54
65
  $toolbar.setAttribute('data-toolbar-hover-focus', 'true');
55
66
  }
@@ -61,6 +72,9 @@ const Toolbar = ()=>{
61
72
  }
62
73
  if ($outline) {
63
74
  $outline.setAttribute('data-outline-hover', 'true');
75
+ if (isParent) {
76
+ $outline.setAttribute('data-outline-parent-hover', 'true');
77
+ }
64
78
  if (isThemeSection) {
65
79
  $outline.setAttribute('data-outline-overlay-theme-section', 'true');
66
80
  }
@@ -69,10 +83,14 @@ const Toolbar = ()=>{
69
83
  }
70
84
  }
71
85
  if ($btnAddTop) {
72
- $btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
86
+ if (!isParent) {
87
+ $btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
88
+ }
73
89
  }
74
90
  if ($btnAddBottom) {
75
- $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
91
+ if (!isParent) {
92
+ $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
93
+ }
76
94
  }
77
95
  }, []);
78
96
  const setHoverComponentParents = useCallback(({ $component, componentUid })=>{
@@ -81,12 +99,13 @@ const Toolbar = ()=>{
81
99
  if (!$c) return;
82
100
  $component = $c;
83
101
  }
84
- const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])');
102
+ const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])', 1);
85
103
  if ($parents.length) {
86
104
  for (const $parent of $parents){
87
105
  if ($parent) {
88
106
  setHoverComponent({
89
- $component: $parent
107
+ $component: $parent,
108
+ isParent: true
90
109
  });
91
110
  }
92
111
  }
@@ -163,7 +182,9 @@ const Toolbar = ()=>{
163
182
  'data-toolbar-hover-revert',
164
183
  'data-toolbar-hover-inside',
165
184
  'data-outline-hover',
166
- 'data-toolbar-add-hover'
185
+ 'data-toolbar-add-hover',
186
+ 'data-outline-parent-hover',
187
+ 'data-toolbar-hover-overflow'
167
188
  ];
168
189
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
169
190
  if ($elms) {
@@ -185,7 +206,8 @@ const Toolbar = ()=>{
185
206
  'data-toolbar-active-inside',
186
207
  'data-spacing-margin-bottom-active',
187
208
  'data-toolbar-force-hover',
188
- 'data-outline-force-hover'
209
+ 'data-outline-force-hover',
210
+ 'data-toolbar-active-overflow'
189
211
  ];
190
212
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
191
213
  if ($elms) {
@@ -234,35 +256,6 @@ const Toolbar = ()=>{
234
256
  }
235
257
  }
236
258
  }, []);
237
- const setActiveComponentForceHoverSection = useCallback(($component, value)=>{
238
- const $section = $component.closest('[data-toolbar-wrap][data-component-tag="Section"]');
239
- if ($section) {
240
- if (value) {
241
- const $toolbar = getChildrenByAttrSelector($section, 'data-toolbar');
242
- const $outline = getChildrenByAttrSelector($section, 'data-outline');
243
- if ($toolbar) {
244
- $toolbar.setAttribute('data-toolbar-force-hover', 'true');
245
- changePositionToolbar({
246
- $toolbar,
247
- $component,
248
- state: 'hover'
249
- });
250
- }
251
- if ($outline) {
252
- $outline.setAttribute('data-outline-force-hover', 'true');
253
- }
254
- } else {
255
- const $toolbar = getChildrenByAttrSelector($section, 'data-toolbar');
256
- const $outline = getChildrenByAttrSelector($section, 'data-outline');
257
- if ($toolbar) {
258
- $toolbar.removeAttribute('data-toolbar-force-hover');
259
- }
260
- if ($outline) {
261
- $outline.removeAttribute('data-outline-force-hover');
262
- }
263
- }
264
- }
265
- }, []);
266
259
  const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
267
260
  if (!componentUid) return;
268
261
  let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
@@ -323,7 +316,6 @@ const Toolbar = ()=>{
323
316
  setActiveComponentSpacing({
324
317
  $component
325
318
  });
326
- setActiveComponentForceHoverSection($component, true);
327
319
  removeHoverComponent();
328
320
  // Reactive when component re-render
329
321
  watchComponentReRender($component, ()=>{
@@ -337,7 +329,6 @@ const Toolbar = ()=>{
337
329
  }, [
338
330
  removeActiveComponent,
339
331
  removeHoverComponent,
340
- setActiveComponentForceHoverSection,
341
332
  setActiveComponentSpacing
342
333
  ]);
343
334
  const setFocusTextEditor = async (value)=>{
package/dist/esm/libs/google-fonts.js CHANGED
@@ -7,7 +7,12 @@ async function getFontForUA(url, UA) {
7
7
  headers: {
8
8
  'User-Agent': UA
9
9
  }
10
- }).then((res)=>res.text());
10
+ }).then((res)=>{
11
+ if (res.status === 200) {
12
+ return res.text();
13
+ }
14
+ return '';
15
+ });
11
16
  }
12
17
  const composeFonts = (fonts)=>{
13
18
  const uniqFonts = fonts.filter((font, index, arr)=>{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.23.0-staging.156",
3
+ "version": "1.23.0-staging.182",
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.156",
28
+ "@gem-sdk/core": "1.23.0-staging.173",
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"