@gem-sdk/pages 1.23.0-staging.26 → 1.23.0-staging.29
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.
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var react = require('react');
|
|
6
6
|
|
|
7
7
|
const TOOLBAR_HOVER_HEIGHT = 24;
|
|
8
|
-
|
|
8
|
+
const TOOLBAR_ACTIVE_HEIGHT = 32;
|
|
9
9
|
const getDOMElementParents = ($el, selector, limit)=>{
|
|
10
10
|
// Set up a parent array
|
|
11
11
|
const parents = [];
|
|
@@ -48,9 +48,12 @@ const getChildrenByAttrSelector = ($el, attrSelector)=>{
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
};
|
|
51
|
-
const isOverParent = (current, parent, index)=>{
|
|
51
|
+
const isOverParent = ({ current, parent, index, revert })=>{
|
|
52
52
|
for(let i = 0; i < index; i++){
|
|
53
|
-
|
|
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
|
+
}
|
|
54
57
|
if (is) return true;
|
|
55
58
|
}
|
|
56
59
|
return false;
|
|
@@ -84,7 +87,7 @@ const isOverToolbarPosition = (el, parent)=>{
|
|
|
84
87
|
const rect = el.getBoundingClientRect();
|
|
85
88
|
const rectP = parent.getBoundingClientRect();
|
|
86
89
|
// 32px = toolbar active height
|
|
87
|
-
return rect.top - rectP.top <
|
|
90
|
+
return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
|
|
88
91
|
};
|
|
89
92
|
const findOverflowParent = (element, initEl)=>{
|
|
90
93
|
const thisEl = element;
|
|
@@ -103,7 +106,27 @@ const Toolbar = ()=>{
|
|
|
103
106
|
const isDragging = react.useRef(false);
|
|
104
107
|
const obsActiveComponent = react.useRef();
|
|
105
108
|
const isResizeSpacing = react.useRef(false);
|
|
106
|
-
/* Functions */ const
|
|
109
|
+
/* Functions */ const changePositionToolbar = ({ state, $toolbar, $component })=>{
|
|
110
|
+
const $parentOverflow = findOverflowParent($component, $toolbar);
|
|
111
|
+
if ($parentOverflow) {
|
|
112
|
+
const rect = $component.getBoundingClientRect();
|
|
113
|
+
if (rect?.height >= 60) {
|
|
114
|
+
$toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
|
|
115
|
+
} else {
|
|
116
|
+
$toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
|
|
117
|
+
}
|
|
118
|
+
} 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 {
|
|
124
|
+
$toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection })=>{
|
|
107
130
|
if (!$component && !componentUid) return;
|
|
108
131
|
if (!$component) {
|
|
109
132
|
const $c = document.querySelector(`[data-uid="${componentUid}"]`);
|
|
@@ -129,10 +152,11 @@ const Toolbar = ()=>{
|
|
|
129
152
|
if (focus) {
|
|
130
153
|
$toolbar.setAttribute('data-toolbar-hover-focus', 'true');
|
|
131
154
|
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
$
|
|
135
|
-
|
|
155
|
+
changePositionToolbar({
|
|
156
|
+
$toolbar,
|
|
157
|
+
$component,
|
|
158
|
+
state: 'hover'
|
|
159
|
+
});
|
|
136
160
|
}
|
|
137
161
|
if ($outline) {
|
|
138
162
|
$outline.setAttribute('data-outline-hover', 'true');
|
|
@@ -179,6 +203,8 @@ const Toolbar = ()=>{
|
|
|
179
203
|
const $currentToolbar = getChildrenByAttrSelector($component, 'data-toolbar-hover-focus');
|
|
180
204
|
if ($currentToolbar) {
|
|
181
205
|
const currentRect = $currentToolbar.getBoundingClientRect();
|
|
206
|
+
const isRevert = $currentToolbar.getAttribute('data-toolbar-hover-revert') ? true : false;
|
|
207
|
+
const isInside = $currentToolbar.getAttribute('data-toolbar-hover-inside') ? true : false;
|
|
182
208
|
let index = 1;
|
|
183
209
|
for (const $parent of $parents){
|
|
184
210
|
if ($parent) {
|
|
@@ -191,14 +217,19 @@ const Toolbar = ()=>{
|
|
|
191
217
|
if (isActive) continue;
|
|
192
218
|
// Start calc
|
|
193
219
|
const parentRect = $toolbar.getBoundingClientRect();
|
|
194
|
-
|
|
220
|
+
const checkRevert = isRevert || isInside;
|
|
221
|
+
if (isOverParent({
|
|
222
|
+
current: currentRect,
|
|
223
|
+
parent: parentRect,
|
|
224
|
+
index,
|
|
225
|
+
revert: checkRevert
|
|
226
|
+
})) {
|
|
195
227
|
const parentStyle = getComputedStyle($toolbar);
|
|
196
|
-
const isRevert = $toolbar.getAttribute('data-toolbar-hover-revert') ? true : false;
|
|
197
228
|
// parentStyle.top
|
|
198
229
|
const diffTop = currentRect.top - parentRect.top;
|
|
199
230
|
const diffLeft = currentRect.left - parentRect.left;
|
|
200
231
|
let newTop = parseFloat(parentStyle.top) + diffTop - (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
|
|
201
|
-
if (
|
|
232
|
+
if (checkRevert) {
|
|
202
233
|
newTop = parseFloat(parentStyle.top) - diffTop + (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
|
|
203
234
|
}
|
|
204
235
|
const newLeft = parseFloat(parentStyle.left) + diffLeft;
|
|
@@ -337,10 +368,11 @@ const Toolbar = ()=>{
|
|
|
337
368
|
};
|
|
338
369
|
$toolbar.removeAttribute('style');
|
|
339
370
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
$
|
|
343
|
-
|
|
371
|
+
changePositionToolbar({
|
|
372
|
+
$toolbar,
|
|
373
|
+
$component,
|
|
374
|
+
state: 'active'
|
|
375
|
+
});
|
|
344
376
|
}
|
|
345
377
|
if ($outline) {
|
|
346
378
|
$outline.setAttribute('data-outline-active', 'true');
|
|
@@ -509,52 +541,46 @@ const Toolbar = ()=>{
|
|
|
509
541
|
}
|
|
510
542
|
const $toolbarHover = $target.closest('[data-toolbar-hover]');
|
|
511
543
|
if ($toolbarHover) {
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
544
|
+
// Disable feature overlay when hover to toolbar parents
|
|
545
|
+
return;
|
|
546
|
+
// removeHoverOverlayComponent(); // remove overlay old
|
|
547
|
+
// // Hover to toolbar is focus
|
|
548
|
+
// if ($toolbarHover?.getAttribute('data-toolbar-hover-focus')) return;
|
|
549
|
+
// const $component = $target.closest('[data-toolbar-wrap]');
|
|
550
|
+
// if (!$component) return;
|
|
551
|
+
// const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
552
|
+
// if (!$outline) return;
|
|
553
|
+
// const isThemeSection = $component.getAttribute('data-theme-section');
|
|
554
|
+
// const outlineOverlay = isThemeSection
|
|
555
|
+
// ? 'data-outline-overlay-theme-section'
|
|
556
|
+
// : 'data-outline-overlay';
|
|
557
|
+
// $outline.setAttribute(outlineOverlay, 'true');
|
|
558
|
+
}
|
|
559
|
+
// Hover to other component
|
|
560
|
+
const $component = $target.closest('[data-toolbar-wrap]');
|
|
561
|
+
const componentUid = $component?.getAttribute('data-uid');
|
|
562
|
+
if (!$component || !componentUid || componentUid == 'ROOT') {
|
|
563
|
+
removeHoverComponent();
|
|
564
|
+
return;
|
|
565
|
+
}
|
|
566
|
+
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
567
|
+
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
568
|
+
if ($outline) $outline.removeAttribute('data-outline-overlay');
|
|
569
|
+
if (!componentUid) return;
|
|
570
|
+
if (componentUid == 'ROOT') return;
|
|
571
|
+
if ($toolbar?.getAttribute('data-toolbar-hover-focus')) return;
|
|
572
|
+
if (!$toolbar?.getAttribute('data-toolbar-hover-focus')) removeHoverComponent();
|
|
573
|
+
hoverActiveThemeSection($target);
|
|
574
|
+
// Disable event when hover active component
|
|
575
|
+
if (componentUid == currentComponentActive.current?.componentUid) {
|
|
576
|
+
if (currentComponentActive.current.productId) {
|
|
577
|
+
const $product = $component.closest(`[data-product-id]`);
|
|
578
|
+
if ($product) {
|
|
579
|
+
const productId = $product.getAttribute('data-product-id');
|
|
580
|
+
if (productId == currentComponentActive.current.productId) {
|
|
581
|
+
return;
|
|
546
582
|
}
|
|
547
583
|
}
|
|
548
|
-
const $themeSection = $target.closest('[data-theme-section]');
|
|
549
|
-
if ($themeSection) {
|
|
550
|
-
setHoverComponent({
|
|
551
|
-
$component: $themeSection,
|
|
552
|
-
focus: true,
|
|
553
|
-
isThemeSection: true
|
|
554
|
-
});
|
|
555
|
-
} else {
|
|
556
|
-
return;
|
|
557
|
-
}
|
|
558
584
|
}
|
|
559
585
|
const $themeSection = $target.closest('[data-theme-section]');
|
|
560
586
|
if ($themeSection) {
|
|
@@ -564,17 +590,27 @@ const Toolbar = ()=>{
|
|
|
564
590
|
isThemeSection: true
|
|
565
591
|
});
|
|
566
592
|
} else {
|
|
567
|
-
|
|
568
|
-
$component,
|
|
569
|
-
componentUid,
|
|
570
|
-
focus: true
|
|
571
|
-
});
|
|
572
|
-
setHoverComponentParents({
|
|
573
|
-
$component,
|
|
574
|
-
componentUid
|
|
575
|
-
});
|
|
593
|
+
return;
|
|
576
594
|
}
|
|
577
595
|
}
|
|
596
|
+
const $themeSection = $target.closest('[data-theme-section]');
|
|
597
|
+
if ($themeSection) {
|
|
598
|
+
setHoverComponent({
|
|
599
|
+
$component: $themeSection,
|
|
600
|
+
focus: true,
|
|
601
|
+
isThemeSection: true
|
|
602
|
+
});
|
|
603
|
+
} else {
|
|
604
|
+
setHoverComponent({
|
|
605
|
+
$component,
|
|
606
|
+
componentUid,
|
|
607
|
+
focus: true
|
|
608
|
+
});
|
|
609
|
+
setHoverComponentParents({
|
|
610
|
+
$component,
|
|
611
|
+
componentUid
|
|
612
|
+
});
|
|
613
|
+
}
|
|
578
614
|
}, [
|
|
579
615
|
hoverActiveThemeSection,
|
|
580
616
|
removeHoverComponent,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { memo, useRef, useCallback, useEffect } from 'react';
|
|
2
2
|
|
|
3
3
|
const TOOLBAR_HOVER_HEIGHT = 24;
|
|
4
|
-
|
|
4
|
+
const TOOLBAR_ACTIVE_HEIGHT = 32;
|
|
5
5
|
const getDOMElementParents = ($el, selector, limit)=>{
|
|
6
6
|
// Set up a parent array
|
|
7
7
|
const parents = [];
|
|
@@ -44,9 +44,12 @@ const getChildrenByAttrSelector = ($el, attrSelector)=>{
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
};
|
|
47
|
-
const isOverParent = (current, parent, index)=>{
|
|
47
|
+
const isOverParent = ({ current, parent, index, revert })=>{
|
|
48
48
|
for(let i = 0; i < index; i++){
|
|
49
|
-
|
|
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
|
+
}
|
|
50
53
|
if (is) return true;
|
|
51
54
|
}
|
|
52
55
|
return false;
|
|
@@ -80,7 +83,7 @@ const isOverToolbarPosition = (el, parent)=>{
|
|
|
80
83
|
const rect = el.getBoundingClientRect();
|
|
81
84
|
const rectP = parent.getBoundingClientRect();
|
|
82
85
|
// 32px = toolbar active height
|
|
83
|
-
return rect.top - rectP.top <
|
|
86
|
+
return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
|
|
84
87
|
};
|
|
85
88
|
const findOverflowParent = (element, initEl)=>{
|
|
86
89
|
const thisEl = element;
|
|
@@ -99,7 +102,27 @@ const Toolbar = ()=>{
|
|
|
99
102
|
const isDragging = useRef(false);
|
|
100
103
|
const obsActiveComponent = useRef();
|
|
101
104
|
const isResizeSpacing = useRef(false);
|
|
102
|
-
/* Functions */ const
|
|
105
|
+
/* Functions */ const changePositionToolbar = ({ state, $toolbar, $component })=>{
|
|
106
|
+
const $parentOverflow = findOverflowParent($component, $toolbar);
|
|
107
|
+
if ($parentOverflow) {
|
|
108
|
+
const rect = $component.getBoundingClientRect();
|
|
109
|
+
if (rect?.height >= 60) {
|
|
110
|
+
$toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
|
|
111
|
+
} else {
|
|
112
|
+
$toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
|
|
113
|
+
}
|
|
114
|
+
} 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 {
|
|
120
|
+
$toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection })=>{
|
|
103
126
|
if (!$component && !componentUid) return;
|
|
104
127
|
if (!$component) {
|
|
105
128
|
const $c = document.querySelector(`[data-uid="${componentUid}"]`);
|
|
@@ -125,10 +148,11 @@ const Toolbar = ()=>{
|
|
|
125
148
|
if (focus) {
|
|
126
149
|
$toolbar.setAttribute('data-toolbar-hover-focus', 'true');
|
|
127
150
|
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
$
|
|
131
|
-
|
|
151
|
+
changePositionToolbar({
|
|
152
|
+
$toolbar,
|
|
153
|
+
$component,
|
|
154
|
+
state: 'hover'
|
|
155
|
+
});
|
|
132
156
|
}
|
|
133
157
|
if ($outline) {
|
|
134
158
|
$outline.setAttribute('data-outline-hover', 'true');
|
|
@@ -175,6 +199,8 @@ const Toolbar = ()=>{
|
|
|
175
199
|
const $currentToolbar = getChildrenByAttrSelector($component, 'data-toolbar-hover-focus');
|
|
176
200
|
if ($currentToolbar) {
|
|
177
201
|
const currentRect = $currentToolbar.getBoundingClientRect();
|
|
202
|
+
const isRevert = $currentToolbar.getAttribute('data-toolbar-hover-revert') ? true : false;
|
|
203
|
+
const isInside = $currentToolbar.getAttribute('data-toolbar-hover-inside') ? true : false;
|
|
178
204
|
let index = 1;
|
|
179
205
|
for (const $parent of $parents){
|
|
180
206
|
if ($parent) {
|
|
@@ -187,14 +213,19 @@ const Toolbar = ()=>{
|
|
|
187
213
|
if (isActive) continue;
|
|
188
214
|
// Start calc
|
|
189
215
|
const parentRect = $toolbar.getBoundingClientRect();
|
|
190
|
-
|
|
216
|
+
const checkRevert = isRevert || isInside;
|
|
217
|
+
if (isOverParent({
|
|
218
|
+
current: currentRect,
|
|
219
|
+
parent: parentRect,
|
|
220
|
+
index,
|
|
221
|
+
revert: checkRevert
|
|
222
|
+
})) {
|
|
191
223
|
const parentStyle = getComputedStyle($toolbar);
|
|
192
|
-
const isRevert = $toolbar.getAttribute('data-toolbar-hover-revert') ? true : false;
|
|
193
224
|
// parentStyle.top
|
|
194
225
|
const diffTop = currentRect.top - parentRect.top;
|
|
195
226
|
const diffLeft = currentRect.left - parentRect.left;
|
|
196
227
|
let newTop = parseFloat(parentStyle.top) + diffTop - (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
|
|
197
|
-
if (
|
|
228
|
+
if (checkRevert) {
|
|
198
229
|
newTop = parseFloat(parentStyle.top) - diffTop + (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
|
|
199
230
|
}
|
|
200
231
|
const newLeft = parseFloat(parentStyle.left) + diffLeft;
|
|
@@ -333,10 +364,11 @@ const Toolbar = ()=>{
|
|
|
333
364
|
};
|
|
334
365
|
$toolbar.removeAttribute('style');
|
|
335
366
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
$
|
|
339
|
-
|
|
367
|
+
changePositionToolbar({
|
|
368
|
+
$toolbar,
|
|
369
|
+
$component,
|
|
370
|
+
state: 'active'
|
|
371
|
+
});
|
|
340
372
|
}
|
|
341
373
|
if ($outline) {
|
|
342
374
|
$outline.setAttribute('data-outline-active', 'true');
|
|
@@ -505,52 +537,46 @@ const Toolbar = ()=>{
|
|
|
505
537
|
}
|
|
506
538
|
const $toolbarHover = $target.closest('[data-toolbar-hover]');
|
|
507
539
|
if ($toolbarHover) {
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
540
|
+
// Disable feature overlay when hover to toolbar parents
|
|
541
|
+
return;
|
|
542
|
+
// removeHoverOverlayComponent(); // remove overlay old
|
|
543
|
+
// // Hover to toolbar is focus
|
|
544
|
+
// if ($toolbarHover?.getAttribute('data-toolbar-hover-focus')) return;
|
|
545
|
+
// const $component = $target.closest('[data-toolbar-wrap]');
|
|
546
|
+
// if (!$component) return;
|
|
547
|
+
// const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
548
|
+
// if (!$outline) return;
|
|
549
|
+
// const isThemeSection = $component.getAttribute('data-theme-section');
|
|
550
|
+
// const outlineOverlay = isThemeSection
|
|
551
|
+
// ? 'data-outline-overlay-theme-section'
|
|
552
|
+
// : 'data-outline-overlay';
|
|
553
|
+
// $outline.setAttribute(outlineOverlay, 'true');
|
|
554
|
+
}
|
|
555
|
+
// Hover to other component
|
|
556
|
+
const $component = $target.closest('[data-toolbar-wrap]');
|
|
557
|
+
const componentUid = $component?.getAttribute('data-uid');
|
|
558
|
+
if (!$component || !componentUid || componentUid == 'ROOT') {
|
|
559
|
+
removeHoverComponent();
|
|
560
|
+
return;
|
|
561
|
+
}
|
|
562
|
+
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
563
|
+
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
564
|
+
if ($outline) $outline.removeAttribute('data-outline-overlay');
|
|
565
|
+
if (!componentUid) return;
|
|
566
|
+
if (componentUid == 'ROOT') return;
|
|
567
|
+
if ($toolbar?.getAttribute('data-toolbar-hover-focus')) return;
|
|
568
|
+
if (!$toolbar?.getAttribute('data-toolbar-hover-focus')) removeHoverComponent();
|
|
569
|
+
hoverActiveThemeSection($target);
|
|
570
|
+
// Disable event when hover active component
|
|
571
|
+
if (componentUid == currentComponentActive.current?.componentUid) {
|
|
572
|
+
if (currentComponentActive.current.productId) {
|
|
573
|
+
const $product = $component.closest(`[data-product-id]`);
|
|
574
|
+
if ($product) {
|
|
575
|
+
const productId = $product.getAttribute('data-product-id');
|
|
576
|
+
if (productId == currentComponentActive.current.productId) {
|
|
577
|
+
return;
|
|
542
578
|
}
|
|
543
579
|
}
|
|
544
|
-
const $themeSection = $target.closest('[data-theme-section]');
|
|
545
|
-
if ($themeSection) {
|
|
546
|
-
setHoverComponent({
|
|
547
|
-
$component: $themeSection,
|
|
548
|
-
focus: true,
|
|
549
|
-
isThemeSection: true
|
|
550
|
-
});
|
|
551
|
-
} else {
|
|
552
|
-
return;
|
|
553
|
-
}
|
|
554
580
|
}
|
|
555
581
|
const $themeSection = $target.closest('[data-theme-section]');
|
|
556
582
|
if ($themeSection) {
|
|
@@ -560,17 +586,27 @@ const Toolbar = ()=>{
|
|
|
560
586
|
isThemeSection: true
|
|
561
587
|
});
|
|
562
588
|
} else {
|
|
563
|
-
|
|
564
|
-
$component,
|
|
565
|
-
componentUid,
|
|
566
|
-
focus: true
|
|
567
|
-
});
|
|
568
|
-
setHoverComponentParents({
|
|
569
|
-
$component,
|
|
570
|
-
componentUid
|
|
571
|
-
});
|
|
589
|
+
return;
|
|
572
590
|
}
|
|
573
591
|
}
|
|
592
|
+
const $themeSection = $target.closest('[data-theme-section]');
|
|
593
|
+
if ($themeSection) {
|
|
594
|
+
setHoverComponent({
|
|
595
|
+
$component: $themeSection,
|
|
596
|
+
focus: true,
|
|
597
|
+
isThemeSection: true
|
|
598
|
+
});
|
|
599
|
+
} else {
|
|
600
|
+
setHoverComponent({
|
|
601
|
+
$component,
|
|
602
|
+
componentUid,
|
|
603
|
+
focus: true
|
|
604
|
+
});
|
|
605
|
+
setHoverComponentParents({
|
|
606
|
+
$component,
|
|
607
|
+
componentUid
|
|
608
|
+
});
|
|
609
|
+
}
|
|
574
610
|
}, [
|
|
575
611
|
hoverActiveThemeSection,
|
|
576
612
|
removeHoverComponent,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "1.23.0-staging.
|
|
3
|
+
"version": "1.23.0-staging.29",
|
|
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.
|
|
28
|
+
"@gem-sdk/core": "1.23.0-staging.29",
|
|
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"
|