@gem-sdk/pages 1.23.0-staging.182 → 1.23.0-staging.186

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/components/builder/Toolbar.js +132 -9
  2. package/dist/cjs/components/builder/toolbar/Onboarding.js +109 -0
  3. package/dist/esm/components/builder/Toolbar.js +133 -10
  4. package/dist/esm/components/builder/toolbar/Onboarding.js +105 -0
  5. package/package.json +1 -1
package/dist/cjs/components/builder/Toolbar.js CHANGED
@@ -2,15 +2,30 @@
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);
16
31
  const rect = $toolbar.getBoundingClientRect();
@@ -200,6 +215,21 @@ const Toolbar = ()=>{
200
215
  }, [
201
216
  removeHoverOverlayComponent
202
217
  ]);
218
+ const onCloseOnboarding = react.useCallback(()=>{
219
+ timeoutRef.current && clearTimeout(timeoutRef.current);
220
+ if (countShowOnboarding > 0) {
221
+ const eventCreate = new CustomEvent('editor:toolbar:close-onboarding', {
222
+ bubbles: true,
223
+ detail: {
224
+ close: 'close Onboarding'
225
+ }
226
+ });
227
+ window.dispatchEvent(eventCreate);
228
+ setIsOnboarding(false);
229
+ }
230
+ }, [
231
+ countShowOnboarding
232
+ ]);
203
233
  const removeActiveComponent = react.useCallback(()=>{
204
234
  currentComponentActive.current = null;
205
235
  const clearAttrs = [
@@ -221,7 +251,10 @@ const Toolbar = ()=>{
221
251
  }
222
252
  setFocusTextEditor(false);
223
253
  if (stopWatchReRenderComponent.current) stopWatchReRenderComponent.current();
224
- }, []);
254
+ onCloseOnboarding();
255
+ }, [
256
+ onCloseOnboarding
257
+ ]);
225
258
  const watchComponentReRender = ($el, callback)=>{
226
259
  // editor:component:render
227
260
  const onComponentReRender = (e)=>{
@@ -260,6 +293,44 @@ const Toolbar = ()=>{
260
293
  }
261
294
  }
262
295
  }, []);
296
+ const setToolbarOnboarding = react.useCallback(({ $component })=>{
297
+ if (!$component) return;
298
+ if (isSection($component) || isPopup($component) || isSticky($component)) return;
299
+ const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
300
+ if (toolbar) {
301
+ const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
302
+ // only show one time
303
+ if (countShowOnboarding == 0) {
304
+ setTimeout(()=>{
305
+ const rect = toolbar.getBoundingClientRect();
306
+ const rectTop = rect.top || 0;
307
+ const rectOnboading = toolbarOnboading?.getBoundingClientRect();
308
+ const onboardingHeight = rectOnboading?.height || 0;
309
+ const $iframe = parent.document.querySelector('.iframe');
310
+ const $iframeWin = $iframe?.contentWindow;
311
+ const iframeWinScrollY = $iframeWin?.scrollY || 0;
312
+ const iframeHeight = $iframe?.clientHeight || 0;
313
+ if (rectTop + onboardingHeight > iframeHeight) {
314
+ const _top = rect.top + iframeWinScrollY - onboardingHeight - 8;
315
+ toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
316
+ setOnboardingPosition('top');
317
+ } else {
318
+ const _top = rect.top + iframeWinScrollY + rect.height + 8;
319
+ toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
320
+ setOnboardingPosition('bottom');
321
+ }
322
+ setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
323
+ toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
324
+ }, 250);
325
+ } else {
326
+ onCloseOnboarding();
327
+ toolbarOnboading?.removeAttribute('data-onboarding-active');
328
+ }
329
+ }
330
+ }, [
331
+ countShowOnboarding,
332
+ onCloseOnboarding
333
+ ]);
263
334
  const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
264
335
  if (!componentUid) return;
265
336
  let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
