@gem-sdk/pages 1.14.0-dev.554 → 1.14.0-dev.607
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.
|
@@ -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");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},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},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")}},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"),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")},[]),m=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});f({$component:t,$parents:r})}},[v]),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))}),B(!1),r.current&&r.current.disconnect(),h()},[h]),w=(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}))},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 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")}}},[]),C=()=>{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))},E=react.useCallback(({$component:t})=>{if(!t||isSection(t)||isPopup(t)||isSticky(t))return;let e=document.querySelector("[data-toolbar-onboarding]");0==l?C():(h(),e?.removeAttribute("data-onboarding-active"))},[l,h]),S=react.useCallback(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||A();let n=getChildrenByAttrSelector(i,"data-toolbar"),l=getChildrenByAttrSelector(i,"data-outline"),d=getChildrenByAttrSelector(i,"data-toolbar-add-top"),u=getChildrenByAttrSelector(i,"data-toolbar-add-bottom"),c=getChildrenByAttrSelector(i,"data-column");if(n&&(t.current={componentUid:e,productId:r},n.removeAttribute("style"),n.setAttribute("data-toolbar-active","true"),b({$toolbar:n,$component:i,state:"active"})),l&&l.setAttribute("data-outline-active","true"),d&&d.setAttribute("data-toolbar-add-active","true"),u&&u.setAttribute("data-toolbar-add-active","true"),c&&c.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:i}),s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{E({$component:i})},5e3),p(),w(i,()=>{S({componentUid:e,productId:r,timeAwait:2e3,forceReActive:!0})})},[A,p,y,E]),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"))})}},$=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")},[]),T=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))})}}},L=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(),$(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}),m({$component:l,componentUid:d}))},[$,p,v,m,g,t]),O=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid?S({componentUid:r.componentUid,productId:r.productId}):A()},[S,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?B(!0):B(!1)},[]),x=react.useCallback(t=>{if(e.current)return;let r=t.detail;T({value:r?.value||!1})},[]),I=react.useCallback(t=>{let e=t.detail;e?.value?(p(),o.current=!0):o.current=!1},[p]),P=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")))})},j=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid&&U(r?.componentUid,r?.type)},[e]),F=react.useCallback(t=>{let e=t.detail;e?.isNewUser&&n(!0)},[]),z=react.useCallback(()=>{i&&C()},[i]);return react.useEffect(()=>(document.addEventListener("mousemove",L),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",x),window.addEventListener("editor:toolbar:resize-spacing",I),window.addEventListener("editor:toolbar:resize-column",P),window.addEventListener("editor:hover-component",j),window.addEventListener("editor:toolbar-onboarding",F),window.addEventListener("resize",z),()=>{document.removeEventListener("mousemove",L),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",x),window.removeEventListener("editor:toolbar:resize-spacing",I),window.removeEventListener("editor:toolbar:resize-column",P),window.removeEventListener("editor:hover-component",j),window.removeEventListener("editor:toolbar-onboarding",F),window.removeEventListener("resize",z)}),[L,O,k,R,q,x,I,P,j,F,z]),i&&jsxRuntime.jsx(Onboarding.default,{enable:!0,position:u,onCloseOnboarding:h})};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},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},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")}},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"),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")},[]),m=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});f({$component:t,$parents:r})}},[v]),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))}),B(!1),r.current&&r.current.disconnect(),h()},[h]),w=(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}))},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 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");let i=e.paddingLeft,n=`-${i}`,l=`translate(${n}, -100%)`;t.style.left=n,r.style.transform=l}}},[]),C=()=>{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))},E=react.useCallback(({$component:t})=>{if(!t||isSection(t)||isPopup(t)||isSticky(t))return;let e=document.querySelector("[data-toolbar-onboarding]");0==l?C():(h(),e?.removeAttribute("data-onboarding-active"))},[l,h]),S=react.useCallback(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||A();let n=getChildrenByAttrSelector(i,"data-toolbar"),l=getChildrenByAttrSelector(i,"data-outline"),d=getChildrenByAttrSelector(i,"data-toolbar-add-top"),u=getChildrenByAttrSelector(i,"data-toolbar-add-bottom"),c=getChildrenByAttrSelector(i,"data-column");if(n&&(t.current={componentUid:e,productId:r},n.removeAttribute("style"),n.setAttribute("data-toolbar-active","true"),b({$toolbar:n,$component:i,state:"active"})),l&&l.setAttribute("data-outline-active","true"),d&&d.setAttribute("data-toolbar-add-active","true"),u&&u.setAttribute("data-toolbar-add-active","true"),c&&c.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:i}),s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{E({$component:i})},5e3),p(),w(i,()=>{S({componentUid:e,productId:r,timeAwait:2e3,forceReActive:!0})})},[A,p,y,E]),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"))})}},$=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")},[]),T=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))})}}},L=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(),$(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}),m({$component:l,componentUid:d}))},[$,p,v,m,g,t]),O=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid?S({componentUid:r.componentUid,productId:r.productId}):A()},[S,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?B(!0):B(!1)},[]),x=react.useCallback(t=>{if(e.current)return;let r=t.detail;T({value:r?.value||!1})},[]),I=react.useCallback(t=>{let e=t.detail;e?.value?(p(),o.current=!0):o.current=!1},[p]),P=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")))})},j=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid&&U(r?.componentUid,r?.type)},[e]),F=react.useCallback(t=>{let e=t.detail;e?.isNewUser&&n(!0)},[]),z=react.useCallback(()=>{i&&C()},[i]);return react.useEffect(()=>(document.addEventListener("mousemove",L),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",x),window.addEventListener("editor:toolbar:resize-spacing",I),window.addEventListener("editor:toolbar:resize-column",P),window.addEventListener("editor:hover-component",j),window.addEventListener("editor:toolbar-onboarding",F),window.addEventListener("resize",z),()=>{document.removeEventListener("mousemove",L),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",x),window.removeEventListener("editor:toolbar:resize-spacing",I),window.removeEventListener("editor:toolbar:resize-column",P),window.removeEventListener("editor:hover-component",j),window.removeEventListener("editor:toolbar-onboarding",F),window.removeEventListener("resize",z)}),[L,O,k,R,q,x,I,P,j,F,z]),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";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",Toolbox=()=>{let e=core.useMatchMutate(),t=core.useShopStore(e=>e.provider),o=core.useShopStore(e=>e.changeStorefrontInfo),r=core.usePageStore(e=>e.setDynamicProduct),a=core.usePageStore(e=>e.setDynamicCollection),n=core.useBuilderPreviewStore(e=>e.initState),i=core.useBuilderPreviewStore(e=>e.state),d=core.useBuilderPreviewStore(e=>e.forceChangeState),l=core.useBuilderPreviewStore(e=>e.forceChangeItemProp),s=core.useBuilderPreviewStore(e=>e.changeItemPropByKey),c=core.useBuilderPreviewStore(e=>e.addItem),u=core.useBuilderPreviewStore(e=>e.moveItem),m=core.useBuilderPreviewStore(e=>e.removeItem),p=core.useSectionStore(e=>e.addSection),v=core.useShopStore(e=>e.changeSwatches),w=core.useBuilderPreviewStore(e=>e.updateItemName),f=core.useShopStore(e=>e.changeLayoutSettings),y=core.useShopStore(e=>e.changeCreateThemeSectionCount),
|
|
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",Toolbox=()=>{let e=core.useMatchMutate(),t=core.useShopStore(e=>e.provider),o=core.useShopStore(e=>e.changeStorefrontInfo),r=core.usePageStore(e=>e.setDynamicProduct),a=core.usePageStore(e=>e.setDynamicCollection),n=core.useBuilderPreviewStore(e=>e.initState),i=core.useBuilderPreviewStore(e=>e.state),d=core.useBuilderPreviewStore(e=>e.forceChangeState),l=core.useBuilderPreviewStore(e=>e.forceChangeItemProp),s=core.useBuilderPreviewStore(e=>e.changeItemPropByKey),c=core.useBuilderPreviewStore(e=>e.addItem),u=core.useBuilderPreviewStore(e=>e.moveItem),m=core.useBuilderPreviewStore(e=>e.removeItem),p=core.useSectionStore(e=>e.addSection),v=core.useShopStore(e=>e.changeSwatches),w=core.useBuilderPreviewStore(e=>e.updateItemName),f=core.useShopStore(e=>e.changeLayoutSettings),y=core.useShopStore(e=>e.changeCreateThemeSectionCount),h=core.useShopStore(e=>e.changeShopPlan),g=core.useModalStore(e=>e.clearModal),S=react.useMemo(()=>genFonts.getFontsFromDataBuilder(i),[i]),b=(e,t)=>{if(!t?.length){let t=document.querySelectorAll(`.${e}`);t.forEach(e=>{e.remove()});return}let o=document.querySelectorAll(`.${e}`);for(let r of(o.forEach(e=>{let o=e.getAttribute("data-font"),r=e.getAttribute("data-font-variant");if(o&&r){let a=t.find(e=>e.family==o&&e.variants.includes(r));a||e.remove()}else e.remove()}),t))if("custom"!==r.type&&r.variants?.length)for(let t of r.variants){let o=JSON.parse(JSON.stringify(r));o.variants=[t];let a=o.family,n=googleFonts.createFontUrl([o]);if(n){let o=document.querySelector(`.${e}[data-font="${a}"][data-font-variant="${t}"]`);if(o)continue;{let o=document.createElement("link");o.className=e,o.dataset.font=a,o.dataset.fontVariant=t,o.href=n,o.rel="stylesheet",document.head.appendChild(o)}}}},E=react.useCallback(()=>{e(/query\//,{revalidate:!0})},[e]),L=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=document.getElementById(globalStyleId);if(b("google-font-builder",o),r)r.innerHTML=e;else{let t=document.createElement("style");t.id=globalStyleId,t.innerHTML=e,document.head.appendChild(t)}}}catch{}},[]),k=react.useCallback(e=>{g();try{let t=e.detail;t.data&&("flat"===t.type?d(t.data):n(t.data))}catch{}},[d,n,g]),P=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)||p(t.entity.uid,t.entity))}catch{}},[c,p]),q=react.useCallback(e=>{try{let t=e.detail;t.uid&&t.propName&&s({id:t.uid,key:t.propName,data:t.propValue,group:t.group})}catch{}},[s]),B=react.useCallback(e=>{try{let t=e.detail;t.uid&&l(t.uid,t.data,t.group)}catch{}},[l]),j=react.useCallback(e=>{try{let t=e.detail;t.to&&t.uid&&u(t.uid,t.to,Number(t.position)??0)}catch{}},[u]),x=react.useCallback(e=>{try{let t=e.detail;t.uid&&m(t.uid)}catch{}},[m]),I=react.useCallback(e=>{let t=e.detail;try{t.data&&v(t.data)}catch{}},[v]),F=react.useCallback(e=>{let t=e.detail;t&&f(t)},[f]),A=react.useCallback(e=>{let t=e.detail;t&&y(t)},[y]),M=react.useCallback(e=>{let t=e.detail;t&&h(t)},[h]),N=react.useCallback(e=>{let t=e.detail;t&&r(t)},[r]),T=react.useCallback(e=>{let t=e.detail;t&&a(t)},[a]);react.useEffect(()=>{S&&b("google-font-element",S)},[S]);let $=react.useCallback(e=>{let t=e.detail;t.uid&&w(t.uid,t.name||"")},[w]);return react.useEffect(()=>{S&&b("google-font-element",S)},[S]),react.useEffect(()=>(window.addEventListener("update-shop-info",L),window.addEventListener("revalidate-query",E),window.addEventListener("init-builder",k),window.addEventListener("add-entity",P),window.addEventListener("remove-entity",x),window.addEventListener("move-entity",j),window.addEventListener("force-update-entity-props",B),window.addEventListener("update-entity-prop",q),window.addEventListener("set-global-style",C),window.addEventListener("update-global-swatches-data",I),window.addEventListener("on-off-header-footer",F),window.addEventListener("update-create-theme-section-count",A),window.addEventListener("update-shop-plan",M),window.addEventListener("set-dynamic-product",N),window.addEventListener("set-dynamic-collection",T),window.addEventListener("update-item-name",$),()=>{window.removeEventListener("update-shop-info",L),window.removeEventListener("revalidate-query",E),window.removeEventListener("init-builder",k),window.removeEventListener("add-entity",P),window.removeEventListener("remove-entity",x),window.removeEventListener("move-entity",j),window.removeEventListener("update-entity-prop",q),window.removeEventListener("set-global-style",C),window.removeEventListener("update-global-swatches-data",I),window.removeEventListener("on-off-header-footer",F),window.removeEventListener("update-create-theme-section-count",A),window.removeEventListener("update-shop-plan",M),window.removeEventListener("set-dynamic-product",N),window.removeEventListener("set-dynamic-collection",T),window.removeEventListener("update-item-name",$)}),[P,M,B,q,k,j,x,C,I,E,L,F,A,N,T,$]),jsxRuntime.jsx("div",{className:"toolbox"})};var Toolbox$1=react.memo(Toolbox);exports.default=Toolbox$1;
|
|
@@ -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";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},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},Toolbar=()=>{let e=r(null),l=r(!1),d=r(),u=r(!1),c=r(!1),[s,b]=o(!1),[v,m]=o(0),[f,g]=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),v>0){let t=new CustomEvent("editor:toolbar:close-onboarding",{bubbles:!0,detail:{close:"close Onboarding"}});window.dispatchEvent(t),b(!1)}},[v]),B=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.disconnect(),C()},[C]),$=(t,e)=>{let r=t.parentNode;r&&(d.current&&d.current.disconnect(),d.current=new MutationObserver(r=>{for(let o of r)o.removedNodes.forEach(r=>{r===t&&(d.current&&d.current.disconnect(),e())})}),d.current.observe(r,{childList:!0}))},T=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 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")}}},[]),L=()=>{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;`),g("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;`),g("bottom")}m(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==v?L():(C(),e?.removeAttribute("data-onboarding-active"))},[v,C]),q=a(async({componentUid:t,productId:r,timeAwait:o=500,forceReActive:a})=>{if(!t)return;let i=await waitForElementToExist(`${r?`[data-product-id="${r}"] `:""}[data-uid="${t}"]`,o);if(!i||!a&&t==e.current?.componentUid&&r==e.current?.productId)return;(a||t===e.current?.componentUid)&&r===e.current?.productId||B();let n=getChildrenByAttrSelector(i,"data-toolbar"),l=getChildrenByAttrSelector(i,"data-outline"),d=getChildrenByAttrSelector(i,"data-toolbar-add-top"),u=getChildrenByAttrSelector(i,"data-toolbar-add-bottom"),c=getChildrenByAttrSelector(i,"data-column");if(n&&(e.current={componentUid:t,productId:r},n.removeAttribute("style"),n.setAttribute("data-toolbar-active","true"),h({$toolbar:n,$component:i,state:"active"})),l&&l.setAttribute("data-outline-active","true"),d&&d.setAttribute("data-toolbar-add-active","true"),u&&u.setAttribute("data-toolbar-add-active","true"),c&&c.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")})}T({$component:i}),p.current&&clearTimeout(p.current),p.current=setTimeout(()=>{O({$component:i})},5e3),S(),$(i,()=>{q({componentUid:t,productId:r,timeAwait:2e3,forceReActive:!0})})},[B,S,T,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"))})}},R=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))})}}},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(),R(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}))},[R,S,A,w,E,e]),P=a(t=>{if(l.current)return;let e=t.detail;e?.componentUid?q({componentUid:e.componentUid,productId:e.productId}):B()},[q,B,l]),F=a(()=>{S()},[S]),k=a(t=>{let e=t.detail;e.value&&(S(),B()),l.current=e.value},[S,B]),z=a(t=>{let e=t.detail;e.value?I(!0):I(!1)},[]),H=a(t=>{if(l.current)return;let e=t.detail;x({value:e?.value||!1})},[]),j=a(t=>{let e=t.detail;e?.value?(S(),u.current=!0):u.current=!1},[S]),D=a(t=>{let e=t.detail;e?.value?(S(),c.current=!0):c.current=!1},[S]),N=(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")))})},V=a(t=>{if(l.current)return;let e=t.detail;e?.componentUid&&N(e?.componentUid,e?.type)},[l]),_=a(t=>{let e=t.detail;e?.isNewUser&&b(!0)},[]),M=a(()=>{s&&L()},[s]);return i(()=>(document.addEventListener("mousemove",U),window.addEventListener("editor:active-component",P),window.addEventListener("editor:focus-outside-preview",F),window.addEventListener("editor:is-dragging",k),window.addEventListener("editor:is-editing-text-editor",z),window.addEventListener("editor:toolbar:show-parents",H),window.addEventListener("editor:toolbar:resize-spacing",j),window.addEventListener("editor:toolbar:resize-column",D),window.addEventListener("editor:hover-component",V),window.addEventListener("editor:toolbar-onboarding",_),window.addEventListener("resize",M),()=>{document.removeEventListener("mousemove",U),window.removeEventListener("editor:active-component",P),window.removeEventListener("editor:is-dragging",F),window.removeEventListener("editor:is-dragging",k),window.removeEventListener("editor:is-editing-text-editor",z),window.removeEventListener("editor:toolbar:show-parents",H),window.removeEventListener("editor:toolbar:resize-spacing",j),window.removeEventListener("editor:toolbar:resize-column",D),window.removeEventListener("editor:hover-component",V),window.removeEventListener("editor:toolbar-onboarding",_),window.removeEventListener("resize",M)}),[U,P,F,k,z,H,j,D,V,_,M]),s&&t(n,{enable:!0,position:f,onCloseOnboarding:C})};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},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},Toolbar=()=>{let e=r(null),l=r(!1),d=r(),u=r(!1),c=r(!1),[s,b]=o(!1),[v,m]=o(0),[f,g]=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),v>0){let t=new CustomEvent("editor:toolbar:close-onboarding",{bubbles:!0,detail:{close:"close Onboarding"}});window.dispatchEvent(t),b(!1)}},[v]),B=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.disconnect(),C()},[C]),$=(t,e)=>{let r=t.parentNode;r&&(d.current&&d.current.disconnect(),d.current=new MutationObserver(r=>{for(let o of r)o.removedNodes.forEach(r=>{r===t&&(d.current&&d.current.disconnect(),e())})}),d.current.observe(r,{childList:!0}))},T=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 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");let i=e.paddingLeft,n=`-${i}`,l=`translate(${n}, -100%)`;t.style.left=n,r.style.transform=l}}},[]),L=()=>{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;`),g("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;`),g("bottom")}m(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==v?L():(C(),e?.removeAttribute("data-onboarding-active"))},[v,C]),q=a(async({componentUid:t,productId:r,timeAwait:o=500,forceReActive:a})=>{if(!t)return;let i=await waitForElementToExist(`${r?`[data-product-id="${r}"] `:""}[data-uid="${t}"]`,o);if(!i||!a&&t==e.current?.componentUid&&r==e.current?.productId)return;(a||t===e.current?.componentUid)&&r===e.current?.productId||B();let n=getChildrenByAttrSelector(i,"data-toolbar"),l=getChildrenByAttrSelector(i,"data-outline"),d=getChildrenByAttrSelector(i,"data-toolbar-add-top"),u=getChildrenByAttrSelector(i,"data-toolbar-add-bottom"),c=getChildrenByAttrSelector(i,"data-column");if(n&&(e.current={componentUid:t,productId:r},n.removeAttribute("style"),n.setAttribute("data-toolbar-active","true"),h({$toolbar:n,$component:i,state:"active"})),l&&l.setAttribute("data-outline-active","true"),d&&d.setAttribute("data-toolbar-add-active","true"),u&&u.setAttribute("data-toolbar-add-active","true"),c&&c.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")})}T({$component:i}),p.current&&clearTimeout(p.current),p.current=setTimeout(()=>{O({$component:i})},5e3),S(),$(i,()=>{q({componentUid:t,productId:r,timeAwait:2e3,forceReActive:!0})})},[B,S,T,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"))})}},R=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))})}}},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(),R(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}))},[R,S,A,w,E,e]),P=a(t=>{if(l.current)return;let e=t.detail;e?.componentUid?q({componentUid:e.componentUid,productId:e.productId}):B()},[q,B,l]),F=a(()=>{S()},[S]),k=a(t=>{let e=t.detail;e.value&&(S(),B()),l.current=e.value},[S,B]),z=a(t=>{let e=t.detail;e.value?I(!0):I(!1)},[]),H=a(t=>{if(l.current)return;let e=t.detail;x({value:e?.value||!1})},[]),j=a(t=>{let e=t.detail;e?.value?(S(),u.current=!0):u.current=!1},[S]),D=a(t=>{let e=t.detail;e?.value?(S(),c.current=!0):c.current=!1},[S]),N=(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")))})},V=a(t=>{if(l.current)return;let e=t.detail;e?.componentUid&&N(e?.componentUid,e?.type)},[l]),_=a(t=>{let e=t.detail;e?.isNewUser&&b(!0)},[]),M=a(()=>{s&&L()},[s]);return i(()=>(document.addEventListener("mousemove",U),window.addEventListener("editor:active-component",P),window.addEventListener("editor:focus-outside-preview",F),window.addEventListener("editor:is-dragging",k),window.addEventListener("editor:is-editing-text-editor",z),window.addEventListener("editor:toolbar:show-parents",H),window.addEventListener("editor:toolbar:resize-spacing",j),window.addEventListener("editor:toolbar:resize-column",D),window.addEventListener("editor:hover-component",V),window.addEventListener("editor:toolbar-onboarding",_),window.addEventListener("resize",M),()=>{document.removeEventListener("mousemove",U),window.removeEventListener("editor:active-component",P),window.removeEventListener("editor:is-dragging",F),window.removeEventListener("editor:is-dragging",k),window.removeEventListener("editor:is-editing-text-editor",z),window.removeEventListener("editor:toolbar:show-parents",H),window.removeEventListener("editor:toolbar:resize-spacing",j),window.removeEventListener("editor:toolbar:resize-column",D),window.removeEventListener("editor:hover-component",V),window.removeEventListener("editor:toolbar-onboarding",_),window.removeEventListener("resize",M)}),[U,P,F,k,z,H,j,D,V,_,M]),s&&t(n,{enable:!0,position:f,onCloseOnboarding:C})};var Toolbar$1=e(Toolbar);export{Toolbar$1 as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{useMatchMutate as t,useShopStore as n,usePageStore as o,useBuilderPreviewStore as i,useSectionStore as a,useModalStore as d}from"@gem-sdk/core";import{memo as r,useMemo as l,useCallback as s,useEffect as m}from"react";import{getStorefrontApi as c}from"../../libs/get-storefront-api.js";import{createFontUrl as p}from"../../libs/google-fonts.js";import{genCSS as v}from"../../libs/helpers/gen-css.js";import{getFontsFromDataBuilder as u}from"../../libs/helpers/gen-fonts.js";import{shopifyCdnWithGoogleFonts as w}from"../../libs/shopify-cdn-with-google-fonts.js";let globalStyleId="global-style",Toolbox=()=>{let r=t(),y=n(e=>e.provider),f=n(e=>e.changeStorefrontInfo),h=o(e=>e.setDynamicProduct),g=o(e=>e.setDynamicCollection),E=i(e=>e.initState),L=i(e=>e.state),b=i(e=>e.forceChangeState),S=i(e=>e.forceChangeItemProp),I=i(e=>e.changeItemPropByKey),N=i(e=>e.addItem),T=i(e=>e.moveItem),j=i(e=>e.removeItem),x=a(e=>e.addSection),C=n(e=>e.changeSwatches),$=i(e=>e.updateItemName),q=n(e=>e.changeLayoutSettings),A=n(e=>e.changeCreateThemeSectionCount),k=n(e=>e.changeShopPlan),H=d(e=>e.clearModal),O=l(()=>u(L),[L]),P=(e,t)=>{if(!t?.length){let t=document.querySelectorAll(`.${e}`);t.forEach(e=>{e.remove()});return}let n=document.querySelectorAll(`.${e}`);for(let o of(n.forEach(e=>{let n=e.getAttribute("data-font"),o=e.getAttribute("data-font-variant");if(n&&o){let i=t.find(e=>e.family==n&&e.variants.includes(o));i||e.remove()}else e.remove()}),t))if("
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useMatchMutate as t,useShopStore as n,usePageStore as o,useBuilderPreviewStore as i,useSectionStore as a,useModalStore as d}from"@gem-sdk/core";import{memo as r,useMemo as l,useCallback as s,useEffect as m}from"react";import{getStorefrontApi as c}from"../../libs/get-storefront-api.js";import{createFontUrl as p}from"../../libs/google-fonts.js";import{genCSS as v}from"../../libs/helpers/gen-css.js";import{getFontsFromDataBuilder as u}from"../../libs/helpers/gen-fonts.js";import{shopifyCdnWithGoogleFonts as w}from"../../libs/shopify-cdn-with-google-fonts.js";let globalStyleId="global-style",Toolbox=()=>{let r=t(),y=n(e=>e.provider),f=n(e=>e.changeStorefrontInfo),h=o(e=>e.setDynamicProduct),g=o(e=>e.setDynamicCollection),E=i(e=>e.initState),L=i(e=>e.state),b=i(e=>e.forceChangeState),S=i(e=>e.forceChangeItemProp),I=i(e=>e.changeItemPropByKey),N=i(e=>e.addItem),T=i(e=>e.moveItem),j=i(e=>e.removeItem),x=a(e=>e.addSection),C=n(e=>e.changeSwatches),$=i(e=>e.updateItemName),q=n(e=>e.changeLayoutSettings),A=n(e=>e.changeCreateThemeSectionCount),k=n(e=>e.changeShopPlan),H=d(e=>e.clearModal),O=l(()=>u(L),[L]),P=(e,t)=>{if(!t?.length){let t=document.querySelectorAll(`.${e}`);t.forEach(e=>{e.remove()});return}let n=document.querySelectorAll(`.${e}`);for(let o of(n.forEach(e=>{let n=e.getAttribute("data-font"),o=e.getAttribute("data-font-variant");if(n&&o){let i=t.find(e=>e.family==n&&e.variants.includes(o));i||e.remove()}else e.remove()}),t))if("custom"!==o.type&&o.variants?.length)for(let t of o.variants){let n=JSON.parse(JSON.stringify(o));n.variants=[t];let i=n.family,a=p([n]);if(a){let n=document.querySelector(`.${e}[data-font="${i}"][data-font-variant="${t}"]`);if(n)continue;{let n=document.createElement("link");n.className=e,n.dataset.font=i,n.dataset.fontVariant=t,n.href=a,n.rel="stylesheet",document.head.appendChild(n)}}}},M=s(()=>{r(/query\//,{revalidate:!0})},[r]),B=s(e=>{let t=e.detail;f({url:t.shopHandle?c(t.shopHandle,y):void 0,token:t.shopToken})},[f,y]),D=s(e=>{let t=e.detail;try{if(t.data){let e=v(t.data,t.mobileOnly),n=Object.entries(t.data?.font).map(([,e])=>e).map(e=>{if("custom"==e.type){let t=w.find(t=>t.family==e.family);if(t)return t}return e}),o=document.getElementById(globalStyleId);if(P("google-font-builder",n),o)o.innerHTML=e;else{let t=document.createElement("style");t.id=globalStyleId,t.innerHTML=e,document.head.appendChild(t)}}}catch{}},[]),J=s(e=>{H();try{let t=e.detail;t.data&&("flat"===t.type?b(t.data):E(t.data))}catch{}},[b,E,H]),V=s(e=>{try{let t=e.detail;t.entity&&(N({data:t.entity,id:t.id,position:t.position,type:t.type??"component"}),t?.type!=="section"||Array.isArray(t.entity)||x(t.entity.uid,t.entity))}catch{}},[N,x]),K=s(e=>{try{let t=e.detail;t.uid&&t.propName&&I({id:t.uid,key:t.propName,data:t.propValue,group:t.group})}catch{}},[I]),z=s(e=>{try{let t=e.detail;t.uid&&S(t.uid,t.data,t.group)}catch{}},[S]),F=s(e=>{try{let t=e.detail;t.to&&t.uid&&T(t.uid,t.to,Number(t.position)??0)}catch{}},[T]),G=s(e=>{try{let t=e.detail;t.uid&&j(t.uid)}catch{}},[j]),Q=s(e=>{let t=e.detail;try{t.data&&C(t.data)}catch{}},[C]),R=s(e=>{let t=e.detail;t&&q(t)},[q]),U=s(e=>{let t=e.detail;t&&A(t)},[A]),W=s(e=>{let t=e.detail;t&&k(t)},[k]),X=s(e=>{let t=e.detail;t&&h(t)},[h]),Y=s(e=>{let t=e.detail;t&&g(t)},[g]);m(()=>{O&&P("google-font-element",O)},[O]);let Z=s(e=>{let t=e.detail;t.uid&&$(t.uid,t.name||"")},[$]);return m(()=>{O&&P("google-font-element",O)},[O]),m(()=>(window.addEventListener("update-shop-info",B),window.addEventListener("revalidate-query",M),window.addEventListener("init-builder",J),window.addEventListener("add-entity",V),window.addEventListener("remove-entity",G),window.addEventListener("move-entity",F),window.addEventListener("force-update-entity-props",z),window.addEventListener("update-entity-prop",K),window.addEventListener("set-global-style",D),window.addEventListener("update-global-swatches-data",Q),window.addEventListener("on-off-header-footer",R),window.addEventListener("update-create-theme-section-count",U),window.addEventListener("update-shop-plan",W),window.addEventListener("set-dynamic-product",X),window.addEventListener("set-dynamic-collection",Y),window.addEventListener("update-item-name",Z),()=>{window.removeEventListener("update-shop-info",B),window.removeEventListener("revalidate-query",M),window.removeEventListener("init-builder",J),window.removeEventListener("add-entity",V),window.removeEventListener("remove-entity",G),window.removeEventListener("move-entity",F),window.removeEventListener("update-entity-prop",K),window.removeEventListener("set-global-style",D),window.removeEventListener("update-global-swatches-data",Q),window.removeEventListener("on-off-header-footer",R),window.removeEventListener("update-create-theme-section-count",U),window.removeEventListener("update-shop-plan",W),window.removeEventListener("set-dynamic-product",X),window.removeEventListener("set-dynamic-collection",Y),window.removeEventListener("update-item-name",Z)}),[V,W,z,K,J,F,G,D,Q,M,B,R,U,X,Y,Z]),e("div",{className:"toolbox"})};var Toolbox$1=r(Toolbox);export{Toolbox$1 as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "1.14.0-dev.
|
|
3
|
+
"version": "1.14.0-dev.607",
|
|
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.
|
|
28
|
+
"@gem-sdk/core": "1.14.0-dev.607",
|
|
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"
|