@gem-sdk/pages 1.23.0-moon.75 → 1.23.0-staging.131

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 (3) hide show
  1. package/dist/cjs/components/builder/Toolbar.js +36 -43
  2. package/dist/esm/components/builder/Toolbar.js +36 -43
  3. package/package.json +5 -5
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,10 @@ 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-column-visible',
191
+ 'data-outline-parent-hover',
192
+ 'data-toolbar-hover-overflow'
171
193
  ];
172
194
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
173
195
  if ($elms) {
@@ -189,7 +211,9 @@ const Toolbar = ()=>{
189
211
  'data-toolbar-active-inside',
190
212
  'data-spacing-margin-bottom-active',
191
213
  'data-toolbar-force-hover',
192
- 'data-outline-force-hover'
214
+ 'data-outline-force-hover',
215
+ 'data-column-force-visible',
216
+ 'data-toolbar-active-overflow'
193
217
  ];
194
218
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
195
219
  if ($elms) {
@@ -238,35 +262,6 @@ const Toolbar = ()=>{
238
262
  }
239
263
  }
240
264
  }, []);
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
265
  const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
271
266
  if (!componentUid) return;
272
267
  let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
@@ -327,7 +322,6 @@ const Toolbar = ()=>{
327
322
  setActiveComponentSpacing({
328
323
  $component
329
324
  });
330
- setActiveComponentForceHoverSection($component, true);
331
325
  removeHoverComponent();
332
326
  // Reactive when component re-render
333
327
  watchComponentReRender($component, ()=>{
@@ -341,7 +335,6 @@ const Toolbar = ()=>{
341
335
  }, [
342
336
  removeActiveComponent,
343
337
  removeHoverComponent,
344
- setActiveComponentForceHoverSection,
345
338
  setActiveComponentSpacing
346
339
  ]);
347
340
  const setFocusTextEditor = async (value)=>{
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,10 @@ 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-column-visible',
187
+ 'data-outline-parent-hover',
188
+ 'data-toolbar-hover-overflow'
167
189
  ];
168
190
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
169
191
  if ($elms) {
@@ -185,7 +207,9 @@ const Toolbar = ()=>{
185
207
  'data-toolbar-active-inside',
186
208
  'data-spacing-margin-bottom-active',
187
209
  'data-toolbar-force-hover',
188
- 'data-outline-force-hover'
210
+ 'data-outline-force-hover',
211
+ 'data-column-force-visible',
212
+ 'data-toolbar-active-overflow'
189
213
  ];
190
214
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
191
215
  if ($elms) {
@@ -234,35 +258,6 @@ const Toolbar = ()=>{
234
258
  }
235
259
  }
236
260
  }, []);
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
261
  const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
267
262
  if (!componentUid) return;
268
263
  let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
@@ -323,7 +318,6 @@ const Toolbar = ()=>{
323
318
  setActiveComponentSpacing({
324
319
  $component
325
320
  });
326
- setActiveComponentForceHoverSection($component, true);
327
321
  removeHoverComponent();
328
322
  // Reactive when component re-render
329
323
  watchComponentReRender($component, ()=>{
@@ -337,7 +331,6 @@ const Toolbar = ()=>{
337
331
  }, [
338
332
  removeActiveComponent,
339
333
  removeHoverComponent,
340
- setActiveComponentForceHoverSection,
341
334
  setActiveComponentSpacing
342
335
  ]);
343
336
  const setFocusTextEditor = async (value)=>{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.23.0-moon.75",
3
+ "version": "1.23.0-staging.131",
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.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"
28
+ "@gem-sdk/core": "1.23.0-staging.131",
29
+ "@gem-sdk/plugin-cookie-bar": "1.23.0-staging.26",
30
+ "@gem-sdk/plugin-quick-view": "1.23.0-staging.26",
31
+ "@gem-sdk/plugin-sticky-add-to-cart": "1.23.0-staging.26"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "next": ">=13"