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

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 +13 -31
  2. package/dist/esm/components/builder/Toolbar.js +13 -31
  3. package/package.json +2 -2
package/dist/cjs/components/builder/Toolbar.js CHANGED
@@ -13,34 +13,25 @@ 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;
19
16
  if ($parentOverflow) {
20
- if (rectComponent?.height <= 60) {
17
+ const rect = $component.getBoundingClientRect();
18
+ if (rect?.height <= 60) {
21
19
  $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
22
20
  } else {
23
21
  $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
24
22
  }
25
- // fix toolbar overflow right side
26
- if (rectComponent.left + rect.width > windowWidth) {
27
- $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
28
- }
29
23
  } else {
30
- if (rect.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
24
+ const rectComponent = $component.getBoundingClientRect();
25
+ if (rectComponent.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
31
26
  if (rectComponent?.height <= 60) {
32
27
  $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
33
28
  } else {
34
29
  $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
35
30
  }
36
31
  }
37
- // fix toolbar overflow right side
38
- if (rectComponent.left + rect.width > windowWidth) {
39
- $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
40
- }
41
32
  }
42
33
  };
43
- const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
34
+ const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection })=>{
44
35
  if (!$component && !componentUid) return;
45
36
  if (!$component) {
46
37
  const $c = document.querySelector(`[data-uid="${componentUid}"]`);
@@ -62,9 +53,7 @@ const Toolbar = ()=>{
62
53
  }
63
54
  if ($toolbar) {
64
55
  $toolbar.removeAttribute('style');
65
- if (!isParent) {
66
- $toolbar.setAttribute('data-toolbar-hover', 'true');
67
- }
56
+ $toolbar.setAttribute('data-toolbar-hover', 'true');
68
57
  if (focus) {
69
58
  $toolbar.setAttribute('data-toolbar-hover-focus', 'true');
70
59
  }
@@ -76,9 +65,6 @@ const Toolbar = ()=>{
76
65
  }
77
66
  if ($outline) {
78
67
  $outline.setAttribute('data-outline-hover', 'true');
79
- if (isParent) {
80
- $outline.setAttribute('data-outline-parent-hover', 'true');
81
- }
82
68
  if (isThemeSection) {
83
69
  $outline.setAttribute('data-outline-overlay-theme-section', 'true');
84
70
  }
@@ -99,13 +85,12 @@ const Toolbar = ()=>{
99
85
  if (!$c) return;
100
86
  $component = $c;
101
87
  }
102
- const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])', 1);
88
+ const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])');
103
89
  if ($parents.length) {
104
90
  for (const $parent of $parents){
105
91
  if ($parent) {
106
92
  setHoverComponent({
107
- $component: $parent,
108
- isParent: true
93
+ $component: $parent
109
94
  });
110
95
  }
111
96
  }
@@ -182,9 +167,7 @@ const Toolbar = ()=>{
182
167
  'data-toolbar-hover-revert',
183
168
  'data-toolbar-hover-inside',
184
169
  'data-outline-hover',
185
- 'data-toolbar-add-hover',
186
- 'data-outline-parent-hover',
187
- 'data-toolbar-hover-overflow'
170
+ 'data-toolbar-add-hover'
188
171
  ];
189
172
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
190
173
  if ($elms) {
@@ -206,9 +189,7 @@ const Toolbar = ()=>{
206
189
  'data-toolbar-active-inside',
207
190
  'data-spacing-margin-bottom-active',
208
191
  'data-toolbar-force-hover',
209
- 'data-outline-force-hover',
210
- 'data-column-force-visible',
211
- 'data-outline-parent-hover'
192
+ 'data-outline-force-hover'
212
193
  ];
213
194
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
214
195
  if ($elms) {
@@ -257,8 +238,7 @@ const Toolbar = ()=>{
257
238
  }
258
239
  }
259
240
  }, []);
