@gem-sdk/pages 1.27.10 → 1.28.2
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.
|
@@ -2,36 +2,69 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
6
|
var react = require('react');
|
|
7
|
+
var Onboarding = require('./toolbar/Onboarding.js');
|
|
6
8
|
|
|
7
9
|
const TOOLBAR_HOVER_HEIGHT = 24;
|
|
8
10
|
const TOOLBAR_ACTIVE_HEIGHT = 32;
|
|
11
|
+
const isPopup = (el)=>{
|
|
12
|
+
const tag = el.getAttribute('data-component-tag');
|
|
13
|
+
return tag === 'Dialog';
|
|
14
|
+
};
|
|
15
|
+
const isSticky = (el)=>{
|
|
16
|
+
const tag = el.getAttribute('data-component-tag');
|
|
17
|
+
return tag === 'Sticky';
|
|
18
|
+
};
|
|
9
19
|
const Toolbar = ()=>{
|
|
10
20
|
const currentComponentActive = react.useRef(null);
|
|
11
21
|
const isDragging = react.useRef(false);
|
|
12
22
|
const stopWatchReRenderComponent = react.useRef();
|
|
13
23
|
const isResizeSpacing = react.useRef(false);
|
|
24
|
+
const [isOnboarding, setIsOnboarding] = react.useState(false);
|
|
25
|
+
const [countShowOnboarding, setCountShowOnboarding] = react.useState(0);
|
|
26
|
+
const [onboardingPosition, setOnboardingPosition] = react.useState('bottom');
|
|
27
|
+
const timeoutRef = react.useRef(null);
|
|
28
|
+
const timeoutOnboarding = 5000;
|
|
14
29
|
/* Functions */ const changePositionToolbar = ({ state, $toolbar, $component })=>{
|
|
15
30
|
const $parentOverflow = findOverflowParent($component, $toolbar);
|
|
31
|
+
const rect = $toolbar.getBoundingClientRect();
|
|
32
|
+
const rectComponent = $component.getBoundingClientRect();
|
|
33
|
+
const windowWidth = window.innerWidth;
|
|
16
34
|
if ($parentOverflow) {
|
|
17
|
-
|
|
18
|
-
if (rect?.height <= 60) {
|
|
35
|
+
if (rectComponent?.height <= 60) {
|
|
19
36
|
$toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
|
|
20
37
|
} else {
|
|
21
38
|
$toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
|
|
22
39
|
}
|
|
40
|
+
// fix toolbar overflow right side
|
|
41
|
+
if (rectComponent.left + rect.width > windowWidth) {
|
|
42
|
+
$toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
|
|
43
|
+
}
|
|
23
44
|
} else {
|
|
24
|
-
|
|
25
|
-
if (rectComponent.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
|
|
45
|
+
if (rect.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
|
|
26
46
|
if (rectComponent?.height <= 60) {
|
|
27
47
|
$toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
|
|
28
48
|
} else {
|
|
29
49
|
$toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
|
|
30
50
|
}
|
|
31
51
|
}
|
|
52
|
+
// fix toolbar overflow right side
|
|
53
|
+
if (rectComponent.left + rect.width > windowWidth) {
|
|
54
|
+
$toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
// fix Popup overflow right position
|
|
58
|
+
const popupEl = $component?.closest('[aria-label="Dialog body"]');
|
|
59
|
+
if (popupEl) {
|
|
60
|
+
const rectPopupEl = popupEl.getBoundingClientRect();
|
|
61
|
+
const popupElRightPosition = rectPopupEl.left + rectPopupEl.width - 20;
|
|
62
|
+
if (rectComponent.left + rect.width > popupElRightPosition) {
|
|
63
|
+
$toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
|
|
64
|
+
}
|
|
32
65
|
}
|
|
33
66
|
};
|
|
34
|
-
const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection })=>{
|
|
67
|
+
const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
|
|
35
68
|
if (!$component && !componentUid) return;
|
|
36
69
|
if (!$component) {
|
|
37
70
|
const $c = document.querySelector(`[data-uid="${componentUid}"]`);
|
|
@@ -53,7 +86,9 @@ const Toolbar = ()=>{
|
|
|
53
86
|
}
|
|
54
87
|
if ($toolbar) {
|
|
55
88
|
$toolbar.removeAttribute('style');
|
|
56
|
-
|
|
89
|
+
if (!isParent) {
|
|
90
|
+
$toolbar.setAttribute('data-toolbar-hover', 'true');
|
|
91
|
+
}
|
|
57
92
|
if (focus) {
|
|
58
93
|
$toolbar.setAttribute('data-toolbar-hover-focus', 'true');
|
|
59
94
|
}
|
|
@@ -65,6 +100,9 @@ const Toolbar = ()=>{
|
|
|
65
100
|
}
|
|
66
101
|
if ($outline) {
|
|
67
102
|
$outline.setAttribute('data-outline-hover', 'true');
|
|
103
|
+
if (isParent) {
|
|
104
|
+
$outline.setAttribute('data-outline-parent-hover', 'true');
|
|
105
|
+
}
|
|
68
106
|
if (isThemeSection) {
|
|
69
107
|
$outline.setAttribute('data-outline-overlay-theme-section', 'true');
|
|
70
108
|
}
|
|
@@ -73,10 +111,14 @@ const Toolbar = ()=>{
|
|
|
73
111
|
}
|
|
74
112
|
}
|
|
75
113
|
if ($btnAddTop) {
|
|
76
|
-
|
|
114
|
+
if (!isParent) {
|
|
115
|
+
$btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
|
|
116
|
+
}
|
|
77
117
|
}
|
|
78
118
|
if ($btnAddBottom) {
|
|
79
|
-
|
|
119
|
+
if (!isParent) {
|
|
120
|
+
$btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
|
|
121
|
+
}
|
|
80
122
|
}
|
|
81
123
|
}, []);
|
|
82
124
|
const setHoverComponentParents = react.useCallback(({ $component, componentUid })=>{
|
|
@@ -85,12 +127,13 @@ const Toolbar = ()=>{
|
|
|
85
127
|
if (!$c) return;
|
|
86
128
|
$component = $c;
|
|
87
129
|
}
|
|
88
|
-
const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])');
|
|
130
|
+
const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])', 1);
|
|
89
131
|
if ($parents.length) {
|
|
90
132
|
for (const $parent of $parents){
|
|
91
133
|
if ($parent) {
|
|
92
134
|
setHoverComponent({
|
|
93
|
-
$component: $parent
|
|
135
|
+
$component: $parent,
|
|
136
|
+
isParent: true
|
|
94
137
|
});
|
|
95
138
|
}
|
|
96
139
|
}
|
|
@@ -167,7 +210,9 @@ const Toolbar = ()=>{
|
|
|
167
210
|
'data-toolbar-hover-revert',
|
|
168
211
|
'data-toolbar-hover-inside',
|
|
169
212
|
'data-outline-hover',
|
|
170
|
-
'data-toolbar-add-hover'
|
|
213
|
+
'data-toolbar-add-hover',
|
|
214
|
+
'data-outline-parent-hover',
|
|
215
|
+
'data-toolbar-hover-overflow'
|
|
171
216
|
];
|
|
172
217
|
const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
|
|
173
218
|
if ($elms) {
|
|
@@ -179,6 +224,21 @@ const Toolbar = ()=>{
|
|
|
179
224
|
}, [
|
|
180
225
|
removeHoverOverlayComponent
|
|
181
226
|
]);
|
|
227
|
+
const onCloseOnboarding = react.useCallback(()=>{
|
|
228
|
+
timeoutRef.current && clearTimeout(timeoutRef.current);
|
|
229
|
+
if (countShowOnboarding > 0) {
|
|
230
|
+
const eventCreate = new CustomEvent('editor:toolbar:close-onboarding', {
|
|
231
|
+
bubbles: true,
|
|
232
|
+
detail: {
|
|
233
|
+
close: 'close Onboarding'
|
|
234
|
+
}
|
|
235
|
+
});
|
|
236
|
+
window.dispatchEvent(eventCreate);
|
|
237
|
+
setIsOnboarding(false);
|
|
238
|
+
}
|
|
239
|
+
}, [
|
|
240
|
+
countShowOnboarding
|
|
241
|
+
]);
|
|
182
242
|
const removeActiveComponent = react.useCallback(()=>{
|
|
183
243
|
currentComponentActive.current = null;
|
|
184
244
|
const clearAttrs = [
|
|
@@ -189,7 +249,8 @@ const Toolbar = ()=>{
|
|
|
189
249
|
'data-toolbar-active-inside',
|
|
190
250
|
'data-spacing-margin-bottom-active',
|
|
191
251
|
'data-toolbar-force-hover',
|
|
192
|
-
'data-outline-force-hover'
|
|
252
|
+
'data-outline-force-hover',
|
|
253
|
+
'data-toolbar-active-overflow'
|
|
193
254
|
];
|
|
194
255
|
const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
|
|
195
256
|
if ($elms) {
|
|
@@ -199,7 +260,10 @@ const Toolbar = ()=>{
|
|
|
199
260
|
}
|
|
200
261
|
setFocusTextEditor(false);
|
|
201
262
|
if (stopWatchReRenderComponent.current) stopWatchReRenderComponent.current();
|
|
202
|
-
|
|
263
|
+
onCloseOnboarding();
|
|
264
|
+
}, [
|
|
265
|
+
onCloseOnboarding
|
|
266
|
+
]);
|
|
203
267
|
const watchComponentReRender = ($el, callback)=>{
|
|
204
268
|
// editor:component:render
|
|
205
269
|
const onComponentReRender = (e)=>{
|
|
@@ -238,35 +302,58 @@ const Toolbar = ()=>{
|
|
|
238
302
|
}
|
|
239
303
|
}
|
|
240
304
|
}, []);
|
|
241
|
-
const
|
|
242
|
-
const
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
if (
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
305
|
+
const calculateOnboardingPosition = ()=>{
|
|
306
|
+
const toolbar = document.querySelector('[data-toolbar-active]');
|
|
307
|
+
const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
|
|
308
|
+
if (toolbar && toolbarOnboading) {
|
|
309
|
+
toolbarOnboading?.removeAttribute('data-onboarding-active');
|
|
310
|
+
setTimeout(()=>{
|
|
311
|
+
const rect = toolbar.getBoundingClientRect();
|
|
312
|
+
const rectTop = rect.top || 0;
|
|
313
|
+
const rectOnboading = toolbarOnboading?.getBoundingClientRect();
|
|
314
|
+
const onboardingHeight = rectOnboading?.height || 0;
|
|
315
|
+
const $iframe = parent.document.querySelector('.iframe');
|
|
316
|
+
const $iframeWin = $iframe?.contentWindow;
|
|
317
|
+
const iframeWinScrollY = $iframeWin?.scrollY || 0;
|
|
318
|
+
const iframeHeight = $iframe?.clientHeight || 0;
|
|
319
|
+
if (rectTop + onboardingHeight > iframeHeight) {
|
|
320
|
+
const oboardingTop = rect.top + iframeWinScrollY - onboardingHeight - 8;
|
|
321
|
+
toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
|
|
322
|
+
setOnboardingPosition('top');
|
|
323
|
+
if ($iframeWin && oboardingTop < rect.top + iframeWinScrollY) {
|
|
324
|
+
setTimeout(()=>{
|
|
325
|
+
const toTop = oboardingTop - 20;
|
|
326
|
+
$iframeWin.scrollTo({
|
|
327
|
+
top: toTop,
|
|
328
|
+
behavior: 'smooth'
|
|
329
|
+
});
|
|
330
|
+
}, 200);
|
|
331
|
+
}
|
|
332
|
+
} else {
|
|
333
|
+
const oboardingTop = rect.top + iframeWinScrollY + rect.height + 8;
|
|
334
|
+
toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
|
|
335
|
+
setOnboardingPosition('bottom');
|
|
266
336
|
}
|
|
267
|
-
|
|
337
|
+
setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
|
|
338
|
+
toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
|
|
339
|
+
}, 100);
|
|
268
340
|
}
|
|
269
|
-
}
|
|
341
|
+
};
|
|
342
|
+
const setToolbarOnboarding = react.useCallback(({ $component })=>{
|
|
343
|
+
if (!$component) return;
|
|
344
|
+
if (isSection($component) || isPopup($component) || isSticky($component)) return;
|
|
345
|
+
const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
|
|
346
|
+
// only show one time
|
|
347
|
+
if (countShowOnboarding == 0) {
|
|
348
|
+
calculateOnboardingPosition();
|
|
349
|
+
} else {
|
|
350
|
+
onCloseOnboarding();
|
|
351
|
+
toolbarOnboading?.removeAttribute('data-onboarding-active');
|
|
352
|
+
}
|
|
353
|
+
}, [
|
|
354
|
+
countShowOnboarding,
|
|
355
|
+
onCloseOnboarding
|
|
356
|
+
]);
|
|
270
357
|
const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
|
|
271
358
|
if (!componentUid) return;
|
|
272
359
|
let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
|
|
@@ -327,7 +414,14 @@ const Toolbar = ()=>{
|
|
|
327
414
|
setActiveComponentSpacing({
|
|
328
415
|
$component
|
|
329
416
|
});
|
|
330
|
-
|
|
417
|
+
timeoutRef.current && clearTimeout(timeoutRef.current);
|
|
418
|
+
timeoutRef.current = setTimeout(()=>{
|
|
419
|
+
if ($component) {
|
|
420
|
+
setToolbarOnboarding({
|
|
421
|
+
$component
|
|
422
|
+
});
|
|
423
|
+
}
|
|
424
|
+
}, timeoutOnboarding);
|
|
331
425
|
removeHoverComponent();
|
|
332
426
|
// Reactive when component re-render
|
|
333
427
|
watchComponentReRender($component, ()=>{
|
|
@@ -341,8 +435,8 @@ const Toolbar = ()=>{
|
|
|
341
435
|
}, [
|
|
342
436
|
removeActiveComponent,
|
|
343
437
|
removeHoverComponent,
|
|
344
|
-
|
|
345
|
-
|
|
438
|
+
setActiveComponentSpacing,
|
|
439
|
+
setToolbarOnboarding
|
|
346
440
|
]);
|
|
347
441
|
const setFocusTextEditor = async (value)=>{
|
|
348
442
|
if (!value) {
|
|
@@ -608,6 +702,46 @@ const Toolbar = ()=>{
|
|
|
608
702
|
}, [
|
|
609
703
|
removeHoverComponent
|
|
610
704
|
]);
|
|
705
|
+
const setHoverParentComponent = (uid, type)=>{
|
|
706
|
+
if (!uid) return;
|
|
707
|
+
const $parentComponents = document.querySelectorAll(`[data-uid="${uid}"]`);
|
|
708
|
+
if ($parentComponents.length) {
|
|
709
|
+
$parentComponents.forEach(($parentComponent)=>{
|
|
710
|
+
const $outline = getChildrenByAttrSelector($parentComponent, 'data-outline');
|
|
711
|
+
if ($outline) {
|
|
712
|
+
if (type === 'in') {
|
|
713
|
+
$outline.setAttribute('data-outline-force-hover', 'true');
|
|
714
|
+
$outline.setAttribute('data-outline-force-overlay', 'true');
|
|
715
|
+
} else {
|
|
716
|
+
$outline.removeAttribute('data-outline-force-hover');
|
|
717
|
+
$outline.removeAttribute('data-outline-force-overlay');
|
|
718
|
+
}
|
|
719
|
+
}
|
|
720
|
+
});
|
|
721
|
+
}
|
|
722
|
+
};
|
|
723
|
+
const onHoverComponent = react.useCallback((e)=>{
|
|
724
|
+
if (isDragging.current) return;
|
|
725
|
+
const detail = e.detail;
|
|
726
|
+
if (detail?.componentUid) {
|
|
727
|
+
setHoverParentComponent(detail?.componentUid, detail?.type);
|
|
728
|
+
}
|
|
729
|
+
}, [
|
|
730
|
+
isDragging
|
|
731
|
+
]);
|
|
732
|
+
const onToolbarOnboarding = react.useCallback((e)=>{
|
|
733
|
+
const detail = e.detail;
|
|
734
|
+
if (detail?.isNewUser) {
|
|
735
|
+
setIsOnboarding(true);
|
|
736
|
+
}
|
|
737
|
+
}, []);
|
|
738
|
+
const onWindowResize = react.useCallback(()=>{
|
|
739
|
+
if (isOnboarding) {
|
|
740
|
+
calculateOnboardingPosition();
|
|
741
|
+
}
|
|
742
|
+
}, [
|
|
743
|
+
isOnboarding
|
|
744
|
+
]);
|
|
611
745
|
/* Register event */ react.useEffect(()=>{
|
|
612
746
|
document.addEventListener('mousemove', onMouseMove);
|
|
613
747
|
window.addEventListener('editor:active-component', onActiveComponent);
|
|
@@ -616,6 +750,9 @@ const Toolbar = ()=>{
|
|
|
616
750
|
window.addEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
|
|
617
751
|
window.addEventListener('editor:toolbar:show-parents', onShowParents);
|
|
618
752
|
window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
|
|
753
|
+
window.addEventListener('editor:hover-component', onHoverComponent);
|
|
754
|
+
window.addEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
|
|
755
|
+
window.addEventListener('resize', onWindowResize);
|
|
619
756
|
return ()=>{
|
|
620
757
|
document.removeEventListener('mousemove', onMouseMove);
|
|
621
758
|
window.removeEventListener('editor:active-component', onActiveComponent);
|
|
@@ -624,6 +761,9 @@ const Toolbar = ()=>{
|
|
|
624
761
|
window.removeEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
|
|
625
762
|
window.removeEventListener('editor:toolbar:show-parents', onShowParents);
|
|
626
763
|
window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
|
|
764
|
+
window.removeEventListener('editor:hover-component', onHoverComponent);
|
|
765
|
+
window.removeEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
|
|
766
|
+
window.removeEventListener('resize', onWindowResize);
|
|
627
767
|
};
|
|
628
768
|
}, [
|
|
629
769
|
onMouseMove,
|
|
@@ -632,9 +772,16 @@ const Toolbar = ()=>{
|
|
|
632
772
|
onIsDragging,
|
|
633
773
|
onIsEditingTextEditor,
|
|
634
774
|
onShowParents,
|
|
635
|
-
onResizeSpacing
|
|
775
|
+
onResizeSpacing,
|
|
776
|
+
onHoverComponent,
|
|
777
|
+
onToolbarOnboarding,
|
|
778
|
+
onWindowResize
|
|
636
779
|
]);
|
|
637
|
-
return
|
|
780
|
+
return isOnboarding && /*#__PURE__*/ jsxRuntime.jsx(Onboarding.default, {
|
|
781
|
+
enable: true,
|
|
782
|
+
position: onboardingPosition,
|
|
783
|
+
onCloseOnboarding: onCloseOnboarding
|
|
784
|
+
});
|
|
638
785
|
};
|
|
639
786
|
const getDOMElementParents = ($el, selector, limit)=>{
|
|
640
787
|
// Set up a parent array
|
|
@@ -678,11 +825,11 @@ const getChildrenByAttrSelector = ($el, attrSelector)=>{
|
|
|
678
825
|
}
|
|
679
826
|
}
|
|
680
827
|
};
|
|
681
|
-
const isOverParent = ({ current, parent, index, revert })=>{
|
|
828
|
+
const isOverParent = ({ current, parent: parent1, index, revert })=>{
|
|
682
829
|
for(let i = 0; i < index; i++){
|
|
683
|
-
let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >=
|
|
830
|
+
let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.top && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.top + parent1.height || current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.top + parent1.height && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.top;
|
|
684
831
|
if (revert) {
|
|
685
|
-
is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >=
|
|
832
|
+
is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.bottom && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.bottom - parent1.height || current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.bottom - parent1.height && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.bottom;
|
|
686
833
|
}
|
|
687
834
|
if (is) return true;
|
|
688
835
|
}
|
|
@@ -713,9 +860,9 @@ const isSection = (el)=>{
|
|
|
713
860
|
const tag = el.getAttribute('data-component-tag');
|
|
714
861
|
return tag === 'Section';
|
|
715
862
|
};
|
|
716
|
-
const isOverToolbarPosition = (el,
|
|
863
|
+
const isOverToolbarPosition = (el, parent1)=>{
|
|
717
864
|
const rect = el.getBoundingClientRect();
|
|
718
|
-
const rectP =
|
|
865
|
+
const rectP = parent1.getBoundingClientRect();
|
|
719
866
|
// 32px = toolbar active height
|
|
720
867
|
return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
|
|
721
868
|
};
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
|
|
8
|
+
const Onboarding = ({ enable, position, onCloseOnboarding })=>{
|
|
9
|
+
const closeOnboarding = ()=>{
|
|
10
|
+
onCloseOnboarding();
|
|
11
|
+
};
|
|
12
|
+
const videoSrc = 'https://ucarecdn.com/de5fd2eb-4525-45a7-ad13-53960dac225e/';
|
|
13
|
+
const Video = ()=>{
|
|
14
|
+
return /*#__PURE__*/ jsxRuntime.jsxs("video", {
|
|
15
|
+
width: "100%",
|
|
16
|
+
className: "w-full",
|
|
17
|
+
loop: true,
|
|
18
|
+
muted: true,
|
|
19
|
+
autoPlay: true,
|
|
20
|
+
playsInline: true,
|
|
21
|
+
children: [
|
|
22
|
+
/*#__PURE__*/ jsxRuntime.jsx("source", {
|
|
23
|
+
src: videoSrc,
|
|
24
|
+
type: "video/mp4"
|
|
25
|
+
}),
|
|
26
|
+
"Sorry, your browser doesn‘t support embedded videos."
|
|
27
|
+
]
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
const MemoVideo = /*#__PURE__*/ react.memo(Video);
|
|
31
|
+
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
32
|
+
"data-toolbar-onboarding": true,
|
|
33
|
+
"data-toolbar-onboarding-position": position,
|
|
34
|
+
children: enable && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
35
|
+
children: [
|
|
36
|
+
/*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
37
|
+
"data-icon": true,
|
|
38
|
+
"data-position": position,
|
|
39
|
+
children: position === 'bottom' ? /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
40
|
+
width: "8",
|
|
41
|
+
height: "4",
|
|
42
|
+
viewBox: "0 0 8 4",
|
|
43
|
+
fill: "none",
|
|
44
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
45
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
46
|
+
d: "M-1.74846e-07 4L4 -1.74846e-07L8 4L-1.74846e-07 4Z",
|
|
47
|
+
fill: "white"
|
|
48
|
+
})
|
|
49
|
+
}) : /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
50
|
+
width: "8",
|
|
51
|
+
height: "4",
|
|
52
|
+
viewBox: "0 0 8 4",
|
|
53
|
+
fill: "none",
|
|
54
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
55
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
56
|
+
d: "M8 3.33818e-07L4 4L4.76995e-08 7.15256e-07L8 3.33818e-07Z",
|
|
57
|
+
fill: "white"
|
|
58
|
+
})
|
|
59
|
+
})
|
|
60
|
+
}),
|
|
61
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
62
|
+
"data-onboarding-wrapper": true,
|
|
63
|
+
children: [
|
|
64
|
+
/*#__PURE__*/ jsxRuntime.jsx("button", {
|
|
65
|
+
"data-close": true,
|
|
66
|
+
type: "button",
|
|
67
|
+
onClick: closeOnboarding,
|
|
68
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
69
|
+
width: "32",
|
|
70
|
+
height: "32",
|
|
71
|
+
viewBox: "0 0 32 32",
|
|
72
|
+
fill: "none",
|
|
73
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
74
|
+
children: [
|
|
75
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
76
|
+
fillRule: "evenodd",
|
|
77
|
+
clipRule: "evenodd",
|
|
78
|
+
d: "M10.6464 10.6464C10.8417 10.4512 11.1583 10.4512 11.3536 10.6464L21.3536 20.6464C21.5488 20.8417 21.5488 21.1583 21.3536 21.3536C21.1583 21.5488 20.8417 21.5488 20.6464 21.3536L10.6464 11.3536C10.4512 11.1583 10.4512 10.8417 10.6464 10.6464Z",
|
|
79
|
+
fill: "#212121"
|
|
80
|
+
}),
|
|
81
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
82
|
+
fillRule: "evenodd",
|
|
83
|
+
clipRule: "evenodd",
|
|
84
|
+
d: "M21.3536 10.6464C21.5488 10.8417 21.5488 11.1583 21.3536 11.3536L11.3536 21.3536C11.1583 21.5488 10.8417 21.5488 10.6464 21.3536C10.4512 21.1583 10.4512 20.8417 10.6464 20.6464L20.6464 10.6464C20.8417 10.4512 21.1583 10.4512 21.3536 10.6464Z",
|
|
85
|
+
fill: "#212121"
|
|
86
|
+
})
|
|
87
|
+
]
|
|
88
|
+
})
|
|
89
|
+
}),
|
|
90
|
+
/*#__PURE__*/ jsxRuntime.jsx(MemoVideo, {}),
|
|
91
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
92
|
+
"data-content": true,
|
|
93
|
+
children: [
|
|
94
|
+
/*#__PURE__*/ jsxRuntime.jsx("h3", {
|
|
95
|
+
children: "New way to select parent element"
|
|
96
|
+
}),
|
|
97
|
+
/*#__PURE__*/ jsxRuntime.jsx("p", {
|
|
98
|
+
children: "Select parent from here in case you can‘t find yours at times."
|
|
99
|
+
})
|
|
100
|
+
]
|
|
101
|
+
})
|
|
102
|
+
]
|
|
103
|
+
})
|
|
104
|
+
]
|
|
105
|
+
})
|
|
106
|
+
});
|
|
107
|
+
};
|
|
108
|
+
var Onboarding$1 = /*#__PURE__*/ react.memo(Onboarding);
|
|
109
|
+
|
|
110
|
+
exports.default = Onboarding$1;
|
|
@@ -1,33 +1,66 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { memo, useRef, useState, useCallback, useEffect } from 'react';
|
|
3
|
+
import Onboarding from './toolbar/Onboarding.js';
|
|
2
4
|
|
|
3
5
|
const TOOLBAR_HOVER_HEIGHT = 24;
|
|
4
6
|
const TOOLBAR_ACTIVE_HEIGHT = 32;
|
|
7
|
+
const isPopup = (el)=>{
|
|
8
|
+
const tag = el.getAttribute('data-component-tag');
|
|
9
|
+
return tag === 'Dialog';
|
|
10
|
+
};
|
|
11
|
+
const isSticky = (el)=>{
|
|
12
|
+
const tag = el.getAttribute('data-component-tag');
|
|
13
|
+
return tag === 'Sticky';
|
|
14
|
+
};
|
|
5
15
|
const Toolbar = ()=>{
|
|
6
16
|
const currentComponentActive = useRef(null);
|
|
7
17
|
const isDragging = useRef(false);
|
|
8
18
|
const stopWatchReRenderComponent = useRef();
|
|
9
19
|
const isResizeSpacing = useRef(false);
|
|
20
|
+
const [isOnboarding, setIsOnboarding] = useState(false);
|
|
21
|
+
const [countShowOnboarding, setCountShowOnboarding] = useState(0);
|
|
22
|
+
const [onboardingPosition, setOnboardingPosition] = useState('bottom');
|
|
23
|
+
const timeoutRef = useRef(null);
|
|
24
|
+
const timeoutOnboarding = 5000;
|
|
10
25
|
/* Functions */ const changePositionToolbar = ({ state, $toolbar, $component })=>{
|
|
11
26
|
const $parentOverflow = findOverflowParent($component, $toolbar);
|
|
27
|
+
const rect = $toolbar.getBoundingClientRect();
|
|
28
|
+
const rectComponent = $component.getBoundingClientRect();
|
|
29
|
+
const windowWidth = window.innerWidth;
|
|
12
30
|
if ($parentOverflow) {
|
|
13
|
-
|
|
14
|
-
if (rect?.height <= 60) {
|
|
31
|
+
if (rectComponent?.height <= 60) {
|
|
15
32
|
$toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
|
|
16
33
|
} else {
|
|
17
34
|
$toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
|
|
18
35
|
}
|
|
36
|
+
// fix toolbar overflow right side
|
|
37
|
+
if (rectComponent.left + rect.width > windowWidth) {
|
|
38
|
+
$toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
|
|
39
|
+
}
|
|
19
40
|
} else {
|
|
20
|
-
|
|
21
|
-
if (rectComponent.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
|
|
41
|
+
if (rect.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
|
|
22
42
|
if (rectComponent?.height <= 60) {
|
|
23
43
|
$toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
|
|
24
44
|
} else {
|
|
25
45
|
$toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
|
|
26
46
|
}
|
|
27
47
|
}
|
|
48
|
+
// fix toolbar overflow right side
|
|
49
|
+
if (rectComponent.left + rect.width > windowWidth) {
|
|
50
|
+
$toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
// fix Popup overflow right position
|
|
54
|
+
const popupEl = $component?.closest('[aria-label="Dialog body"]');
|
|
55
|
+
if (popupEl) {
|
|
56
|
+
const rectPopupEl = popupEl.getBoundingClientRect();
|
|
57
|
+
const popupElRightPosition = rectPopupEl.left + rectPopupEl.width - 20;
|
|
58
|
+
if (rectComponent.left + rect.width > popupElRightPosition) {
|
|
59
|
+
$toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
|
|
60
|
+
}
|
|
28
61
|
}
|
|
29
62
|
};
|
|
30
|
-
const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection })=>{
|
|
63
|
+
const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
|
|
31
64
|
if (!$component && !componentUid) return;
|
|
32
65
|
if (!$component) {
|
|
33
66
|
const $c = document.querySelector(`[data-uid="${componentUid}"]`);
|
|
@@ -49,7 +82,9 @@ const Toolbar = ()=>{
|
|
|
49
82
|
}
|
|
50
83
|
if ($toolbar) {
|
|
51
84
|
$toolbar.removeAttribute('style');
|
|
52
|
-
|
|
85
|
+
if (!isParent) {
|
|
86
|
+
$toolbar.setAttribute('data-toolbar-hover', 'true');
|
|
87
|
+
}
|
|
53
88
|
if (focus) {
|
|
54
89
|
$toolbar.setAttribute('data-toolbar-hover-focus', 'true');
|
|
55
90
|
}
|
|
@@ -61,6 +96,9 @@ const Toolbar = ()=>{
|
|
|
61
96
|
}
|
|
62
97
|
if ($outline) {
|
|
63
98
|
$outline.setAttribute('data-outline-hover', 'true');
|
|
99
|
+
if (isParent) {
|
|
100
|
+
$outline.setAttribute('data-outline-parent-hover', 'true');
|
|
101
|
+
}
|
|
64
102
|
if (isThemeSection) {
|
|
65
103
|
$outline.setAttribute('data-outline-overlay-theme-section', 'true');
|
|
66
104
|
}
|
|
@@ -69,10 +107,14 @@ const Toolbar = ()=>{
|
|
|
69
107
|
}
|
|
70
108
|
}
|
|
71
109
|
if ($btnAddTop) {
|
|
72
|
-
|
|
110
|
+
if (!isParent) {
|
|
111
|
+
$btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
|
|
112
|
+
}
|
|
73
113
|
}
|
|
74
114
|
if ($btnAddBottom) {
|
|
75
|
-
|
|
115
|
+
if (!isParent) {
|
|
116
|
+
$btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
|
|
117
|
+
}
|
|
76
118
|
}
|
|
77
119
|
}, []);
|
|
78
120
|
const setHoverComponentParents = useCallback(({ $component, componentUid })=>{
|
|
@@ -81,12 +123,13 @@ const Toolbar = ()=>{
|
|
|
81
123
|
if (!$c) return;
|
|
82
124
|
$component = $c;
|
|
83
125
|
}
|
|
84
|
-
const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])');
|
|
126
|
+
const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])', 1);
|
|
85
127
|
if ($parents.length) {
|
|
86
128
|
for (const $parent of $parents){
|
|
87
129
|
if ($parent) {
|
|
88
130
|
setHoverComponent({
|
|
89
|
-
$component: $parent
|
|
131
|
+
$component: $parent,
|
|
132
|
+
isParent: true
|
|
90
133
|
});
|
|
91
134
|
}
|
|
92
135
|
}
|
|
@@ -163,7 +206,9 @@ const Toolbar = ()=>{
|
|
|
163
206
|
'data-toolbar-hover-revert',
|
|
164
207
|
'data-toolbar-hover-inside',
|
|
165
208
|
'data-outline-hover',
|
|
166
|
-
'data-toolbar-add-hover'
|
|
209
|
+
'data-toolbar-add-hover',
|
|
210
|
+
'data-outline-parent-hover',
|
|
211
|
+
'data-toolbar-hover-overflow'
|
|
167
212
|
];
|
|
168
213
|
const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
|
|
169
214
|
if ($elms) {
|
|
@@ -175,6 +220,21 @@ const Toolbar = ()=>{
|
|
|
175
220
|
}, [
|
|
176
221
|
removeHoverOverlayComponent
|
|
177
222
|
]);
|
|
223
|
+
const onCloseOnboarding = useCallback(()=>{
|
|
224
|
+
timeoutRef.current && clearTimeout(timeoutRef.current);
|
|
225
|
+
if (countShowOnboarding > 0) {
|
|
226
|
+
const eventCreate = new CustomEvent('editor:toolbar:close-onboarding', {
|
|
227
|
+
bubbles: true,
|
|
228
|
+
detail: {
|
|
229
|
+
close: 'close Onboarding'
|
|
230
|
+
}
|
|
231
|
+
});
|
|
232
|
+
window.dispatchEvent(eventCreate);
|
|
233
|
+
setIsOnboarding(false);
|
|
234
|
+
}
|
|
235
|
+
}, [
|
|
236
|
+
countShowOnboarding
|
|
237
|
+
]);
|
|
178
238
|
const removeActiveComponent = useCallback(()=>{
|
|
179
239
|
currentComponentActive.current = null;
|
|
180
240
|
const clearAttrs = [
|
|
@@ -185,7 +245,8 @@ const Toolbar = ()=>{
|
|
|
185
245
|
'data-toolbar-active-inside',
|
|
186
246
|
'data-spacing-margin-bottom-active',
|
|
187
247
|
'data-toolbar-force-hover',
|
|
188
|
-
'data-outline-force-hover'
|
|
248
|
+
'data-outline-force-hover',
|
|
249
|
+
'data-toolbar-active-overflow'
|
|
189
250
|
];
|
|
190
251
|
const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
|
|
191
252
|
if ($elms) {
|
|
@@ -195,7 +256,10 @@ const Toolbar = ()=>{
|
|
|
195
256
|
}
|
|
196
257
|
setFocusTextEditor(false);
|
|
197
258
|
if (stopWatchReRenderComponent.current) stopWatchReRenderComponent.current();
|
|
198
|
-
|
|
259
|
+
onCloseOnboarding();
|
|
260
|
+
}, [
|
|
261
|
+
onCloseOnboarding
|
|
262
|
+
]);
|
|
199
263
|
const watchComponentReRender = ($el, callback)=>{
|
|
200
264
|
// editor:component:render
|
|
201
265
|
const onComponentReRender = (e)=>{
|
|
@@ -234,35 +298,58 @@ const Toolbar = ()=>{
|
|
|
234
298
|
}
|
|
235
299
|
}
|
|
236
300
|
}, []);
|
|
237
|
-
const
|
|
238
|
-
const
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
if (
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
301
|
+
const calculateOnboardingPosition = ()=>{
|
|
302
|
+
const toolbar = document.querySelector('[data-toolbar-active]');
|
|
303
|
+
const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
|
|
304
|
+
if (toolbar && toolbarOnboading) {
|
|
305
|
+
toolbarOnboading?.removeAttribute('data-onboarding-active');
|
|
306
|
+
setTimeout(()=>{
|
|
307
|
+
const rect = toolbar.getBoundingClientRect();
|
|
308
|
+
const rectTop = rect.top || 0;
|
|
309
|
+
const rectOnboading = toolbarOnboading?.getBoundingClientRect();
|
|
310
|
+
const onboardingHeight = rectOnboading?.height || 0;
|
|
311
|
+
const $iframe = parent.document.querySelector('.iframe');
|
|
312
|
+
const $iframeWin = $iframe?.contentWindow;
|
|
313
|
+
const iframeWinScrollY = $iframeWin?.scrollY || 0;
|
|
314
|
+
const iframeHeight = $iframe?.clientHeight || 0;
|
|
315
|
+
if (rectTop + onboardingHeight > iframeHeight) {
|
|
316
|
+
const oboardingTop = rect.top + iframeWinScrollY - onboardingHeight - 8;
|
|
317
|
+
toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
|
|
318
|
+
setOnboardingPosition('top');
|
|
319
|
+
if ($iframeWin && oboardingTop < rect.top + iframeWinScrollY) {
|
|
320
|
+
setTimeout(()=>{
|
|
321
|
+
const toTop = oboardingTop - 20;
|
|
322
|
+
$iframeWin.scrollTo({
|
|
323
|
+
top: toTop,
|
|
324
|
+
behavior: 'smooth'
|
|
325
|
+
});
|
|
326
|
+
}, 200);
|
|
327
|
+
}
|
|
328
|
+
} else {
|
|
329
|
+
const oboardingTop = rect.top + iframeWinScrollY + rect.height + 8;
|
|
330
|
+
toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
|
|
331
|
+
setOnboardingPosition('bottom');
|
|
262
332
|
}
|
|
263
|
-
|
|
333
|
+
setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
|
|
334
|
+
toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
|
|
335
|
+
}, 100);
|
|
264
336
|
}
|
|
265
|
-
}
|
|
337
|
+
};
|
|
338
|
+
const setToolbarOnboarding = useCallback(({ $component })=>{
|
|
339
|
+
if (!$component) return;
|
|
340
|
+
if (isSection($component) || isPopup($component) || isSticky($component)) return;
|
|
341
|
+
const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
|
|
342
|
+
// only show one time
|
|
343
|
+
if (countShowOnboarding == 0) {
|
|
344
|
+
calculateOnboardingPosition();
|
|
345
|
+
} else {
|
|
346
|
+
onCloseOnboarding();
|
|
347
|
+
toolbarOnboading?.removeAttribute('data-onboarding-active');
|
|
348
|
+
}
|
|
349
|
+
}, [
|
|
350
|
+
countShowOnboarding,
|
|
351
|
+
onCloseOnboarding
|
|
352
|
+
]);
|
|
266
353
|
const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
|
|
267
354
|
if (!componentUid) return;
|
|
268
355
|
let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
|
|
@@ -323,7 +410,14 @@ const Toolbar = ()=>{
|
|
|
323
410
|
setActiveComponentSpacing({
|
|
324
411
|
$component
|
|
325
412
|
});
|
|
326
|
-
|
|
413
|
+
timeoutRef.current && clearTimeout(timeoutRef.current);
|
|
414
|
+
timeoutRef.current = setTimeout(()=>{
|
|
415
|
+
if ($component) {
|
|
416
|
+
setToolbarOnboarding({
|
|
417
|
+
$component
|
|
418
|
+
});
|
|
419
|
+
}
|
|
420
|
+
}, timeoutOnboarding);
|
|
327
421
|
removeHoverComponent();
|
|
328
422
|
// Reactive when component re-render
|
|
329
423
|
watchComponentReRender($component, ()=>{
|
|
@@ -337,8 +431,8 @@ const Toolbar = ()=>{
|
|
|
337
431
|
}, [
|
|
338
432
|
removeActiveComponent,
|
|
339
433
|
removeHoverComponent,
|
|
340
|
-
|
|
341
|
-
|
|
434
|
+
setActiveComponentSpacing,
|
|
435
|
+
setToolbarOnboarding
|
|
342
436
|
]);
|
|
343
437
|
const setFocusTextEditor = async (value)=>{
|
|
344
438
|
if (!value) {
|
|
@@ -604,6 +698,46 @@ const Toolbar = ()=>{
|
|
|
604
698
|
}, [
|
|
605
699
|
removeHoverComponent
|
|
606
700
|
]);
|
|
701
|
+
const setHoverParentComponent = (uid, type)=>{
|
|
702
|
+
if (!uid) return;
|
|
703
|
+
const $parentComponents = document.querySelectorAll(`[data-uid="${uid}"]`);
|
|
704
|
+
if ($parentComponents.length) {
|
|
705
|
+
$parentComponents.forEach(($parentComponent)=>{
|
|
706
|
+
const $outline = getChildrenByAttrSelector($parentComponent, 'data-outline');
|
|
707
|
+
if ($outline) {
|
|
708
|
+
if (type === 'in') {
|
|
709
|
+
$outline.setAttribute('data-outline-force-hover', 'true');
|
|
710
|
+
$outline.setAttribute('data-outline-force-overlay', 'true');
|
|
711
|
+
} else {
|
|
712
|
+
$outline.removeAttribute('data-outline-force-hover');
|
|
713
|
+
$outline.removeAttribute('data-outline-force-overlay');
|
|
714
|
+
}
|
|
715
|
+
}
|
|
716
|
+
});
|
|
717
|
+
}
|
|
718
|
+
};
|
|
719
|
+
const onHoverComponent = useCallback((e)=>{
|
|
720
|
+
if (isDragging.current) return;
|
|
721
|
+
const detail = e.detail;
|
|
722
|
+
if (detail?.componentUid) {
|
|
723
|
+
setHoverParentComponent(detail?.componentUid, detail?.type);
|
|
724
|
+
}
|
|
725
|
+
}, [
|
|
726
|
+
isDragging
|
|
727
|
+
]);
|
|
728
|
+
const onToolbarOnboarding = useCallback((e)=>{
|
|
729
|
+
const detail = e.detail;
|
|
730
|
+
if (detail?.isNewUser) {
|
|
731
|
+
setIsOnboarding(true);
|
|
732
|
+
}
|
|
733
|
+
}, []);
|
|
734
|
+
const onWindowResize = useCallback(()=>{
|
|
735
|
+
if (isOnboarding) {
|
|
736
|
+
calculateOnboardingPosition();
|
|
737
|
+
}
|
|
738
|
+
}, [
|
|
739
|
+
isOnboarding
|
|
740
|
+
]);
|
|
607
741
|
/* Register event */ useEffect(()=>{
|
|
608
742
|
document.addEventListener('mousemove', onMouseMove);
|
|
609
743
|
window.addEventListener('editor:active-component', onActiveComponent);
|
|
@@ -612,6 +746,9 @@ const Toolbar = ()=>{
|
|
|
612
746
|
window.addEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
|
|
613
747
|
window.addEventListener('editor:toolbar:show-parents', onShowParents);
|
|
614
748
|
window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
|
|
749
|
+
window.addEventListener('editor:hover-component', onHoverComponent);
|
|
750
|
+
window.addEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
|
|
751
|
+
window.addEventListener('resize', onWindowResize);
|
|
615
752
|
return ()=>{
|
|
616
753
|
document.removeEventListener('mousemove', onMouseMove);
|
|
617
754
|
window.removeEventListener('editor:active-component', onActiveComponent);
|
|
@@ -620,6 +757,9 @@ const Toolbar = ()=>{
|
|
|
620
757
|
window.removeEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
|
|
621
758
|
window.removeEventListener('editor:toolbar:show-parents', onShowParents);
|
|
622
759
|
window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
|
|
760
|
+
window.removeEventListener('editor:hover-component', onHoverComponent);
|
|
761
|
+
window.removeEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
|
|
762
|
+
window.removeEventListener('resize', onWindowResize);
|
|
623
763
|
};
|
|
624
764
|
}, [
|
|
625
765
|
onMouseMove,
|
|
@@ -628,9 +768,16 @@ const Toolbar = ()=>{
|
|
|
628
768
|
onIsDragging,
|
|
629
769
|
onIsEditingTextEditor,
|
|
630
770
|
onShowParents,
|
|
631
|
-
onResizeSpacing
|
|
771
|
+
onResizeSpacing,
|
|
772
|
+
onHoverComponent,
|
|
773
|
+
onToolbarOnboarding,
|
|
774
|
+
onWindowResize
|
|
632
775
|
]);
|
|
633
|
-
return
|
|
776
|
+
return isOnboarding && /*#__PURE__*/ jsx(Onboarding, {
|
|
777
|
+
enable: true,
|
|
778
|
+
position: onboardingPosition,
|
|
779
|
+
onCloseOnboarding: onCloseOnboarding
|
|
780
|
+
});
|
|
634
781
|
};
|
|
635
782
|
const getDOMElementParents = ($el, selector, limit)=>{
|
|
636
783
|
// Set up a parent array
|
|
@@ -674,11 +821,11 @@ const getChildrenByAttrSelector = ($el, attrSelector)=>{
|
|
|
674
821
|
}
|
|
675
822
|
}
|
|
676
823
|
};
|
|
677
|
-
const isOverParent = ({ current, parent, index, revert })=>{
|
|
824
|
+
const isOverParent = ({ current, parent: parent1, index, revert })=>{
|
|
678
825
|
for(let i = 0; i < index; i++){
|
|
679
|
-
let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >=
|
|
826
|
+
let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.top && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.top + parent1.height || current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.top + parent1.height && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.top;
|
|
680
827
|
if (revert) {
|
|
681
|
-
is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >=
|
|
828
|
+
is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.bottom && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.bottom - parent1.height || current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.bottom - parent1.height && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.bottom;
|
|
682
829
|
}
|
|
683
830
|
if (is) return true;
|
|
684
831
|
}
|
|
@@ -709,9 +856,9 @@ const isSection = (el)=>{
|
|
|
709
856
|
const tag = el.getAttribute('data-component-tag');
|
|
710
857
|
return tag === 'Section';
|
|
711
858
|
};
|
|
712
|
-
const isOverToolbarPosition = (el,
|
|
859
|
+
const isOverToolbarPosition = (el, parent1)=>{
|
|
713
860
|
const rect = el.getBoundingClientRect();
|
|
714
|
-
const rectP =
|
|
861
|
+
const rectP = parent1.getBoundingClientRect();
|
|
715
862
|
// 32px = toolbar active height
|
|
716
863
|
return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
|
|
717
864
|
};
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { memo } from 'react';
|
|
3
|
+
|
|
4
|
+
const Onboarding = ({ enable, position, onCloseOnboarding })=>{
|
|
5
|
+
const closeOnboarding = ()=>{
|
|
6
|
+
onCloseOnboarding();
|
|
7
|
+
};
|
|
8
|
+
const videoSrc = 'https://ucarecdn.com/de5fd2eb-4525-45a7-ad13-53960dac225e/';
|
|
9
|
+
const Video = ()=>{
|
|
10
|
+
return /*#__PURE__*/ jsxs("video", {
|
|
11
|
+
width: "100%",
|
|
12
|
+
className: "w-full",
|
|
13
|
+
loop: true,
|
|
14
|
+
muted: true,
|
|
15
|
+
autoPlay: true,
|
|
16
|
+
playsInline: true,
|
|
17
|
+
children: [
|
|
18
|
+
/*#__PURE__*/ jsx("source", {
|
|
19
|
+
src: videoSrc,
|
|
20
|
+
type: "video/mp4"
|
|
21
|
+
}),
|
|
22
|
+
"Sorry, your browser doesn‘t support embedded videos."
|
|
23
|
+
]
|
|
24
|
+
});
|
|
25
|
+
};
|
|
26
|
+
const MemoVideo = /*#__PURE__*/ memo(Video);
|
|
27
|
+
return /*#__PURE__*/ jsx("div", {
|
|
28
|
+
"data-toolbar-onboarding": true,
|
|
29
|
+
"data-toolbar-onboarding-position": position,
|
|
30
|
+
children: enable && /*#__PURE__*/ jsxs(Fragment, {
|
|
31
|
+
children: [
|
|
32
|
+
/*#__PURE__*/ jsx("span", {
|
|
33
|
+
"data-icon": true,
|
|
34
|
+
"data-position": position,
|
|
35
|
+
children: position === 'bottom' ? /*#__PURE__*/ jsx("svg", {
|
|
36
|
+
width: "8",
|
|
37
|
+
height: "4",
|
|
38
|
+
viewBox: "0 0 8 4",
|
|
39
|
+
fill: "none",
|
|
40
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
41
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
42
|
+
d: "M-1.74846e-07 4L4 -1.74846e-07L8 4L-1.74846e-07 4Z",
|
|
43
|
+
fill: "white"
|
|
44
|
+
})
|
|
45
|
+
}) : /*#__PURE__*/ jsx("svg", {
|
|
46
|
+
width: "8",
|
|
47
|
+
height: "4",
|
|
48
|
+
viewBox: "0 0 8 4",
|
|
49
|
+
fill: "none",
|
|
50
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
51
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
52
|
+
d: "M8 3.33818e-07L4 4L4.76995e-08 7.15256e-07L8 3.33818e-07Z",
|
|
53
|
+
fill: "white"
|
|
54
|
+
})
|
|
55
|
+
})
|
|
56
|
+
}),
|
|
57
|
+
/*#__PURE__*/ jsxs("div", {
|
|
58
|
+
"data-onboarding-wrapper": true,
|
|
59
|
+
children: [
|
|
60
|
+
/*#__PURE__*/ jsx("button", {
|
|
61
|
+
"data-close": true,
|
|
62
|
+
type: "button",
|
|
63
|
+
onClick: closeOnboarding,
|
|
64
|
+
children: /*#__PURE__*/ jsxs("svg", {
|
|
65
|
+
width: "32",
|
|
66
|
+
height: "32",
|
|
67
|
+
viewBox: "0 0 32 32",
|
|
68
|
+
fill: "none",
|
|
69
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
70
|
+
children: [
|
|
71
|
+
/*#__PURE__*/ jsx("path", {
|
|
72
|
+
fillRule: "evenodd",
|
|
73
|
+
clipRule: "evenodd",
|
|
74
|
+
d: "M10.6464 10.6464C10.8417 10.4512 11.1583 10.4512 11.3536 10.6464L21.3536 20.6464C21.5488 20.8417 21.5488 21.1583 21.3536 21.3536C21.1583 21.5488 20.8417 21.5488 20.6464 21.3536L10.6464 11.3536C10.4512 11.1583 10.4512 10.8417 10.6464 10.6464Z",
|
|
75
|
+
fill: "#212121"
|
|
76
|
+
}),
|
|
77
|
+
/*#__PURE__*/ jsx("path", {
|
|
78
|
+
fillRule: "evenodd",
|
|
79
|
+
clipRule: "evenodd",
|
|
80
|
+
d: "M21.3536 10.6464C21.5488 10.8417 21.5488 11.1583 21.3536 11.3536L11.3536 21.3536C11.1583 21.5488 10.8417 21.5488 10.6464 21.3536C10.4512 21.1583 10.4512 20.8417 10.6464 20.6464L20.6464 10.6464C20.8417 10.4512 21.1583 10.4512 21.3536 10.6464Z",
|
|
81
|
+
fill: "#212121"
|
|
82
|
+
})
|
|
83
|
+
]
|
|
84
|
+
})
|
|
85
|
+
}),
|
|
86
|
+
/*#__PURE__*/ jsx(MemoVideo, {}),
|
|
87
|
+
/*#__PURE__*/ jsxs("div", {
|
|
88
|
+
"data-content": true,
|
|
89
|
+
children: [
|
|
90
|
+
/*#__PURE__*/ jsx("h3", {
|
|
91
|
+
children: "New way to select parent element"
|
|
92
|
+
}),
|
|
93
|
+
/*#__PURE__*/ jsx("p", {
|
|
94
|
+
children: "Select parent from here in case you can‘t find yours at times."
|
|
95
|
+
})
|
|
96
|
+
]
|
|
97
|
+
})
|
|
98
|
+
]
|
|
99
|
+
})
|
|
100
|
+
]
|
|
101
|
+
})
|
|
102
|
+
});
|
|
103
|
+
};
|
|
104
|
+
var Onboarding$1 = /*#__PURE__*/ memo(Onboarding);
|
|
105
|
+
|
|
106
|
+
export { Onboarding$1 as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.28.2",
|
|
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.
|
|
28
|
+
"@gem-sdk/core": "1.28.1",
|
|
29
29
|
"@gem-sdk/plugin-cookie-bar": "1.25.0",
|
|
30
30
|
"@gem-sdk/plugin-quick-view": "1.25.0",
|
|
31
31
|
"@gem-sdk/plugin-sticky-add-to-cart": "1.25.0"
|