@gem-sdk/pages 1.23.0-staging.107 → 1.23.0-staging.148

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 +18 -6
  2. package/dist/esm/components/builder/Toolbar.js +18 -6
  3. package/package.json +2 -2
package/dist/cjs/components/builder/Toolbar.js CHANGED
@@ -13,22 +13,31 @@ 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
43
  const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection })=>{
@@ -167,7 +176,8 @@ const Toolbar = ()=>{
167
176
  'data-toolbar-hover-revert',
168
177
  'data-toolbar-hover-inside',
169
178
  'data-outline-hover',
170
- 'data-toolbar-add-hover'
179
+ 'data-toolbar-add-hover',
180
+ 'data-toolbar-hover-overflow'
171
181
  ];
172
182
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
173
183
  if ($elms) {
@@ -189,7 +199,9 @@ const Toolbar = ()=>{
189
199
  'data-toolbar-active-inside',
190
200
  'data-spacing-margin-bottom-active',
191
201
  'data-toolbar-force-hover',
192
- 'data-outline-force-hover'
202
+ 'data-outline-force-hover',
203
+ 'data-column-force-visible',
204
+ 'data-toolbar-active-overflow'
193
205
  ];
194
206
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
195
207
  if ($elms) {
package/dist/esm/components/builder/Toolbar.js CHANGED
@@ -9,22 +9,31 @@ 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
39
  const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection })=>{
@@ -163,7 +172,8 @@ const Toolbar = ()=>{
163
172
  'data-toolbar-hover-revert',
164
173
  'data-toolbar-hover-inside',
165
174
  'data-outline-hover',
166
- 'data-toolbar-add-hover'
175
+ 'data-toolbar-add-hover',
176
+ 'data-toolbar-hover-overflow'
167
177
  ];
168
178
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
169
179
  if ($elms) {
@@ -185,7 +195,9 @@ const Toolbar = ()=>{
185
195
  'data-toolbar-active-inside',
186
196
  'data-spacing-margin-bottom-active',
187
197
  'data-toolbar-force-hover',
188
- 'data-outline-force-hover'
198
+ 'data-outline-force-hover',
199
+ 'data-column-force-visible',
200
+ 'data-toolbar-active-overflow'
189
201
  ];
190
202
  const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
191
203
  if ($elms) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.23.0-staging.107",
3
+ "version": "1.23.0-staging.148",
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.106",
28
+ "@gem-sdk/core": "1.23.0-staging.147",
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"