260
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
261
- react.useCallback(($component, value)=>{
241
+ const setActiveComponentForceHoverSection = react.useCallback(($component, value)=>{
262
242
  const $section = $component.closest('[data-toolbar-wrap][data-component-tag="Section"]');
263
243
  if ($section) {
264
244
  if (value) {
@@ -347,6 +327,7 @@ const Toolbar = ()=>{
347
327
  setActiveComponentSpacing({
348
328
  $component
349
329
  });
330
+ setActiveComponentForceHoverSection($component, true);
350
331
  removeHoverComponent();
351
332
  // Reactive when component re-render
352
333
  watchComponentReRender($component, ()=>{
@@ -360,6 +341,7 @@ const Toolbar = ()=>{
360
341
  }, [
361
342
  removeActiveComponent,
362
343
  removeHoverComponent,
344
+ setActiveComponentForceHoverSection,
363
345
  setActiveComponentSpacing
364
346
  ]);
365
347
  const setFocusTextEditor = async (value)=>{
package/dist/esm/components/builder/Toolbar.js CHANGED
@@ -9,34 +9,25 @@ 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;
15
12
  if ($parentOverflow) {
16
- if (rectComponent?.height <= 60) {
13
+ const rect = $component.getBoundingClientRect();
14
+ if (rect?.height <= 60) {
17
15
  $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
18
16
  } else {
19
17
  $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
20
18
  }
21
- // fix toolbar overflow right side
22
- if (rectComponent.left + rect.width > windowWidth) {
23
- $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
24
- }
25
19
  } else {
26
- if (rect.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
20
+ const rectComponent = $component.getBoundingClientRect();
21
+ if (rectComponent.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
27
22
  if (rectComponent?.height <= 60) {
28
23
  $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
29
24
  } else {
30
25
  $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
31
26
  }
32
27
  }
33
- // fix toolbar overflow right side
34
- if (rectComponent.left + rect.width > windowWidth) {
35
- $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
36
- }
37
28
  }
38
29
  };
39
- const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
30
+ const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection })=>{
40
31
  if (!$component && !componentUid) return;
41
32
  if (!$component) {
42
33
  const $c = document.querySelector(`[data-uid="${componentUid}"]`);
@@ -58,9 +49,7 @@ const Toolbar = ()=>{
58
49
  }
59
50
  if ($toolbar) {
60
51
  $toolbar.removeAttribute('style');
61
- if (!isParent) {
62
- $toolbar.setAttribute('data-toolbar-hover', 'true');
63
- }
52
+ $toolbar.setAttribute('data-toolbar-hover', 'true');
64
53
  if (focus) {
65
54
  $toolbar.setAttribute('data-toolbar-hover-focus', 'true');
66
55
  }
@@ -72,9 +61,6 @@ const Toolbar = ()=>{
72
61
  }
73
62
  if ($outline) {
74
63
  $outline.setAttribute('data-outline-hover', 'true');
75
- if (isParent) {
76
- $outline.setAttribute('data-outline-parent-hover', 'true');
77
- }
78
64
  if (isThemeSection) {
79
65
  $outline.setAttribute('data-outline-overlay-theme-section', 'true');
80
66
  }
@@ -95,13 +81,12 @@ const Toolbar = ()=>{
95
81
  if (!$c) return;
96
82
  $component = $c;
97
83
  }
98
- const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])', 1);
84
+ const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])');
99
85
  if ($parents.length) {
100
86
  for (const $parent of $parents){
101
87
  if ($parent) {
102
88
  setHoverComponent({
103
- $component: $parent,
104
- isParent: true
89
+ $component: $parent
105
90
  });
106
91
  }
107
92
  }
@@ -178,9 +163,7 @@ const Toolbar = ()=>{
178
163
  'data-toolbar-hover-revert',
179
164
  'data-toolbar-hover-inside',
180
165
  'data-outline-hover',
181
- 'data-toolbar-add-hover',
182
- 'data-outline-parent-hover',
183
- 'data-toolbar-hover-overflow'
166
+ 'data-toolbar-add-hover'
184
167
  ];
185
168
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
186
169
  if ($elms) {
@@ -202,9 +185,7 @@ const Toolbar = ()=>{
202
185
  'data-toolbar-active-inside',
203
186
  'data-spacing-margin-bottom-active',
204
187
  'data-toolbar-force-hover',
205
- 'data-outline-force-hover',
206
- 'data-column-force-visible',
207
- 'data-outline-parent-hover'
188
+ 'data-outline-force-hover'
208
189
  ];
209
190
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
210
191
  if ($elms) {
@@ -253,8 +234,7 @@ const Toolbar = ()=>{
253
234
  }
254
235
  }
255
236
  }, []);
256
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
257
- useCallback(($component, value)=>{
237
+ const setActiveComponentForceHoverSection = useCallback(($component, value)=>{
258
238
  const $section = $component.closest('[data-toolbar-wrap][data-component-tag="Section"]');
259
239
  if ($section) {
260
240
  if (value) {
@@ -343,6 +323,7 @@ const Toolbar = ()=>{
343
323
  setActiveComponentSpacing({
344
324
  $component
345
325
  });
326
+ setActiveComponentForceHoverSection($component, true);
346
327
  removeHoverComponent();
347
328
  // Reactive when component re-render
348
329
  watchComponentReRender($component, ()=>{
@@ -356,6 +337,7 @@ const Toolbar = ()=>{
356
337
  }, [
357
338
  removeActiveComponent,
358
339
  removeHoverComponent,
340
+ setActiveComponentForceHoverSection,
359
341
  setActiveComponentSpacing
360
342
  ]);
361
343
  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-staging.154",
3
+ "version": "1.23.0-staging.156",
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.154",
28
+ "@gem-sdk/core": "1.23.0-staging.156",
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"