@gem-sdk/pages 1.23.0-staging.27 → 1.23.0-staging.31
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,28 @@ 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}-revert`, 'true');
|
|
115
|
+
} else {
|
|
116
|
+
$toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
|
|
117
|
+
}
|
|
118
|
+
} else {
|
|
119
|
+
const rect = $toolbar.getBoundingClientRect();
|
|
120
|
+
const rectComponent = $component.getBoundingClientRect();
|
|
121
|
+
if (rect.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
|
|
122
|
+
if (rectComponent?.height <= 60) {
|
|
123
|
+
$toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
|
|
124
|
+
} else {
|
|
125
|
+
$toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
};
|
|
130
|
+
const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection })=>{
|
|
107
131
|
if (!$component && !componentUid) return;
|
|
108
132
|
if (!$component) {
|
|
109
133
|
const $c = document.querySelector(`[data-uid="${componentUid}"]`);
|
|
@@ -129,10 +153,11 @@ const Toolbar = ()=>{
|
|
|
129
153
|
if (focus) {
|
|
130
154
|
$toolbar.setAttribute('data-toolbar-hover-focus', 'true');
|
|
131
155
|
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
$
|
|
135
|
-
|
|
156
|
+
changePositionToolbar({
|
|
157
|
+
$toolbar,
|
|
158
|
+
$component,
|
|
159
|
+
state: 'hover'
|
|
160
|
+
});
|
|
136
161
|
}
|
|
137
162
|
if ($outline) {
|
|
138
163
|
$outline.setAttribute('data-outline-hover', 'true');
|
|
@@ -179,6 +204,8 @@ const Toolbar = ()=>{
|
|
|
179
204
|
const $currentToolbar = getChildrenByAttrSelector($component, 'data-toolbar-hover-focus');
|
|
180
205
|
if ($currentToolbar) {
|
|
181
206
|
const currentRect = $currentToolbar.getBoundingClientRect();
|
|
207
|
+
const isRevert = $currentToolbar.getAttribute('data-toolbar-hover-revert') ? true : false;
|
|
208
|
+
const isInside = $currentToolbar.getAttribute('data-toolbar-hover-inside') ? true : false;
|
|
182
209
|
let index = 1;
|
|
183
210
|
for (const $parent of $parents){
|
|
184
211
|
if ($parent) {
|
|
@@ -191,14 +218,19 @@ const Toolbar = ()=>{
|
|
|
191
218
|
if (isActive) continue;
|
|
192
219
|
// Start calc
|
|
193
220
|
const parentRect = $toolbar.getBoundingClientRect();
|
|
194
|
-
|
|
221
|
+
const checkRevert = isRevert || isInside;
|
|
222
|
+
if (isOverParent({
|
|
223
|
+
current: currentRect,
|
|
224
|
+
parent: parentRect,
|
|
225
|
+
index,
|
|
226
|
+
revert: checkRevert
|
|
227
|
+
})) {
|
|
195
228
|
const parentStyle = getComputedStyle($toolbar);
|
|
196
|
-
const isRevert = $toolbar.getAttribute('data-toolbar-hover-revert') ? true : false;
|
|
197
229
|
// parentStyle.top
|
|
198
230
|
const diffTop = currentRect.top - parentRect.top;
|
|
199
231
|
const diffLeft = currentRect.left - parentRect.left;
|
|
200
232
|
let newTop = parseFloat(parentStyle.top) + diffTop - (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
|
|
201
|
-
if (
|
|
233
|
+
if (checkRevert) {
|
|
202
234
|
newTop = parseFloat(parentStyle.top) - diffTop + (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
|
|
203
235
|
}
|
|
204
236
|
const newLeft = parseFloat(parentStyle.left) + diffLeft;
|
|
@@ -229,6 +261,7 @@ const Toolbar = ()=>{
|
|
|
229
261
|
'data-toolbar-hover',
|
|
230
262
|
'data-outline-hover-focus',
|
|
231
263
|
'data-toolbar-hover-revert',
|
|
264
|
+
'data-toolbar-hover-inside',
|
|
232
265
|
'data-outline-hover',
|
|
233
266
|
'data-toolbar-add-hover'
|
|
234
267
|
];
|
|
@@ -249,6 +282,7 @@ const Toolbar = ()=>{
|
|
|
249
282
|
'data-outline-active',
|
|
250
283
|
'data-toolbar-add-active',
|
|
251
284
|
'data-toolbar-active-revert',
|
|
285
|
+
'data-toolbar-active-inside',
|
|
252
286
|
'data-spacing-margin-bottom-active',
|
|
253
287
|
'data-toolbar-force-hover',
|
|
254
288
|
'data-outline-force-hover'
|
|
@@ -337,10 +371,11 @@ const Toolbar = ()=>{
|
|
|
337
371
|
};
|
|
338
372
|
$toolbar.removeAttribute('style');
|
|
339
373
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
$
|
|
343
|
-
|
|
374
|
+
changePositionToolbar({
|
|
375
|
+
$toolbar,
|
|
376
|
+
$component,
|
|
377
|
+
state: 'active'
|
|
378
|
+
});
|
|
344
379
|
}
|
|
345
380
|
if ($outline) {
|
|
346
381
|
$outline.setAttribute('data-outline-active', 'true');
|
|
@@ -509,53 +544,46 @@ const Toolbar = ()=>{
|
|
|
509
544
|
}
|
|
510
545
|
const $toolbarHover = $target.closest('[data-toolbar-hover]');
|
|
511
546
|
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
|
-
|
|
546
|
-
|
|
547
|
+
// Disable feature overlay when hover to toolbar parents
|
|
548
|
+
return;
|
|
549
|
+
// removeHoverOverlayComponent(); // remove overlay old
|
|
550
|
+
// // Hover to toolbar is focus
|
|
551
|
+
// if ($toolbarHover?.getAttribute('data-toolbar-hover-focus')) return;
|
|
552
|
+
// const $component = $target.closest('[data-toolbar-wrap]');
|
|
553
|
+
// if (!$component) return;
|
|
554
|
+
// const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
555
|
+
// if (!$outline) return;
|
|
556
|
+
// const isThemeSection = $component.getAttribute('data-theme-section');
|
|
557
|
+
// const outlineOverlay = isThemeSection
|
|
558
|
+
// ? 'data-outline-overlay-theme-section'
|
|
559
|
+
// : 'data-outline-overlay';
|
|
560
|
+
// $outline.setAttribute(outlineOverlay, 'true');
|
|
561
|
+
}
|
|
562
|
+
// Hover to other component
|
|
563
|
+
const $component = $target.closest('[data-toolbar-wrap]');
|
|
564
|
+
const componentUid = $component?.getAttribute('data-uid');
|
|
565
|
+
if (!$component || !componentUid || componentUid == 'ROOT') {
|
|
566
|
+
removeHoverComponent();
|
|
567
|
+
return;
|
|
568
|
+
}
|
|
569
|
+
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
570
|
+
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
571
|
+
if ($outline) $outline.removeAttribute('data-outline-overlay');
|
|
572
|
+
if (!componentUid) return;
|
|
573
|
+
if (componentUid == 'ROOT') return;
|
|
574
|
+
if ($toolbar?.getAttribute('data-toolbar-hover-focus')) return;
|
|
575
|
+
if (!$toolbar?.getAttribute('data-toolbar-hover-focus')) removeHoverComponent();
|
|
576
|
+
hoverActiveThemeSection($target);
|
|
577
|
+
// Disable event when hover active component
|
|
578
|
+
if (componentUid == currentComponentActive.current?.componentUid) {
|
|
579
|
+
if (currentComponentActive.current.productId) {
|
|
580
|
+
const $product = $component.closest(`[data-product-id]`);
|
|
581
|
+
if ($product) {
|
|
582
|
+
const productId = $product.getAttribute('data-product-id');
|
|
583
|
+
if (productId == currentComponentActive.current.productId) {
|
|
584
|
+
return;
|
|
547
585
|
}
|
|
548
586
|
}
|
|
549
|
-
const $themeSection = $target.closest('[data-theme-section]');
|
|
550
|
-
if ($themeSection) {
|
|
551
|
-
setHoverComponent({
|
|
552
|
-
$component: $themeSection,
|
|
553
|
-
focus: true,
|
|
554
|
-
isThemeSection: true
|
|
555
|
-
});
|
|
556
|
-
} else {
|
|
557
|
-
return;
|
|
558
|
-
}
|
|
559
587
|
}
|
|
560
588
|
const $themeSection = $target.closest('[data-theme-section]');
|
|
561
589
|
if ($themeSection) {
|
|
@@ -565,17 +593,27 @@ const Toolbar = ()=>{
|
|
|
565
593
|
isThemeSection: true
|
|
566
594
|
});
|
|
567
595
|
} else {
|
|
568
|
-
|
|
569
|
-
$component,
|
|
570
|
-
componentUid,
|
|
571
|
-
focus: true
|
|
572
|
-
});
|
|
573
|
-
setHoverComponentParents({
|
|
574
|
-
$component,
|
|
575
|
-
componentUid
|
|
576
|
-
});
|
|
596
|
+
return;
|
|
577
597
|
}
|
|
578
598
|
}
|
|
599
|
+
const $themeSection = $target.closest('[data-theme-section]');
|
|
600
|
+
if ($themeSection) {
|
|
601
|
+
setHoverComponent({
|
|
602
|
+
$component: $themeSection,
|
|
603
|
+
focus: true,
|
|
604
|
+
isThemeSection: true
|
|
605
|
+
});
|
|
606
|
+
} else {
|
|
607
|
+
setHoverComponent({
|
|
608
|
+
$component,
|
|
609
|
+
componentUid,
|
|
610
|
+
focus: true
|
|
611
|
+
});
|
|
612
|
+
setHoverComponentParents({
|
|
613
|
+
$component,
|
|
614
|
+
componentUid
|
|
615
|
+
});
|
|
616
|
+
}
|
|
579
617
|
}, [
|
|
580
618
|
hoverActiveThemeSection,
|
|
581
619
|
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,28 @@ 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}-revert`, 'true');
|
|
111
|
+
} else {
|
|
112
|
+
$toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
|
|
113
|
+
}
|
|
114
|
+
} else {
|
|
115
|
+
const rect = $toolbar.getBoundingClientRect();
|
|
116
|
+
const rectComponent = $component.getBoundingClientRect();
|
|
117
|
+
if (rect.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
|
|
118
|
+
if (rectComponent?.height <= 60) {
|
|
119
|
+
$toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
|
|
120
|
+
} else {
|
|
121
|
+
$toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection })=>{
|
|
103
127
|
if (!$component && !componentUid) return;
|
|
104
128
|
if (!$component) {
|
|
105
129
|
const $c = document.querySelector(`[data-uid="${componentUid}"]`);
|
|
@@ -125,10 +149,11 @@ const Toolbar = ()=>{
|
|
|
125
149
|
if (focus) {
|
|
126
150
|
$toolbar.setAttribute('data-toolbar-hover-focus', 'true');
|
|
127
151
|
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
$
|
|
131
|
-
|
|
152
|
+
changePositionToolbar({
|
|
153
|
+
$toolbar,
|
|
154
|
+
$component,
|
|
155
|
+
state: 'hover'
|
|
156
|
+
});
|
|
132
157
|
}
|
|
133
158
|
if ($outline) {
|
|
134
159
|
$outline.setAttribute('data-outline-hover', 'true');
|
|
@@ -175,6 +200,8 @@ const Toolbar = ()=>{
|
|
|
175
200
|
const $currentToolbar = getChildrenByAttrSelector($component, 'data-toolbar-hover-focus');
|
|
176
201
|
if ($currentToolbar) {
|
|
177
202
|
const currentRect = $currentToolbar.getBoundingClientRect();
|
|
203
|
+
const isRevert = $currentToolbar.getAttribute('data-toolbar-hover-revert') ? true : false;
|
|
204
|
+
const isInside = $currentToolbar.getAttribute('data-toolbar-hover-inside') ? true : false;
|
|
178
205
|
let index = 1;
|
|
179
206
|
for (const $parent of $parents){
|
|
180
207
|
if ($parent) {
|
|
@@ -187,14 +214,19 @@ const Toolbar = ()=>{
|
|
|
187
214
|
if (isActive) continue;
|
|
188
215
|
// Start calc
|
|
189
216
|
const parentRect = $toolbar.getBoundingClientRect();
|
|
190
|
-
|
|
217
|
+
const checkRevert = isRevert || isInside;
|
|
218
|
+
if (isOverParent({
|
|
219
|
+
current: currentRect,
|
|
220
|
+
parent: parentRect,
|
|
221
|
+
index,
|
|
222
|
+
revert: checkRevert
|
|
223
|
+
})) {
|
|
191
224
|
const parentStyle = getComputedStyle($toolbar);
|
|
192
|
-
const isRevert = $toolbar.getAttribute('data-toolbar-hover-revert') ? true : false;
|
|
193
225
|
// parentStyle.top
|
|
194
226
|
const diffTop = currentRect.top - parentRect.top;
|
|
195
227
|
const diffLeft = currentRect.left - parentRect.left;
|
|
196
228
|
let newTop = parseFloat(parentStyle.top) + diffTop - (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
|
|
197
|
-
if (
|
|
229
|
+
if (checkRevert) {
|
|
198
230
|
newTop = parseFloat(parentStyle.top) - diffTop + (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
|
|
199
231
|
}
|
|
200
232
|
const newLeft = parseFloat(parentStyle.left) + diffLeft;
|
|
@@ -225,6 +257,7 @@ const Toolbar = ()=>{
|
|
|
225
257
|
'data-toolbar-hover',
|
|
226
258
|
'data-outline-hover-focus',
|
|
227
259
|
'data-toolbar-hover-revert',
|
|
260
|
+
'data-toolbar-hover-inside',
|
|
228
261
|
'data-outline-hover',
|
|
229
262
|
'data-toolbar-add-hover'
|
|
230
263
|
];
|
|
@@ -245,6 +278,7 @@ const Toolbar = ()=>{
|
|
|
245
278
|
'data-outline-active',
|
|
246
279
|
'data-toolbar-add-active',
|
|
247
280
|
'data-toolbar-active-revert',
|
|
281
|
+
'data-toolbar-active-inside',
|
|
248
282
|
'data-spacing-margin-bottom-active',
|
|
249
283
|
'data-toolbar-force-hover',
|
|
250
284
|
'data-outline-force-hover'
|
|
@@ -333,10 +367,11 @@ const Toolbar = ()=>{
|
|
|
333
367
|
};
|
|
334
368
|
$toolbar.removeAttribute('style');
|
|
335
369
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
$
|
|
339
|
-
|
|
370
|
+
changePositionToolbar({
|
|
371
|
+
$toolbar,
|
|
372
|
+
$component,
|
|
373
|
+
state: 'active'
|
|
374
|
+
});
|
|
340
375
|
}
|
|
341
376
|
if ($outline) {
|
|
342
377
|
$outline.setAttribute('data-outline-active', 'true');
|
|
@@ -505,53 +540,46 @@ const Toolbar = ()=>{
|
|
|
505
540
|
}
|
|
506
541
|
const $toolbarHover = $target.closest('[data-toolbar-hover]');
|
|
507
542
|
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
|
-
|
|
542
|
-
|
|
543
|
+
// Disable feature overlay when hover to toolbar parents
|
|
544
|
+
return;
|
|
545
|
+
// removeHoverOverlayComponent(); // remove overlay old
|
|
546
|
+
// // Hover to toolbar is focus
|
|
547
|
+
// if ($toolbarHover?.getAttribute('data-toolbar-hover-focus')) return;
|
|
548
|
+
// const $component = $target.closest('[data-toolbar-wrap]');
|
|
549
|
+
// if (!$component) return;
|
|
550
|
+
// const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
551
|
+
// if (!$outline) return;
|
|
552
|
+
// const isThemeSection = $component.getAttribute('data-theme-section');
|
|
553
|
+
// const outlineOverlay = isThemeSection
|
|
554
|
+
// ? 'data-outline-overlay-theme-section'
|
|
555
|
+
// : 'data-outline-overlay';
|
|
556
|
+
// $outline.setAttribute(outlineOverlay, 'true');
|
|
557
|
+
}
|
|
558
|
+
// Hover to other component
|
|
559
|
+
const $component = $target.closest('[data-toolbar-wrap]');
|
|
560
|
+
const componentUid = $component?.getAttribute('data-uid');
|
|
561
|
+
if (!$component || !componentUid || componentUid == 'ROOT') {
|
|
562
|
+
removeHoverComponent();
|
|
563
|
+
return;
|
|
564
|
+
}
|
|
565
|
+
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
566
|
+
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
567
|
+
if ($outline) $outline.removeAttribute('data-outline-overlay');
|
|
568
|
+
if (!componentUid) return;
|
|
569
|
+
if (componentUid == 'ROOT') return;
|
|
570
|
+
if ($toolbar?.getAttribute('data-toolbar-hover-focus')) return;
|
|
571
|
+
if (!$toolbar?.getAttribute('data-toolbar-hover-focus')) removeHoverComponent();
|
|
572
|
+
hoverActiveThemeSection($target);
|
|
573
|
+
// Disable event when hover active component
|
|
574
|
+
if (componentUid == currentComponentActive.current?.componentUid) {
|
|
575
|
+
if (currentComponentActive.current.productId) {
|
|
576
|
+
const $product = $component.closest(`[data-product-id]`);
|
|
577
|
+
if ($product) {
|
|
578
|
+
const productId = $product.getAttribute('data-product-id');
|
|
579
|
+
if (productId == currentComponentActive.current.productId) {
|
|
580
|
+
return;
|
|
543
581
|
}
|
|
544
582
|
}
|
|
545
|
-
const $themeSection = $target.closest('[data-theme-section]');
|
|
546
|
-
if ($themeSection) {
|
|
547
|
-
setHoverComponent({
|
|
548
|
-
$component: $themeSection,
|
|
549
|
-
focus: true,
|
|
550
|
-
isThemeSection: true
|
|
551
|
-
});
|
|
552
|
-
} else {
|
|
553
|
-
return;
|
|
554
|
-
}
|
|
555
583
|
}
|
|
556
584
|
const $themeSection = $target.closest('[data-theme-section]');
|
|
557
585
|
if ($themeSection) {
|
|
@@ -561,17 +589,27 @@ const Toolbar = ()=>{
|
|
|
561
589
|
isThemeSection: true
|
|
562
590
|
});
|
|
563
591
|
} else {
|
|
564
|
-
|
|
565
|
-
$component,
|
|
566
|
-
componentUid,
|
|
567
|
-
focus: true
|
|
568
|
-
});
|
|
569
|
-
setHoverComponentParents({
|
|
570
|
-
$component,
|
|
571
|
-
componentUid
|
|
572
|
-
});
|
|
592
|
+
return;
|
|
573
593
|
}
|
|
574
594
|
}
|
|
595
|
+
const $themeSection = $target.closest('[data-theme-section]');
|
|
596
|
+
if ($themeSection) {
|
|
597
|
+
setHoverComponent({
|
|
598
|
+
$component: $themeSection,
|
|
599
|
+
focus: true,
|
|
600
|
+
isThemeSection: true
|
|
601
|
+
});
|
|
602
|
+
} else {
|
|
603
|
+
setHoverComponent({
|
|
604
|
+
$component,
|
|
605
|
+
componentUid,
|
|
606
|
+
focus: true
|
|
607
|
+
});
|
|
608
|
+
setHoverComponentParents({
|
|
609
|
+
$component,
|
|
610
|
+
componentUid
|
|
611
|
+
});
|
|
612
|
+
}
|
|
575
613
|
}, [
|
|
576
614
|
hoverActiveThemeSection,
|
|
577
615
|
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.31",
|
|
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.30",
|
|
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"
|