@gem-sdk/pages 1.27.14 → 1.29.4

package/dist/cjs/components/builder/Toolbar.js

@@ -302,39 +302,53 @@ const Toolbar = ()=>{
             }
         }
     }, []);
+    const calculateOnboardingPosition = ()=>{
+        const toolbar = document.querySelector('[data-toolbar-active]');
+        const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
+        if (toolbar && toolbarOnboading) {
+            toolbarOnboading?.removeAttribute('data-onboarding-active');
+            setTimeout(()=>{
+                const rect = toolbar.getBoundingClientRect();
+                const rectTop = rect.top || 0;
+                const rectOnboading = toolbarOnboading?.getBoundingClientRect();
+                const onboardingHeight = rectOnboading?.height || 0;
+                const $iframe = parent.document.querySelector('.iframe');
+                const $iframeWin = $iframe?.contentWindow;
+                const iframeWinScrollY = $iframeWin?.scrollY || 0;
+                const iframeHeight = $iframe?.clientHeight || 0;
+                if (rectTop + onboardingHeight > iframeHeight) {
+                    const oboardingTop = rect.top + iframeWinScrollY - onboardingHeight - 8;
+                    toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
+                    setOnboardingPosition('top');
+                    if ($iframeWin && oboardingTop < rect.top + iframeWinScrollY) {
+                        setTimeout(()=>{
+                            const toTop = oboardingTop - 20;
+                            $iframeWin.scrollTo({
+                                top: toTop,
+                                behavior: 'smooth'
+                            });
+                        }, 200);
+                    }
+                } else {
+                    const oboardingTop = rect.top + iframeWinScrollY + rect.height + 8;
+                    toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
+                    setOnboardingPosition('bottom');
+                }
+                setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
+                toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
+            }, 100);
+        }
+    };
     const setToolbarOnboarding = react.useCallback(({ $component })=>{
         if (!$component) return;
         if (isSection($component) || isPopup($component) || isSticky($component)) return;
-        const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
-        if (toolbar) {
-            const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
-            // only show one time
-            if (countShowOnboarding == 0) {
-                setTimeout(()=>{
-                    const rect = toolbar.getBoundingClientRect();
-                    const rectTop = rect.top || 0;
-                    const rectOnboading = toolbarOnboading?.getBoundingClientRect();
-                    const onboardingHeight = rectOnboading?.height || 0;
-                    const $iframe = parent.document.querySelector('.iframe');
-                    const $iframeWin = $iframe?.contentWindow;
-                    const iframeWinScrollY = $iframeWin?.scrollY || 0;
-                    const iframeHeight = $iframe?.clientHeight || 0;
-                    if (rectTop + onboardingHeight > iframeHeight) {
-                        const _top = rect.top + iframeWinScrollY - onboardingHeight - 8;
-                        toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
-                        setOnboardingPosition('top');
-                    } else {
-                        const _top = rect.top + iframeWinScrollY + rect.height + 8;
-                        toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
-                        setOnboardingPosition('bottom');
-                    }
-                    setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
-                    toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
-                }, 250);
-            } else {
-                onCloseOnboarding();
-                toolbarOnboading?.removeAttribute('data-onboarding-active');
-            }
+        const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
+        // only show one time
+        if (countShowOnboarding == 0) {
+            calculateOnboardingPosition();
+        } else {
+            onCloseOnboarding();
+            toolbarOnboading?.removeAttribute('data-onboarding-active');
         }
     }, [
         countShowOnboarding,
@@ -721,6 +735,13 @@ const Toolbar = ()=>{
             setIsOnboarding(true);
         }
     }, []);
+    const onWindowResize = react.useCallback(()=>{
+        if (isOnboarding) {
+            calculateOnboardingPosition();
+        }
+    }, [
+        isOnboarding
+    ]);
     /* Register event */ react.useEffect(()=>{
         document.addEventListener('mousemove', onMouseMove);
         window.addEventListener('editor:active-component', onActiveComponent);
@@ -731,6 +752,7 @@ const Toolbar = ()=>{
         window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
         window.addEventListener('editor:hover-component', onHoverComponent);
         window.addEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
+        window.addEventListener('resize', onWindowResize);
         return ()=>{
             document.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('editor:active-component', onActiveComponent);
@@ -741,6 +763,7 @@ const Toolbar = ()=>{
             window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
             window.removeEventListener('editor:hover-component', onHoverComponent);
             window.removeEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
+            window.removeEventListener('resize', onWindowResize);
         };
     }, [
         onMouseMove,
@@ -751,7 +774,8 @@ const Toolbar = ()=>{
         onShowParents,
         onResizeSpacing,
         onHoverComponent,
-        onToolbarOnboarding
+        onToolbarOnboarding,
+        onWindowResize
     ]);
     return isOnboarding && /*#__PURE__*/ jsxRuntime.jsx(Onboarding.default, {
         enable: true,

package/dist/cjs/components/builder/Toolbox.js

@@ -28,6 +28,7 @@ const Toolbox = ()=>{
     const removeItem = core.useBuilderPreviewStore((s)=>s.removeItem);
     const addSection = core.useSectionStore((s)=>s.addSection);
     const changeSwatches = core.useShopStore((s)=>s.changeSwatches);
+    const updateItemName = core.useBuilderPreviewStore((s)=>s.updateItemName);
     const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
     const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
@@ -295,6 +296,21 @@ const Toolbox = ()=>{
     }, [
         fonts
     ]);
+    const onUpdateItemName = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail.uid) {
+            updateItemName(detail.uid, detail.name || '');
+        }
+    }, [
+        updateItemName
+    ]);
+    react.useEffect(()=>{
+        if (fonts) {
+            setFontsToHead('google-font-element', fonts);
+        }
+    }, [
+        fonts
+    ]);
     react.useEffect(()=>{
         window.addEventListener('update-shop-info', onChangeShopInfo);
         window.addEventListener('revalidate-query', onRevalidateQuery);
@@ -311,6 +327,7 @@ const Toolbox = ()=>{
         window.addEventListener('update-shop-plan', onUpdateShopPlan);
         window.addEventListener('set-dynamic-product', onUpdateDynamicProduct);
         window.addEventListener('set-dynamic-collection', onUpdateDynamicCollection);
+        window.addEventListener('update-item-name', onUpdateItemName);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -326,6 +343,7 @@ const Toolbox = ()=>{
             window.removeEventListener('update-shop-plan', onUpdateShopPlan);
             window.removeEventListener('set-dynamic-product', onUpdateDynamicProduct);
             window.removeEventListener('set-dynamic-collection', onUpdateDynamicCollection);
+            window.removeEventListener('update-item-name', onUpdateItemName);
         };
     }, [
         onAddEntity,
@@ -342,7 +360,8 @@ const Toolbox = ()=>{
         onChangeLayoutSettingData,
         onUpdateCreateThemeSectionCount,
         onUpdateDynamicProduct,
-        onUpdateDynamicCollection
+        onUpdateDynamicCollection,
+        onUpdateItemName
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "toolbox"

package/dist/cjs/components/builder/toolbar/Onboarding.js

@@ -27,6 +27,7 @@ const Onboarding = ({ enable, position, onCloseOnboarding })=>{
             ]
         });
     };
+    const MemoVideo = /*#__PURE__*/ react.memo(Video);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         "data-toolbar-onboarding": true,
         "data-toolbar-onboarding-position": position,
@@ -86,7 +87,7 @@ const Onboarding = ({ enable, position, onCloseOnboarding })=>{
                                 ]
                             })
                         }),
