@gem-sdk/pages 1.14.0-dev.284 → 1.14.0-dev.324

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.
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react=require("react");const TOOLBAR_HOVER_HEIGHT=24,TOOLBAR_ACTIVE_HEIGHT=32,getDOMElementParents=(t,e,r)=>{let o=[];for(;t;)if(t=t.parentElement??void 0){if("BODY"===t.tagName||"ROOT"===t.getAttribute("data-uid"))break;if(e){if(t.matches(e)&&(o.push(t),r&&o.length==r))return o;continue}if(o.push(t),r&&o.length==r)break}return o},getChildrenByAttrSelector=(t,e)=>{let r=t.children.length;if(r)for(let o=0;o<r;o++){let r=t.children[o];if(r){let t=r.getAttribute(e);if(t)return r}}},isOverParent=({current:t,parent:e,index:r,revert:o})=>{for(let a=0;a<r;a++){let r=t.top-23*a>=e.top&&t.top-23*a<=e.top+e.height||t.top-23*a>=e.top+e.height&&t.top-23*a<=e.top;if(o&&(r=t.bottom+23*a>=e.bottom&&t.bottom+23*a<=e.bottom-e.height||t.bottom+23*a>=e.bottom-e.height&&t.bottom+23*a<=e.bottom),r)return!0}return!1},waitForElementToExist=(t,e=200)=>new Promise(r=>{let o=setInterval(()=>{let e=document.querySelector(t);e&&(clearInterval(o),clearTimeout(a),r(e))},50),a=setTimeout(()=>{clearInterval(o),clearTimeout(a),r(null)},e)}),notVisible=t=>{let e=getComputedStyle(t).overflow;return"visible"!==e},isSection=t=>{let e=t.getAttribute("data-component-tag");return"Section"===e},isOverToolbarPosition=(t,e)=>{let r=t.getBoundingClientRect(),o=e.getBoundingClientRect();return r.top-o.top<33},findOverflowParent=(t,e)=>{let r=e||t;if(t&&!isSection(t))return notVisible(t)&&isOverToolbarPosition(e,t)?t:t.parentElement?findOverflowParent(t.parentElement,r):void 0},Toolbar=()=>{let t=react.useRef(null),e=react.useRef(!1),r=react.useRef(),o=react.useRef(!1),a=({state:t,$toolbar:e,$component:r})=>{let o=findOverflowParent(r,e);if(o){let o=r.getBoundingClientRect();o?.height>=60?e.setAttribute(`data-toolbar-${t}-inside`,"true"):e.setAttribute(`data-toolbar-${t}-revert`,"true")}else{let r=e.getBoundingClientRect();r.top<33&&(r?.height>=60?e.setAttribute(`data-toolbar-${t}-inside`,"true"):e.setAttribute(`data-toolbar-${t}-revert`,"true"))}},i=react.useCallback(({$component:t,componentUid:e,focus:r,isThemeSection:o})=>{if(!t&&!e)return;if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}if(!e){let r=t.getAttribute("data-uid");if(!r)return;e=r}let i=getChildrenByAttrSelector(t,"data-toolbar"),n=getChildrenByAttrSelector(t,"data-outline"),l=getChildrenByAttrSelector(t,"data-toolbar-add-top"),d=getChildrenByAttrSelector(t,"data-toolbar-add-bottom"),u=getChildrenByAttrSelector(t,"data-theme-section-status");o&&u&&u.setAttribute("data-theme-section-status-active","true"),i&&(i.removeAttribute("style"),i.setAttribute("data-toolbar-hover","true"),r&&i.setAttribute("data-toolbar-hover-focus","true"),a({$toolbar:i,$component:t,state:"hover"})),n&&(n.setAttribute("data-outline-hover","true"),o&&n.setAttribute("data-outline-overlay-theme-section","true"),r&&n.setAttribute("data-outline-hover-focus","true")),l&&l.setAttribute("data-toolbar-add-hover","true"),d&&d.setAttribute("data-toolbar-add-hover","true")},[]),n=react.useCallback(({$component:t,componentUid:e})=>{if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}let r=getDOMElementParents(t,'[data-uid][data-component-type="component"]:not([data-component-no-setting])');if(r.length){for(let t of r)t&&i({$component:t});l({$component:t,$parents:r})}},[i]),l=({$component:t,$parents:e})=>{if(!t||!e?.length)return;let r=getChildrenByAttrSelector(t,"data-toolbar-hover-focus");if(r){let t=r.getBoundingClientRect(),o=!!r.getAttribute("data-toolbar-hover-revert"),a=!!r.getAttribute("data-toolbar-hover-inside"),i=1;for(let r of e)if(r){let e=r.getAttribute("data-component-tag");if("Section"===e)continue;let n=getChildrenByAttrSelector(r,"data-toolbar-hover");if(n){let e=n.getAttribute("data-toolbar-active");if(e)continue;let r=n.getBoundingClientRect(),l=o||a;if(isOverParent({current:t,parent:r,index:i,revert:l})){let e=getComputedStyle(n),o=t.top-r.top,a=t.left-r.left,d=parseFloat(e.top)+o-23*i;l&&(d=parseFloat(e.top)-o+23*i);let u=parseFloat(e.left)+a;n.setAttribute("style",`top: ${d}px;left: ${u}px;`),i++}}}}},d=react.useCallback(()=>{let t=["data-outline-overlay","data-outline-overlay-theme-section","data-theme-section-status-active"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))})},[]),u=react.useCallback(()=>{let t=["data-toolbar-hover-focus","data-toolbar-hover","data-outline-hover-focus","data-toolbar-hover-revert","data-outline-hover","data-toolbar-add-hover"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))}),d()},[d]),c=react.useCallback(()=>{t.current=null;let e=["data-toolbar-active","data-outline-active","data-toolbar-add-active","data-toolbar-active-revert","data-spacing-margin-bottom-active","data-toolbar-force-hover","data-outline-force-hover"],o=document.querySelectorAll(e.map(t=>`[${t}]`).join(","));o&&e.forEach(t=>{o.forEach(e=>e.removeAttribute(t))}),m(!1),r.current&&r.current.disconnect()},[]),s=(t,e)=>{let o=t.parentNode;o&&(r.current&&r.current.disconnect(),r.current=new MutationObserver(o=>{for(let a of o)a.removedNodes.forEach(o=>{o===t&&(r.current&&r.current.disconnect(),e())})}),r.current.observe(o,{childList:!0}))},b=react.useCallback(({$component:t})=>{if(!t)return;let e=getComputedStyle(t),r=getChildrenByAttrSelector(t,"data-spacing"),o=r?.querySelector("[data-spacing-margin-bottom]")||null;if(o){let t=o.querySelector("[data-spacing-margin-bottom-bg]")||null,r=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(t&&r){let a=e.marginBottom;t.style.height=a,r.style.top=a,o.setAttribute("data-spacing-margin-bottom-active","true")}}},[]),v=(t,e)=>{let r=t.closest('[data-toolbar-wrap][data-component-tag="Section"]');if(r){if(e){let t=getChildrenByAttrSelector(r,"data-toolbar"),e=getChildrenByAttrSelector(r,"data-outline");t&&t.setAttribute("data-toolbar-force-hover","true"),e&&e.setAttribute("data-outline-force-hover","true")}else{let t=getChildrenByAttrSelector(r,"data-toolbar"),e=getChildrenByAttrSelector(r,"data-outline");t&&t.removeAttribute("data-toolbar-force-hover"),e&&e.removeAttribute("data-outline-force-hover")}}},f=react.useCallback(async({componentUid:e,productId:r,timeAwait:o=500,forceReActive:i})=>{if(!e)return;let n=await waitForElementToExist(`${r?`[data-product-id="${r}"] `:""}[data-uid="${e}"]`,o);if(!n||!i&&e==t.current?.componentUid&&r==t.current?.productId)return;(i||e===t.current?.componentUid)&&r===t.current?.productId||c();let l=getChildrenByAttrSelector(n,"data-toolbar"),d=getChildrenByAttrSelector(n,"data-outline"),m=getChildrenByAttrSelector(n,"data-toolbar-add-top"),g=getChildrenByAttrSelector(n,"data-toolbar-add-bottom");if(l&&(t.current={componentUid:e,productId:r},l.removeAttribute("style"),l.setAttribute("data-toolbar-active","true"),a({$toolbar:l,$component:n,state:"active"})),d&&d.setAttribute("data-outline-active","true"),m&&m.setAttribute("data-toolbar-add-active","true"),g&&g.setAttribute("data-toolbar-add-active","true"),r){let t=document.querySelectorAll(`[data-uid="${e}"]`);t?.length&&t.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&e.setAttribute("data-outline-active","true")})}b({$component:n}),v(n,!0),u(),s(n,()=>{f({componentUid:e,productId:r,timeAwait:2e3,forceReActive:!0})})},[c,u,b]),m=async e=>{if(e){if(t.current?.componentUid){let r=t.current?.componentUid,o=t.current?.productId,a=await waitForElementToExist(`${o?`[data-product-id="${o}"] `:""}[data-uid="${r}"]`,500);if(a){let t=getChildrenByAttrSelector(a,"data-toolbar"),r=getChildrenByAttrSelector(a,"data-outline"),o=getChildrenByAttrSelector(a,"data-spacing");t&&e&&t.setAttribute("data-toolbar-editor-inline-focus","true"),r&&e&&r.setAttribute("data-outline-editor-inline-focus","true"),o&&e&&o.setAttribute("data-spacing-hidden","true")}}}else{let t=document.querySelectorAll("[data-outline-editor-inline-focus],[data-toolbar-editor-inline-focus],[data-spacing-hidden]");t.length&&t.forEach(t=>{t&&(t.removeAttribute("data-toolbar-editor-inline-focus"),t.removeAttribute("data-outline-editor-inline-focus"),t.removeAttribute("data-spacing-hidden"))})}},g=react.useCallback(e=>{let r=e.closest("[data-theme-section]"),o=r?.getAttribute("data-uid"),a=r&&o===t.current?.componentUid;if(!a)return;let i=getChildrenByAttrSelector(r,"data-theme-section-status");i&&i.setAttribute("data-theme-section-status-active","true")},[]),h=async({value:e})=>{if(!e)return;let r=await waitForElementToExist(`${t.current?.productId?`[data-product-id="${t.current?.productId}"] `:""}[data-uid="${t.current?.componentUid}"]`,500);if(r){let e=r?.querySelectorAll("[data-toolbar-parent]");if(e.length){let r=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.setAttribute("data-outline-force-hover","true"),e.setAttribute("data-outline-force-overlay","true"))})},o=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.removeAttribute("data-outline-force-hover"),e.removeAttribute("data-outline-force-overlay"))})},a=async e=>{let r=e.getAttribute("data-parent-uid");if(!r)return;let a=async()=>{let t=await waitForElementToExist(`[data-uid="${r}"]`,500),e=t?.closest("[data-product-id]"),o=e?.getAttribute("data-product-id")||"";return!!o},i="";await a()&&(i=t.current?.productId||"");let n=new CustomEvent("editor:toolbar:force-active-component",{bubbles:!0,detail:{componentUid:r,productId:i}});o(e),window.dispatchEvent(n)};e.forEach(t=>{t.addEventListener("mouseover",()=>r(t)),t.addEventListener("mouseout",()=>o(t)),t.addEventListener("click",()=>a(t))})}}},p=react.useCallback(r=>{if(e.current||o.current)return;let a=r.target;if(!a){d();return}let l=a.closest("[data-toolbar-hover]");if(l)return;let c=a.closest("[data-toolbar-wrap]"),s=c?.getAttribute("data-uid");if(!c||!s||"ROOT"==s){u();return}let b=getChildrenByAttrSelector(c,"data-toolbar"),v=getChildrenByAttrSelector(c,"data-outline");if(v&&v.removeAttribute("data-outline-overlay"),!s||"ROOT"==s||b?.getAttribute("data-toolbar-hover-focus"))return;if(b?.getAttribute("data-toolbar-hover-focus")||u(),g(a),s==t.current?.componentUid){if(t.current.productId){let e=c.closest("[data-product-id]");if(e){let r=e.getAttribute("data-product-id");if(r==t.current.productId)return}}let e=a.closest("[data-theme-section]");if(!e)return;i({$component:e,focus:!0,isThemeSection:!0})}let f=a.closest("[data-theme-section]");f?i({$component:f,focus:!0,isThemeSection:!0}):(i({$component:c,componentUid:s,focus:!0}),n({$component:c,componentUid:s}))},[g,u,i,n,d,t]),A=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid?f({componentUid:r.componentUid,productId:r.productId}):c()},[f,c,e]),y=react.useCallback(()=>{u()},[u]),C=react.useCallback(t=>{let r=t.detail;r.value&&(u(),c()),e.current=r.value},[u,c]),E=react.useCallback(t=>{let e=t.detail;e.value?m(!0):m(!1)},[]),S=react.useCallback(t=>{if(e.current)return;let r=t.detail;h({value:r?.value||!1})},[]),w=react.useCallback(t=>{let e=t.detail;e?.value?(u(),o.current=!0):o.current=!1},[u]);return react.useEffect(()=>(document.addEventListener("mousemove",p),window.addEventListener("editor:active-component",A),window.addEventListener("editor:focus-outside-preview",y),window.addEventListener("editor:is-dragging",C),window.addEventListener("editor:is-editing-text-editor",E),window.addEventListener("editor:toolbar:show-parents",S),window.addEventListener("editor:toolbar:resize-spacing",w),()=>{document.removeEventListener("mousemove",p),window.removeEventListener("editor:active-component",A),window.removeEventListener("editor:is-dragging",y),window.removeEventListener("editor:is-dragging",C),window.removeEventListener("editor:is-editing-text-editor",E),window.removeEventListener("editor:toolbar:show-parents",S),window.removeEventListener("editor:toolbar:resize-spacing",w)}),[p,A,y,C,E,S,w]),null};var Toolbar$1=react.memo(Toolbar);exports.default=Toolbar$1;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),react=require("react"),getStorefrontApi=require("../../libs/get-storefront-api.js"),googleFonts=require("../../libs/google-fonts.js"),genCss=require("../../libs/helpers/gen-css.js"),genFonts=require("../../libs/helpers/gen-fonts.js"),shopifyCdnWithGoogleFonts=require("../../libs/shopify-cdn-with-google-fonts.js");const globalStyleId="global-style",globalFontId="google-font-builder",fontElementSettingClassName="google-font-element",Toolbox=()=>{let e=core.useMatchMutate(),t=core.useShopStore(e=>e.provider),o=core.useShopStore(e=>e.changeStorefrontInfo),r=core.useBuilderPreviewStore(e=>e.initState),a=core.useBuilderPreviewStore(e=>e.state),n=core.useBuilderPreviewStore(e=>e.forceChangeState),i=core.useBuilderPreviewStore(e=>e.forceChangeItemProp),l=core.useBuilderPreviewStore(e=>e.changeItemPropByKey),d=core.useBuilderPreviewStore(e=>e.addItem),s=core.useBuilderPreviewStore(e=>e.moveItem),c=core.useBuilderPreviewStore(e=>e.removeItem),u=core.useSectionStore(e=>e.addSection),p=core.useShopStore(e=>e.changeSwatches),m=core.useShopStore(e=>e.changeLayoutSettings),g=core.useModalStore(e=>e.clearModal),f=react.useMemo(()=>genFonts.getFontsFromDataBuilder(a),[a]),y=react.useMemo(()=>googleFonts.createFontUrl(f),[f]),v=react.useCallback(()=>{e(/query\//,{revalidate:!0})},[e]),w=react.useCallback(e=>{let r=e.detail;o({url:r.shopHandle?getStorefrontApi.getStorefrontApi(r.shopHandle,t):void 0,token:r.shopToken})},[o,t]),h=react.useCallback(e=>{let t=e.detail;try{if(t.data){let e=genCss.genCSS(t.data,t.mobileOnly),o=Object.entries(t.data?.font).map(([,e])=>e).map(e=>{if("custom"==e.type){let t=shopifyCdnWithGoogleFonts.shopifyCdnWithGoogleFonts.find(t=>t.family==e.family);if(t)return t}return e}),r=googleFonts.createFontUrl(o),a=document.getElementById(globalStyleId),n=document.getElementById(globalFontId);if(r){if(n)n.getAttribute("href")!==r&&n.setAttribute("href",r);else{let e=document.createElement("link");e.id=globalFontId,e.href=r,e.rel="stylesheet",document.head.appendChild(e)}}if(a)a.innerHTML=e;else{let t=document.createElement("style");t.id=globalStyleId,t.innerHTML=e,document.head.appendChild(t)}}}catch{}},[]),b=react.useCallback(e=>{g();try{let t=e.detail;t.data&&("flat"===t.type?n(t.data):r(t.data))}catch{}},[n,r,g]),S=react.useCallback(e=>{try{let t=e.detail;t.entity&&(d({data:t.entity,id:t.id,position:t.position,type:t.type??"component"}),t?.type!=="section"||Array.isArray(t.entity)||u(t.entity.uid,t.entity))}catch{}},[d,u]),E=react.useCallback(e=>{try{let t=e.detail;t.uid&&t.propName&&l({id:t.uid,key:t.propName,data:t.propValue,group:t.group})}catch{}},[l]),C=react.useCallback(e=>{try{let t=e.detail;t.uid&&i(t.uid,t.data,t.group)}catch{}},[i]),L=react.useCallback(e=>{try{let t=e.detail;t.to&&t.uid&&s(t.uid,t.to,Number(t.position)??0)}catch{}},[s]),k=react.useCallback(e=>{try{let t=e.detail;t.uid&&c(t.uid)}catch{}},[c]),F=react.useCallback(e=>{let t=e.detail;try{t.data&&p(t.data)}catch{}},[p]),I=react.useCallback(e=>{let t=e.detail;t&&m(t)},[m]);return react.useEffect(()=>{if(y){let e="google-font",t=document.querySelector(`.${fontElementSettingClassName}[data-font="${e}"]`);if(t)t.getAttribute("href")!==y&&t.setAttribute("href",y);else{let t=document.createElement("link");t.className=fontElementSettingClassName,t.dataset.font=e,t.href=y,t.rel="stylesheet",document.head.appendChild(t)}}},[y]),react.useEffect(()=>(window.addEventListener("update-shop-info",w),window.addEventListener("revalidate-query",v),window.addEventListener("init-builder",b),window.addEventListener("add-entity",S),window.addEventListener("remove-entity",k),window.addEventListener("move-entity",L),window.addEventListener("force-update-entity-props",C),window.addEventListener("update-entity-prop",E),window.addEventListener("set-global-style",h),window.addEventListener("update-global-swatches-data",F),window.addEventListener("on-off-header-footer",I),()=>{window.removeEventListener("update-shop-info",w),window.removeEventListener("revalidate-query",v),window.removeEventListener("init-builder",b),window.removeEventListener("add-entity",S),window.removeEventListener("remove-entity",k),window.removeEventListener("move-entity",L),window.removeEventListener("update-entity-prop",E),window.removeEventListener("set-global-style",h),window.removeEventListener("update-global-swatches-data",F),window.removeEventListener("on-off-header-footer",I)}),[S,C,E,b,L,k,h,F,v,w,I]),jsxRuntime.jsx("div",{className:"toolbox"})};var Toolbox$1=react.memo(Toolbox);exports.default=Toolbox$1;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),react=require("react"),getStorefrontApi=require("../../libs/get-storefront-api.js"),googleFonts=require("../../libs/google-fonts.js"),genCss=require("../../libs/helpers/gen-css.js"),genFonts=require("../../libs/helpers/gen-fonts.js"),shopifyCdnWithGoogleFonts=require("../../libs/shopify-cdn-with-google-fonts.js");const globalStyleId="global-style",globalFontId="google-font-builder",fontElementSettingClassName="google-font-element",Toolbox=()=>{let e=core.useMatchMutate(),t=core.useShopStore(e=>e.provider),o=core.useShopStore(e=>e.changeStorefrontInfo),r=core.useBuilderPreviewStore(e=>e.initState),n=core.useBuilderPreviewStore(e=>e.state),a=core.useBuilderPreviewStore(e=>e.forceChangeState),i=core.useBuilderPreviewStore(e=>e.forceChangeItemProp),d=core.useBuilderPreviewStore(e=>e.changeItemPropByKey),l=core.useBuilderPreviewStore(e=>e.setDynamicProduct),s=core.useBuilderPreviewStore(e=>e.setDynamicCollection),c=core.useBuilderPreviewStore(e=>e.addItem),u=core.useBuilderPreviewStore(e=>e.moveItem),p=core.useBuilderPreviewStore(e=>e.removeItem),m=core.useSectionStore(e=>e.addSection),w=core.useShopStore(e=>e.changeSwatches),v=core.useShopStore(e=>e.changeLayoutSettings),h=core.useShopStore(e=>e.changeCreateThemeSectionCount),g=core.useShopStore(e=>e.changeShopPlan),y=core.useModalStore(e=>e.clearModal),f=react.useMemo(()=>genFonts.getFontsFromDataBuilder(n),[n]),b=react.useMemo(()=>googleFonts.createFontUrl(f),[f]),S=react.useCallback(()=>{e(/query\//,{revalidate:!0})},[e]),E=react.useCallback(e=>{let r=e.detail;o({url:r.shopHandle?getStorefrontApi.getStorefrontApi(r.shopHandle,t):void 0,token:r.shopToken})},[o,t]),C=react.useCallback(e=>{let t=e.detail;try{if(t.data){let e=genCss.genCSS(t.data,t.mobileOnly),o=Object.entries(t.data?.font).map(([,e])=>e).map(e=>{if("custom"==e.type){let t=shopifyCdnWithGoogleFonts.shopifyCdnWithGoogleFonts.find(t=>t.family==e.family);if(t)return t}return e}),r=googleFonts.createFontUrl(o),n=document.getElementById(globalStyleId),a=document.getElementById(globalFontId);if(r){if(a)a.getAttribute("href")!==r&&a.setAttribute("href",r);else{let e=document.createElement("link");e.id=globalFontId,e.href=r,e.rel="stylesheet",document.head.appendChild(e)}}if(n)n.innerHTML=e;else{let t=document.createElement("style");t.id=globalStyleId,t.innerHTML=e,document.head.appendChild(t)}}}catch{}},[]),L=react.useCallback(e=>{y();try{let t=e.detail;t.data&&("flat"===t.type?a(t.data):r(t.data))}catch{}},[a,r,y]),k=react.useCallback(e=>{try{let t=e.detail;t.entity&&(c({data:t.entity,id:t.id,position:t.position,type:t.type??"component"}),t?.type!=="section"||Array.isArray(t.entity)||m(t.entity.uid,t.entity))}catch{}},[c,m]),F=react.useCallback(e=>{try{let t=e.detail;t.uid&&t.propName&&d({id:t.uid,key:t.propName,data:t.propValue,group:t.group})}catch{}},[d]),P=react.useCallback(e=>{try{let t=e.detail;t.uid&&i(t.uid,t.data,t.group)}catch{}},[i]),B=react.useCallback(e=>{try{let t=e.detail;t.to&&t.uid&&u(t.uid,t.to,Number(t.position)??0)}catch{}},[u]),I=react.useCallback(e=>{try{let t=e.detail;t.uid&&p(t.uid)}catch{}},[p]),q=react.useCallback(e=>{let t=e.detail;try{t.data&&w(t.data)}catch{}},[w]),j=react.useCallback(e=>{let t=e.detail;t&&v(t)},[v]),x=react.useCallback(e=>{let t=e.detail;t&&h(t)},[h]),A=react.useCallback(e=>{let t=e.detail;t&&g(t)},[g]),M=react.useCallback(e=>{let t=e.detail;t&&l(t)},[l]),N=react.useCallback(e=>{let t=e.detail;t&&s(t)},[s]);return react.useEffect(()=>{if(b){let e="google-font",t=document.querySelector(`.${fontElementSettingClassName}[data-font="${e}"]`);if(t)t.getAttribute("href")!==b&&t.setAttribute("href",b);else{let t=document.createElement("link");t.className=fontElementSettingClassName,t.dataset.font=e,t.href=b,t.rel="stylesheet",document.head.appendChild(t)}}},[b]),react.useEffect(()=>(window.addEventListener("update-shop-info",E),window.addEventListener("revalidate-query",S),window.addEventListener("init-builder",L),window.addEventListener("add-entity",k),window.addEventListener("remove-entity",I),window.addEventListener("move-entity",B),window.addEventListener("force-update-entity-props",P),window.addEventListener("update-entity-prop",F),window.addEventListener("set-global-style",C),window.addEventListener("update-global-swatches-data",q),window.addEventListener("on-off-header-footer",j),window.addEventListener("update-create-theme-section-count",x),window.addEventListener("update-shop-plan",A),window.addEventListener("set-dynamic-product",M),window.addEventListener("set-dynamic-collection",N),()=>{window.removeEventListener("update-shop-info",E),window.removeEventListener("revalidate-query",S),window.removeEventListener("init-builder",L),window.removeEventListener("add-entity",k),window.removeEventListener("remove-entity",I),window.removeEventListener("move-entity",B),window.removeEventListener("update-entity-prop",F),window.removeEventListener("set-global-style",C),window.removeEventListener("update-global-swatches-data",q),window.removeEventListener("on-off-header-footer",j),window.removeEventListener("update-create-theme-section-count",x),window.removeEventListener("update-shop-plan",A),window.removeEventListener("set-dynamic-product",M),window.removeEventListener("set-dynamic-collection",N)}),[k,A,P,F,L,B,I,C,q,S,E,j,x,M,N]),jsxRuntime.jsx("div",{className:"toolbox"})};var Toolbox$1=react.memo(Toolbox);exports.default=Toolbox$1;
@@ -1 +1 @@
1
- "use strict";var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),nextSeo=require("next-seo"),Head=require("next/head"),react=require("react"),Toolbox=require("../components/builder/Toolbox.js"),Header=require("../components/Header.js"),Footer=require("../components/Footer.js"),CollectionGlobalProvider=require("./CollectionGlobalProvider.js"),PopupManager=require("../components/builder/PopupManager.js"),ImageToLayout=require("../components/image-to-layout/ImageToLayout.js"),AddSectionImageToLayout=require("../components/image-to-layout/AddSectionImageToLayout.js");const BuilderPage=({components:e,seo:t,themeStyle:o,fontStyle:r,sectionData:i,pageType:s,editorImageToLayout:n})=>{let[u,a]=react.useState(!1),d=react.useMemo(()=>({ROOT:{uid:"ROOT",tag:"Root",label:"Root",childrens:[]}}),[]);return react.useEffect(()=>{a(!0)},[]),jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(nextSeo.NextSeo,{...t}),jsxRuntime.jsxs(Head,{children:[o&&jsxRuntime.jsx("style",{type:"text/css",id:"global-style",dangerouslySetInnerHTML:{__html:o}}),r&&jsxRuntime.jsx("style",{"data-id":"google-fonts",type:"text/css",dangerouslySetInnerHTML:{__html:r}})]}),jsxRuntime.jsx(core.BuilderComponentProvider,{components:e,children:jsxRuntime.jsx(core.SectionProvider,{data:i,children:jsxRuntime.jsxs(core.BuilderPreviewProvider,{state:d,children:[jsxRuntime.jsx(Toolbox.default,{}),jsxRuntime.jsx(PopupManager.default,{}),u&&jsxRuntime.jsxs("div",{className:"builder z-1 relative",children:[jsxRuntime.jsx(Header.default,{}),jsxRuntime.jsx("div",{id:"storefront",children:"GP_COLLECTION"===s?jsxRuntime.jsx(CollectionGlobalProvider.default,{children:jsxRuntime.jsx(core.RenderPreview,{uid:"ROOT"})}):jsxRuntime.jsx(core.RenderPreview,{uid:"ROOT"})}),jsxRuntime.jsx(ImageToLayout.default,{editorImageToLayout:n||!1}),jsxRuntime.jsx(AddSectionImageToLayout.default,{editorImageToLayout:n||!1}),jsxRuntime.jsx("div",{id:"visual-content"}),jsxRuntime.jsx(Footer.default,{})]})]},"preview")})})]})};exports.BuilderPage=BuilderPage;
1
+ "use strict";var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),nextSeo=require("next-seo"),Head=require("next/head"),react=require("react"),Toolbox=require("../components/builder/Toolbox.js"),Header=require("../components/Header.js"),Footer=require("../components/Footer.js"),CollectionGlobalProvider=require("./CollectionGlobalProvider.js"),PopupManager=require("../components/builder/PopupManager.js"),ImageToLayout=require("../components/image-to-layout/ImageToLayout.js"),AddSectionImageToLayout=require("../components/image-to-layout/AddSectionImageToLayout.js"),Toolbar=require("../components/builder/Toolbar.js");const BuilderPage=({components:e,seo:t,themeStyle:o,fontStyle:r,sectionData:s,pageType:i,editorImageToLayout:n,isThemeSectionEditor:u})=>{let[a,d]=react.useState(!1),l=react.useMemo(()=>({ROOT:{uid:"ROOT",tag:"Root",label:"Root",childrens:[]}}),[]);return react.useEffect(()=>{d(!0)},[]),jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(nextSeo.NextSeo,{...t}),jsxRuntime.jsxs(Head,{children:[o&&jsxRuntime.jsx("style",{type:"text/css",id:"global-style",dangerouslySetInnerHTML:{__html:o}}),r&&jsxRuntime.jsx("style",{"data-id":"google-fonts",type:"text/css",dangerouslySetInnerHTML:{__html:r}})]}),jsxRuntime.jsx(core.BuilderComponentProvider,{components:e,children:jsxRuntime.jsx(core.SectionProvider,{data:s,children:jsxRuntime.jsxs(core.BuilderPreviewProvider,{state:l,isThemeSectionEditor:u,children:[jsxRuntime.jsx(Toolbox.default,{}),jsxRuntime.jsx(Toolbar.default,{}),jsxRuntime.jsx(PopupManager.default,{}),a&&jsxRuntime.jsxs("div",{className:"builder z-1 relative",children:[u?jsxRuntime.jsx("div",{className:"h-[40px] bg-[#f4f4f4]"}):jsxRuntime.jsx(Header.default,{}),jsxRuntime.jsx("div",{id:"storefront",className:u?"theme-section-editor":"",children:"GP_COLLECTION"===i?jsxRuntime.jsx(CollectionGlobalProvider.default,{children:jsxRuntime.jsx(core.RenderPreview,{uid:"ROOT"})}):jsxRuntime.jsx(core.RenderPreview,{uid:"ROOT"})}),jsxRuntime.jsx(ImageToLayout.default,{editorImageToLayout:n||!1}),jsxRuntime.jsx(AddSectionImageToLayout.default,{editorImageToLayout:n||!1}),jsxRuntime.jsx("div",{id:"visual-content"}),!u&&jsxRuntime.jsx(Footer.default,{})]})]},"preview")})})]})};exports.BuilderPage=BuilderPage;
@@ -0,0 +1 @@
1
+ import{memo as t,useRef as e,useCallback as r,useEffect as o}from"react";let TOOLBAR_HOVER_HEIGHT=24,TOOLBAR_ACTIVE_HEIGHT=32,getDOMElementParents=(t,e,r)=>{let o=[];for(;t;)if(t=t.parentElement??void 0){if("BODY"===t.tagName||"ROOT"===t.getAttribute("data-uid"))break;if(e){if(t.matches(e)&&(o.push(t),r&&o.length==r))return o;continue}if(o.push(t),r&&o.length==r)break}return o},getChildrenByAttrSelector=(t,e)=>{let r=t.children.length;if(r)for(let o=0;o<r;o++){let r=t.children[o];if(r){let t=r.getAttribute(e);if(t)return r}}},isOverParent=({current:t,parent:e,index:r,revert:o})=>{for(let a=0;a<r;a++){let r=t.top-23*a>=e.top&&t.top-23*a<=e.top+e.height||t.top-23*a>=e.top+e.height&&t.top-23*a<=e.top;if(o&&(r=t.bottom+23*a>=e.bottom&&t.bottom+23*a<=e.bottom-e.height||t.bottom+23*a>=e.bottom-e.height&&t.bottom+23*a<=e.bottom),r)return!0}return!1},waitForElementToExist=(t,e=200)=>new Promise(r=>{let o=setInterval(()=>{let e=document.querySelector(t);e&&(clearInterval(o),clearTimeout(a),r(e))},50),a=setTimeout(()=>{clearInterval(o),clearTimeout(a),r(null)},e)}),notVisible=t=>{let e=getComputedStyle(t).overflow;return"visible"!==e},isSection=t=>{let e=t.getAttribute("data-component-tag");return"Section"===e},isOverToolbarPosition=(t,e)=>{let r=t.getBoundingClientRect(),o=e.getBoundingClientRect();return r.top-o.top<33},findOverflowParent=(t,e)=>{let r=e||t;if(t&&!isSection(t))return notVisible(t)&&isOverToolbarPosition(e,t)?t:t.parentElement?findOverflowParent(t.parentElement,r):void 0},Toolbar=()=>{let t=e(null),a=e(!1),i=e(),n=e(!1),l=({state:t,$toolbar:e,$component:r})=>{let o=findOverflowParent(r,e);if(o){let o=r.getBoundingClientRect();o?.height>=60?e.setAttribute(`data-toolbar-${t}-inside`,"true"):e.setAttribute(`data-toolbar-${t}-revert`,"true")}else{let r=e.getBoundingClientRect();r.top<33&&(r?.height>=60?e.setAttribute(`data-toolbar-${t}-inside`,"true"):e.setAttribute(`data-toolbar-${t}-revert`,"true"))}},d=r(({$component:t,componentUid:e,focus:r,isThemeSection:o})=>{if(!t&&!e)return;if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}if(!e){let r=t.getAttribute("data-uid");if(!r)return;e=r}let a=getChildrenByAttrSelector(t,"data-toolbar"),i=getChildrenByAttrSelector(t,"data-outline"),n=getChildrenByAttrSelector(t,"data-toolbar-add-top"),d=getChildrenByAttrSelector(t,"data-toolbar-add-bottom"),u=getChildrenByAttrSelector(t,"data-theme-section-status");o&&u&&u.setAttribute("data-theme-section-status-active","true"),a&&(a.removeAttribute("style"),a.setAttribute("data-toolbar-hover","true"),r&&a.setAttribute("data-toolbar-hover-focus","true"),l({$toolbar:a,$component:t,state:"hover"})),i&&(i.setAttribute("data-outline-hover","true"),o&&i.setAttribute("data-outline-overlay-theme-section","true"),r&&i.setAttribute("data-outline-hover-focus","true")),n&&n.setAttribute("data-toolbar-add-hover","true"),d&&d.setAttribute("data-toolbar-add-hover","true")},[]),u=r(({$component:t,componentUid:e})=>{if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}let r=getDOMElementParents(t,'[data-uid][data-component-type="component"]:not([data-component-no-setting])');if(r.length){for(let t of r)t&&d({$component:t});c({$component:t,$parents:r})}},[d]),c=({$component:t,$parents:e})=>{if(!t||!e?.length)return;let r=getChildrenByAttrSelector(t,"data-toolbar-hover-focus");if(r){let t=r.getBoundingClientRect(),o=!!r.getAttribute("data-toolbar-hover-revert"),a=!!r.getAttribute("data-toolbar-hover-inside"),i=1;for(let r of e)if(r){let e=r.getAttribute("data-component-tag");if("Section"===e)continue;let n=getChildrenByAttrSelector(r,"data-toolbar-hover");if(n){let e=n.getAttribute("data-toolbar-active");if(e)continue;let r=n.getBoundingClientRect(),l=o||a;if(isOverParent({current:t,parent:r,index:i,revert:l})){let e=getComputedStyle(n),o=t.top-r.top,a=t.left-r.left,d=parseFloat(e.top)+o-23*i;l&&(d=parseFloat(e.top)-o+23*i);let u=parseFloat(e.left)+a;n.setAttribute("style",`top: ${d}px;left: ${u}px;`),i++}}}}},s=r(()=>{let t=["data-outline-overlay","data-outline-overlay-theme-section","data-theme-section-status-active"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))})},[]),b=r(()=>{let t=["data-toolbar-hover-focus","data-toolbar-hover","data-outline-hover-focus","data-toolbar-hover-revert","data-outline-hover","data-toolbar-add-hover"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))}),s()},[s]),v=r(()=>{t.current=null;let e=["data-toolbar-active","data-outline-active","data-toolbar-add-active","data-toolbar-active-revert","data-spacing-margin-bottom-active","data-toolbar-force-hover","data-outline-force-hover"],r=document.querySelectorAll(e.map(t=>`[${t}]`).join(","));r&&e.forEach(t=>{r.forEach(e=>e.removeAttribute(t))}),p(!1),i.current&&i.current.disconnect()},[]),m=(t,e)=>{let r=t.parentNode;r&&(i.current&&i.current.disconnect(),i.current=new MutationObserver(r=>{for(let o of r)o.removedNodes.forEach(r=>{r===t&&(i.current&&i.current.disconnect(),e())})}),i.current.observe(r,{childList:!0}))},f=r(({$component:t})=>{if(!t)return;let e=getComputedStyle(t),r=getChildrenByAttrSelector(t,"data-spacing"),o=r?.querySelector("[data-spacing-margin-bottom]")||null;if(o){let t=o.querySelector("[data-spacing-margin-bottom-bg]")||null,r=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(t&&r){let a=e.marginBottom;t.style.height=a,r.style.top=a,o.setAttribute("data-spacing-margin-bottom-active","true")}}},[]),g=(t,e)=>{let r=t.closest('[data-toolbar-wrap][data-component-tag="Section"]');if(r){if(e){let t=getChildrenByAttrSelector(r,"data-toolbar"),e=getChildrenByAttrSelector(r,"data-outline");t&&t.setAttribute("data-toolbar-force-hover","true"),e&&e.setAttribute("data-outline-force-hover","true")}else{let t=getChildrenByAttrSelector(r,"data-toolbar"),e=getChildrenByAttrSelector(r,"data-outline");t&&t.removeAttribute("data-toolbar-force-hover"),e&&e.removeAttribute("data-outline-force-hover")}}},h=r(async({componentUid:e,productId:r,timeAwait:o=500,forceReActive:a})=>{if(!e)return;let i=await waitForElementToExist(`${r?`[data-product-id="${r}"] `:""}[data-uid="${e}"]`,o);if(!i||!a&&e==t.current?.componentUid&&r==t.current?.productId)return;(a||e===t.current?.componentUid)&&r===t.current?.productId||v();let n=getChildrenByAttrSelector(i,"data-toolbar"),d=getChildrenByAttrSelector(i,"data-outline"),u=getChildrenByAttrSelector(i,"data-toolbar-add-top"),c=getChildrenByAttrSelector(i,"data-toolbar-add-bottom");if(n&&(t.current={componentUid:e,productId:r},n.removeAttribute("style"),n.setAttribute("data-toolbar-active","true"),l({$toolbar:n,$component:i,state:"active"})),d&&d.setAttribute("data-outline-active","true"),u&&u.setAttribute("data-toolbar-add-active","true"),c&&c.setAttribute("data-toolbar-add-active","true"),r){let t=document.querySelectorAll(`[data-uid="${e}"]`);t?.length&&t.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&e.setAttribute("data-outline-active","true")})}f({$component:i}),g(i,!0),b(),m(i,()=>{h({componentUid:e,productId:r,timeAwait:2e3,forceReActive:!0})})},[v,b,f]),p=async e=>{if(e){if(t.current?.componentUid){let r=t.current?.componentUid,o=t.current?.productId,a=await waitForElementToExist(`${o?`[data-product-id="${o}"] `:""}[data-uid="${r}"]`,500);if(a){let t=getChildrenByAttrSelector(a,"data-toolbar"),r=getChildrenByAttrSelector(a,"data-outline"),o=getChildrenByAttrSelector(a,"data-spacing");t&&e&&t.setAttribute("data-toolbar-editor-inline-focus","true"),r&&e&&r.setAttribute("data-outline-editor-inline-focus","true"),o&&e&&o.setAttribute("data-spacing-hidden","true")}}}else{let t=document.querySelectorAll("[data-outline-editor-inline-focus],[data-toolbar-editor-inline-focus],[data-spacing-hidden]");t.length&&t.forEach(t=>{t&&(t.removeAttribute("data-toolbar-editor-inline-focus"),t.removeAttribute("data-outline-editor-inline-focus"),t.removeAttribute("data-spacing-hidden"))})}},A=r(e=>{let r=e.closest("[data-theme-section]"),o=r?.getAttribute("data-uid"),a=r&&o===t.current?.componentUid;if(!a)return;let i=getChildrenByAttrSelector(r,"data-theme-section-status");i&&i.setAttribute("data-theme-section-status-active","true")},[]),y=async({value:e})=>{if(!e)return;let r=await waitForElementToExist(`${t.current?.productId?`[data-product-id="${t.current?.productId}"] `:""}[data-uid="${t.current?.componentUid}"]`,500);if(r){let e=r?.querySelectorAll("[data-toolbar-parent]");if(e.length){let r=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.setAttribute("data-outline-force-hover","true"),e.setAttribute("data-outline-force-overlay","true"))})},o=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.removeAttribute("data-outline-force-hover"),e.removeAttribute("data-outline-force-overlay"))})},a=async e=>{let r=e.getAttribute("data-parent-uid");if(!r)return;let a=async()=>{let t=await waitForElementToExist(`[data-uid="${r}"]`,500),e=t?.closest("[data-product-id]"),o=e?.getAttribute("data-product-id")||"";return!!o},i="";await a()&&(i=t.current?.productId||"");let n=new CustomEvent("editor:toolbar:force-active-component",{bubbles:!0,detail:{componentUid:r,productId:i}});o(e),window.dispatchEvent(n)};e.forEach(t=>{t.addEventListener("mouseover",()=>r(t)),t.addEventListener("mouseout",()=>o(t)),t.addEventListener("click",()=>a(t))})}}},E=r(e=>{if(a.current||n.current)return;let r=e.target;if(!r){s();return}let o=r.closest("[data-toolbar-hover]");if(o)return;let i=r.closest("[data-toolbar-wrap]"),l=i?.getAttribute("data-uid");if(!i||!l||"ROOT"==l){b();return}let c=getChildrenByAttrSelector(i,"data-toolbar"),v=getChildrenByAttrSelector(i,"data-outline");if(v&&v.removeAttribute("data-outline-overlay"),!l||"ROOT"==l||c?.getAttribute("data-toolbar-hover-focus"))return;if(c?.getAttribute("data-toolbar-hover-focus")||b(),A(r),l==t.current?.componentUid){if(t.current.productId){let e=i.closest("[data-product-id]");if(e){let r=e.getAttribute("data-product-id");if(r==t.current.productId)return}}let e=r.closest("[data-theme-section]");if(!e)return;d({$component:e,focus:!0,isThemeSection:!0})}let m=r.closest("[data-theme-section]");m?d({$component:m,focus:!0,isThemeSection:!0}):(d({$component:i,componentUid:l,focus:!0}),u({$component:i,componentUid:l}))},[A,b,d,u,s,t]),S=r(t=>{if(a.current)return;let e=t.detail;e?.componentUid?h({componentUid:e.componentUid,productId:e.productId}):v()},[h,v,a]),w=r(()=>{b()},[b]),C=r(t=>{let e=t.detail;e.value&&(b(),v()),a.current=e.value},[b,v]),B=r(t=>{let e=t.detail;e.value?p(!0):p(!1)},[]),$=r(t=>{if(a.current)return;let e=t.detail;y({value:e?.value||!1})},[]),T=r(t=>{let e=t.detail;e?.value?(b(),n.current=!0):n.current=!1},[b]);return o(()=>(document.addEventListener("mousemove",E),window.addEventListener("editor:active-component",S),window.addEventListener("editor:focus-outside-preview",w),window.addEventListener("editor:is-dragging",C),window.addEventListener("editor:is-editing-text-editor",B),window.addEventListener("editor:toolbar:show-parents",$),window.addEventListener("editor:toolbar:resize-spacing",T),()=>{document.removeEventListener("mousemove",E),window.removeEventListener("editor:active-component",S),window.removeEventListener("editor:is-dragging",w),window.removeEventListener("editor:is-dragging",C),window.removeEventListener("editor:is-editing-text-editor",B),window.removeEventListener("editor:toolbar:show-parents",$),window.removeEventListener("editor:toolbar:resize-spacing",T)}),[E,S,w,C,B,$,T]),null};var Toolbar$1=t(Toolbar);export{Toolbar$1 as default};
@@ -1 +1 @@
1
- import{jsx as e}from"react/jsx-runtime";import{useMatchMutate as t,useShopStore as o,useBuilderPreviewStore as n,useSectionStore as i,useModalStore as a}from"@gem-sdk/core";import{memo as d,useMemo as r,useCallback as l,useEffect as s}from"react";import{getStorefrontApi as m}from"../../libs/get-storefront-api.js";import{createFontUrl as p}from"../../libs/google-fonts.js";import{genCSS as f}from"../../libs/helpers/gen-css.js";import{getFontsFromDataBuilder as c}from"../../libs/helpers/gen-fonts.js";import{shopifyCdnWithGoogleFonts as y}from"../../libs/shopify-cdn-with-google-fonts.js";let globalStyleId="global-style",globalFontId="google-font-builder",fontElementSettingClassName="google-font-element",Toolbox=()=>{let d=t(),u=o(e=>e.provider),w=o(e=>e.changeStorefrontInfo),v=n(e=>e.initState),g=n(e=>e.state),h=n(e=>e.forceChangeState),b=n(e=>e.forceChangeItemProp),E=n(e=>e.changeItemPropByKey),L=n(e=>e.addItem),I=n(e=>e.moveItem),S=n(e=>e.removeItem),C=i(e=>e.addSection),N=o(e=>e.changeSwatches),j=o(e=>e.changeLayoutSettings),x=a(e=>e.clearModal),T=r(()=>c(g),[g]),k=r(()=>p(T),[T]),A=l(()=>{d(/query\//,{revalidate:!0})},[d]),q=l(e=>{let t=e.detail;w({url:t.shopHandle?m(t.shopHandle,u):void 0,token:t.shopToken})},[w,u]),H=l(e=>{let t=e.detail;try{if(t.data){let e=f(t.data,t.mobileOnly),o=Object.entries(t.data?.font).map(([,e])=>e).map(e=>{if("custom"==e.type){let t=y.find(t=>t.family==e.family);if(t)return t}return e}),n=p(o),i=document.getElementById(globalStyleId),a=document.getElementById(globalFontId);if(n){if(a)a.getAttribute("href")!==n&&a.setAttribute("href",n);else{let e=document.createElement("link");e.id=globalFontId,e.href=n,e.rel="stylesheet",document.head.appendChild(e)}}if(i)i.innerHTML=e;else{let t=document.createElement("style");t.id=globalStyleId,t.innerHTML=e,document.head.appendChild(t)}}}catch{}},[]),$=l(e=>{x();try{let t=e.detail;t.data&&("flat"===t.type?h(t.data):v(t.data))}catch{}},[h,v,x]),B=l(e=>{try{let t=e.detail;t.entity&&(L({data:t.entity,id:t.id,position:t.position,type:t.type??"component"}),t?.type!=="section"||Array.isArray(t.entity)||C(t.entity.uid,t.entity))}catch{}},[L,C]),F=l(e=>{try{let t=e.detail;t.uid&&t.propName&&E({id:t.uid,key:t.propName,data:t.propValue,group:t.group})}catch{}},[E]),M=l(e=>{try{let t=e.detail;t.uid&&b(t.uid,t.data,t.group)}catch{}},[b]),O=l(e=>{try{let t=e.detail;t.to&&t.uid&&I(t.uid,t.to,Number(t.position)??0)}catch{}},[I]),P=l(e=>{try{let t=e.detail;t.uid&&S(t.uid)}catch{}},[S]),K=l(e=>{let t=e.detail;try{t.data&&N(t.data)}catch{}},[N]),V=l(e=>{let t=e.detail;t&&j(t)},[j]);return s(()=>{if(k){let e="google-font",t=document.querySelector(`.${fontElementSettingClassName}[data-font="${e}"]`);if(t)t.getAttribute("href")!==k&&t.setAttribute("href",k);else{let t=document.createElement("link");t.className=fontElementSettingClassName,t.dataset.font=e,t.href=k,t.rel="stylesheet",document.head.appendChild(t)}}},[k]),s(()=>(window.addEventListener("update-shop-info",q),window.addEventListener("revalidate-query",A),window.addEventListener("init-builder",$),window.addEventListener("add-entity",B),window.addEventListener("remove-entity",P),window.addEventListener("move-entity",O),window.addEventListener("force-update-entity-props",M),window.addEventListener("update-entity-prop",F),window.addEventListener("set-global-style",H),window.addEventListener("update-global-swatches-data",K),window.addEventListener("on-off-header-footer",V),()=>{window.removeEventListener("update-shop-info",q),window.removeEventListener("revalidate-query",A),window.removeEventListener("init-builder",$),window.removeEventListener("add-entity",B),window.removeEventListener("remove-entity",P),window.removeEventListener("move-entity",O),window.removeEventListener("update-entity-prop",F),window.removeEventListener("set-global-style",H),window.removeEventListener("update-global-swatches-data",K),window.removeEventListener("on-off-header-footer",V)}),[B,M,F,$,O,P,H,K,A,q,V]),e("div",{className:"toolbox"})};var Toolbox$1=d(Toolbox);export{Toolbox$1 as default};
1
+ import{jsx as e}from"react/jsx-runtime";import{useMatchMutate as t,useShopStore as n,useBuilderPreviewStore as o,useSectionStore as i,useModalStore as d}from"@gem-sdk/core";import{memo as a,useMemo as r,useCallback as l,useEffect as s}from"react";import{getStorefrontApi as m}from"../../libs/get-storefront-api.js";import{createFontUrl as c}from"../../libs/google-fonts.js";import{genCSS as p}from"../../libs/helpers/gen-css.js";import{getFontsFromDataBuilder as w}from"../../libs/helpers/gen-fonts.js";import{shopifyCdnWithGoogleFonts as u}from"../../libs/shopify-cdn-with-google-fonts.js";let globalStyleId="global-style",globalFontId="google-font-builder",fontElementSettingClassName="google-font-element",Toolbox=()=>{let a=t(),y=n(e=>e.provider),v=n(e=>e.changeStorefrontInfo),f=o(e=>e.initState),h=o(e=>e.state),g=o(e=>e.forceChangeState),E=o(e=>e.forceChangeItemProp),L=o(e=>e.changeItemPropByKey),b=o(e=>e.setDynamicProduct),S=o(e=>e.setDynamicCollection),I=o(e=>e.addItem),C=o(e=>e.moveItem),N=o(e=>e.removeItem),T=i(e=>e.addSection),j=n(e=>e.changeSwatches),x=n(e=>e.changeLayoutSettings),k=n(e=>e.changeCreateThemeSectionCount),A=n(e=>e.changeShopPlan),q=d(e=>e.clearModal),H=r(()=>w(h),[h]),P=r(()=>c(H),[H]),$=l(()=>{a(/query\//,{revalidate:!0})},[a]),B=l(e=>{let t=e.detail;v({url:t.shopHandle?m(t.shopHandle,y):void 0,token:t.shopToken})},[v,y]),F=l(e=>{let t=e.detail;try{if(t.data){let e=p(t.data,t.mobileOnly),n=Object.entries(t.data?.font).map(([,e])=>e).map(e=>{if("custom"==e.type){let t=u.find(t=>t.family==e.family);if(t)return t}return e}),o=c(n),i=document.getElementById(globalStyleId),d=document.getElementById(globalFontId);if(o){if(d)d.getAttribute("href")!==o&&d.setAttribute("href",o);else{let e=document.createElement("link");e.id=globalFontId,e.href=o,e.rel="stylesheet",document.head.appendChild(e)}}if(i)i.innerHTML=e;else{let t=document.createElement("style");t.id=globalStyleId,t.innerHTML=e,document.head.appendChild(t)}}}catch{}},[]),M=l(e=>{q();try{let t=e.detail;t.data&&("flat"===t.type?g(t.data):f(t.data))}catch{}},[g,f,q]),D=l(e=>{try{let t=e.detail;t.entity&&(I({data:t.entity,id:t.id,position:t.position,type:t.type??"component"}),t?.type!=="section"||Array.isArray(t.entity)||T(t.entity.uid,t.entity))}catch{}},[I,T]),O=l(e=>{try{let t=e.detail;t.uid&&t.propName&&L({id:t.uid,key:t.propName,data:t.propValue,group:t.group})}catch{}},[L]),K=l(e=>{try{let t=e.detail;t.uid&&E(t.uid,t.data,t.group)}catch{}},[E]),V=l(e=>{try{let t=e.detail;t.to&&t.uid&&C(t.uid,t.to,Number(t.position)??0)}catch{}},[C]),z=l(e=>{try{let t=e.detail;t.uid&&N(t.uid)}catch{}},[N]),G=l(e=>{let t=e.detail;try{t.data&&j(t.data)}catch{}},[j]),J=l(e=>{let t=e.detail;t&&x(t)},[x]),Q=l(e=>{let t=e.detail;t&&k(t)},[k]),R=l(e=>{let t=e.detail;t&&A(t)},[A]),U=l(e=>{let t=e.detail;t&&b(t)},[b]),W=l(e=>{let t=e.detail;t&&S(t)},[S]);return s(()=>{if(P){let e="google-font",t=document.querySelector(`.${fontElementSettingClassName}[data-font="${e}"]`);if(t)t.getAttribute("href")!==P&&t.setAttribute("href",P);else{let t=document.createElement("link");t.className=fontElementSettingClassName,t.dataset.font=e,t.href=P,t.rel="stylesheet",document.head.appendChild(t)}}},[P]),s(()=>(window.addEventListener("update-shop-info",B),window.addEventListener("revalidate-query",$),window.addEventListener("init-builder",M),window.addEventListener("add-entity",D),window.addEventListener("remove-entity",z),window.addEventListener("move-entity",V),window.addEventListener("force-update-entity-props",K),window.addEventListener("update-entity-prop",O),window.addEventListener("set-global-style",F),window.addEventListener("update-global-swatches-data",G),window.addEventListener("on-off-header-footer",J),window.addEventListener("update-create-theme-section-count",Q),window.addEventListener("update-shop-plan",R),window.addEventListener("set-dynamic-product",U),window.addEventListener("set-dynamic-collection",W),()=>{window.removeEventListener("update-shop-info",B),window.removeEventListener("revalidate-query",$),window.removeEventListener("init-builder",M),window.removeEventListener("add-entity",D),window.removeEventListener("remove-entity",z),window.removeEventListener("move-entity",V),window.removeEventListener("update-entity-prop",O),window.removeEventListener("set-global-style",F),window.removeEventListener("update-global-swatches-data",G),window.removeEventListener("on-off-header-footer",J),window.removeEventListener("update-create-theme-section-count",Q),window.removeEventListener("update-shop-plan",R),window.removeEventListener("set-dynamic-product",U),window.removeEventListener("set-dynamic-collection",W)}),[D,R,K,O,M,V,z,F,G,$,B,J,Q,U,W]),e("div",{className:"toolbox"})};var Toolbox$1=a(Toolbox);export{Toolbox$1 as default};
@@ -1 +1 @@
1
- import{jsxs as o,Fragment as e,jsx as t}from"react/jsx-runtime";import{BuilderComponentProvider as r,SectionProvider as i,BuilderPreviewProvider as m,RenderPreview as n}from"@gem-sdk/core";import{NextSeo as l}from"next-seo";import d from"next/head";import{useState as a,useMemo as s,useEffect as c}from"react";import p from"../components/builder/Toolbox.js";import u from"../components/Header.js";import g from"../components/Footer.js";import f from"./CollectionGlobalProvider.js";import y from"../components/builder/PopupManager.js";import h from"../components/image-to-layout/ImageToLayout.js";import T from"../components/image-to-layout/AddSectionImageToLayout.js";let BuilderPage=({components:O,seo:j,themeStyle:L,fontStyle:b,sectionData:v,pageType:x,editorImageToLayout:I})=>{let[R,P]=a(!1),_=s(()=>({ROOT:{uid:"ROOT",tag:"Root",label:"Root",childrens:[]}}),[]);return c(()=>{P(!0)},[]),o(e,{children:[t(l,{...j}),o(d,{children:[L&&t("style",{type:"text/css",id:"global-style",dangerouslySetInnerHTML:{__html:L}}),b&&t("style",{"data-id":"google-fonts",type:"text/css",dangerouslySetInnerHTML:{__html:b}})]}),t(r,{components:O,children:t(i,{data:v,children:o(m,{state:_,children:[t(p,{}),t(y,{}),R&&o("div",{className:"builder z-1 relative",children:[t(u,{}),t("div",{id:"storefront",children:"GP_COLLECTION"===x?t(f,{children:t(n,{uid:"ROOT"})}):t(n,{uid:"ROOT"})}),t(h,{editorImageToLayout:I||!1}),t(T,{editorImageToLayout:I||!1}),t("div",{id:"visual-content"}),t(g,{})]})]},"preview")})})]})};export{BuilderPage};
1
+ import{jsxs as o,Fragment as e,jsx as t}from"react/jsx-runtime";import{BuilderComponentProvider as r,SectionProvider as i,BuilderPreviewProvider as m,RenderPreview as n}from"@gem-sdk/core";import{NextSeo as l}from"next-seo";import s from"next/head";import{useState as a,useMemo as d,useEffect as c}from"react";import p from"../components/builder/Toolbox.js";import u from"../components/Header.js";import f from"../components/Footer.js";import g from"./CollectionGlobalProvider.js";import h from"../components/builder/PopupManager.js";import T from"../components/image-to-layout/ImageToLayout.js";import y from"../components/image-to-layout/AddSectionImageToLayout.js";import b from"../components/builder/Toolbar.js";let BuilderPage=({components:O,seo:j,themeStyle:v,fontStyle:x,sectionData:L,pageType:I,editorImageToLayout:R,isThemeSectionEditor:P})=>{let[_,N]=a(!1),S=d(()=>({ROOT:{uid:"ROOT",tag:"Root",label:"Root",childrens:[]}}),[]);return c(()=>{N(!0)},[]),o(e,{children:[t(l,{...j}),o(s,{children:[v&&t("style",{type:"text/css",id:"global-style",dangerouslySetInnerHTML:{__html:v}}),x&&t("style",{"data-id":"google-fonts",type:"text/css",dangerouslySetInnerHTML:{__html:x}})]}),t(r,{components:O,children:t(i,{data:L,children:o(m,{state:S,isThemeSectionEditor:P,children:[t(p,{}),t(b,{}),t(h,{}),_&&o("div",{className:"builder z-1 relative",children:[P?t("div",{className:"h-[40px] bg-[#f4f4f4]"}):t(u,{}),t("div",{id:"storefront",className:P?"theme-section-editor":"",children:"GP_COLLECTION"===I?t(g,{children:t(n,{uid:"ROOT"})}):t(n,{uid:"ROOT"})}),t(T,{editorImageToLayout:R||!1}),t(y,{editorImageToLayout:R||!1}),t("div",{id:"visual-content"}),!P&&t(f,{})]})]},"preview")})})]})};export{BuilderPage};
@@ -146,6 +146,7 @@ type BuilderPageProps = {
146
146
  mode?: RenderMode;
147
147
  pageType: ShopType.PublishedThemePageType;
148
148
  editorImageToLayout?: boolean;
149
+ isThemeSectionEditor?: boolean;
149
150
  };
150
151
  declare const BuilderPage: React.FC<BuilderPageProps>;
151
152
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.14.0-dev.284",
3
+ "version": "1.14.0-dev.324",
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.14.0-dev.284",
28
+ "@gem-sdk/core": "1.14.0-dev.324",
29
29
  "@gem-sdk/plugin-cookie-bar": "1.14.0-dev.284",
30
30
  "@gem-sdk/plugin-quick-view": "1.14.0-dev.284",
31
31
  "@gem-sdk/plugin-sticky-add-to-cart": "1.14.0-dev.284"