@gem-sdk/pages 1.27.10 → 1.27.14
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,44 @@ const Toolbar = ()=>{
|
|
|
238
302
|
}
|
|
239
303
|
}
|
|
240
304
|
}, []);
|
|
241
|
-
const
|
|
242
|
-
|
|
243
|
-
if ($
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
$
|
|
257
|
-
|
|
305
|
+
const setToolbarOnboarding = react.useCallback(({ $component })=>{
|
|
306
|
+
if (!$component) return;
|
|
307
|
+
if (isSection($component) || isPopup($component) || isSticky($component)) return;
|
|
308
|
+
const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
309
|
+
if (toolbar) {
|
|
310
|
+
const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
|
|
311
|
+
// only show one time
|
|
312
|
+
if (countShowOnboarding == 0) {
|
|
313
|
+
setTimeout(()=>{
|
|
314
|
+
const rect = toolbar.getBoundingClientRect();
|
|
315
|
+
const rectTop = rect.top || 0;
|
|
316
|
+
const rectOnboading = toolbarOnboading?.getBoundingClientRect();
|
|
317
|
+
const onboardingHeight = rectOnboading?.height || 0;
|
|
318
|
+
const $iframe = parent.document.querySelector('.iframe');
|
|
319
|
+
const $iframeWin = $iframe?.contentWindow;
|
|
320
|
+
const iframeWinScrollY = $iframeWin?.scrollY || 0;
|
|
321
|
+
const iframeHeight = $iframe?.clientHeight || 0;
|
|
322
|
+
if (rectTop + onboardingHeight > iframeHeight) {
|
|
323
|
+
const _top = rect.top + iframeWinScrollY - onboardingHeight - 8;
|
|
324
|
+
toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
|
|
325
|
+
setOnboardingPosition('top');
|
|
326
|
+
} else {
|
|
327
|
+
const _top = rect.top + iframeWinScrollY + rect.height + 8;
|
|
328
|
+
toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
|
|
329
|
+
setOnboardingPosition('bottom');
|
|
330
|
+
}
|
|
331
|
+
setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
|
|
332
|
+
toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
|
|
333
|
+
}, 250);
|
|
258
334
|
} else {
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
if ($toolbar) {
|
|
262
|
-
$toolbar.removeAttribute('data-toolbar-force-hover');
|
|
263
|
-
}
|
|
264
|
-
if ($outline) {
|
|
265
|
-
$outline.removeAttribute('data-outline-force-hover');
|
|
266
|
-
}
|
|
335
|
+
onCloseOnboarding();
|
|
336
|
+
toolbarOnboading?.removeAttribute('data-onboarding-active');
|
|
267
337
|
}
|
|
268
338
|
}
|
|
269
|
-
}, [
|
|
339
|
+
}, [
|
|
340
|
+
countShowOnboarding,
|
|
341
|
+
onCloseOnboarding
|
|
342
|
+
]);
|
|
270
343
|
const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
|
|
271
344
|
if (!componentUid) return;
|
|
272
345
|
let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
|
|
@@ -327,7 +400,14 @@ const Toolbar = ()=>{
|
|
|
327
400
|
setActiveComponentSpacing({
|
|
328
401
|
$component
|
|
329
402
|
});
|
|
330
|
-
|
|
403
|
+
timeoutRef.current && clearTimeout(timeoutRef.current);
|
|
404
|
+
timeoutRef.current = setTimeout(()=>{
|
|
405
|
+
if ($component) {
|
|
406
|
+
setToolbarOnboarding({
|
|
407
|
+
$component
|
|
408
|
+
});
|
|
409
|
+
}
|
|
410
|
+
}, timeoutOnboarding);
|
|
331
411
|
removeHoverComponent();
|
|
332
412
|
// Reactive when component re-render
|
|
333
413
|
watchComponentReRender($component, ()=>{
|
|
@@ -341,8 +421,8 @@ const Toolbar = ()=>{
|
|
|
341
421
|
}, [
|
|
342
422
|
removeActiveComponent,
|
|
343
423
|
removeHoverComponent,
|
|
344
|
-
|
|
345
|
-
|
|
424
|
+
setActiveComponentSpacing,
|
|
425
|
+
setToolbarOnboarding
|
|
346
426
|
]);
|
|
347
427
|
const setFocusTextEditor = async (value)=>{
|
|
348
428
|
if (!value) {
|
|
@@ -608,6 +688,39 @@ const Toolbar = ()=>{
|
|
|
608
688
|
}, [
|
|
609
689
|
removeHoverComponent
|
|
610
690
|
]);
|
|
691
|
+
const setHoverParentComponent = (uid, type)=>{
|
|
692
|
+
if (!uid) return;
|
|
693
|
+
const $parentComponents = document.querySelectorAll(`[data-uid="${uid}"]`);
|
|
694
|
+
if ($parentComponents.length) {
|
|
695
|
+
$parentComponents.forEach(($parentComponent)=>{
|
|
696
|
+
const $outline = getChildrenByAttrSelector($parentComponent, 'data-outline');
|
|
697
|
+
if ($outline) {
|
|
698
|
+
if (type === 'in') {
|
|
699
|
+
$outline.setAttribute('data-outline-force-hover', 'true');
|
|
700
|
+
$outline.setAttribute('data-outline-force-overlay', 'true');
|
|
701
|
+
} else {
|
|
702
|
+
$outline.removeAttribute('data-outline-force-hover');
|
|
703
|
+
$outline.removeAttribute('data-outline-force-overlay');
|
|
704
|
+
}
|
|
705
|
+
}
|
|
706
|
+
});
|
|
707
|
+
}
|
|
708
|
+
};
|
|
709
|
+
const onHoverComponent = react.useCallback((e)=>{
|
|
710
|
+
if (isDragging.current) return;
|
|
711
|
+
const detail = e.detail;
|
|
712
|
+
if (detail?.componentUid) {
|
|
713
|
+
setHoverParentComponent(detail?.componentUid, detail?.type);
|
|
714
|
+
}
|
|
715
|
+
}, [
|
|
716
|
+
isDragging
|
|
717
|
+
]);
|
|
718
|
+
const onToolbarOnboarding = react.useCallback((e)=>{
|
|
719
|
+
const detail = e.detail;
|
|
720
|
+
if (detail?.isNewUser) {
|
|
721
|
+
setIsOnboarding(true);
|
|
722
|
+
}
|
|
723
|
+
}, []);
|
|
611
724
|
/* Register event */ react.useEffect(()=>{
|
|
612
725
|
document.addEventListener('mousemove', onMouseMove);
|
|
613
726
|
window.addEventListener('editor:active-component', onActiveComponent);
|
|
@@ -616,6 +729,8 @@ const Toolbar = ()=>{
|
|
|
616
729
|
window.addEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
|
|
617
730
|
window.addEventListener('editor:toolbar:show-parents', onShowParents);
|
|
618
731
|
window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
|
|
732
|
+
window.addEventListener('editor:hover-component', onHoverComponent);
|
|
733
|
+
window.addEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
|
|
619
734
|
return ()=>{
|
|
620
735
|
document.removeEventListener('mousemove', onMouseMove);
|
|
621
736
|
window.removeEventListener('editor:active-component', onActiveComponent);
|
|
@@ -624,6 +739,8 @@ const Toolbar = ()=>{
|
|
|
624
739
|
window.removeEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
|
|
625
740
|
window.removeEventListener('editor:toolbar:show-parents', onShowParents);
|
|
626
741
|
window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
|
|
742
|
+
window.removeEventListener('editor:hover-component', onHoverComponent);
|
|
743
|
+
window.removeEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
|
|
627
744
|
};
|
|
628
745
|
}, [
|
|
629
746
|
onMouseMove,
|
|
@@ -632,9 +749,15 @@ const Toolbar = ()=>{
|
|
|
632
749
|
onIsDragging,
|
|
633
750
|
onIsEditingTextEditor,
|
|
634
751
|
onShowParents,
|
|
635
|
-
onResizeSpacing
|
|
752
|
+
onResizeSpacing,
|
|
753
|
+
onHoverComponent,
|
|
754
|
+
onToolbarOnboarding
|
|
636
755
|
]);
|
|
637
|
-
return
|
|
756
|
+
return isOnboarding && /*#__PURE__*/ jsxRuntime.jsx(Onboarding.default, {
|
|
757
|
+
enable: true,
|
|
758
|
+
position: onboardingPosition,
|
|
759
|
+
onCloseOnboarding: onCloseOnboarding
|
|
760
|
+
});
|
|
638
761
|
};
|
|
639
762
|
const getDOMElementParents = ($el, selector, limit)=>{
|
|
640
763
|
// Set up a parent array
|
|
@@ -678,11 +801,11 @@ const getChildrenByAttrSelector = ($el, attrSelector)=>{
|
|
|
678
801
|
}
|
|
679
802
|
}
|
|
680
803
|
};
|
|
681
|
-
const isOverParent = ({ current, parent, index, revert })=>{
|
|
804
|
+
const isOverParent = ({ current, parent: parent1, index, revert })=>{
|
|
682
805
|
for(let i = 0; i < index; i++){
|
|
683
|
-
let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >=
|
|
806
|
+
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
807
|
if (revert) {
|
|
685
|
-
is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >=
|
|
808
|
+
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
809
|
}
|
|
687
810
|
if (is) return true;
|
|
688
811
|
}
|
|
@@ -713,9 +836,9 @@ const isSection = (el)=>{
|
|
|
713
836
|
const tag = el.getAttribute('data-component-tag');
|
|
714
837
|
return tag === 'Section';
|
|
715
838
|
};
|
|
716
|
-
const isOverToolbarPosition = (el,
|
|
839
|
+
const isOverToolbarPosition = (el, parent1)=>{
|
|
717
840
|
const rect = el.getBoundingClientRect();
|
|
718
|
-
const rectP =
|
|
841
|
+
const rectP = parent1.getBoundingClientRect();
|
|
719
842
|
// 32px = toolbar active height
|
|
720
843
|
return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
|
|
721
844
|
};
|
|
@@ -0,0 +1,109 @@
|
|
|
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
|
+
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
31
|
+
"data-toolbar-onboarding": true,
|
|
32
|
+
"data-toolbar-onboarding-position": position,
|
|
33
|
+
children: enable && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
34
|
+
children: [
|
|
35
|
+
/*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
36
|
+
"data-icon": true,
|
|
37
|
+
"data-position": position,
|
|
38
|
+
children: position === 'bottom' ? /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
39
|
+
width: "8",
|
|
40
|
+
height: "4",
|
|
41
|
+
viewBox: "0 0 8 4",
|
|
42
|
+
fill: "none",
|
|
43
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
44
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
45
|
+
d: "M-1.74846e-07 4L4 -1.74846e-07L8 4L-1.74846e-07 4Z",
|
|
46
|
+
fill: "white"
|
|
47
|
+
})
|
|
48
|
+
}) : /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
49
|
+
width: "8",
|
|
50
|
+
height: "4",
|
|
51
|
+
viewBox: "0 0 8 4",
|
|
52
|
+
fill: "none",
|
|
53
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
54
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
55
|
+
d: "M8 3.33818e-07L4 4L4.76995e-08 7.15256e-07L8 3.33818e-07Z",
|
|
56
|
+
fill: "white"
|
|
57
|
+
})
|
|
58
|
+
})
|
|
59
|
+
}),
|
|
60
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
61
|
+
"data-onboarding-wrapper": true,
|
|
62
|
+
children: [
|
|
63
|
+
/*#__PURE__*/ jsxRuntime.jsx("button", {
|
|
64
|
+
"data-close": true,
|
|
65
|
+
type: "button",
|
|
66
|
+
onClick: closeOnboarding,
|
|
67
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
68
|
+
width: "32",
|
|
69
|
+
height: "32",
|
|
70
|
+
viewBox: "0 0 32 32",
|
|
71
|
+
fill: "none",
|
|
72
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
73
|
+
children: [
|
|
74
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
75
|
+
fillRule: "evenodd",
|
|
76
|
+
clipRule: "evenodd",
|
|
77
|
+
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",
|
|
78
|
+
fill: "#212121"
|
|
79
|
+
}),
|
|
80
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
81
|
+
fillRule: "evenodd",
|
|
82
|
+
clipRule: "evenodd",
|
|
83
|
+
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",
|
|
84
|
+
fill: "#212121"
|
|
85
|
+
})
|
|
86
|
+
]
|
|
87
|
+
})
|
|
88
|
+
}),
|
|
89
|
+
/*#__PURE__*/ jsxRuntime.jsx(Video, {}),
|
|
90
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
91
|
+
"data-content": true,
|
|
92
|
+
children: [
|
|
93
|
+
/*#__PURE__*/ jsxRuntime.jsx("h3", {
|
|
94
|
+
children: "New way to select parent element"
|
|
95
|
+
}),
|
|
96
|
+
/*#__PURE__*/ jsxRuntime.jsx("p", {
|
|
97
|
+
children: "Select parent from here in case you can‘t find yours at times."
|
|
98
|
+
})
|
|
99
|
+
]
|
|
100
|
+
})
|
|
101
|
+
]
|
|
102
|
+
})
|
|
103
|
+
]
|
|
104
|
+
})
|
|
105
|
+
});
|
|
106
|
+
};
|
|
107
|
+
var Onboarding$1 = /*#__PURE__*/ react.memo(Onboarding);
|
|
108
|
+
|
|
109
|
+
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,44 @@ const Toolbar = ()=>{
|
|
|
234
298
|
}
|
|
235
299
|
}
|
|
236
300
|
}, []);
|
|
237
|
-
const
|
|
238
|
-
|
|
239
|
-
if ($
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
$
|
|
253
|
-
|
|
301
|
+
const setToolbarOnboarding = useCallback(({ $component })=>{
|
|
302
|
+
if (!$component) return;
|
|
303
|
+
if (isSection($component) || isPopup($component) || isSticky($component)) return;
|
|
304
|
+
const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
305
|
+
if (toolbar) {
|
|
306
|
+
const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
|
|
307
|
+
// only show one time
|
|
308
|
+
if (countShowOnboarding == 0) {
|
|
309
|
+
setTimeout(()=>{
|
|
310
|
+
const rect = toolbar.getBoundingClientRect();
|
|
311
|
+
const rectTop = rect.top || 0;
|
|
312
|
+
const rectOnboading = toolbarOnboading?.getBoundingClientRect();
|
|
313
|
+
const onboardingHeight = rectOnboading?.height || 0;
|
|
314
|
+
const $iframe = parent.document.querySelector('.iframe');
|
|
315
|
+
const $iframeWin = $iframe?.contentWindow;
|
|
316
|
+
const iframeWinScrollY = $iframeWin?.scrollY || 0;
|
|
317
|
+
const iframeHeight = $iframe?.clientHeight || 0;
|
|
318
|
+
if (rectTop + onboardingHeight > iframeHeight) {
|
|
319
|
+
const _top = rect.top + iframeWinScrollY - onboardingHeight - 8;
|
|
320
|
+
toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
|
|
321
|
+
setOnboardingPosition('top');
|
|
322
|
+
} else {
|
|
323
|
+
const _top = rect.top + iframeWinScrollY + rect.height + 8;
|
|
324
|
+
toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
|
|
325
|
+
setOnboardingPosition('bottom');
|
|
326
|
+
}
|
|
327
|
+
setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
|
|
328
|
+
toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
|
|
329
|
+
}, 250);
|
|
254
330
|
} else {
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
if ($toolbar) {
|
|
258
|
-
$toolbar.removeAttribute('data-toolbar-force-hover');
|
|
259
|
-
}
|
|
260
|
-
if ($outline) {
|
|
261
|
-
$outline.removeAttribute('data-outline-force-hover');
|
|
262
|
-
}
|
|
331
|
+
onCloseOnboarding();
|
|
332
|
+
toolbarOnboading?.removeAttribute('data-onboarding-active');
|
|
263
333
|
}
|
|
264
334
|
}
|
|
265
|
-
}, [
|
|
335
|
+
}, [
|
|
336
|
+
countShowOnboarding,
|
|
337
|
+
onCloseOnboarding
|
|
338
|
+
]);
|
|
266
339
|
const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
|
|
267
340
|
if (!componentUid) return;
|
|
268
341
|
let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
|
|
@@ -323,7 +396,14 @@ const Toolbar = ()=>{
|
|
|
323
396
|
setActiveComponentSpacing({
|
|
324
397
|
$component
|
|
325
398
|
});
|
|
326
|
-
|
|
399
|
+
timeoutRef.current && clearTimeout(timeoutRef.current);
|
|
400
|
+
timeoutRef.current = setTimeout(()=>{
|
|
401
|
+
if ($component) {
|
|
402
|
+
setToolbarOnboarding({
|
|
403
|
+
$component
|
|
404
|
+
});
|
|
405
|
+
}
|
|
406
|
+
}, timeoutOnboarding);
|
|
327
407
|
removeHoverComponent();
|
|
328
408
|
// Reactive when component re-render
|
|
329
409
|
watchComponentReRender($component, ()=>{
|
|
@@ -337,8 +417,8 @@ const Toolbar = ()=>{
|
|
|
337
417
|
}, [
|
|
338
418
|
removeActiveComponent,
|
|
339
419
|
removeHoverComponent,
|
|
340
|
-
|
|
341
|
-
|
|
420
|
+
setActiveComponentSpacing,
|
|
421
|
+
setToolbarOnboarding
|
|
342
422
|
]);
|
|
343
423
|
const setFocusTextEditor = async (value)=>{
|
|
344
424
|
if (!value) {
|
|
@@ -604,6 +684,39 @@ const Toolbar = ()=>{
|
|
|
604
684
|
}, [
|
|
605
685
|
removeHoverComponent
|
|
606
686
|
]);
|
|
687
|
+
const setHoverParentComponent = (uid, type)=>{
|
|
688
|
+
if (!uid) return;
|
|
689
|
+
const $parentComponents = document.querySelectorAll(`[data-uid="${uid}"]`);
|
|
690
|
+
if ($parentComponents.length) {
|
|
691
|
+
$parentComponents.forEach(($parentComponent)=>{
|
|
692
|
+
const $outline = getChildrenByAttrSelector($parentComponent, 'data-outline');
|
|
693
|
+
if ($outline) {
|
|
694
|
+
if (type === 'in') {
|
|
695
|
+
$outline.setAttribute('data-outline-force-hover', 'true');
|
|
696
|
+
$outline.setAttribute('data-outline-force-overlay', 'true');
|
|
697
|
+
} else {
|
|
698
|
+
$outline.removeAttribute('data-outline-force-hover');
|
|
699
|
+
$outline.removeAttribute('data-outline-force-overlay');
|
|
700
|
+
}
|
|
701
|
+
}
|
|
702
|
+
});
|
|
703
|
+
}
|
|
704
|
+
};
|
|
705
|
+
const onHoverComponent = useCallback((e)=>{
|
|
706
|
+
if (isDragging.current) return;
|
|
707
|
+
const detail = e.detail;
|
|
708
|
+
if (detail?.componentUid) {
|
|
709
|
+
setHoverParentComponent(detail?.componentUid, detail?.type);
|
|
710
|
+
}
|
|
711
|
+
}, [
|
|
712
|
+
isDragging
|
|
713
|
+
]);
|
|
714
|
+
const onToolbarOnboarding = useCallback((e)=>{
|
|
715
|
+
const detail = e.detail;
|
|
716
|
+
if (detail?.isNewUser) {
|
|
717
|
+
setIsOnboarding(true);
|
|
718
|
+
}
|
|
719
|
+
}, []);
|
|
607
720
|
/* Register event */ useEffect(()=>{
|
|
608
721
|
document.addEventListener('mousemove', onMouseMove);
|
|
609
722
|
window.addEventListener('editor:active-component', onActiveComponent);
|
|
@@ -612,6 +725,8 @@ const Toolbar = ()=>{
|
|
|
612
725
|
window.addEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
|
|
613
726
|
window.addEventListener('editor:toolbar:show-parents', onShowParents);
|
|
614
727
|
window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
|
|
728
|
+
window.addEventListener('editor:hover-component', onHoverComponent);
|
|
729
|
+
window.addEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
|
|
615
730
|
return ()=>{
|
|
616
731
|
document.removeEventListener('mousemove', onMouseMove);
|
|
617
732
|
window.removeEventListener('editor:active-component', onActiveComponent);
|
|
@@ -620,6 +735,8 @@ const Toolbar = ()=>{
|
|
|
620
735
|
window.removeEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
|
|
621
736
|
window.removeEventListener('editor:toolbar:show-parents', onShowParents);
|
|
622
737
|
window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
|
|
738
|
+
window.removeEventListener('editor:hover-component', onHoverComponent);
|
|
739
|
+
window.removeEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
|
|
623
740
|
};
|
|
624
741
|
}, [
|
|
625
742
|
onMouseMove,
|
|
@@ -628,9 +745,15 @@ const Toolbar = ()=>{
|
|
|
628
745
|
onIsDragging,
|
|
629
746
|
onIsEditingTextEditor,
|
|
630
747
|
onShowParents,
|
|
631
|
-
onResizeSpacing
|
|
748
|
+
onResizeSpacing,
|
|
749
|
+
onHoverComponent,
|
|
750
|
+
onToolbarOnboarding
|
|
632
751
|
]);
|
|
633
|
-
return
|
|
752
|
+
return isOnboarding && /*#__PURE__*/ jsx(Onboarding, {
|
|
753
|
+
enable: true,
|
|
754
|
+
position: onboardingPosition,
|
|
755
|
+
onCloseOnboarding: onCloseOnboarding
|
|
756
|
+
});
|
|
634
757
|
};
|
|
635
758
|
const getDOMElementParents = ($el, selector, limit)=>{
|
|
636
759
|
// Set up a parent array
|
|
@@ -674,11 +797,11 @@ const getChildrenByAttrSelector = ($el, attrSelector)=>{
|
|
|
674
797
|
}
|
|
675
798
|
}
|
|
676
799
|
};
|
|
677
|
-
const isOverParent = ({ current, parent, index, revert })=>{
|
|
800
|
+
const isOverParent = ({ current, parent: parent1, index, revert })=>{
|
|
678
801
|
for(let i = 0; i < index; i++){
|
|
679
|
-
let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >=
|
|
802
|
+
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
803
|
if (revert) {
|
|
681
|
-
is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >=
|
|
804
|
+
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
805
|
}
|
|
683
806
|
if (is) return true;
|
|
684
807
|
}
|
|
@@ -709,9 +832,9 @@ const isSection = (el)=>{
|
|
|
709
832
|
const tag = el.getAttribute('data-component-tag');
|
|
710
833
|
return tag === 'Section';
|
|
711
834
|
};
|
|
712
|
-
const isOverToolbarPosition = (el,
|
|
835
|
+
const isOverToolbarPosition = (el, parent1)=>{
|
|
713
836
|
const rect = el.getBoundingClientRect();
|
|
714
|
-
const rectP =
|
|
837
|
+
const rectP = parent1.getBoundingClientRect();
|
|
715
838
|
// 32px = toolbar active height
|
|
716
839
|
return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
|
|
717
840
|
};
|
|
@@ -0,0 +1,105 @@
|
|
|
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
|
+
return /*#__PURE__*/ jsx("div", {
|
|
27
|
+
"data-toolbar-onboarding": true,
|
|
28
|
+
"data-toolbar-onboarding-position": position,
|
|
29
|
+
children: enable && /*#__PURE__*/ jsxs(Fragment, {
|
|
30
|
+
children: [
|
|
31
|
+
/*#__PURE__*/ jsx("span", {
|
|
32
|
+
"data-icon": true,
|
|
33
|
+
"data-position": position,
|
|
34
|
+
children: position === 'bottom' ? /*#__PURE__*/ jsx("svg", {
|
|
35
|
+
width: "8",
|
|
36
|
+
height: "4",
|
|
37
|
+
viewBox: "0 0 8 4",
|
|
38
|
+
fill: "none",
|
|
39
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
40
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
41
|
+
d: "M-1.74846e-07 4L4 -1.74846e-07L8 4L-1.74846e-07 4Z",
|
|
42
|
+
fill: "white"
|
|
43
|
+
})
|
|
44
|
+
}) : /*#__PURE__*/ jsx("svg", {
|
|
45
|
+
width: "8",
|
|
46
|
+
height: "4",
|
|
47
|
+
viewBox: "0 0 8 4",
|
|
48
|
+
fill: "none",
|
|
49
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
50
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
51
|
+
d: "M8 3.33818e-07L4 4L4.76995e-08 7.15256e-07L8 3.33818e-07Z",
|
|
52
|
+
fill: "white"
|
|
53
|
+
})
|
|
54
|
+
})
|
|
55
|
+
}),
|
|
56
|
+
/*#__PURE__*/ jsxs("div", {
|
|
57
|
+
"data-onboarding-wrapper": true,
|
|
58
|
+
children: [
|
|
59
|
+
/*#__PURE__*/ jsx("button", {
|
|
60
|
+
"data-close": true,
|
|
61
|
+
type: "button",
|
|
62
|
+
onClick: closeOnboarding,
|
|
63
|
+
children: /*#__PURE__*/ jsxs("svg", {
|
|
64
|
+
width: "32",
|
|
65
|
+
height: "32",
|
|
66
|
+
viewBox: "0 0 32 32",
|
|
67
|
+
fill: "none",
|
|
68
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
69
|
+
children: [
|
|
70
|
+
/*#__PURE__*/ jsx("path", {
|
|
71
|
+
fillRule: "evenodd",
|
|
72
|
+
clipRule: "evenodd",
|
|
73
|
+
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",
|
|
74
|
+
fill: "#212121"
|
|
75
|
+
}),
|
|
76
|
+
/*#__PURE__*/ jsx("path", {
|
|
77
|
+
fillRule: "evenodd",
|
|
78
|
+
clipRule: "evenodd",
|
|
79
|
+
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",
|
|
80
|
+
fill: "#212121"
|
|
81
|
+
})
|
|
82
|
+
]
|
|
83
|
+
})
|
|
84
|
+
}),
|
|
85
|
+
/*#__PURE__*/ jsx(Video, {}),
|
|
86
|
+
/*#__PURE__*/ jsxs("div", {
|
|
87
|
+
"data-content": true,
|
|
88
|
+
children: [
|
|
89
|
+
/*#__PURE__*/ jsx("h3", {
|
|
90
|
+
children: "New way to select parent element"
|
|
91
|
+
}),
|
|
92
|
+
/*#__PURE__*/ jsx("p", {
|
|
93
|
+
children: "Select parent from here in case you can‘t find yours at times."
|
|
94
|
+
})
|
|
95
|
+
]
|
|
96
|
+
})
|
|
97
|
+
]
|
|
98
|
+
})
|
|
99
|
+
]
|
|
100
|
+
})
|
|
101
|
+
});
|
|
102
|
+
};
|
|
103
|
+
var Onboarding$1 = /*#__PURE__*/ memo(Onboarding);
|
|
104
|
+
|
|
105
|
+
export { Onboarding$1 as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "1.27.
|
|
3
|
+
"version": "1.27.14",
|
|
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.27.
|
|
28
|
+
"@gem-sdk/core": "1.27.14",
|
|
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"
|