@gem-sdk/pages 1.27.14 → 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.
|
@@ -302,39 +302,53 @@ const Toolbar = ()=>{
|
|
|
302
302
|
}
|
|
303
303
|
}
|
|
304
304
|
}, []);
|
|
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');
|
|
336
|
+
}
|
|
337
|
+
setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
|
|
338
|
+
toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
|
|
339
|
+
}, 100);
|
|
340
|
+
}
|
|
341
|
+
};
|
|
305
342
|
const setToolbarOnboarding = react.useCallback(({ $component })=>{
|
|
306
343
|
if (!$component) return;
|
|
307
344
|
if (isSection($component) || isPopup($component) || isSticky($component)) return;
|
|
308
|
-
const
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
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);
|
|
334
|
-
} else {
|
|
335
|
-
onCloseOnboarding();
|
|
336
|
-
toolbarOnboading?.removeAttribute('data-onboarding-active');
|
|
337
|
-
}
|
|
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');
|
|
338
352
|
}
|
|
339
353
|
}, [
|
|
340
354
|
countShowOnboarding,
|
|
@@ -721,6 +735,13 @@ const Toolbar = ()=>{
|
|
|
721
735
|
setIsOnboarding(true);
|
|
722
736
|
}
|
|
723
737
|
}, []);
|
|
738
|
+
const onWindowResize = react.useCallback(()=>{
|
|
739
|
+
if (isOnboarding) {
|
|
740
|
+
calculateOnboardingPosition();
|
|
741
|
+
}
|
|
742
|
+
}, [
|
|
743
|
+
isOnboarding
|
|
744
|
+
]);
|
|
724
745
|
/* Register event */ react.useEffect(()=>{
|
|
725
746
|
document.addEventListener('mousemove', onMouseMove);
|
|
726
747
|
window.addEventListener('editor:active-component', onActiveComponent);
|
|
@@ -731,6 +752,7 @@ const Toolbar = ()=>{
|
|
|
731
752
|
window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
|
|
732
753
|
window.addEventListener('editor:hover-component', onHoverComponent);
|
|
733
754
|
window.addEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
|
|
755
|
+
window.addEventListener('resize', onWindowResize);
|
|
734
756
|
return ()=>{
|
|
735
757
|
document.removeEventListener('mousemove', onMouseMove);
|
|
736
758
|
window.removeEventListener('editor:active-component', onActiveComponent);
|
|
@@ -741,6 +763,7 @@ const Toolbar = ()=>{
|
|
|
741
763
|
window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
|
|
742
764
|
window.removeEventListener('editor:hover-component', onHoverComponent);
|
|
743
765
|
window.removeEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
|
|
766
|
+
window.removeEventListener('resize', onWindowResize);
|
|
744
767
|
};
|
|
745
768
|
}, [
|
|
746
769
|
onMouseMove,
|
|
@@ -751,7 +774,8 @@ const Toolbar = ()=>{
|
|
|
751
774
|
onShowParents,
|
|
752
775
|
onResizeSpacing,
|
|
753
776
|
onHoverComponent,
|
|
754
|
-
onToolbarOnboarding
|
|
777
|
+
onToolbarOnboarding,
|
|
778
|
+
onWindowResize
|
|
755
779
|
]);
|
|
756
780
|
return isOnboarding && /*#__PURE__*/ jsxRuntime.jsx(Onboarding.default, {
|
|
757
781
|
enable: true,
|
|
@@ -27,6 +27,7 @@ const Onboarding = ({ enable, position, onCloseOnboarding })=>{
|
|
|
27
27
|
]
|
|
28
28
|
});
|
|
29
29
|
};
|
|
30
|
+
const MemoVideo = /*#__PURE__*/ react.memo(Video);
|
|
30
31
|
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
31
32
|
"data-toolbar-onboarding": true,
|
|
32
33
|
"data-toolbar-onboarding-position": position,
|
|
@@ -86,7 +87,7 @@ const Onboarding = ({ enable, position, onCloseOnboarding })=>{
|
|
|
86
87
|
]
|
|
87
88
|
})
|
|
88
89
|
}),
|
|
89
|
-
/*#__PURE__*/ jsxRuntime.jsx(
|
|
90
|
+
/*#__PURE__*/ jsxRuntime.jsx(MemoVideo, {}),
|
|
90
91
|
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
91
92
|
"data-content": true,
|
|
92
93
|
children: [
|
|
@@ -298,39 +298,53 @@ const Toolbar = ()=>{
|
|
|
298
298
|
}
|
|
299
299
|
}
|
|
300
300
|
}, []);
|
|
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');
|
|
332
|
+
}
|
|
333
|
+
setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
|
|
334
|
+
toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
|
|
335
|
+
}, 100);
|
|
336
|
+
}
|
|
337
|
+
};
|
|
301
338
|
const setToolbarOnboarding = useCallback(({ $component })=>{
|
|
302
339
|
if (!$component) return;
|
|
303
340
|
if (isSection($component) || isPopup($component) || isSticky($component)) return;
|
|
304
|
-
const
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
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);
|
|
330
|
-
} else {
|
|
331
|
-
onCloseOnboarding();
|
|
332
|
-
toolbarOnboading?.removeAttribute('data-onboarding-active');
|
|
333
|
-
}
|
|
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');
|
|
334
348
|
}
|
|
335
349
|
}, [
|
|
336
350
|
countShowOnboarding,
|
|
@@ -717,6 +731,13 @@ const Toolbar = ()=>{
|
|
|
717
731
|
setIsOnboarding(true);
|
|
718
732
|
}
|
|
719
733
|
}, []);
|
|
734
|
+
const onWindowResize = useCallback(()=>{
|
|
735
|
+
if (isOnboarding) {
|
|
736
|
+
calculateOnboardingPosition();
|
|
737
|
+
}
|
|
738
|
+
}, [
|
|
739
|
+
isOnboarding
|
|
740
|
+
]);
|
|
720
741
|
/* Register event */ useEffect(()=>{
|
|
721
742
|
document.addEventListener('mousemove', onMouseMove);
|
|
722
743
|
window.addEventListener('editor:active-component', onActiveComponent);
|
|
@@ -727,6 +748,7 @@ const Toolbar = ()=>{
|
|
|
727
748
|
window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
|
|
728
749
|
window.addEventListener('editor:hover-component', onHoverComponent);
|
|
729
750
|
window.addEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
|
|
751
|
+
window.addEventListener('resize', onWindowResize);
|
|
730
752
|
return ()=>{
|
|
731
753
|
document.removeEventListener('mousemove', onMouseMove);
|
|
732
754
|
window.removeEventListener('editor:active-component', onActiveComponent);
|
|
@@ -737,6 +759,7 @@ const Toolbar = ()=>{
|
|
|
737
759
|
window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
|
|
738
760
|
window.removeEventListener('editor:hover-component', onHoverComponent);
|
|
739
761
|
window.removeEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
|
|
762
|
+
window.removeEventListener('resize', onWindowResize);
|
|
740
763
|
};
|
|
741
764
|
}, [
|
|
742
765
|
onMouseMove,
|
|
@@ -747,7 +770,8 @@ const Toolbar = ()=>{
|
|
|
747
770
|
onShowParents,
|
|
748
771
|
onResizeSpacing,
|
|
749
772
|
onHoverComponent,
|
|
750
|
-
onToolbarOnboarding
|
|
773
|
+
onToolbarOnboarding,
|
|
774
|
+
onWindowResize
|
|
751
775
|
]);
|
|
752
776
|
return isOnboarding && /*#__PURE__*/ jsx(Onboarding, {
|
|
753
777
|
enable: true,
|
|
@@ -23,6 +23,7 @@ const Onboarding = ({ enable, position, onCloseOnboarding })=>{
|
|
|
23
23
|
]
|
|
24
24
|
});
|
|
25
25
|
};
|
|
26
|
+
const MemoVideo = /*#__PURE__*/ memo(Video);
|
|
26
27
|
return /*#__PURE__*/ jsx("div", {
|
|
27
28
|
"data-toolbar-onboarding": true,
|
|
28
29
|
"data-toolbar-onboarding-position": position,
|
|
@@ -82,7 +83,7 @@ const Onboarding = ({ enable, position, onCloseOnboarding })=>{
|
|
|
82
83
|
]
|
|
83
84
|
})
|
|
84
85
|
}),
|
|
85
|
-
/*#__PURE__*/ jsx(
|
|
86
|
+
/*#__PURE__*/ jsx(MemoVideo, {}),
|
|
86
87
|
/*#__PURE__*/ jsxs("div", {
|
|
87
88
|
"data-content": true,
|
|
88
89
|
children: [
|
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"
|