@gem-sdk/pages 2.0.0-dev.834 → 2.0.0-dev.847
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.
- package/dist/cjs/components/builder/Toolbar.js +1 -1
- package/dist/cjs/libs/api/get-post-purchase-props-preview.js +1 -1
- package/dist/cjs/pages/static-v2.js +1 -1
- package/dist/esm/components/builder/Toolbar.js +1 -1
- package/dist/esm/libs/api/get-post-purchase-props-preview.js +1 -1
- package/dist/esm/pages/static-v2.js +1 -1
- package/dist/types/index.d.ts +1 -0
- package/package.json +4 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),Onboarding=require("./toolbar/Onboarding.js"),core=require("@gem-sdk/core");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},isLayoutElement=t=>{let e=t.getAttribute("data-component-tag");return"Row"===e||"Product"===e},isPopup=t=>{let e=t.getAttribute("data-component-tag");return"Dialog"===e},isSticky=t=>{let e=t.getAttribute("data-component-tag");return"Sticky"===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},COMPONENTS_TAG_NOT_LOAD_IMAGES=["PostPurchaseProductImages"],Toolbar=()=>{let t=react.useRef(null),e=react.useRef(!1),r=react.useRef(),o=react.useRef(!1),a=react.useRef(!1),[i,n]=react.useState(!1),[l,d]=react.useState(0),[u,c]=react.useState("bottom"),s=react.useRef(null),b=core.usePageType(),m=({state:t,$toolbar:e,$component:r})=>{let o=findOverflowParent(r,e),a=e.getBoundingClientRect(),i=r.getBoundingClientRect(),n=window.innerWidth;o?i?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true"):a.top<33&&(i?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true")),i.left+a.width>n&&e.setAttribute(`data-toolbar-${t}-overflow`,"true");let l=r?.closest('[aria-label="Dialog body"]');if(l){let r=l.getBoundingClientRect(),o=r.left+r.width-20;i.left+a.width>o&&e.setAttribute(`data-toolbar-${t}-overflow`,"true")}},v=react.useCallback(({$component:t,componentUid:e,focus:r,isThemeSection:o,isParent:a})=>{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-column"),c=getChildrenByAttrSelector(t,"data-theme-section-status");o&&c&&c.setAttribute("data-theme-section-status-active","true"),i&&(i.removeAttribute("style"),a||i.setAttribute("data-toolbar-hover","true"),r&&i.setAttribute("data-toolbar-hover-focus","true"),m({$toolbar:i,$component:t,state:"hover"})),n&&(n.setAttribute("data-outline-hover","true"),a&&n.setAttribute("data-outline-parent-hover","true"),o&&n.setAttribute("data-outline-overlay-theme-section","true"),r&&n.setAttribute("data-outline-hover-focus","true")),l&&!a&&l.setAttribute("data-toolbar-add-hover","true"),d&&!a&&d.setAttribute("data-toolbar-add-hover","true"),u&&u.setAttribute("data-column-visible","true")},[]),f=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])',1);if(r.length){for(let t of r)t&&v({$component:t,isParent:!0});g({$component:t,$parents:r})}},[v]),g=({$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++}}}}},p=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))})},[]),h=react.useCallback(()=>{let t=["data-toolbar-hover-focus","data-toolbar-hover","data-outline-hover-focus","data-toolbar-hover-revert","data-toolbar-hover-inside","data-outline-hover","data-toolbar-add-hover","data-column-visible","data-outline-parent-hover","data-toolbar-hover-overflow"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))}),p()},[p]),A=react.useCallback(()=>{if(s.current&&clearTimeout(s.current),l>0){let t=new CustomEvent("editor:toolbar:close-onboarding",{bubbles:!0,detail:{close:"close Onboarding"}});window.dispatchEvent(t),n(!1)}},[l]),w=react.useCallback(()=>{t.current=null;let e=["data-toolbar-active","data-outline-active","data-toolbar-add-active","data-toolbar-active-revert","data-toolbar-active-inside","data-spacing-margin-bottom-active","data-toolbar-force-hover","data-outline-force-hover","data-column-force-visible","data-toolbar-active-overflow"],o=document.querySelectorAll(e.map(t=>`[${t}]`).join(","));o&&e.forEach(t=>{o.forEach(e=>e.removeAttribute(t))}),B(!1),r.current&&r.current(),A()},[A]),y=(e,o)=>{let a=e=>{let r=e.detail;r?.componentUid==t.current?.componentUid&&o()};window.removeEventListener("editor:component:render",a),window.addEventListener("editor:component:render",a);let i=e.getAttribute("data-component-tag");if(i&&!COMPONENTS_TAG_NOT_LOAD_IMAGES.includes(i)){let t=e.querySelectorAll("img");t?.length&&t.forEach(t=>{t.addEventListener("load",()=>{o()})})}r.current=()=>{window.removeEventListener("editor:component:render",a)}},E=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 r=o.querySelector("[data-spacing-margin-bottom-bg]")||null,a=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(r&&a){let i=e.marginBottom;if(0>parseFloat(i)&&(i="0"),r.style.height=i,a.style.top=i,o.setAttribute("data-spacing-margin-bottom-active","true"),isLayoutElement(t))r.style.left="0";else{let t=e.paddingLeft,o=`-${t}`,i=`translate(${o}, -100%)`;r.style.left=o,a.style.transform=i}}}},[]),S=()=>{let t=document.querySelector("[data-toolbar-active]"),e=document.querySelector("[data-toolbar-onboarding]");t&&e&&(e?.removeAttribute("data-onboarding-active"),setTimeout(()=>{let r=t.getBoundingClientRect(),o=r.top||0,a=e?.getBoundingClientRect(),i=a?.height||0,n=parent.document.querySelector(".iframe"),l=n?.contentWindow,u=l?.scrollY||0,s=n?.clientHeight||0;if(o+i>s){let t=r.top+u-i-8;e?.setAttribute("style",`top: ${t}px;left: ${r.left}px;`),c("top"),l&&t<r.top+u&&setTimeout(()=>{let e=t-20;l.scrollTo({top:e,behavior:"smooth"})},200)}else{let t=r.top+u+r.height+8;e?.setAttribute("style",`top: ${t}px;left: ${r.left}px;`),c("bottom")}d(t=>t+1),e?.setAttribute("data-onboarding-active","true")},100))},C=react.useCallback(({$component:t})=>{if(!t||isSection(t)||isPopup(t)||isSticky(t))return;let e=document.querySelector("[data-toolbar-onboarding]");0==l?S():(A(),e?.removeAttribute("data-onboarding-active"))},[l,A]),$=react.useCallback(async({componentUid:e,productId:r,timeAwait:o=500,forceReActive:a})=>{if(!e)return;let i=`${r&&"POST_PURCHASE"!==b?`[data-product-id="${r}"][data-uid="${e}"], [data-product-id="${r}"] [data-uid="${e}"]`:`[data-uid="${e}"]`}`,n=await waitForElementToExist(i,o);if(!n||!a&&e==t.current?.componentUid&&r==t.current?.productId)return;(a||e===t.current?.componentUid)&&r===t.current?.productId||w();let l=getChildrenByAttrSelector(n,"data-toolbar"),d=getChildrenByAttrSelector(n,"data-outline"),u=getChildrenByAttrSelector(n,"data-toolbar-add-top"),c=getChildrenByAttrSelector(n,"data-toolbar-add-bottom"),v=getChildrenByAttrSelector(n,"data-column");if(l&&(t.current={componentUid:e,productId:r},l.removeAttribute("style"),l.setAttribute("data-toolbar-active","true"),m({$toolbar:l,$component:n,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"),v&&v.setAttribute("data-column-force-visible","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")})}E({$component:n}),s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{C({$component:n})},5e3),h(),y(n,()=>{$({componentUid:e,productId:r,timeAwait:2e3,forceReActive:!0})})},[w,h,E,C,b]),B=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"))})}},T=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")},[]),L=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))})}}},O=react.useCallback(r=>{if(e.current||o.current||a.current)return;let i=r.target;if(!i||"function"!=typeof i.closest){p();return}let n=i.closest("[data-toolbar-hover]");if(n)return;let l=i.closest("[data-toolbar-wrap]"),d=l?.getAttribute("data-uid");if(!l||!d||"ROOT"==d){h();return}let u=getChildrenByAttrSelector(l,"data-toolbar"),c=getChildrenByAttrSelector(l,"data-outline");if(c&&c.removeAttribute("data-outline-overlay"),!d||"ROOT"==d||u?.getAttribute("data-toolbar-hover-focus"))return;if(u?.getAttribute("data-toolbar-hover-focus")||h(),T(i),d==t.current?.componentUid){if(t.current.productId){let e=l.closest("[data-product-id]");if(e){let r=e.getAttribute("data-product-id");if(r==t.current.productId)return}}let e=i.closest("[data-theme-section]");if(!e)return;v({$component:e,focus:!0,isThemeSection:!0})}let s=i.closest("[data-theme-section]");s?v({$component:s,focus:!0,isThemeSection:!0}):(v({$component:l,componentUid:d,focus:!0}),f({$component:l,componentUid:d}))},[T,h,v,f,p,t]),k=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid?$({componentUid:r.componentUid,productId:r.productId}):w()},[$,w,e]),R=react.useCallback(()=>{h()},[h]),q=react.useCallback(t=>{let r=t.detail;r.value&&(h(),w()),e.current=r.value},[h,w]),P=react.useCallback(t=>{let e=t.detail;e.value?B(!0):B(!1)},[]),I=react.useCallback(t=>{if(e.current)return;let r=t.detail;L({value:r?.value||!1})},[]),x=react.useCallback(t=>{let e=t.detail;e?.value?(h(),o.current=!0):o.current=!1},[h]),U=react.useCallback(t=>{let e=t.detail;e?.value?(h(),a.current=!0):a.current=!1},[h]),_=(t,e)=>{if(!t)return;let r=document.querySelectorAll(`[data-uid="${t}"]`);r.length&&r.forEach(t=>{let r=getChildrenByAttrSelector(t,"data-outline");r&&("in"===e?(r.setAttribute("data-outline-force-hover","true"),r.setAttribute("data-outline-force-overlay","true")):(r.removeAttribute("data-outline-force-hover"),r.removeAttribute("data-outline-force-overlay")))})},j=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid&&_(r?.componentUid,r?.type)},[e]),F=react.useCallback(t=>{let e=t.detail;e?.isNewUser&&n(!0)},[]),N=react.useCallback(()=>{i&&S()},[i]);return react.useEffect(()=>(document.addEventListener("mousemove",O),window.addEventListener("editor:active-component",k),window.addEventListener("editor:focus-outside-preview",R),window.addEventListener("editor:is-dragging",q),window.addEventListener("editor:is-editing-text-editor",P),window.addEventListener("editor:toolbar:show-parents",I),window.addEventListener("editor:toolbar:resize-spacing",x),window.addEventListener("editor:toolbar:resize-column",U),window.addEventListener("editor:hover-component",j),window.addEventListener("editor:toolbar-onboarding",F),window.addEventListener("resize",N),()=>{document.removeEventListener("mousemove",O),window.removeEventListener("editor:active-component",k),window.removeEventListener("editor:is-dragging",R),window.removeEventListener("editor:is-dragging",q),window.removeEventListener("editor:is-editing-text-editor",P),window.removeEventListener("editor:toolbar:show-parents",I),window.removeEventListener("editor:toolbar:resize-spacing",x),window.removeEventListener("editor:toolbar:resize-column",U),window.removeEventListener("editor:hover-component",j),window.removeEventListener("editor:toolbar-onboarding",F),window.removeEventListener("resize",N)}),[O,k,R,q,P,I,x,U,j,F,N]),i&&jsxRuntime.jsx(Onboarding.default,{enable:!0,position:u,onCloseOnboarding:A})};var Toolbar$1=react.memo(Toolbar);exports.default=Toolbar$1;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),Onboarding=require("./toolbar/Onboarding.js");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},isLayoutElement=t=>{let e=t.getAttribute("data-component-tag");return"Row"===e||"Product"===e},isPopup=t=>{let e=t.getAttribute("data-component-tag");return"Dialog"===e},isSticky=t=>{let e=t.getAttribute("data-component-tag");return"Sticky"===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},COMPONENTS_TAG_NOT_LOAD_IMAGES=["PostPurchaseProductImages"],Toolbar=()=>{let t=react.useRef(null),e=react.useRef(!1),r=react.useRef(),o=react.useRef(!1),a=react.useRef(!1),[i,n]=react.useState(!1),[l,d]=react.useState(0),[u,c]=react.useState("bottom"),s=react.useRef(null),b=({state:t,$toolbar:e,$component:r})=>{let o=findOverflowParent(r,e),a=e.getBoundingClientRect(),i=r.getBoundingClientRect(),n=window.innerWidth;o?i?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true"):a.top<33&&(i?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true")),i.left+a.width>n&&e.setAttribute(`data-toolbar-${t}-overflow`,"true");let l=r?.closest('[aria-label="Dialog body"]');if(l){let r=l.getBoundingClientRect(),o=r.left+r.width-20;i.left+a.width>o&&e.setAttribute(`data-toolbar-${t}-overflow`,"true")}},m=react.useCallback(({$component:t,componentUid:e,focus:r,isThemeSection:o,isParent:a})=>{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-column"),c=getChildrenByAttrSelector(t,"data-theme-section-status");o&&c&&c.setAttribute("data-theme-section-status-active","true"),i&&(i.removeAttribute("style"),a||i.setAttribute("data-toolbar-hover","true"),r&&i.setAttribute("data-toolbar-hover-focus","true"),b({$toolbar:i,$component:t,state:"hover"})),n&&(n.setAttribute("data-outline-hover","true"),a&&n.setAttribute("data-outline-parent-hover","true"),o&&n.setAttribute("data-outline-overlay-theme-section","true"),r&&n.setAttribute("data-outline-hover-focus","true")),l&&!a&&l.setAttribute("data-toolbar-add-hover","true"),d&&!a&&d.setAttribute("data-toolbar-add-hover","true"),u&&u.setAttribute("data-column-visible","true")},[]),v=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])',1);if(r.length){for(let t of r)t&&m({$component:t,isParent:!0});f({$component:t,$parents:r})}},[m]),f=({$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++}}}}},g=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))})},[]),p=react.useCallback(()=>{let t=["data-toolbar-hover-focus","data-toolbar-hover","data-outline-hover-focus","data-toolbar-hover-revert","data-toolbar-hover-inside","data-outline-hover","data-toolbar-add-hover","data-column-visible","data-outline-parent-hover","data-toolbar-hover-overflow"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))}),g()},[g]),h=react.useCallback(()=>{if(s.current&&clearTimeout(s.current),l>0){let t=new CustomEvent("editor:toolbar:close-onboarding",{bubbles:!0,detail:{close:"close Onboarding"}});window.dispatchEvent(t),n(!1)}},[l]),A=react.useCallback(()=>{t.current=null;let e=["data-toolbar-active","data-outline-active","data-toolbar-add-active","data-toolbar-active-revert","data-toolbar-active-inside","data-spacing-margin-bottom-active","data-toolbar-force-hover","data-outline-force-hover","data-column-force-visible","data-toolbar-active-overflow"],o=document.querySelectorAll(e.map(t=>`[${t}]`).join(","));o&&e.forEach(t=>{o.forEach(e=>e.removeAttribute(t))}),$(!1),r.current&&r.current(),h()},[h]),w=(e,o)=>{let a=e=>{let r=e.detail;r?.componentUid==t.current?.componentUid&&o()};window.removeEventListener("editor:component:render",a),window.addEventListener("editor:component:render",a);let i=e.getAttribute("data-component-tag");if(i&&!COMPONENTS_TAG_NOT_LOAD_IMAGES.includes(i)){let t=e.querySelectorAll("img");t?.length&&t.forEach(t=>{t.addEventListener("load",()=>{o()})})}r.current=()=>{window.removeEventListener("editor:component:render",a)}},y=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 r=o.querySelector("[data-spacing-margin-bottom-bg]")||null,a=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(r&&a){let i=e.marginBottom;if(0>parseFloat(i)&&(i="0"),r.style.height=i,a.style.top=i,o.setAttribute("data-spacing-margin-bottom-active","true"),isLayoutElement(t))r.style.left="0";else{let t=e.paddingLeft,o=`-${t}`,i=`translate(${o}, -100%)`;r.style.left=o,a.style.transform=i}}}},[]),E=()=>{let t=document.querySelector("[data-toolbar-active]"),e=document.querySelector("[data-toolbar-onboarding]");t&&e&&(e?.removeAttribute("data-onboarding-active"),setTimeout(()=>{let r=t.getBoundingClientRect(),o=r.top||0,a=e?.getBoundingClientRect(),i=a?.height||0,n=parent.document.querySelector(".iframe"),l=n?.contentWindow,u=l?.scrollY||0,s=n?.clientHeight||0;if(o+i>s){let t=r.top+u-i-8;e?.setAttribute("style",`top: ${t}px;left: ${r.left}px;`),c("top"),l&&t<r.top+u&&setTimeout(()=>{let e=t-20;l.scrollTo({top:e,behavior:"smooth"})},200)}else{let t=r.top+u+r.height+8;e?.setAttribute("style",`top: ${t}px;left: ${r.left}px;`),c("bottom")}d(t=>t+1),e?.setAttribute("data-onboarding-active","true")},100))},S=react.useCallback(({$component:t})=>{if(!t||isSection(t)||isPopup(t)||isSticky(t))return;let e=document.querySelector("[data-toolbar-onboarding]");0==l?E():(h(),e?.removeAttribute("data-onboarding-active"))},[l,h]),C=react.useCallback(async({componentUid:e,productId:r,timeAwait:o=500,forceReActive:a})=>{if(!e)return;let i=`${r?`[data-product-id="${r}"][data-uid="${e}"], [data-product-id="${r}"] [data-uid="${e}"]`:`[data-uid="${e}"]`}`,n=await waitForElementToExist(i,o);if(!n||!a&&e==t.current?.componentUid&&r==t.current?.productId)return;(a||e===t.current?.componentUid)&&r===t.current?.productId||A();let l=getChildrenByAttrSelector(n,"data-toolbar"),d=getChildrenByAttrSelector(n,"data-outline"),u=getChildrenByAttrSelector(n,"data-toolbar-add-top"),c=getChildrenByAttrSelector(n,"data-toolbar-add-bottom"),m=getChildrenByAttrSelector(n,"data-column");if(l&&(t.current={componentUid:e,productId:r},l.removeAttribute("style"),l.setAttribute("data-toolbar-active","true"),b({$toolbar:l,$component:n,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"),m&&m.setAttribute("data-column-force-visible","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")})}y({$component:n}),s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{S({$component:n})},5e3),p(),w(n,()=>{C({componentUid:e,productId:r,timeAwait:2e3,forceReActive:!0})})},[A,p,y,S]),$=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"))})}},B=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")},[]),L=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))})}}},T=react.useCallback(r=>{if(e.current||o.current||a.current)return;let i=r.target;if(!i||"function"!=typeof i.closest){g();return}let n=i.closest("[data-toolbar-hover]");if(n)return;let l=i.closest("[data-toolbar-wrap]"),d=l?.getAttribute("data-uid");if(!l||!d||"ROOT"==d){p();return}let u=getChildrenByAttrSelector(l,"data-toolbar"),c=getChildrenByAttrSelector(l,"data-outline");if(c&&c.removeAttribute("data-outline-overlay"),!d||"ROOT"==d||u?.getAttribute("data-toolbar-hover-focus"))return;if(u?.getAttribute("data-toolbar-hover-focus")||p(),B(i),d==t.current?.componentUid){if(t.current.productId){let e=l.closest("[data-product-id]");if(e){let r=e.getAttribute("data-product-id");if(r==t.current.productId)return}}let e=i.closest("[data-theme-section]");if(!e)return;m({$component:e,focus:!0,isThemeSection:!0})}let s=i.closest("[data-theme-section]");s?m({$component:s,focus:!0,isThemeSection:!0}):(m({$component:l,componentUid:d,focus:!0}),v({$component:l,componentUid:d}))},[B,p,m,v,g,t]),O=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid?C({componentUid:r.componentUid,productId:r.productId}):A()},[C,A,e]),k=react.useCallback(()=>{p()},[p]),R=react.useCallback(t=>{let r=t.detail;r.value&&(p(),A()),e.current=r.value},[p,A]),q=react.useCallback(t=>{let e=t.detail;e.value?$(!0):$(!1)},[]),I=react.useCallback(t=>{if(e.current)return;let r=t.detail;L({value:r?.value||!1})},[]),P=react.useCallback(t=>{let e=t.detail;e?.value?(p(),o.current=!0):o.current=!1},[p]),x=react.useCallback(t=>{let e=t.detail;e?.value?(p(),a.current=!0):a.current=!1},[p]),U=(t,e)=>{if(!t)return;let r=document.querySelectorAll(`[data-uid="${t}"]`);r.length&&r.forEach(t=>{let r=getChildrenByAttrSelector(t,"data-outline");r&&("in"===e?(r.setAttribute("data-outline-force-hover","true"),r.setAttribute("data-outline-force-overlay","true")):(r.removeAttribute("data-outline-force-hover"),r.removeAttribute("data-outline-force-overlay")))})},_=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid&&U(r?.componentUid,r?.type)},[e]),j=react.useCallback(t=>{let e=t.detail;e?.isNewUser&&n(!0)},[]),F=react.useCallback(()=>{i&&E()},[i]);return react.useEffect(()=>(document.addEventListener("mousemove",T),window.addEventListener("editor:active-component",O),window.addEventListener("editor:focus-outside-preview",k),window.addEventListener("editor:is-dragging",R),window.addEventListener("editor:is-editing-text-editor",q),window.addEventListener("editor:toolbar:show-parents",I),window.addEventListener("editor:toolbar:resize-spacing",P),window.addEventListener("editor:toolbar:resize-column",x),window.addEventListener("editor:hover-component",_),window.addEventListener("editor:toolbar-onboarding",j),window.addEventListener("resize",F),()=>{document.removeEventListener("mousemove",T),window.removeEventListener("editor:active-component",O),window.removeEventListener("editor:is-dragging",k),window.removeEventListener("editor:is-dragging",R),window.removeEventListener("editor:is-editing-text-editor",q),window.removeEventListener("editor:toolbar:show-parents",I),window.removeEventListener("editor:toolbar:resize-spacing",P),window.removeEventListener("editor:toolbar:resize-column",x),window.removeEventListener("editor:hover-component",_),window.removeEventListener("editor:toolbar-onboarding",j),window.removeEventListener("resize",F)}),[T,O,k,R,q,I,P,x,_,j,F]),i&&jsxRuntime.jsx(Onboarding.default,{enable:!0,position:u,onCloseOnboarding:h})};var Toolbar$1=react.memo(Toolbar);exports.default=Toolbar$1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var core=require("@gem-sdk/core"),adapterShopify=require("@gem-sdk/adapter-shopify"),nextjs=require("@sentry/nextjs"),googleFonts=require("../google-fonts.js"),getFallback=require("../helpers/get-fallback.js"),normalize=require("../helpers/normalize.js"),usePagePreview=require("../hooks/usePagePreview.js"),parseJson=require("../helpers/parse-json.js");const fetchSalePageDataByID=async(e,
|
|
1
|
+
"use strict";var core=require("@gem-sdk/core"),adapterShopify=require("@gem-sdk/adapter-shopify"),nextjs=require("@sentry/nextjs"),googleFonts=require("../google-fonts.js"),getFallback=require("../helpers/get-fallback.js"),normalize=require("../helpers/normalize.js"),usePagePreview=require("../hooks/usePagePreview.js"),parseJson=require("../helpers/parse-json.js"),genCss=require("../helpers/gen-css.js");const fetchSalePageDataByID=async(e,t,a)=>{let r={themePageId:e.themePageId,first:1,where:{default:!0}},[o,s,l]=await Promise.allSettled([t([core.ThemePageDocument,r]),t([core.StorePropertyDocument]),a([adapterShopify.ShopMetaDocument])]);if("rejected"===o.status)throw Error(o.reason?.[0]);return{dataBuilder:o.value.themePage,pageStyle:o.value.themePage?.theme?.themeStyles?.edges?.[0]?.node?.data,storeProperty:s,shopifyMeta:l,productOffers:[]}},fetchPostPurchasePageDataByID=async(e,t,a)=>{let r={themePageId:e.themePageId,first:1,where:{default:!0}},[o,s,l,i]=await Promise.allSettled([t([core.ThemePageDocument,r]),t([core.StorePropertyDocument]),a([adapterShopify.ShopMetaDocument]),t([core.SaleFunnelDiscountsDocument,{where:{saleFunnelOfferID:e.currentOfferID}}])]);if("rejected"===o.status)throw Error(o.reason?.[0]);if("rejected"===i.status)throw Error(i.reason?.[0]);return{dataBuilder:o.value.themePage,pageStyle:o.value.themePage?.theme?.themeStyles?.edges?.[0]?.node?.data,storeProperty:s,shopifyMeta:l,productOffers:i.value.saleFunnelDiscounts?.edges?.filter(e=>e?.node?.objectType==="PRODUCT"&&e?.node?.type==="ORDER_VALUE")||[]}},fetchThemePageDataByTemplateID=async(e,t,a)=>{let r={libraryTemplateId:e.libraryTemplateId},o=[],[s,l,i]=await Promise.allSettled([t([core.LibraryTemplateDocument,r]),t([core.StorePropertyDocument]),a([adapterShopify.ShopMetaDocument])]);if(e.currentOfferID){let[a]=await Promise.allSettled([t([core.LibrarySaleFunnelDocument,{librarySaleFunnelId:e.librarySaleFunnelID}])]);if("rejected"===a.status)throw Error(a.reason?.[0]);let r=a.value.librarySaleFunnel?.offers?.find(t=>t?.id===e.currentOfferID);r&&(o=r.discounts?.filter(e=>e?.objectType==="PRODUCT"&&"ORDER_VALUE"===e.type).map(e=>({node:{...e}}))||[])}if("rejected"===s.status)throw Error(s.reason?.[0]);return{dataBuilder:s.value.libraryTemplate,pageStyle:void 0,storeProperty:l,shopifyMeta:i,productOffers:o}},getPostPurchasePropsPreview=(e,t,a)=>async(r,o)=>{try{let{dataBuilder:s,storeProperty:l,shopifyMeta:i,productOffers:u,pageStyle:n}=a?await fetchThemePageDataByTemplateID({libraryTemplateId:r,currentOfferID:o,librarySaleFunnelID:a},e,t):o?await fetchPostPurchasePageDataByID({themePageId:r,currentOfferID:o},e,t):await fetchSalePageDataByID({themePageId:r},e,t);if(!s)throw Error(`No data builder found for slug: /preview/${r}`);let c=a?normalize.parseBuilderLibraryTemplate(s):normalize.parseBuilderTemplateV2(s),[h,P,g]=await Promise.all([googleFonts.getFontStyleFromPageTemplate(c),googleFonts.getFontFromGlobalStyle(n),getFallback.getFallbackV2(e,c)]),{seo:m,pageConfig:p}=usePagePreview.usePagePreview(s,l,i);return parseJson.serializableJson({themeStyle:genCss.genCSS(n),seo:m,...p,elementFontStyle:h,fontStyle:P,builderData:c,swr:{fallback:g},productOffers:u})}catch(e){throw nextjs.captureException(e),e}};exports.fetchPostPurchasePageDataByID=fetchPostPurchasePageDataByID,exports.fetchSalePageDataByID=fetchSalePageDataByID,exports.fetchThemePageDataByTemplateID=fetchThemePageDataByTemplateID,exports.getPostPurchasePropsPreview=getPostPurchasePropsPreview;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),nextSeo=require("next-seo"),Head=require("next/head"),router=require("next/router"),useTrackingView=require("../libs/hooks/use-tracking-view.js"),parseHtml=require("../libs/parse-html.js"),Header=require("../components/Header.js"),FooterForPostPurchase=require("../components/FooterForPostPurchase.js");const StaticPageV2=({components:e,builderData:s,sectionData:t,seo:r,themeStyle:a,fontStyle:i,elementFontStyle:n,customCodeHeader:u,shopToken:l,pageHandle:o,customFonts:m,isPostPurchase:x,shopName:c,productOffers:d,publicStoreFrontData:p})=>{let
|
|
1
|
+
"use strict";var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),nextSeo=require("next-seo"),Head=require("next/head"),router=require("next/router"),useTrackingView=require("../libs/hooks/use-tracking-view.js"),parseHtml=require("../libs/parse-html.js"),Header=require("../components/Header.js"),FooterForPostPurchase=require("../components/FooterForPostPurchase.js");const StaticPageV2=({components:e,builderData:s,sectionData:t,seo:r,themeStyle:a,fontStyle:i,elementFontStyle:n,customCodeHeader:u,shopToken:l,pageHandle:o,customFonts:m,isPostPurchase:x,shopName:c,productOffers:d,publicStoreFrontData:p,isPreview:g})=>{let j=router.useRouter();return(useTrackingView.useTrackingView(l,o,j.isFallback),j.isFallback)?jsxRuntime.jsx("div",{className:"gp-flex gp-h-full gp-items-center gp-justify-center",children:jsxRuntime.jsxs("div",{className:"gp-flex gp-gap-2",children:[jsxRuntime.jsx("span",{className:"gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_alternate] gp-rounded-full gp-bg-slate-800"}),jsxRuntime.jsx("span",{className:"gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_200ms_linear_alternate] gp-rounded-full gp-bg-slate-800"}),jsxRuntime.jsx("span",{className:"gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_500ms_alternate] gp-rounded-full gp-bg-slate-800"})]})}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(nextSeo.NextSeo,{...r}),jsxRuntime.jsxs(Head,{children:[parseHtml.parseHtml(u,!0),a&&jsxRuntime.jsx("style",{"data-id":"global-style",type:"text/css",dangerouslySetInnerHTML:{__html:a}}),i&&jsxRuntime.jsx("style",{"data-id":"google-fonts",type:"text/css",dangerouslySetInnerHTML:{__html:i}}),n&&n.map(e=>jsxRuntime.jsx("style",{"data-id":"google-element-fonts",type:"text/css",dangerouslySetInnerHTML:{__html:e}},e)),m&&jsxRuntime.jsx("style",{"data-id":"custom-element-fonts",type:"text/css",dangerouslySetInnerHTML:{__html:m}},i)]}),jsxRuntime.jsx(core.PageProvider,{productOffers:d,publicStoreFrontData:p,children:jsxRuntime.jsxs(core.BuilderComponentProvider,{components:e,children:[x&&jsxRuntime.jsx(Header.default,{pageType:"POST_PURCHASE"}),jsxRuntime.jsx(core.SectionProvider,{data:t,children:s?.map(e=>jsxRuntime.jsx(core.BuilderProvider,{state:e.data,lazy:e.lazy,priority:e.priority,isPostPurchase:x,isPreview:g,children:jsxRuntime.jsx(core.Render,{uid:e.uid})},e.uid))}),x&&jsxRuntime.jsx(FooterForPostPurchase.default,{shopName:c||""})]})})]})};exports.StaticPageV2=StaticPageV2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import{memo as e,useRef as r,useState as o,useCallback as a,useEffect as i}from"react";import n from"./toolbar/Onboarding.js";import{usePageType as l}from"@gem-sdk/core";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},isLayoutElement=t=>{let e=t.getAttribute("data-component-tag");return"Row"===e||"Product"===e},isPopup=t=>{let e=t.getAttribute("data-component-tag");return"Dialog"===e},isSticky=t=>{let e=t.getAttribute("data-component-tag");return"Sticky"===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},COMPONENTS_TAG_NOT_LOAD_IMAGES=["PostPurchaseProductImages"],Toolbar=()=>{let e=r(null),d=r(!1),u=r(),c=r(!1),s=r(!1),[b,m]=o(!1),[v,g]=o(0),[f,p]=o("bottom"),h=r(null),A=l(),w=({state:t,$toolbar:e,$component:r})=>{let o=findOverflowParent(r,e),a=e.getBoundingClientRect(),i=r.getBoundingClientRect(),n=window.innerWidth;o?i?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true"):a.top<33&&(i?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true")),i.left+a.width>n&&e.setAttribute(`data-toolbar-${t}-overflow`,"true");let l=r?.closest('[aria-label="Dialog body"]');if(l){let r=l.getBoundingClientRect(),o=r.left+r.width-20;i.left+a.width>o&&e.setAttribute(`data-toolbar-${t}-overflow`,"true")}},y=a(({$component:t,componentUid:e,focus:r,isThemeSection:o,isParent:a})=>{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-column"),c=getChildrenByAttrSelector(t,"data-theme-section-status");o&&c&&c.setAttribute("data-theme-section-status-active","true"),i&&(i.removeAttribute("style"),a||i.setAttribute("data-toolbar-hover","true"),r&&i.setAttribute("data-toolbar-hover-focus","true"),w({$toolbar:i,$component:t,state:"hover"})),n&&(n.setAttribute("data-outline-hover","true"),a&&n.setAttribute("data-outline-parent-hover","true"),o&&n.setAttribute("data-outline-overlay-theme-section","true"),r&&n.setAttribute("data-outline-hover-focus","true")),l&&!a&&l.setAttribute("data-toolbar-add-hover","true"),d&&!a&&d.setAttribute("data-toolbar-add-hover","true"),u&&u.setAttribute("data-column-visible","true")},[]),E=a(({$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])',1);if(r.length){for(let t of r)t&&y({$component:t,isParent:!0});S({$component:t,$parents:r})}},[y]),S=({$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++}}}}},C=a(()=>{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))})},[]),$=a(()=>{let t=["data-toolbar-hover-focus","data-toolbar-hover","data-outline-hover-focus","data-toolbar-hover-revert","data-toolbar-hover-inside","data-outline-hover","data-toolbar-add-hover","data-column-visible","data-outline-parent-hover","data-toolbar-hover-overflow"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))}),C()},[C]),B=a(()=>{if(h.current&&clearTimeout(h.current),v>0){let t=new CustomEvent("editor:toolbar:close-onboarding",{bubbles:!0,detail:{close:"close Onboarding"}});window.dispatchEvent(t),m(!1)}},[v]),T=a(()=>{e.current=null;let t=["data-toolbar-active","data-outline-active","data-toolbar-add-active","data-toolbar-active-revert","data-toolbar-active-inside","data-spacing-margin-bottom-active","data-toolbar-force-hover","data-outline-force-hover","data-column-force-visible","data-toolbar-active-overflow"],r=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));r&&t.forEach(t=>{r.forEach(e=>e.removeAttribute(t))}),R(!1),u.current&&u.current(),B()},[B]),L=(t,r)=>{let o=t=>{let o=t.detail;o?.componentUid==e.current?.componentUid&&r()};window.removeEventListener("editor:component:render",o),window.addEventListener("editor:component:render",o);let a=t.getAttribute("data-component-tag");if(a&&!COMPONENTS_TAG_NOT_LOAD_IMAGES.includes(a)){let e=t.querySelectorAll("img");e?.length&&e.forEach(t=>{t.addEventListener("load",()=>{r()})})}u.current=()=>{window.removeEventListener("editor:component:render",o)}},O=a(({$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 r=o.querySelector("[data-spacing-margin-bottom-bg]")||null,a=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(r&&a){let i=e.marginBottom;if(0>parseFloat(i)&&(i="0"),r.style.height=i,a.style.top=i,o.setAttribute("data-spacing-margin-bottom-active","true"),isLayoutElement(t))r.style.left="0";else{let t=e.paddingLeft,o=`-${t}`,i=`translate(${o}, -100%)`;r.style.left=o,a.style.transform=i}}}},[]),P=()=>{let t=document.querySelector("[data-toolbar-active]"),e=document.querySelector("[data-toolbar-onboarding]");t&&e&&(e?.removeAttribute("data-onboarding-active"),setTimeout(()=>{let r=t.getBoundingClientRect(),o=r.top||0,a=e?.getBoundingClientRect(),i=a?.height||0,n=parent.document.querySelector(".iframe"),l=n?.contentWindow,d=l?.scrollY||0,u=n?.clientHeight||0;if(o+i>u){let t=r.top+d-i-8;e?.setAttribute("style",`top: ${t}px;left: ${r.left}px;`),p("top"),l&&t<r.top+d&&setTimeout(()=>{let e=t-20;l.scrollTo({top:e,behavior:"smooth"})},200)}else{let t=r.top+d+r.height+8;e?.setAttribute("style",`top: ${t}px;left: ${r.left}px;`),p("bottom")}g(t=>t+1),e?.setAttribute("data-onboarding-active","true")},100))},q=a(({$component:t})=>{if(!t||isSection(t)||isPopup(t)||isSticky(t))return;let e=document.querySelector("[data-toolbar-onboarding]");0==v?P():(B(),e?.removeAttribute("data-onboarding-active"))},[v,B]),I=a(async({componentUid:t,productId:r,timeAwait:o=500,forceReActive:a})=>{if(!t)return;let i=`${r&&"POST_PURCHASE"!==A?`[data-product-id="${r}"][data-uid="${t}"], [data-product-id="${r}"] [data-uid="${t}"]`:`[data-uid="${t}"]`}`,n=await waitForElementToExist(i,o);if(!n||!a&&t==e.current?.componentUid&&r==e.current?.productId)return;(a||t===e.current?.componentUid)&&r===e.current?.productId||T();let l=getChildrenByAttrSelector(n,"data-toolbar"),d=getChildrenByAttrSelector(n,"data-outline"),u=getChildrenByAttrSelector(n,"data-toolbar-add-top"),c=getChildrenByAttrSelector(n,"data-toolbar-add-bottom"),s=getChildrenByAttrSelector(n,"data-column");if(l&&(e.current={componentUid:t,productId:r},l.removeAttribute("style"),l.setAttribute("data-toolbar-active","true"),w({$toolbar:l,$component:n,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"),s&&s.setAttribute("data-column-force-visible","true"),r){let e=document.querySelectorAll(`[data-uid="${t}"]`);e?.length&&e.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&e.setAttribute("data-outline-active","true")})}O({$component:n}),h.current&&clearTimeout(h.current),h.current=setTimeout(()=>{q({$component:n})},5e3),$(),L(n,()=>{I({componentUid:t,productId:r,timeAwait:2e3,forceReActive:!0})})},[T,$,O,q,A]),R=async t=>{if(t){if(e.current?.componentUid){let r=e.current?.componentUid,o=e.current?.productId,a=await waitForElementToExist(`${o?`[data-product-id="${o}"] `:""}[data-uid="${r}"]`,500);if(a){let e=getChildrenByAttrSelector(a,"data-toolbar"),r=getChildrenByAttrSelector(a,"data-outline"),o=getChildrenByAttrSelector(a,"data-spacing");e&&t&&e.setAttribute("data-toolbar-editor-inline-focus","true"),r&&t&&r.setAttribute("data-outline-editor-inline-focus","true"),o&&t&&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"))})}},U=a(t=>{let r=t.closest("[data-theme-section]"),o=r?.getAttribute("data-uid"),a=r&&o===e.current?.componentUid;if(!a)return;let i=getChildrenByAttrSelector(r,"data-theme-section-status");i&&i.setAttribute("data-theme-section-status-active","true")},[]),x=async({value:t})=>{if(!t)return;let r=await waitForElementToExist(`${e.current?.productId?`[data-product-id="${e.current?.productId}"] `:""}[data-uid="${e.current?.componentUid}"]`,500);if(r){let t=r?.querySelectorAll("[data-toolbar-parent]");if(t.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 t=>{let r=t.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=e.current?.productId||"");let n=new CustomEvent("editor:toolbar:force-active-component",{bubbles:!0,detail:{componentUid:r,productId:i}});o(t),window.dispatchEvent(n)};t.forEach(t=>{t.addEventListener("mouseover",()=>r(t)),t.addEventListener("mouseout",()=>o(t)),t.addEventListener("click",()=>a(t))})}}},_=a(t=>{if(d.current||c.current||s.current)return;let r=t.target;if(!r||"function"!=typeof r.closest){C();return}let o=r.closest("[data-toolbar-hover]");if(o)return;let a=r.closest("[data-toolbar-wrap]"),i=a?.getAttribute("data-uid");if(!a||!i||"ROOT"==i){$();return}let n=getChildrenByAttrSelector(a,"data-toolbar"),l=getChildrenByAttrSelector(a,"data-outline");if(l&&l.removeAttribute("data-outline-overlay"),!i||"ROOT"==i||n?.getAttribute("data-toolbar-hover-focus"))return;if(n?.getAttribute("data-toolbar-hover-focus")||$(),U(r),i==e.current?.componentUid){if(e.current.productId){let t=a.closest("[data-product-id]");if(t){let r=t.getAttribute("data-product-id");if(r==e.current.productId)return}}let t=r.closest("[data-theme-section]");if(!t)return;y({$component:t,focus:!0,isThemeSection:!0})}let u=r.closest("[data-theme-section]");u?y({$component:u,focus:!0,isThemeSection:!0}):(y({$component:a,componentUid:i,focus:!0}),E({$component:a,componentUid:i}))},[U,$,y,E,C,e]),F=a(t=>{if(d.current)return;let e=t.detail;e?.componentUid?I({componentUid:e.componentUid,productId:e.productId}):T()},[I,T,d]),N=a(()=>{$()},[$]),k=a(t=>{let e=t.detail;e.value&&($(),T()),d.current=e.value},[$,T]),D=a(t=>{let e=t.detail;e.value?R(!0):R(!1)},[]),H=a(t=>{if(d.current)return;let e=t.detail;x({value:e?.value||!1})},[]),z=a(t=>{let e=t.detail;e?.value?($(),c.current=!0):c.current=!1},[$]),G=a(t=>{let e=t.detail;e?.value?($(),s.current=!0):s.current=!1},[$]),M=(t,e)=>{if(!t)return;let r=document.querySelectorAll(`[data-uid="${t}"]`);r.length&&r.forEach(t=>{let r=getChildrenByAttrSelector(t,"data-outline");r&&("in"===e?(r.setAttribute("data-outline-force-hover","true"),r.setAttribute("data-outline-force-overlay","true")):(r.removeAttribute("data-outline-force-hover"),r.removeAttribute("data-outline-force-overlay")))})},j=a(t=>{if(d.current)return;let e=t.detail;e?.componentUid&&M(e?.componentUid,e?.type)},[d]),V=a(t=>{let e=t.detail;e?.isNewUser&&m(!0)},[]),W=a(()=>{b&&P()},[b]);return i(()=>(document.addEventListener("mousemove",_),window.addEventListener("editor:active-component",F),window.addEventListener("editor:focus-outside-preview",N),window.addEventListener("editor:is-dragging",k),window.addEventListener("editor:is-editing-text-editor",D),window.addEventListener("editor:toolbar:show-parents",H),window.addEventListener("editor:toolbar:resize-spacing",z),window.addEventListener("editor:toolbar:resize-column",G),window.addEventListener("editor:hover-component",j),window.addEventListener("editor:toolbar-onboarding",V),window.addEventListener("resize",W),()=>{document.removeEventListener("mousemove",_),window.removeEventListener("editor:active-component",F),window.removeEventListener("editor:is-dragging",N),window.removeEventListener("editor:is-dragging",k),window.removeEventListener("editor:is-editing-text-editor",D),window.removeEventListener("editor:toolbar:show-parents",H),window.removeEventListener("editor:toolbar:resize-spacing",z),window.removeEventListener("editor:toolbar:resize-column",G),window.removeEventListener("editor:hover-component",j),window.removeEventListener("editor:toolbar-onboarding",V),window.removeEventListener("resize",W)}),[_,F,N,k,D,H,z,G,j,V,W]),b&&t(n,{enable:!0,position:f,onCloseOnboarding:B})};var Toolbar$1=e(Toolbar);export{Toolbar$1 as default};
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{memo as e,useRef as r,useState as o,useCallback as a,useEffect as i}from"react";import n from"./toolbar/Onboarding.js";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},isLayoutElement=t=>{let e=t.getAttribute("data-component-tag");return"Row"===e||"Product"===e},isPopup=t=>{let e=t.getAttribute("data-component-tag");return"Dialog"===e},isSticky=t=>{let e=t.getAttribute("data-component-tag");return"Sticky"===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},COMPONENTS_TAG_NOT_LOAD_IMAGES=["PostPurchaseProductImages"],Toolbar=()=>{let e=r(null),l=r(!1),d=r(),u=r(!1),c=r(!1),[s,b]=o(!1),[m,v]=o(0),[g,f]=o("bottom"),p=r(null),h=({state:t,$toolbar:e,$component:r})=>{let o=findOverflowParent(r,e),a=e.getBoundingClientRect(),i=r.getBoundingClientRect(),n=window.innerWidth;o?i?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true"):a.top<33&&(i?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true")),i.left+a.width>n&&e.setAttribute(`data-toolbar-${t}-overflow`,"true");let l=r?.closest('[aria-label="Dialog body"]');if(l){let r=l.getBoundingClientRect(),o=r.left+r.width-20;i.left+a.width>o&&e.setAttribute(`data-toolbar-${t}-overflow`,"true")}},A=a(({$component:t,componentUid:e,focus:r,isThemeSection:o,isParent:a})=>{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-column"),c=getChildrenByAttrSelector(t,"data-theme-section-status");o&&c&&c.setAttribute("data-theme-section-status-active","true"),i&&(i.removeAttribute("style"),a||i.setAttribute("data-toolbar-hover","true"),r&&i.setAttribute("data-toolbar-hover-focus","true"),h({$toolbar:i,$component:t,state:"hover"})),n&&(n.setAttribute("data-outline-hover","true"),a&&n.setAttribute("data-outline-parent-hover","true"),o&&n.setAttribute("data-outline-overlay-theme-section","true"),r&&n.setAttribute("data-outline-hover-focus","true")),l&&!a&&l.setAttribute("data-toolbar-add-hover","true"),d&&!a&&d.setAttribute("data-toolbar-add-hover","true"),u&&u.setAttribute("data-column-visible","true")},[]),w=a(({$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])',1);if(r.length){for(let t of r)t&&A({$component:t,isParent:!0});y({$component:t,$parents:r})}},[A]),y=({$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++}}}}},E=a(()=>{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))})},[]),S=a(()=>{let t=["data-toolbar-hover-focus","data-toolbar-hover","data-outline-hover-focus","data-toolbar-hover-revert","data-toolbar-hover-inside","data-outline-hover","data-toolbar-add-hover","data-column-visible","data-outline-parent-hover","data-toolbar-hover-overflow"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))}),E()},[E]),C=a(()=>{if(p.current&&clearTimeout(p.current),m>0){let t=new CustomEvent("editor:toolbar:close-onboarding",{bubbles:!0,detail:{close:"close Onboarding"}});window.dispatchEvent(t),b(!1)}},[m]),$=a(()=>{e.current=null;let t=["data-toolbar-active","data-outline-active","data-toolbar-add-active","data-toolbar-active-revert","data-toolbar-active-inside","data-spacing-margin-bottom-active","data-toolbar-force-hover","data-outline-force-hover","data-column-force-visible","data-toolbar-active-overflow"],r=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));r&&t.forEach(t=>{r.forEach(e=>e.removeAttribute(t))}),I(!1),d.current&&d.current(),C()},[C]),B=(t,r)=>{let o=t=>{let o=t.detail;o?.componentUid==e.current?.componentUid&&r()};window.removeEventListener("editor:component:render",o),window.addEventListener("editor:component:render",o);let a=t.getAttribute("data-component-tag");if(a&&!COMPONENTS_TAG_NOT_LOAD_IMAGES.includes(a)){let e=t.querySelectorAll("img");e?.length&&e.forEach(t=>{t.addEventListener("load",()=>{r()})})}d.current=()=>{window.removeEventListener("editor:component:render",o)}},L=a(({$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 r=o.querySelector("[data-spacing-margin-bottom-bg]")||null,a=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(r&&a){let i=e.marginBottom;if(0>parseFloat(i)&&(i="0"),r.style.height=i,a.style.top=i,o.setAttribute("data-spacing-margin-bottom-active","true"),isLayoutElement(t))r.style.left="0";else{let t=e.paddingLeft,o=`-${t}`,i=`translate(${o}, -100%)`;r.style.left=o,a.style.transform=i}}}},[]),T=()=>{let t=document.querySelector("[data-toolbar-active]"),e=document.querySelector("[data-toolbar-onboarding]");t&&e&&(e?.removeAttribute("data-onboarding-active"),setTimeout(()=>{let r=t.getBoundingClientRect(),o=r.top||0,a=e?.getBoundingClientRect(),i=a?.height||0,n=parent.document.querySelector(".iframe"),l=n?.contentWindow,d=l?.scrollY||0,u=n?.clientHeight||0;if(o+i>u){let t=r.top+d-i-8;e?.setAttribute("style",`top: ${t}px;left: ${r.left}px;`),f("top"),l&&t<r.top+d&&setTimeout(()=>{let e=t-20;l.scrollTo({top:e,behavior:"smooth"})},200)}else{let t=r.top+d+r.height+8;e?.setAttribute("style",`top: ${t}px;left: ${r.left}px;`),f("bottom")}v(t=>t+1),e?.setAttribute("data-onboarding-active","true")},100))},O=a(({$component:t})=>{if(!t||isSection(t)||isPopup(t)||isSticky(t))return;let e=document.querySelector("[data-toolbar-onboarding]");0==m?T():(C(),e?.removeAttribute("data-onboarding-active"))},[m,C]),q=a(async({componentUid:t,productId:r,timeAwait:o=500,forceReActive:a})=>{if(!t)return;let i=`${r?`[data-product-id="${r}"][data-uid="${t}"], [data-product-id="${r}"] [data-uid="${t}"]`:`[data-uid="${t}"]`}`,n=await waitForElementToExist(i,o);if(!n||!a&&t==e.current?.componentUid&&r==e.current?.productId)return;(a||t===e.current?.componentUid)&&r===e.current?.productId||$();let l=getChildrenByAttrSelector(n,"data-toolbar"),d=getChildrenByAttrSelector(n,"data-outline"),u=getChildrenByAttrSelector(n,"data-toolbar-add-top"),c=getChildrenByAttrSelector(n,"data-toolbar-add-bottom"),s=getChildrenByAttrSelector(n,"data-column");if(l&&(e.current={componentUid:t,productId:r},l.removeAttribute("style"),l.setAttribute("data-toolbar-active","true"),h({$toolbar:l,$component:n,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"),s&&s.setAttribute("data-column-force-visible","true"),r){let e=document.querySelectorAll(`[data-uid="${t}"]`);e?.length&&e.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&e.setAttribute("data-outline-active","true")})}L({$component:n}),p.current&&clearTimeout(p.current),p.current=setTimeout(()=>{O({$component:n})},5e3),S(),B(n,()=>{q({componentUid:t,productId:r,timeAwait:2e3,forceReActive:!0})})},[$,S,L,O]),I=async t=>{if(t){if(e.current?.componentUid){let r=e.current?.componentUid,o=e.current?.productId,a=await waitForElementToExist(`${o?`[data-product-id="${o}"] `:""}[data-uid="${r}"]`,500);if(a){let e=getChildrenByAttrSelector(a,"data-toolbar"),r=getChildrenByAttrSelector(a,"data-outline"),o=getChildrenByAttrSelector(a,"data-spacing");e&&t&&e.setAttribute("data-toolbar-editor-inline-focus","true"),r&&t&&r.setAttribute("data-outline-editor-inline-focus","true"),o&&t&&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"))})}},P=a(t=>{let r=t.closest("[data-theme-section]"),o=r?.getAttribute("data-uid"),a=r&&o===e.current?.componentUid;if(!a)return;let i=getChildrenByAttrSelector(r,"data-theme-section-status");i&&i.setAttribute("data-theme-section-status-active","true")},[]),R=async({value:t})=>{if(!t)return;let r=await waitForElementToExist(`${e.current?.productId?`[data-product-id="${e.current?.productId}"] `:""}[data-uid="${e.current?.componentUid}"]`,500);if(r){let t=r?.querySelectorAll("[data-toolbar-parent]");if(t.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 t=>{let r=t.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=e.current?.productId||"");let n=new CustomEvent("editor:toolbar:force-active-component",{bubbles:!0,detail:{componentUid:r,productId:i}});o(t),window.dispatchEvent(n)};t.forEach(t=>{t.addEventListener("mouseover",()=>r(t)),t.addEventListener("mouseout",()=>o(t)),t.addEventListener("click",()=>a(t))})}}},U=a(t=>{if(l.current||u.current||c.current)return;let r=t.target;if(!r||"function"!=typeof r.closest){E();return}let o=r.closest("[data-toolbar-hover]");if(o)return;let a=r.closest("[data-toolbar-wrap]"),i=a?.getAttribute("data-uid");if(!a||!i||"ROOT"==i){S();return}let n=getChildrenByAttrSelector(a,"data-toolbar"),d=getChildrenByAttrSelector(a,"data-outline");if(d&&d.removeAttribute("data-outline-overlay"),!i||"ROOT"==i||n?.getAttribute("data-toolbar-hover-focus"))return;if(n?.getAttribute("data-toolbar-hover-focus")||S(),P(r),i==e.current?.componentUid){if(e.current.productId){let t=a.closest("[data-product-id]");if(t){let r=t.getAttribute("data-product-id");if(r==e.current.productId)return}}let t=r.closest("[data-theme-section]");if(!t)return;A({$component:t,focus:!0,isThemeSection:!0})}let s=r.closest("[data-theme-section]");s?A({$component:s,focus:!0,isThemeSection:!0}):(A({$component:a,componentUid:i,focus:!0}),w({$component:a,componentUid:i}))},[P,S,A,w,E,e]),x=a(t=>{if(l.current)return;let e=t.detail;e?.componentUid?q({componentUid:e.componentUid,productId:e.productId}):$()},[q,$,l]),_=a(()=>{S()},[S]),F=a(t=>{let e=t.detail;e.value&&(S(),$()),l.current=e.value},[S,$]),N=a(t=>{let e=t.detail;e.value?I(!0):I(!1)},[]),D=a(t=>{if(l.current)return;let e=t.detail;R({value:e?.value||!1})},[]),k=a(t=>{let e=t.detail;e?.value?(S(),u.current=!0):u.current=!1},[S]),z=a(t=>{let e=t.detail;e?.value?(S(),c.current=!0):c.current=!1},[S]),G=(t,e)=>{if(!t)return;let r=document.querySelectorAll(`[data-uid="${t}"]`);r.length&&r.forEach(t=>{let r=getChildrenByAttrSelector(t,"data-outline");r&&("in"===e?(r.setAttribute("data-outline-force-hover","true"),r.setAttribute("data-outline-force-overlay","true")):(r.removeAttribute("data-outline-force-hover"),r.removeAttribute("data-outline-force-overlay")))})},H=a(t=>{if(l.current)return;let e=t.detail;e?.componentUid&&G(e?.componentUid,e?.type)},[l]),M=a(t=>{let e=t.detail;e?.isNewUser&&b(!0)},[]),j=a(()=>{s&&T()},[s]);return i(()=>(document.addEventListener("mousemove",U),window.addEventListener("editor:active-component",x),window.addEventListener("editor:focus-outside-preview",_),window.addEventListener("editor:is-dragging",F),window.addEventListener("editor:is-editing-text-editor",N),window.addEventListener("editor:toolbar:show-parents",D),window.addEventListener("editor:toolbar:resize-spacing",k),window.addEventListener("editor:toolbar:resize-column",z),window.addEventListener("editor:hover-component",H),window.addEventListener("editor:toolbar-onboarding",M),window.addEventListener("resize",j),()=>{document.removeEventListener("mousemove",U),window.removeEventListener("editor:active-component",x),window.removeEventListener("editor:is-dragging",_),window.removeEventListener("editor:is-dragging",F),window.removeEventListener("editor:is-editing-text-editor",N),window.removeEventListener("editor:toolbar:show-parents",D),window.removeEventListener("editor:toolbar:resize-spacing",k),window.removeEventListener("editor:toolbar:resize-column",z),window.removeEventListener("editor:hover-component",H),window.removeEventListener("editor:toolbar-onboarding",M),window.removeEventListener("resize",j)}),[U,x,_,F,N,D,k,z,H,M,j]),s&&t(n,{enable:!0,position:g,onCloseOnboarding:C})};var Toolbar$1=e(Toolbar);export{Toolbar$1 as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{ThemePageDocument as e,StorePropertyDocument as
|
|
1
|
+
import{ThemePageDocument as e,StorePropertyDocument as t,SaleFunnelDiscountsDocument as a,LibraryTemplateDocument as r,LibrarySaleFunnelDocument as l}from"@gem-sdk/core";import{ShopMetaDocument as s}from"@gem-sdk/adapter-shopify";import{captureException as o}from"@sentry/nextjs";import{getFontStyleFromPageTemplate as i,getFontFromGlobalStyle as f}from"../google-fonts.js";import{getFallbackV2 as m}from"../helpers/get-fallback.js";import{parseBuilderLibraryTemplate as d,parseBuilderTemplateV2 as h}from"../helpers/normalize.js";import{usePagePreview as u}from"../hooks/usePagePreview.js";import{serializableJson as P}from"../helpers/parse-json.js";import{genCSS as n}from"../helpers/gen-css.js";let fetchSalePageDataByID=async(a,r,l)=>{let o={themePageId:a.themePageId,first:1,where:{default:!0}},[i,f,m]=await Promise.allSettled([r([e,o]),r([t]),l([s])]);if("rejected"===i.status)throw Error(i.reason?.[0]);return{dataBuilder:i.value.themePage,pageStyle:i.value.themePage?.theme?.themeStyles?.edges?.[0]?.node?.data,storeProperty:f,shopifyMeta:m,productOffers:[]}},fetchPostPurchasePageDataByID=async(r,l,o)=>{let i={themePageId:r.themePageId,first:1,where:{default:!0}},[f,m,d,h]=await Promise.allSettled([l([e,i]),l([t]),o([s]),l([a,{where:{saleFunnelOfferID:r.currentOfferID}}])]);if("rejected"===f.status)throw Error(f.reason?.[0]);if("rejected"===h.status)throw Error(h.reason?.[0]);return{dataBuilder:f.value.themePage,pageStyle:f.value.themePage?.theme?.themeStyles?.edges?.[0]?.node?.data,storeProperty:m,shopifyMeta:d,productOffers:h.value.saleFunnelDiscounts?.edges?.filter(e=>e?.node?.objectType==="PRODUCT"&&e?.node?.type==="ORDER_VALUE")||[]}},fetchThemePageDataByTemplateID=async(e,a,o)=>{let i={libraryTemplateId:e.libraryTemplateId},f=[],[m,d,h]=await Promise.allSettled([a([r,i]),a([t]),o([s])]);if(e.currentOfferID){let[t]=await Promise.allSettled([a([l,{librarySaleFunnelId:e.librarySaleFunnelID}])]);if("rejected"===t.status)throw Error(t.reason?.[0]);let r=t.value.librarySaleFunnel?.offers?.find(t=>t?.id===e.currentOfferID);r&&(f=r.discounts?.filter(e=>e?.objectType==="PRODUCT"&&"ORDER_VALUE"===e.type).map(e=>({node:{...e}}))||[])}if("rejected"===m.status)throw Error(m.reason?.[0]);return{dataBuilder:m.value.libraryTemplate,pageStyle:void 0,storeProperty:d,shopifyMeta:h,productOffers:f}},getPostPurchasePropsPreview=(e,t,a)=>async(r,l)=>{try{let{dataBuilder:s,storeProperty:o,shopifyMeta:c,productOffers:p,pageStyle:g}=a?await fetchThemePageDataByTemplateID({libraryTemplateId:r,currentOfferID:l,librarySaleFunnelID:a},e,t):l?await fetchPostPurchasePageDataByID({themePageId:r,currentOfferID:l},e,t):await fetchSalePageDataByID({themePageId:r},e,t);if(!s)throw Error(`No data builder found for slug: /preview/${r}`);let y=a?d(s):h(s),[D,I,w]=await Promise.all([i(y),f(g),m(e,y)]),{seo:S,pageConfig:j}=u(s,o,c);return P({themeStyle:n(g),seo:S,...j,elementFontStyle:D,fontStyle:I,builderData:y,swr:{fallback:w},productOffers:p})}catch(e){throw o(e),e}};export{fetchPostPurchasePageDataByID,fetchSalePageDataByID,fetchThemePageDataByTemplateID,getPostPurchasePropsPreview};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import{PageProvider as s,BuilderComponentProvider as r,SectionProvider as l,BuilderProvider as n,Render as i}from"@gem-sdk/core";import{NextSeo as o}from"next-seo";import p from"next/head";import{useRouter as m}from"next/router";import{useTrackingView as g}from"../libs/hooks/use-tracking-view.js";import{parseHtml as c}from"../libs/parse-html.js";import d from"../components/Header.js";import f from"../components/FooterForPostPurchase.js";let StaticPageV2=({components:u,builderData:h,sectionData:_,seo:y,themeStyle:x,fontStyle:b,elementFontStyle:
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import{PageProvider as s,BuilderComponentProvider as r,SectionProvider as l,BuilderProvider as n,Render as i}from"@gem-sdk/core";import{NextSeo as o}from"next-seo";import p from"next/head";import{useRouter as m}from"next/router";import{useTrackingView as g}from"../libs/hooks/use-tracking-view.js";import{parseHtml as c}from"../libs/parse-html.js";import d from"../components/Header.js";import f from"../components/FooterForPostPurchase.js";let StaticPageV2=({components:u,builderData:h,sectionData:_,seo:y,themeStyle:x,fontStyle:b,elementFontStyle:P,customCodeHeader:S,shopToken:j,pageHandle:H,customFonts:N,isPostPurchase:T,shopName:k,productOffers:F,publicStoreFrontData:v,isPreview:I})=>{let L=m();return(g(j,H,L.isFallback),L.isFallback)?e("div",{className:"gp-flex gp-h-full gp-items-center gp-justify-center",children:t("div",{className:"gp-flex gp-gap-2",children:[e("span",{className:"gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_alternate] gp-rounded-full gp-bg-slate-800"}),e("span",{className:"gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_200ms_linear_alternate] gp-rounded-full gp-bg-slate-800"}),e("span",{className:"gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_500ms_alternate] gp-rounded-full gp-bg-slate-800"})]})}):t(a,{children:[e(o,{...y}),t(p,{children:[c(S,!0),x&&e("style",{"data-id":"global-style",type:"text/css",dangerouslySetInnerHTML:{__html:x}}),b&&e("style",{"data-id":"google-fonts",type:"text/css",dangerouslySetInnerHTML:{__html:b}}),P&&P.map(t=>e("style",{"data-id":"google-element-fonts",type:"text/css",dangerouslySetInnerHTML:{__html:t}},t)),N&&e("style",{"data-id":"custom-element-fonts",type:"text/css",dangerouslySetInnerHTML:{__html:N}},b)]}),e(s,{productOffers:F,publicStoreFrontData:v,children:t(r,{components:u,children:[T&&e(d,{pageType:"POST_PURCHASE"}),e(l,{data:_,children:h?.map(t=>e(n,{state:t.data,lazy:t.lazy,priority:t.priority,isPostPurchase:T,isPreview:I,children:e(i,{uid:t.uid})},t.uid))}),T&&e(f,{shopName:k||""})]})})]})};export{StaticPageV2};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -89,6 +89,7 @@ type StaticPagePropsV2 = PageBuilderPropsV2 & {
|
|
|
89
89
|
shopName?: string;
|
|
90
90
|
productOffers?: ProductOffer[];
|
|
91
91
|
publicStoreFrontData?: PublicStoreFrontData | null;
|
|
92
|
+
isPreview?: boolean;
|
|
92
93
|
};
|
|
93
94
|
declare const StaticPageV2: React.FC<StaticPagePropsV2 & AdditionalPageBuilderProps>;
|
|
94
95
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "2.0.0-dev.
|
|
3
|
+
"version": "2.0.0-dev.847",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -22,17 +22,15 @@
|
|
|
22
22
|
"@sentry/nextjs": "7.77.0",
|
|
23
23
|
"deepmerge": "4.3.1",
|
|
24
24
|
"html-react-parser": "3.0.15",
|
|
25
|
-
"next-seo": "^6.0.0"
|
|
25
|
+
"next-seo": "^6.0.0",
|
|
26
|
+
"next": "latest"
|
|
26
27
|
},
|
|
27
28
|
"devDependencies": {
|
|
28
|
-
"@gem-sdk/core": "2.0.0-dev.
|
|
29
|
+
"@gem-sdk/core": "2.0.0-dev.843",
|
|
29
30
|
"@gem-sdk/plugin-cookie-bar": "1.14.0-dev.619",
|
|
30
31
|
"@gem-sdk/plugin-quick-view": "1.14.0-dev.619",
|
|
31
32
|
"@gem-sdk/plugin-sticky-add-to-cart": "1.14.0-dev.619"
|
|
32
33
|
},
|
|
33
|
-
"peerDependencies": {
|
|
34
|
-
"next": ">=13"
|
|
35
|
-
},
|
|
36
34
|
"module": "dist/esm/index.js",
|
|
37
35
|
"types": "dist/types/index.d.ts",
|
|
38
36
|
"exports": {
|