@@ -320,6 +391,14 @@ const Toolbar = ()=>{
320
391
  setActiveComponentSpacing({
321
392
  $component
322
393
  });
394
+ timeoutRef.current && clearTimeout(timeoutRef.current);
395
+ timeoutRef.current = setTimeout(()=>{
396
+ if ($component) {
397
+ setToolbarOnboarding({
398
+ $component
399
+ });
400
+ }
401
+ }, timeoutOnboarding);
323
402
  removeHoverComponent();
324
403
  // Reactive when component re-render
325
404
  watchComponentReRender($component, ()=>{
@@ -333,7 +412,8 @@ const Toolbar = ()=>{
333
412
  }, [
334
413
  removeActiveComponent,
335
414
  removeHoverComponent,
336
- setActiveComponentSpacing
415
+ setActiveComponentSpacing,
416
+ setToolbarOnboarding
337
417
  ]);
338
418
  const setFocusTextEditor = async (value)=>{
339
419
  if (!value) {
@@ -599,6 +679,39 @@ const Toolbar = ()=>{
599
679
  }, [
600
680
  removeHoverComponent
601
681
  ]);
682
+ const setHoverParentComponent = (uid, type)=>{
683
+ if (!uid) return;
684
+ const $parentComponents = document.querySelectorAll(`[data-uid="${uid}"]`);
685
+ if ($parentComponents.length) {
686
+ $parentComponents.forEach(($parentComponent)=>{
687
+ const $outline = getChildrenByAttrSelector($parentComponent, 'data-outline');
688
+ if ($outline) {
689
+ if (type === 'in') {
690
+ $outline.setAttribute('data-outline-force-hover', 'true');
691
+ $outline.setAttribute('data-outline-force-overlay', 'true');
692
+ } else {
693
+ $outline.removeAttribute('data-outline-force-hover');
694
+ $outline.removeAttribute('data-outline-force-overlay');
695
+ }
696
+ }
697
+ });
698
+ }
699
+ };
700
+ const onHoverComponent = react.useCallback((e)=>{
701
+ if (isDragging.current) return;
702
+ const detail = e.detail;
703
+ if (detail?.componentUid) {
704
+ setHoverParentComponent(detail?.componentUid, detail?.type);
705
+ }
706
+ }, [
707
+ isDragging
708
+ ]);
709
+ const onToolbarOnboarding = react.useCallback((e)=>{
710
+ const detail = e.detail;
711
+ if (detail?.isNewUser) {
712
+ setIsOnboarding(true);
713
+ }
714
+ }, []);
602
715
  /* Register event */ react.useEffect(()=>{
603
716
  document.addEventListener('mousemove', onMouseMove);
604
717
  window.addEventListener('editor:active-component', onActiveComponent);
@@ -607,6 +720,8 @@ const Toolbar = ()=>{
607
720
  window.addEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
608
721
  window.addEventListener('editor:toolbar:show-parents', onShowParents);
609
722
  window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
723
+ window.addEventListener('editor:hover-component', onHoverComponent);
724
+ window.addEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
610
725
  return ()=>{
611
726
  document.removeEventListener('mousemove', onMouseMove);
612
727
  window.removeEventListener('editor:active-component', onActiveComponent);
@@ -615,6 +730,8 @@ const Toolbar = ()=>{
615
730
  window.removeEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
616
731
  window.removeEventListener('editor:toolbar:show-parents', onShowParents);
617
732
  window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
733
+ window.removeEventListener('editor:hover-component', onHoverComponent);
734
+ window.removeEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
618
735
  };
619
736
  }, [
620
737
  onMouseMove,
@@ -623,9 +740,15 @@ const Toolbar = ()=>{
623
740
  onIsDragging,
624
741
  onIsEditingTextEditor,
625
742
  onShowParents,
626
- onResizeSpacing
743
+ onResizeSpacing,
744
+ onHoverComponent,
745
+ onToolbarOnboarding
627
746
  ]);
628
- return null;
747
+ return isOnboarding && /*#__PURE__*/ jsxRuntime.jsx(Onboarding.default, {
748
+ enable: true,
749
+ position: onboardingPosition,
750
+ onCloseOnboarding: onCloseOnboarding
751
+ });
629
752
  };
630
753
  const getDOMElementParents = ($el, selector, limit)=>{
631
754
  // Set up a parent array
@@ -669,11 +792,11 @@ const getChildrenByAttrSelector = ($el, attrSelector)=>{
669
792
  }
670
793
  }
671
794
  };
672
- const isOverParent = ({ current, parent, index, revert })=>{
795
+ const isOverParent = ({ current, parent: parent1, index, revert })=>{
673
796
  for(let i = 0; i < index; i++){
674
- let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top + parent.height || current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top + parent.height && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top;
797
+ 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;
675
798
  if (revert) {
676
- is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom - parent.height || current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom - parent.height && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom;
799
+ 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;
677
800
  }
678
801
  if (is) return true;
679
802
  }
@@ -704,9 +827,9 @@ const isSection = (el)=>{
704
827
  const tag = el.getAttribute('data-component-tag');
705
828
  return tag === 'Section';
706
829
  };
707
- const isOverToolbarPosition = (el, parent)=>{
830
+ const isOverToolbarPosition = (el, parent1)=>{
708
831
  const rect = el.getBoundingClientRect();
709
- const rectP = parent.getBoundingClientRect();
832
+ const rectP = parent1.getBoundingClientRect();
710
833
  // 32px = toolbar active height
711
834
  return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
712
835
  };
package/dist/cjs/components/builder/toolbar/Onboarding.js ADDED
@@ -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;
package/dist/esm/components/builder/Toolbar.js CHANGED
@@ -1,12 +1,27 @@
1
- import { memo, useRef, useCallback, useEffect } from 'react';
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);
12
27
  const rect = $toolbar.getBoundingClientRect();
@@ -196,6 +211,21 @@ const Toolbar = ()=>{
196
211
  }, [
197
212
  removeHoverOverlayComponent
198
213
  ]);
214
+ const onCloseOnboarding = useCallback(()=>{
215
+ timeoutRef.current && clearTimeout(timeoutRef.current);
216
+ if (countShowOnboarding > 0) {
217
+ const eventCreate = new CustomEvent('editor:toolbar:close-onboarding', {
218
+ bubbles: true,
219
+ detail: {
220
+ close: 'close Onboarding'
221
+ }
222
+ });
223
+ window.dispatchEvent(eventCreate);
224
+ setIsOnboarding(false);
225
+ }
226
+ }, [
227
+ countShowOnboarding
228
+ ]);
199
229
  const removeActiveComponent = useCallback(()=>{
200
230
  currentComponentActive.current = null;
201
231
  const clearAttrs = [
@@ -217,7 +247,10 @@ const Toolbar = ()=>{
217
247
  }
218
248
  setFocusTextEditor(false);
219
249
  if (stopWatchReRenderComponent.current) stopWatchReRenderComponent.current();
220
- }, []);
250
+ onCloseOnboarding();
251
+ }, [
252
+ onCloseOnboarding
253
+ ]);
221
254
  const watchComponentReRender = ($el, callback)=>{
222
255
  // editor:component:render
223
256
  const onComponentReRender = (e)=>{
@@ -256,6 +289,44 @@ const Toolbar = ()=>{
256
289
  }
257
290
  }
258
291
  }, []);
292
+ const setToolbarOnboarding = useCallback(({ $component })=>{
293
+ if (!$component) return;
294
+ if (isSection($component) || isPopup($component) || isSticky($component)) return;
295
+ const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
296
+ if (toolbar) {
297
+ const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
298
+ // only show one time
299
+ if (countShowOnboarding == 0) {
300
+ setTimeout(()=>{
301
+ const rect = toolbar.getBoundingClientRect();
302
+ const rectTop = rect.top || 0;
303
+ const rectOnboading = toolbarOnboading?.getBoundingClientRect();
304
+ const onboardingHeight = rectOnboading?.height || 0;
305
+ const $iframe = parent.document.querySelector('.iframe');
306
+ const $iframeWin = $iframe?.contentWindow;
307
+ const iframeWinScrollY = $iframeWin?.scrollY || 0;
308
+ const iframeHeight = $iframe?.clientHeight || 0;
309
+ if (rectTop + onboardingHeight > iframeHeight) {
310
+ const _top = rect.top + iframeWinScrollY - onboardingHeight - 8;
311
+ toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
312
+ setOnboardingPosition('top');
313
+ } else {
314
+ const _top = rect.top + iframeWinScrollY + rect.height + 8;
315
+ toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
316
+ setOnboardingPosition('bottom');
317
+ }
318
+ setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
319
+ toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
320
+ }, 250);
321
+ } else {
322
+ onCloseOnboarding();
323
+ toolbarOnboading?.removeAttribute('data-onboarding-active');
324
+ }
325
+ }
326
+ }, [
327
+ countShowOnboarding,
328
+ onCloseOnboarding
329
+ ]);
259
330
  const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
260
331
  if (!componentUid) return;
261
332
  let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
@@ -316,6 +387,14 @@ const Toolbar = ()=>{
316
387
  setActiveComponentSpacing({
317
388
  $component
318
389
  });
390
+ timeoutRef.current && clearTimeout(timeoutRef.current);
391
+ timeoutRef.current = setTimeout(()=>{
392
+ if ($component) {
393
+ setToolbarOnboarding({
394
+ $component
395
+ });
396
+ }
397
+ }, timeoutOnboarding);
319
398
  removeHoverComponent();
320
399
  // Reactive when component re-render
321
400
  watchComponentReRender($component, ()=>{
@@ -329,7 +408,8 @@ const Toolbar = ()=>{
329
408
  }, [
330
409
  removeActiveComponent,
331
410
  removeHoverComponent,
332
- setActiveComponentSpacing
411
+ setActiveComponentSpacing,
412
+ setToolbarOnboarding
333
413
  ]);
334
414
  const setFocusTextEditor = async (value)=>{
335
415
  if (!value) {
@@ -595,6 +675,39 @@ const Toolbar = ()=>{
595
675
  }, [
596
676
  removeHoverComponent
597
677
  ]);
678
+ const setHoverParentComponent = (uid, type)=>{
679
+ if (!uid) return;
680
+ const $parentComponents = document.querySelectorAll(`[data-uid="${uid}"]`);
681
+ if ($parentComponents.length) {
682
+ $parentComponents.forEach(($parentComponent)=>{
683
+ const $outline = getChildrenByAttrSelector($parentComponent, 'data-outline');
684
+ if ($outline) {
685
+ if (type === 'in') {
686
+ $outline.setAttribute('data-outline-force-hover', 'true');
687
+ $outline.setAttribute('data-outline-force-overlay', 'true');
688
+ } else {
689
+ $outline.removeAttribute('data-outline-force-hover');
690
+ $outline.removeAttribute('data-outline-force-overlay');
691
+ }
692
+ }
693
+ });
694
+ }
695
+ };
696
+ const onHoverComponent = useCallback((e)=>{
697
+ if (isDragging.current) return;
698
+ const detail = e.detail;
699
+ if (detail?.componentUid) {
700
+ setHoverParentComponent(detail?.componentUid, detail?.type);
701
+ }
702
+ }, [
703
+ isDragging
704
+ ]);
705
+ const onToolbarOnboarding = useCallback((e)=>{
706
+ const detail = e.detail;
707
+ if (detail?.isNewUser) {
708
+ setIsOnboarding(true);
709
+ }
710
+ }, []);
598
711
  /* Register event */ useEffect(()=>{
599
712
  document.addEventListener('mousemove', onMouseMove);
600
713
  window.addEventListener('editor:active-component', onActiveComponent);
@@ -603,6 +716,8 @@ const Toolbar = ()=>{
603
716
  window.addEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
604
717
  window.addEventListener('editor:toolbar:show-parents', onShowParents);
605
718
  window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
719
+ window.addEventListener('editor:hover-component', onHoverComponent);
720
+ window.addEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
606
721
  return ()=>{
607
722
  document.removeEventListener('mousemove', onMouseMove);
608
723
  window.removeEventListener('editor:active-component', onActiveComponent);
@@ -611,6 +726,8 @@ const Toolbar = ()=>{
611
726
  window.removeEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
612
727
  window.removeEventListener('editor:toolbar:show-parents', onShowParents);
613
728
  window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
729
+ window.removeEventListener('editor:hover-component', onHoverComponent);
730
+ window.removeEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
614
731
  };
615
732
  }, [
616
733
  onMouseMove,
@@ -619,9 +736,15 @@ const Toolbar = ()=>{
619
736
  onIsDragging,
620
737
  onIsEditingTextEditor,
621
738
  onShowParents,
622
- onResizeSpacing
739
+ onResizeSpacing,
740
+ onHoverComponent,
741
+ onToolbarOnboarding
623
742
  ]);
624
- return null;
743
+ return isOnboarding && /*#__PURE__*/ jsx(Onboarding, {
744
+ enable: true,
745
+ position: onboardingPosition,
746
+ onCloseOnboarding: onCloseOnboarding
747
+ });
625
748
  };
626
749
  const getDOMElementParents = ($el, selector, limit)=>{
627
750
  // Set up a parent array
@@ -665,11 +788,11 @@ const getChildrenByAttrSelector = ($el, attrSelector)=>{
665
788
  }
666
789
  }
667
790
  };
668
- const isOverParent = ({ current, parent, index, revert })=>{
791
+ const isOverParent = ({ current, parent: parent1, index, revert })=>{
669
792
  for(let i = 0; i < index; i++){
670
- 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;
793
+ 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;
671
794
  if (revert) {
672
- 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;
795
+ 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;
673
796
  }
674
797
  if (is) return true;
675
798
  }
@@ -700,9 +823,9 @@ const isSection = (el)=>{
700
823
  const tag = el.getAttribute('data-component-tag');
701
824
  return tag === 'Section';
702
825
  };
703
- const isOverToolbarPosition = (el, parent)=>{
826
+ const isOverToolbarPosition = (el, parent1)=>{
704
827
  const rect = el.getBoundingClientRect();
705
- const rectP = parent.getBoundingClientRect();
828
+ const rectP = parent1.getBoundingClientRect();
706
829
  // 32px = toolbar active height
707
830
  return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
708
831
  };
package/dist/esm/components/builder/toolbar/Onboarding.js ADDED
@@ -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.23.0-staging.182",
3
+ "version": "1.23.0-staging.186",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",