@gem-sdk/pages 1.23.0-staging.29 → 1.23.0-staging.34

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 +128 -107
  2. package/dist/esm/components/builder/Toolbar.js +128 -107
  3. package/package.json +2 -2
package/dist/cjs/components/builder/Toolbar.js CHANGED
@@ -6,101 +6,6 @@ var react = require('react');
6
6
 
7
7
  const TOOLBAR_HOVER_HEIGHT = 24;
8
8
  const TOOLBAR_ACTIVE_HEIGHT = 32;
9
- const getDOMElementParents = ($el, selector, limit)=>{
10
- // Set up a parent array
11
- const parents = [];
12
- // Push each parent $elms to the array
13
- while($el){
14
- $el = $el.parentElement ?? undefined;
15
- if ($el) {
16
- if ($el.tagName === 'BODY' || $el.getAttribute('data-uid') === 'ROOT') {
17
- break;
18
- }
19
- if (selector) {
20
- if ($el.matches(selector)) {
21
- parents.push($el);
22
- if (limit && parents.length == limit) {
23
- return parents;
24
- }
25
- }
26
- continue;
27
- }
28
- parents.push($el);
29
- if (limit && parents.length == limit) {
30
- return parents;
31
- }
32
- }
33
- }
34
- // Return our parent array
35
- return parents;
36
- };
37
- const getChildrenByAttrSelector = ($el, attrSelector)=>{
38
- const childLen = $el.children.length;
39
- if (childLen) {
40
- for(let i = 0; i < childLen; i++){
41
- const children = $el.children[i];
42
- if (children) {
43
- const is = children.getAttribute(attrSelector);
44
- if (is) {
45
- return children;
46
- }
47
- }
48
- }
49
- }
50
- };
51
- const isOverParent = ({ current, parent, index, revert })=>{
52
- for(let i = 0; i < index; i++){
53
- let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top + parent.height || current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top + parent.height && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top;
54
- if (revert) {
55
- is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom - parent.height || current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom - parent.height && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom;
56
- }
57
- if (is) return true;
58
- }
59
- return false;
60
- };
61
- const waitForElementToExist = (selector, timeout = 200)=>{
62
- return new Promise((resolve)=>{
63
- const intervalID = setInterval(()=>{
64
- const el = document.querySelector(selector);
65
- if (el) {
66
- clearInterval(intervalID);
67
- clearTimeout(timeoutID);
68
- resolve(el);
69
- }
70
- }, 50);
71
- const timeoutID = setTimeout(()=>{
72
- clearInterval(intervalID);
73
- clearTimeout(timeoutID);
74
- resolve(null);
75
- }, timeout);
76
- });
77
- };
78
- const notVisible = (el)=>{
79
- const overflow = getComputedStyle(el).overflow;
80
- return overflow !== 'visible';
81
- };
82
- const isSection = (el)=>{
83
- const tag = el.getAttribute('data-component-tag');
84
- return tag === 'Section';
85
- };
86
- const isOverToolbarPosition = (el, parent)=>{
87
- const rect = el.getBoundingClientRect();
88
- const rectP = parent.getBoundingClientRect();
89
- // 32px = toolbar active height
90
- return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
91
- };
92
- const findOverflowParent = (element, initEl)=>{
93
- const thisEl = element;
94
- const origEl = initEl || thisEl;
95
- if (!thisEl) return;
96
- if (isSection(thisEl)) return;
97
- if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
98
- if (thisEl.parentElement) {
99
- return findOverflowParent(thisEl.parentElement, origEl);
100
- } else {
101
- return;
102
- }
103
- };
104
9
  const Toolbar = ()=>{
105
10
  const currentComponentActive = react.useRef(null);
106
11
  const isDragging = react.useRef(false);
@@ -110,18 +15,18 @@ const Toolbar = ()=>{
110
15
  const $parentOverflow = findOverflowParent($component, $toolbar);
111
16
  if ($parentOverflow) {
112
17
  const rect = $component.getBoundingClientRect();
113
- if (rect?.height >= 60) {
114
- $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
115
- } else {
18
+ if (rect?.height <= 60) {
116
19
  $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
20
+ } else {
21
+ $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
117
22
  }
118
23
  } else {
119
- const rect = $toolbar.getBoundingClientRect();
120
- if (rect.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
121
- if (rect?.height >= 60) {
122
- $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
123
- } else {
24
+ const rectComponent = $component.getBoundingClientRect();
25
+ if (rectComponent.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
26
+ if (rectComponent?.height <= 60) {
124
27
  $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
28
+ } else {
29
+ $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
125
30
  }
126
31
  }
127
32
  }
@@ -260,6 +165,7 @@ const Toolbar = ()=>{
260
165
  'data-toolbar-hover',
261
166
  'data-outline-hover-focus',
262
167
  'data-toolbar-hover-revert',
168
+ 'data-toolbar-hover-inside',
263
169
  'data-outline-hover',
264
170
  'data-toolbar-add-hover'
265
171
  ];
@@ -280,6 +186,7 @@ const Toolbar = ()=>{
280
186
  'data-outline-active',
281
187
  'data-toolbar-add-active',
282
188
  'data-toolbar-active-revert',
189
+ 'data-toolbar-active-inside',
283
190
  'data-spacing-margin-bottom-active',
284
191
  'data-toolbar-force-hover',
285
192
  'data-outline-force-hover'
@@ -302,7 +209,9 @@ const Toolbar = ()=>{
302
209
  mutation.removedNodes.forEach((el)=>{
303
210
  if (el === $el) {
304
211
  if (obsActiveComponent.current) obsActiveComponent.current.disconnect();
305
- callback();
212
+ setTimeout(()=>{
213
+ callback();
214
+ }, 0);
306
215
  }
307
216
  });
308
217
  }
@@ -310,6 +219,16 @@ const Toolbar = ()=>{
310
219
  obsActiveComponent.current.observe(parent, {
311
220
  childList: true
312
221
  });
222
+ const $images = $el.querySelectorAll('img');
223
+ if ($images?.length) {
224
+ $images.forEach(($img)=>{
225
+ $img.addEventListener('load', ()=>{
226
+ setTimeout(()=>{
227
+ callback();
228
+ }, 0);
229
+ });
230
+ });
231
+ }
313
232
  };
314
233
  const setActiveComponentSpacing = react.useCallback(({ $component })=>{
315
234
  if (!$component) return;
@@ -327,7 +246,7 @@ const Toolbar = ()=>{
327
246
  }
328
247
  }
329
248
  }, []);
330
- const setActiveComponentForceHoverSection = ($component, value)=>{
249
+ const setActiveComponentForceHoverSection = react.useCallback(($component, value)=>{
331
250
  const $section = $component.closest('[data-toolbar-wrap][data-component-tag="Section"]');
332
251
  if ($section) {
333
252
  if (value) {
@@ -335,6 +254,11 @@ const Toolbar = ()=>{
335
254
  const $outline = getChildrenByAttrSelector($section, 'data-outline');
336
255
  if ($toolbar) {
337
256
  $toolbar.setAttribute('data-toolbar-force-hover', 'true');
257
+ changePositionToolbar({
258
+ $toolbar,
259
+ $component,
260
+ state: 'hover'
261
+ });
338
262
  }
339
263
  if ($outline) {
340
264
  $outline.setAttribute('data-outline-force-hover', 'true');
@@ -350,13 +274,13 @@ const Toolbar = ()=>{
350
274
  }
351
275
  }
352
276
  }
353
- };
277
+ }, []);
354
278
  const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
355
279
  if (!componentUid) return;
356
280
  const $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
357
281
  if (!$component) return;
358
282
  if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
359
- if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId) removeActiveComponent();
283
+ if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
360
284
  const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
361
285
  const $outline = getChildrenByAttrSelector($component, 'data-outline');
362
286
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
@@ -412,6 +336,7 @@ const Toolbar = ()=>{
412
336
  }, [
413
337
  removeActiveComponent,
414
338
  removeHoverComponent,
339
+ setActiveComponentForceHoverSection,
415
340
  setActiveComponentSpacing
416
341
  ]);
417
342
  const setFocusTextEditor = async (value)=>{
@@ -578,6 +503,7 @@ const Toolbar = ()=>{
578
503
  if ($product) {
579
504
  const productId = $product.getAttribute('data-product-id');
580
505
  if (productId == currentComponentActive.current.productId) {
506
+ removeHoverComponent();
581
507
  return;
582
508
  }
583
509
  }
@@ -705,6 +631,101 @@ const Toolbar = ()=>{
705
631
  ]);
706
632
  return null;
707
633
  };
634
+ const getDOMElementParents = ($el, selector, limit)=>{
635
+ // Set up a parent array
636
+ const parents = [];
637
+ // Push each parent $elms to the array
638
+ while($el){
639
+ $el = $el.parentElement ?? undefined;
640
+ if ($el) {
641
+ if ($el.tagName === 'BODY' || $el.getAttribute('data-uid') === 'ROOT') {
642
+ break;
643
+ }
644
+ if (selector) {
645
+ if ($el.matches(selector)) {
646
+ parents.push($el);
647
+ if (limit && parents.length == limit) {
648
+ return parents;
649
+ }
650
+ }
651
+ continue;
652
+ }
653
+ parents.push($el);
654
+ if (limit && parents.length == limit) {
655
+ return parents;
656
+ }
657
+ }
658
+ }
659
+ // Return our parent array
660
+ return parents;
661
+ };
662
+ const getChildrenByAttrSelector = ($el, attrSelector)=>{
663
+ const childLen = $el.children.length;
664
+ if (childLen) {
665
+ for(let i = 0; i < childLen; i++){
666
+ const children = $el.children[i];
667
+ if (children) {
668
+ const is = children.getAttribute(attrSelector);
669
+ if (is) {
670
+ return children;
671
+ }
672
+ }
673
+ }
674
+ }
675
+ };
676
+ const isOverParent = ({ current, parent, index, revert })=>{
677
+ for(let i = 0; i < index; i++){
678
+ let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top + parent.height || current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top + parent.height && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top;
679
+ if (revert) {
680
+ is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom - parent.height || current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom - parent.height && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom;
681
+ }
682
+ if (is) return true;
683
+ }
684
+ return false;
685
+ };
686
+ const waitForElementToExist = (selector, timeout = 200)=>{
687
+ return new Promise((resolve)=>{
688
+ const intervalID = setInterval(()=>{
689
+ const el = document.querySelector(selector);
690
+ if (el) {
691
+ clearInterval(intervalID);
692
+ clearTimeout(timeoutID);
693
+ resolve(el);
694
+ }
695
+ }, 50);
696
+ const timeoutID = setTimeout(()=>{
697
+ clearInterval(intervalID);
698
+ clearTimeout(timeoutID);
699
+ resolve(null);
700
+ }, timeout);
701
+ });
702
+ };
703
+ const notVisible = (el)=>{
704
+ const overflow = getComputedStyle(el).overflow;
705
+ return overflow !== 'visible';
706
+ };
707
+ const isSection = (el)=>{
708
+ const tag = el.getAttribute('data-component-tag');
709
+ return tag === 'Section';
710
+ };
711
+ const isOverToolbarPosition = (el, parent)=>{
712
+ const rect = el.getBoundingClientRect();
713
+ const rectP = parent.getBoundingClientRect();
714
+ // 32px = toolbar active height
715
+ return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
716
+ };
717
+ const findOverflowParent = (element, initEl)=>{
718
+ const thisEl = element;
719
+ const origEl = initEl || thisEl;
720
+ if (!thisEl) return;
721
+ if (isSection(thisEl)) return;
722
+ if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
723
+ if (thisEl.parentElement) {
724
+ return findOverflowParent(thisEl.parentElement, origEl);
725
+ } else {
726
+ return;
727
+ }
728
+ };
708
729
  var Toolbar$1 = /*#__PURE__*/ react.memo(Toolbar);
709
730
 
710
731
  exports.default = Toolbar$1;
package/dist/esm/components/builder/Toolbar.js CHANGED
@@ -2,101 +2,6 @@ import { memo, useRef, useCallback, useEffect } from 'react';
2
2
 
3
3
  const TOOLBAR_HOVER_HEIGHT = 24;
4
4
  const TOOLBAR_ACTIVE_HEIGHT = 32;
5
- const getDOMElementParents = ($el, selector, limit)=>{
6
- // Set up a parent array
7
- const parents = [];
8
- // Push each parent $elms to the array
9
- while($el){
10
- $el = $el.parentElement ?? undefined;
11
- if ($el) {
12
- if ($el.tagName === 'BODY' || $el.getAttribute('data-uid') === 'ROOT') {
13
- break;
14
- }
15
- if (selector) {
16
- if ($el.matches(selector)) {
17
- parents.push($el);
18
- if (limit && parents.length == limit) {
19
- return parents;
20
- }
21
- }
22
- continue;
23
- }
24
- parents.push($el);
25
- if (limit && parents.length == limit) {
26
- return parents;
27
- }
28
- }
29
- }
30
- // Return our parent array
31
- return parents;
32
- };
33
- const getChildrenByAttrSelector = ($el, attrSelector)=>{
34
- const childLen = $el.children.length;
35
- if (childLen) {
36
- for(let i = 0; i < childLen; i++){
37
- const children = $el.children[i];
38
- if (children) {
39
- const is = children.getAttribute(attrSelector);
40
- if (is) {
41
- return children;
42
- }
43
- }
44
- }
45
- }
46
- };
47
- const isOverParent = ({ current, parent, index, revert })=>{
48
- for(let i = 0; i < index; i++){
49
- let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top + parent.height || current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top + parent.height && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top;
50
- if (revert) {
51
- is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom - parent.height || current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom - parent.height && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom;
52
- }
53
- if (is) return true;
54
- }
55
- return false;
56
- };
57
- const waitForElementToExist = (selector, timeout = 200)=>{
58
- return new Promise((resolve)=>{
59
- const intervalID = setInterval(()=>{
60
- const el = document.querySelector(selector);
61
- if (el) {
62
- clearInterval(intervalID);
63
- clearTimeout(timeoutID);
64
- resolve(el);
65
- }
66
- }, 50);
67
- const timeoutID = setTimeout(()=>{
68
- clearInterval(intervalID);
69
- clearTimeout(timeoutID);
70
- resolve(null);
71
- }, timeout);
72
- });
73
- };
74
- const notVisible = (el)=>{
75
- const overflow = getComputedStyle(el).overflow;
76
- return overflow !== 'visible';
77
- };
78
- const isSection = (el)=>{
79
- const tag = el.getAttribute('data-component-tag');
80
- return tag === 'Section';
81
- };
82
- const isOverToolbarPosition = (el, parent)=>{
83
- const rect = el.getBoundingClientRect();
84
- const rectP = parent.getBoundingClientRect();
85
- // 32px = toolbar active height
86
- return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
87
- };
88
- const findOverflowParent = (element, initEl)=>{
89
- const thisEl = element;
90
- const origEl = initEl || thisEl;
91
- if (!thisEl) return;
92
- if (isSection(thisEl)) return;
93
- if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
94
- if (thisEl.parentElement) {
95
- return findOverflowParent(thisEl.parentElement, origEl);
96
- } else {
97
- return;
98
- }
99
- };
100
5
  const Toolbar = ()=>{
101
6
  const currentComponentActive = useRef(null);
102
7
  const isDragging = useRef(false);
@@ -106,18 +11,18 @@ const Toolbar = ()=>{
106
11
  const $parentOverflow = findOverflowParent($component, $toolbar);
107
12
  if ($parentOverflow) {
108
13
  const rect = $component.getBoundingClientRect();
109
- if (rect?.height >= 60) {
110
- $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
111
- } else {
14
+ if (rect?.height <= 60) {
112
15
  $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
16
+ } else {
17
+ $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
113
18
  }
114
19
  } else {
115
- const rect = $toolbar.getBoundingClientRect();
116
- if (rect.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
117
- if (rect?.height >= 60) {
118
- $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
119
- } else {
20
+ const rectComponent = $component.getBoundingClientRect();
21
+ if (rectComponent.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
22
+ if (rectComponent?.height <= 60) {
120
23
  $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
24
+ } else {
25
+ $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
121
26
  }
122
27
  }
123
28
  }
@@ -256,6 +161,7 @@ const Toolbar = ()=>{
256
161
  'data-toolbar-hover',
257
162
  'data-outline-hover-focus',
258
163
  'data-toolbar-hover-revert',
164
+ 'data-toolbar-hover-inside',
259
165
  'data-outline-hover',
260
166
  'data-toolbar-add-hover'
261
167
  ];
@@ -276,6 +182,7 @@ const Toolbar = ()=>{
276
182
  'data-outline-active',
277
183
  'data-toolbar-add-active',
278
184
  'data-toolbar-active-revert',
185
+ 'data-toolbar-active-inside',
279
186
  'data-spacing-margin-bottom-active',
280
187
  'data-toolbar-force-hover',
281
188
  'data-outline-force-hover'
@@ -298,7 +205,9 @@ const Toolbar = ()=>{
298
205
  mutation.removedNodes.forEach((el)=>{
299
206
  if (el === $el) {
300
207
  if (obsActiveComponent.current) obsActiveComponent.current.disconnect();
301
- callback();
208
+ setTimeout(()=>{
209
+ callback();
210
+ }, 0);
302
211
  }
303
212
  });
304
213
  }
@@ -306,6 +215,16 @@ const Toolbar = ()=>{
306
215
  obsActiveComponent.current.observe(parent, {
307
216
  childList: true
308
217
  });
218
+ const $images = $el.querySelectorAll('img');
219
+ if ($images?.length) {
220
+ $images.forEach(($img)=>{
221
+ $img.addEventListener('load', ()=>{
222
+ setTimeout(()=>{
223
+ callback();
224
+ }, 0);
225
+ });
226
+ });
227
+ }
309
228
  };
310
229
  const setActiveComponentSpacing = useCallback(({ $component })=>{
311
230
  if (!$component) return;
@@ -323,7 +242,7 @@ const Toolbar = ()=>{
323
242
  }
324
243
  }
325
244
  }, []);
326
- const setActiveComponentForceHoverSection = ($component, value)=>{
245
+ const setActiveComponentForceHoverSection = useCallback(($component, value)=>{
327
246
  const $section = $component.closest('[data-toolbar-wrap][data-component-tag="Section"]');
328
247
  if ($section) {
329
248
  if (value) {
@@ -331,6 +250,11 @@ const Toolbar = ()=>{
331
250
  const $outline = getChildrenByAttrSelector($section, 'data-outline');
332
251
  if ($toolbar) {
333
252
  $toolbar.setAttribute('data-toolbar-force-hover', 'true');
253
+ changePositionToolbar({
254
+ $toolbar,
255
+ $component,
256
+ state: 'hover'
257
+ });
334
258
  }
335
259
  if ($outline) {
336
260
  $outline.setAttribute('data-outline-force-hover', 'true');
@@ -346,13 +270,13 @@ const Toolbar = ()=>{
346
270
  }
347
271
  }
348
272
  }
349
- };
273
+ }, []);
350
274
  const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
351
275
  if (!componentUid) return;
352
276
  const $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
353
277
  if (!$component) return;
354
278
  if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
355
- if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId) removeActiveComponent();
279
+ if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
356
280
  const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
357
281
  const $outline = getChildrenByAttrSelector($component, 'data-outline');
358
282
  const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
@@ -408,6 +332,7 @@ const Toolbar = ()=>{
408
332
  }, [
409
333
  removeActiveComponent,
410
334
  removeHoverComponent,
335
+ setActiveComponentForceHoverSection,
411
336
  setActiveComponentSpacing
412
337
  ]);
413
338
  const setFocusTextEditor = async (value)=>{
@@ -574,6 +499,7 @@ const Toolbar = ()=>{
574
499
  if ($product) {
575
500
  const productId = $product.getAttribute('data-product-id');
576
501
  if (productId == currentComponentActive.current.productId) {
502
+ removeHoverComponent();
577
503
  return;
578
504
  }
579
505
  }
@@ -701,6 +627,101 @@ const Toolbar = ()=>{
701
627
  ]);
702
628
  return null;
703
629
  };
630
+ const getDOMElementParents = ($el, selector, limit)=>{
631
+ // Set up a parent array
632
+ const parents = [];
633
+ // Push each parent $elms to the array
634
+ while($el){
635
+ $el = $el.parentElement ?? undefined;
636
+ if ($el) {
637
+ if ($el.tagName === 'BODY' || $el.getAttribute('data-uid') === 'ROOT') {
638
+ break;
639
+ }
640
+ if (selector) {
641
+ if ($el.matches(selector)) {
642
+ parents.push($el);
643
+ if (limit && parents.length == limit) {
644
+ return parents;
645
+ }
646
+ }
647
+ continue;
648
+ }
649
+ parents.push($el);
650
+ if (limit && parents.length == limit) {
651
+ return parents;
652
+ }
653
+ }
654
+ }
655
+ // Return our parent array
656
+ return parents;
657
+ };
658
+ const getChildrenByAttrSelector = ($el, attrSelector)=>{
659
+ const childLen = $el.children.length;
660
+ if (childLen) {
661
+ for(let i = 0; i < childLen; i++){
662
+ const children = $el.children[i];
663
+ if (children) {
664
+ const is = children.getAttribute(attrSelector);
665
+ if (is) {
666
+ return children;
667
+ }
668
+ }
669
+ }
670
+ }
671
+ };
672
+ const isOverParent = ({ current, parent, index, revert })=>{
673
+ for(let i = 0; i < index; i++){
674
+ let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top + parent.height || current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top + parent.height && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top;
675
+ if (revert) {
676
+ is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom - parent.height || current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom - parent.height && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom;
677
+ }
678
+ if (is) return true;
679
+ }
680
+ return false;
681
+ };
682
+ const waitForElementToExist = (selector, timeout = 200)=>{
683
+ return new Promise((resolve)=>{
684
+ const intervalID = setInterval(()=>{
685
+ const el = document.querySelector(selector);
686
+ if (el) {
687
+ clearInterval(intervalID);
688
+ clearTimeout(timeoutID);
689
+ resolve(el);
690
+ }
691
+ }, 50);
692
+ const timeoutID = setTimeout(()=>{
693
+ clearInterval(intervalID);
694
+ clearTimeout(timeoutID);
695
+ resolve(null);
696
+ }, timeout);
697
+ });
698
+ };
699
+ const notVisible = (el)=>{
700
+ const overflow = getComputedStyle(el).overflow;
701
+ return overflow !== 'visible';
702
+ };
703
+ const isSection = (el)=>{
704
+ const tag = el.getAttribute('data-component-tag');
705
+ return tag === 'Section';
706
+ };
707
+ const isOverToolbarPosition = (el, parent)=>{
708
+ const rect = el.getBoundingClientRect();
709
+ const rectP = parent.getBoundingClientRect();
710
+ // 32px = toolbar active height
711
+ return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
712
+ };
713
+ const findOverflowParent = (element, initEl)=>{
714
+ const thisEl = element;
715
+ const origEl = initEl || thisEl;
716
+ if (!thisEl) return;
717
+ if (isSection(thisEl)) return;
718
+ if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
719
+ if (thisEl.parentElement) {
720
+ return findOverflowParent(thisEl.parentElement, origEl);
721
+ } else {
722
+ return;
723
+ }
724
+ };
704
725
  var Toolbar$1 = /*#__PURE__*/ memo(Toolbar);
705
726
 
706
727
  export { Toolbar$1 as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.23.0-staging.29",
3
+ "version": "1.23.0-staging.34",
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.29",
28
+ "@gem-sdk/core": "1.23.0-staging.33",
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"