-                        /*#__PURE__*/ jsxRuntime.jsx(Video, {}),
+                        /*#__PURE__*/ jsxRuntime.jsx(MemoVideo, {}),
                         /*#__PURE__*/ jsxRuntime.jsxs("div", {
                             "data-content": true,
                             children: [

package/dist/esm/components/builder/Toolbar.js

@@ -298,39 +298,53 @@ const Toolbar = ()=>{
             }
         }
     }, []);
+    const calculateOnboardingPosition = ()=>{
+        const toolbar = document.querySelector('[data-toolbar-active]');
+        const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
+        if (toolbar && toolbarOnboading) {
+            toolbarOnboading?.removeAttribute('data-onboarding-active');
+            setTimeout(()=>{
+                const rect = toolbar.getBoundingClientRect();
+                const rectTop = rect.top || 0;
+                const rectOnboading = toolbarOnboading?.getBoundingClientRect();
+                const onboardingHeight = rectOnboading?.height || 0;
+                const $iframe = parent.document.querySelector('.iframe');
+                const $iframeWin = $iframe?.contentWindow;
+                const iframeWinScrollY = $iframeWin?.scrollY || 0;
+                const iframeHeight = $iframe?.clientHeight || 0;
+                if (rectTop + onboardingHeight > iframeHeight) {
+                    const oboardingTop = rect.top + iframeWinScrollY - onboardingHeight - 8;
+                    toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
+                    setOnboardingPosition('top');
+                    if ($iframeWin && oboardingTop < rect.top + iframeWinScrollY) {
+                        setTimeout(()=>{
+                            const toTop = oboardingTop - 20;
+                            $iframeWin.scrollTo({
+                                top: toTop,
+                                behavior: 'smooth'
+                            });
+                        }, 200);
+                    }
+                } else {
+                    const oboardingTop = rect.top + iframeWinScrollY + rect.height + 8;
+                    toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
+                    setOnboardingPosition('bottom');
+                }
+                setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
+                toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
+            }, 100);
+        }
+    };
     const setToolbarOnboarding = useCallback(({ $component })=>{
         if (!$component) return;
         if (isSection($component) || isPopup($component) || isSticky($component)) return;
-        const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
-        if (toolbar) {
-            const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
-            // only show one time
-            if (countShowOnboarding == 0) {
-                setTimeout(()=>{
-                    const rect = toolbar.getBoundingClientRect();
-                    const rectTop = rect.top || 0;
-                    const rectOnboading = toolbarOnboading?.getBoundingClientRect();
-                    const onboardingHeight = rectOnboading?.height || 0;
-                    const $iframe = parent.document.querySelector('.iframe');
-                    const $iframeWin = $iframe?.contentWindow;
-                    const iframeWinScrollY = $iframeWin?.scrollY || 0;
-                    const iframeHeight = $iframe?.clientHeight || 0;
-                    if (rectTop + onboardingHeight > iframeHeight) {
-                        const _top = rect.top + iframeWinScrollY - onboardingHeight - 8;
-                        toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
-                        setOnboardingPosition('top');
-                    } else {
-                        const _top = rect.top + iframeWinScrollY + rect.height + 8;
-                        toolbarOnboading?.setAttribute('style', `top: ${_top}px;left: ${rect.left}px;`);
-                        setOnboardingPosition('bottom');
-                    }
-                    setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
-                    toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
-                }, 250);
-            } else {
-                onCloseOnboarding();
-                toolbarOnboading?.removeAttribute('data-onboarding-active');
-            }
+        const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
+        // only show one time
+        if (countShowOnboarding == 0) {
+            calculateOnboardingPosition();
+        } else {
+            onCloseOnboarding();
+            toolbarOnboading?.removeAttribute('data-onboarding-active');
         }
     }, [
         countShowOnboarding,
@@ -717,6 +731,13 @@ const Toolbar = ()=>{
             setIsOnboarding(true);
         }
     }, []);
+    const onWindowResize = useCallback(()=>{
+        if (isOnboarding) {
+            calculateOnboardingPosition();
+        }
+    }, [
+        isOnboarding
+    ]);
     /* Register event */ useEffect(()=>{
         document.addEventListener('mousemove', onMouseMove);
         window.addEventListener('editor:active-component', onActiveComponent);
@@ -727,6 +748,7 @@ const Toolbar = ()=>{
         window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
         window.addEventListener('editor:hover-component', onHoverComponent);
         window.addEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
+        window.addEventListener('resize', onWindowResize);
         return ()=>{
             document.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('editor:active-component', onActiveComponent);
@@ -737,6 +759,7 @@ const Toolbar = ()=>{
             window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
             window.removeEventListener('editor:hover-component', onHoverComponent);
             window.removeEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
+            window.removeEventListener('resize', onWindowResize);
         };
     }, [
         onMouseMove,
@@ -747,7 +770,8 @@ const Toolbar = ()=>{
         onShowParents,
         onResizeSpacing,
         onHoverComponent,
-        onToolbarOnboarding
+        onToolbarOnboarding,
+        onWindowResize
     ]);
     return isOnboarding && /*#__PURE__*/ jsx(Onboarding, {
         enable: true,

package/dist/esm/components/builder/Toolbox.js

@@ -24,6 +24,7 @@ const Toolbox = ()=>{
     const removeItem = useBuilderPreviewStore((s)=>s.removeItem);
     const addSection = useSectionStore((s)=>s.addSection);
     const changeSwatches = useShopStore((s)=>s.changeSwatches);
+    const updateItemName = useBuilderPreviewStore((s)=>s.updateItemName);
     const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
     const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
@@ -291,6 +292,21 @@ const Toolbox = ()=>{
     }, [
         fonts
     ]);
+    const onUpdateItemName = useCallback((e)=>{
+        const detail = e.detail;
+        if (detail.uid) {
+            updateItemName(detail.uid, detail.name || '');
+        }
+    }, [
+        updateItemName
+    ]);
+    useEffect(()=>{
+        if (fonts) {
+            setFontsToHead('google-font-element', fonts);
+        }
+    }, [
+        fonts
+    ]);
     useEffect(()=>{
         window.addEventListener('update-shop-info', onChangeShopInfo);
         window.addEventListener('revalidate-query', onRevalidateQuery);
@@ -307,6 +323,7 @@ const Toolbox = ()=>{
         window.addEventListener('update-shop-plan', onUpdateShopPlan);
         window.addEventListener('set-dynamic-product', onUpdateDynamicProduct);
         window.addEventListener('set-dynamic-collection', onUpdateDynamicCollection);
+        window.addEventListener('update-item-name', onUpdateItemName);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -322,6 +339,7 @@ const Toolbox = ()=>{
             window.removeEventListener('update-shop-plan', onUpdateShopPlan);
             window.removeEventListener('set-dynamic-product', onUpdateDynamicProduct);
             window.removeEventListener('set-dynamic-collection', onUpdateDynamicCollection);
+            window.removeEventListener('update-item-name', onUpdateItemName);
         };
     }, [
         onAddEntity,
@@ -338,7 +356,8 @@ const Toolbox = ()=>{
         onChangeLayoutSettingData,
         onUpdateCreateThemeSectionCount,
         onUpdateDynamicProduct,
-        onUpdateDynamicCollection
+        onUpdateDynamicCollection,
+        onUpdateItemName
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

package/dist/esm/components/builder/toolbar/Onboarding.js

@@ -23,6 +23,7 @@ const Onboarding = ({ enable, position, onCloseOnboarding })=>{
             ]
         });
     };
+    const MemoVideo = /*#__PURE__*/ memo(Video);
     return /*#__PURE__*/ jsx("div", {
         "data-toolbar-onboarding": true,
         "data-toolbar-onboarding-position": position,
@@ -82,7 +83,7 @@ const Onboarding = ({ enable, position, onCloseOnboarding })=>{
                                 ]
                             })
                         }),
-                        /*#__PURE__*/ jsx(Video, {}),
+                        /*#__PURE__*/ jsx(MemoVideo, {}),
                         /*#__PURE__*/ jsxs("div", {
                             "data-content": true,
                             children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.27.14",
+  "version": "1.29.4",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
     "next-seo": "^6.0.0"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.27.14",
+    "@gem-sdk/core": "1.29.4",
     "@gem-sdk/plugin-cookie-bar": "1.25.0",
     "@gem-sdk/plugin-quick-view": "1.25.0",
     "@gem-sdk/plugin-sticky-add-to-cart": "1.25.0"