@gem-sdk/pages 1.14.0-dev.324 → 1.14.0-dev.326
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 react=require("react");const TOOLBAR_HOVER_HEIGHT=24,TOOLBAR_ACTIVE_HEIGHT=32,getDOMElementParents=(t,e,r)=>{let o=[];for(;t;)if(t=t.parentElement??void 0){if("BODY"===t.tagName||"ROOT"===t.getAttribute("data-uid"))break;if(e){if(t.matches(e)&&(o.push(t),r&&o.length==r))return o;continue}if(o.push(t),r&&o.length==r)break}return o},getChildrenByAttrSelector=(t,e)=>{let r=t.children.length;if(r)for(let o=0;o<r;o++){let r=t.children[o];if(r){let t=r.getAttribute(e);if(t)return r}}},isOverParent=({current:t,parent:e,index:r,revert:o})=>{for(let a=0;a<r;a++){let r=t.top-23*a>=e.top&&t.top-23*a<=e.top+e.height||t.top-23*a>=e.top+e.height&&t.top-23*a<=e.top;if(o&&(r=t.bottom+23*a>=e.bottom&&t.bottom+23*a<=e.bottom-e.height||t.bottom+23*a>=e.bottom-e.height&&t.bottom+23*a<=e.bottom),r)return!0}return!1},waitForElementToExist=(t,e=200)=>new Promise(r=>{let o=setInterval(()=>{let e=document.querySelector(t);e&&(clearInterval(o),clearTimeout(a),r(e))},50),a=setTimeout(()=>{clearInterval(o),clearTimeout(a),r(null)},e)}),notVisible=t=>{let e=getComputedStyle(t).overflow;return"visible"!==e},isSection=t=>{let e=t.getAttribute("data-component-tag");return"Section"===e},isOverToolbarPosition=(t,e)=>{let r=t.getBoundingClientRect(),o=e.getBoundingClientRect();return r.top-o.top<33},findOverflowParent=(t,e)=>{let r=e||t;if(t&&!isSection(t))return notVisible(t)&&isOverToolbarPosition(e,t)?t:t.parentElement?findOverflowParent(t.parentElement,r):void 0},Toolbar=()=>{let t=react.useRef(null),e=react.useRef(!1),r=react.useRef(),o=react.useRef(!1),a=({state:t,$toolbar:e,$component:r})=>{let o=findOverflowParent(r,e);if(o){let o=r.getBoundingClientRect();o?.height>=60?e.setAttribute(`data-toolbar-${t}-inside`,"true"):e.setAttribute(`data-toolbar-${t}-revert`,"true")}else{let r=e.getBoundingClientRect();r.top<33&&(r?.height>=60?e.setAttribute(`data-toolbar-${t}-inside`,"true"):e.setAttribute(`data-toolbar-${t}-revert`,"true"))}},i=react.useCallback(({$component:t,componentUid:e,focus:r,isThemeSection:o})=>{if(!t&&!e)return;if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}if(!e){let r=t.getAttribute("data-uid");if(!r)return;e=r}let i=getChildrenByAttrSelector(t,"data-toolbar"),n=getChildrenByAttrSelector(t,"data-outline"),l=getChildrenByAttrSelector(t,"data-toolbar-add-top"),d=getChildrenByAttrSelector(t,"data-toolbar-add-bottom"),u=getChildrenByAttrSelector(t,"data-theme-section-status");o&&u&&u.setAttribute("data-theme-section-status-active","true"),i&&(i.removeAttribute("style"),i.setAttribute("data-toolbar-hover","true"),r&&i.setAttribute("data-toolbar-hover-focus","true"),a({$toolbar:i,$component:t,state:"hover"})),n&&(n.setAttribute("data-outline-hover","true"),o&&n.setAttribute("data-outline-overlay-theme-section","true"),r&&n.setAttribute("data-outline-hover-focus","true")),l&&l.setAttribute("data-toolbar-add-hover","true"),d&&d.setAttribute("data-toolbar-add-hover","true")},[]),n=react.useCallback(({$component:t,componentUid:e})=>{if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}let r=getDOMElementParents(t,'[data-uid][data-component-type="component"]:not([data-component-no-setting])');if(r.length){for(let t of r)t&&i({$component:t});l({$component:t,$parents:r})}},[i]),l=({$component:t,$parents:e})=>{if(!t||!e?.length)return;let r=getChildrenByAttrSelector(t,"data-toolbar-hover-focus");if(r){let t=r.getBoundingClientRect(),o=!!r.getAttribute("data-toolbar-hover-revert"),a=!!r.getAttribute("data-toolbar-hover-inside"),i=1;for(let r of e)if(r){let e=r.getAttribute("data-component-tag");if("Section"===e)continue;let n=getChildrenByAttrSelector(r,"data-toolbar-hover");if(n){let e=n.getAttribute("data-toolbar-active");if(e)continue;let r=n.getBoundingClientRect(),l=o||a;if(isOverParent({current:t,parent:r,index:i,revert:l})){let e=getComputedStyle(n),o=t.top-r.top,a=t.left-r.left,d=parseFloat(e.top)+o-23*i;l&&(d=parseFloat(e.top)-o+23*i);let u=parseFloat(e.left)+a;n.setAttribute("style",`top: ${d}px;left: ${u}px;`),i++}}}}},d=react.useCallback(()=>{let t=["data-outline-overlay","data-outline-overlay-theme-section","data-theme-section-status-active"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))})},[]),u=react.useCallback(()=>{let t=["data-toolbar-hover-focus","data-toolbar-hover","data-outline-hover-focus","data-toolbar-hover-revert","data-outline-hover","data-toolbar-add-hover"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))}),d()},[d]),c=react.useCallback(()=>{t.current=null;let e=["data-toolbar-active","data-outline-active","data-toolbar-add-active","data-toolbar-active-revert","data-spacing-margin-bottom-active","data-toolbar-force-hover","data-outline-force-hover"],o=document.querySelectorAll(e.map(t=>`[${t}]`).join(","));o&&e.forEach(t=>{o.forEach(e=>e.removeAttribute(t))}),m(!1),r.current&&r.current.disconnect()},[]),s=(t,e)=>{let o=t.parentNode;o&&(r.current&&r.current.disconnect(),r.current=new MutationObserver(o=>{for(let a of o)a.removedNodes.forEach(o=>{o===t&&(r.current&&r.current.disconnect(),e())})}),r.current.observe(o,{childList:!0}))},b=react.useCallback(({$component:t})=>{if(!t)return;let e=getComputedStyle(t),r=getChildrenByAttrSelector(t,"data-spacing"),o=r?.querySelector("[data-spacing-margin-bottom]")||null;if(o){let t=o.querySelector("[data-spacing-margin-bottom-bg]")||null,r=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(t&&r){let a=e.marginBottom;t.style.height=a,r.style.top=a,o.setAttribute("data-spacing-margin-bottom-active","true")}}},[]),v=(t,e)=>{let r=t.closest('[data-toolbar-wrap][data-component-tag="Section"]');if(r){if(e){let t=getChildrenByAttrSelector(r,"data-toolbar"),e=getChildrenByAttrSelector(r,"data-outline");t&&t.setAttribute("data-toolbar-force-hover","true"),e&&e.setAttribute("data-outline-force-hover","true")}else{let t=getChildrenByAttrSelector(r,"data-toolbar"),e=getChildrenByAttrSelector(r,"data-outline");t&&t.removeAttribute("data-toolbar-force-hover"),e&&e.removeAttribute("data-outline-force-hover")}}},f=react.useCallback(async({componentUid:e,productId:r,timeAwait:o=500,forceReActive:i})=>{if(!e)return;let n=await waitForElementToExist(`${r?`[data-product-id="${r}"] `:""}[data-uid="${e}"]`,o);if(!n||!i&&e==t.current?.componentUid&&r==t.current?.productId)return;(i||e===t.current?.componentUid)&&r===t.current?.productId||c();let l=getChildrenByAttrSelector(n,"data-toolbar"),d=getChildrenByAttrSelector(n,"data-outline"),m=getChildrenByAttrSelector(n,"data-toolbar-add-top"),g=getChildrenByAttrSelector(n,"data-toolbar-add-bottom");if(l&&(t.current={componentUid:e,productId:r},l.removeAttribute("style"),l.setAttribute("data-toolbar-active","true"),a({$toolbar:l,$component:n,state:"active"})),d&&d.setAttribute("data-outline-active","true"),m&&m.setAttribute("data-toolbar-add-active","true"),g&&g.setAttribute("data-toolbar-add-active","true"),r){let t=document.querySelectorAll(`[data-uid="${e}"]`);t?.length&&t.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&e.setAttribute("data-outline-active","true")})}b({$component:n}),v(n,!0),u(),s(n,()=>{f({componentUid:e,productId:r,timeAwait:2e3,forceReActive:!0})})},[c,u,b]),m=async e=>{if(e){if(t.current?.componentUid){let r=t.current?.componentUid,o=t.current?.productId,a=await waitForElementToExist(`${o?`[data-product-id="${o}"] `:""}[data-uid="${r}"]`,500);if(a){let t=getChildrenByAttrSelector(a,"data-toolbar"),r=getChildrenByAttrSelector(a,"data-outline"),o=getChildrenByAttrSelector(a,"data-spacing");t&&e&&t.setAttribute("data-toolbar-editor-inline-focus","true"),r&&e&&r.setAttribute("data-outline-editor-inline-focus","true"),o&&e&&o.setAttribute("data-spacing-hidden","true")}}}else{let t=document.querySelectorAll("[data-outline-editor-inline-focus],[data-toolbar-editor-inline-focus],[data-spacing-hidden]");t.length&&t.forEach(t=>{t&&(t.removeAttribute("data-toolbar-editor-inline-focus"),t.removeAttribute("data-outline-editor-inline-focus"),t.removeAttribute("data-spacing-hidden"))})}},g=react.useCallback(e=>{let r=e.closest("[data-theme-section]"),o=r?.getAttribute("data-uid"),a=r&&o===t.current?.componentUid;if(!a)return;let i=getChildrenByAttrSelector(r,"data-theme-section-status");i&&i.setAttribute("data-theme-section-status-active","true")},[]),h=async({value:e})=>{if(!e)return;let r=await waitForElementToExist(`${t.current?.productId?`[data-product-id="${t.current?.productId}"] `:""}[data-uid="${t.current?.componentUid}"]`,500);if(r){let e=r?.querySelectorAll("[data-toolbar-parent]");if(e.length){let r=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.setAttribute("data-outline-force-hover","true"),e.setAttribute("data-outline-force-overlay","true"))})},o=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.removeAttribute("data-outline-force-hover"),e.removeAttribute("data-outline-force-overlay"))})},a=async e=>{let r=e.getAttribute("data-parent-uid");if(!r)return;let a=async()=>{let t=await waitForElementToExist(`[data-uid="${r}"]`,500),e=t?.closest("[data-product-id]"),o=e?.getAttribute("data-product-id")||"";return!!o},i="";await a()&&(i=t.current?.productId||"");let n=new CustomEvent("editor:toolbar:force-active-component",{bubbles:!0,detail:{componentUid:r,productId:i}});o(e),window.dispatchEvent(n)};e.forEach(t=>{t.addEventListener("mouseover",()=>r(t)),t.addEventListener("mouseout",()=>o(t)),t.addEventListener("click",()=>a(t))})}}},p=react.useCallback(r=>{if(e.current||o.current)return;let a=r.target;if(!a){d();return}let l=a.closest("[data-toolbar-hover]");if(l)return;let c=a.closest("[data-toolbar-wrap]"),s=c?.getAttribute("data-uid");if(!c||!s||"ROOT"==s){u();return}let b=getChildrenByAttrSelector(c,"data-toolbar"),v=getChildrenByAttrSelector(c,"data-outline");if(v&&v.removeAttribute("data-outline-overlay"),!s||"ROOT"==s||b?.getAttribute("data-toolbar-hover-focus"))return;if(b?.getAttribute("data-toolbar-hover-focus")||u(),g(a),s==t.current?.componentUid){if(t.current.productId){let e=c.closest("[data-product-id]");if(e){let r=e.getAttribute("data-product-id");if(r==t.current.productId)return}}let e=a.closest("[data-theme-section]");if(!e)return;i({$component:e,focus:!0,isThemeSection:!0})}let f=a.closest("[data-theme-section]");f?i({$component:f,focus:!0,isThemeSection:!0}):(i({$component:c,componentUid:s,focus:!0}),n({$component:c,componentUid:s}))},[g,u,i,n,d,t]),A=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid?f({componentUid:r.componentUid,productId:r.productId}):c()},[f,c,e]),y=react.useCallback(()=>{u()},[u]),C=react.useCallback(t=>{let r=t.detail;r.value&&(u(),c()),e.current=r.value},[u,c]),E=react.useCallback(t=>{let e=t.detail;e.value?m(!0):m(!1)},[]),S=react.useCallback(t=>{if(e.current)return;let r=t.detail;h({value:r?.value||!1})},[]),w=react.useCallback(t=>{let e=t.detail;e?.value?(u(),o.current=!0):o.current=!1},[u]);return react.useEffect(()=>(document.addEventListener("mousemove",p),window.addEventListener("editor:active-component",A),window.addEventListener("editor:focus-outside-preview",y),window.addEventListener("editor:is-dragging",C),window.addEventListener("editor:is-editing-text-editor",E),window.addEventListener("editor:toolbar:show-parents",S),window.addEventListener("editor:toolbar:resize-spacing",w),()=>{document.removeEventListener("mousemove",p),window.removeEventListener("editor:active-component",A),window.removeEventListener("editor:is-dragging",y),window.removeEventListener("editor:is-dragging",C),window.removeEventListener("editor:is-editing-text-editor",E),window.removeEventListener("editor:toolbar:show-parents",S),window.removeEventListener("editor:toolbar:resize-spacing",w)}),[p,A,y,C,E,S,w]),null};var Toolbar$1=react.memo(Toolbar);exports.default=Toolbar$1;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react=require("react");const TOOLBAR_HOVER_HEIGHT=24,TOOLBAR_ACTIVE_HEIGHT=32,getDOMElementParents=(t,e,r)=>{let o=[];for(;t;)if(t=t.parentElement??void 0){if("BODY"===t.tagName||"ROOT"===t.getAttribute("data-uid"))break;if(e){if(t.matches(e)&&(o.push(t),r&&o.length==r))return o;continue}if(o.push(t),r&&o.length==r)break}return o},getChildrenByAttrSelector=(t,e)=>{let r=t.children.length;if(r)for(let o=0;o<r;o++){let r=t.children[o];if(r){let t=r.getAttribute(e);if(t)return r}}},isOverParent=({current:t,parent:e,index:r,revert:o})=>{for(let a=0;a<r;a++){let r=t.top-23*a>=e.top&&t.top-23*a<=e.top+e.height||t.top-23*a>=e.top+e.height&&t.top-23*a<=e.top;if(o&&(r=t.bottom+23*a>=e.bottom&&t.bottom+23*a<=e.bottom-e.height||t.bottom+23*a>=e.bottom-e.height&&t.bottom+23*a<=e.bottom),r)return!0}return!1},waitForElementToExist=(t,e=200)=>new Promise(r=>{let o=setInterval(()=>{let e=document.querySelector(t);e&&(clearInterval(o),clearTimeout(a),r(e))},50),a=setTimeout(()=>{clearInterval(o),clearTimeout(a),r(null)},e)}),notVisible=t=>{let e=getComputedStyle(t).overflow;return"visible"!==e},isSection=t=>{let e=t.getAttribute("data-component-tag");return"Section"===e},isOverToolbarPosition=(t,e)=>{let r=t.getBoundingClientRect(),o=e.getBoundingClientRect();return r.top-o.top<33},findOverflowParent=(t,e)=>{let r=e||t;if(t&&!isSection(t))return notVisible(t)&&isOverToolbarPosition(e,t)?t:t.parentElement?findOverflowParent(t.parentElement,r):void 0},Toolbar=()=>{let t=react.useRef(null),e=react.useRef(!1),r=react.useRef(),o=react.useRef(!1),a=({state:t,$toolbar:e,$component:r})=>{let o=findOverflowParent(r,e);if(o){let o=r.getBoundingClientRect();o?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true")}else{let o=e.getBoundingClientRect(),a=r.getBoundingClientRect();o.top<33&&(a?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true"))}},i=react.useCallback(({$component:t,componentUid:e,focus:r,isThemeSection:o})=>{if(!t&&!e)return;if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}if(!e){let r=t.getAttribute("data-uid");if(!r)return;e=r}let i=getChildrenByAttrSelector(t,"data-toolbar"),n=getChildrenByAttrSelector(t,"data-outline"),l=getChildrenByAttrSelector(t,"data-toolbar-add-top"),d=getChildrenByAttrSelector(t,"data-toolbar-add-bottom"),u=getChildrenByAttrSelector(t,"data-theme-section-status");o&&u&&u.setAttribute("data-theme-section-status-active","true"),i&&(i.removeAttribute("style"),i.setAttribute("data-toolbar-hover","true"),r&&i.setAttribute("data-toolbar-hover-focus","true"),a({$toolbar:i,$component:t,state:"hover"})),n&&(n.setAttribute("data-outline-hover","true"),o&&n.setAttribute("data-outline-overlay-theme-section","true"),r&&n.setAttribute("data-outline-hover-focus","true")),l&&l.setAttribute("data-toolbar-add-hover","true"),d&&d.setAttribute("data-toolbar-add-hover","true")},[]),n=react.useCallback(({$component:t,componentUid:e})=>{if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}let r=getDOMElementParents(t,'[data-uid][data-component-type="component"]:not([data-component-no-setting])');if(r.length){for(let t of r)t&&i({$component:t});l({$component:t,$parents:r})}},[i]),l=({$component:t,$parents:e})=>{if(!t||!e?.length)return;let r=getChildrenByAttrSelector(t,"data-toolbar-hover-focus");if(r){let t=r.getBoundingClientRect(),o=!!r.getAttribute("data-toolbar-hover-revert"),a=!!r.getAttribute("data-toolbar-hover-inside"),i=1;for(let r of e)if(r){let e=r.getAttribute("data-component-tag");if("Section"===e)continue;let n=getChildrenByAttrSelector(r,"data-toolbar-hover");if(n){let e=n.getAttribute("data-toolbar-active");if(e)continue;let r=n.getBoundingClientRect(),l=o||a;if(isOverParent({current:t,parent:r,index:i,revert:l})){let e=getComputedStyle(n),o=t.top-r.top,a=t.left-r.left,d=parseFloat(e.top)+o-23*i;l&&(d=parseFloat(e.top)-o+23*i);let u=parseFloat(e.left)+a;n.setAttribute("style",`top: ${d}px;left: ${u}px;`),i++}}}}},d=react.useCallback(()=>{let t=["data-outline-overlay","data-outline-overlay-theme-section","data-theme-section-status-active"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))})},[]),u=react.useCallback(()=>{let t=["data-toolbar-hover-focus","data-toolbar-hover","data-outline-hover-focus","data-toolbar-hover-revert","data-toolbar-hover-inside","data-outline-hover","data-toolbar-add-hover"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))}),d()},[d]),c=react.useCallback(()=>{t.current=null;let e=["data-toolbar-active","data-outline-active","data-toolbar-add-active","data-toolbar-active-revert","data-toolbar-active-inside","data-spacing-margin-bottom-active","data-toolbar-force-hover","data-outline-force-hover"],o=document.querySelectorAll(e.map(t=>`[${t}]`).join(","));o&&e.forEach(t=>{o.forEach(e=>e.removeAttribute(t))}),m(!1),r.current&&r.current.disconnect()},[]),s=(t,e)=>{let o=t.parentNode;o&&(r.current&&r.current.disconnect(),r.current=new MutationObserver(o=>{for(let a of o)a.removedNodes.forEach(o=>{o===t&&(r.current&&r.current.disconnect(),e())})}),r.current.observe(o,{childList:!0}))},b=react.useCallback(({$component:t})=>{if(!t)return;let e=getComputedStyle(t),r=getChildrenByAttrSelector(t,"data-spacing"),o=r?.querySelector("[data-spacing-margin-bottom]")||null;if(o){let t=o.querySelector("[data-spacing-margin-bottom-bg]")||null,r=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(t&&r){let a=e.marginBottom;t.style.height=a,r.style.top=a,o.setAttribute("data-spacing-margin-bottom-active","true")}}},[]),v=(t,e)=>{let r=t.closest('[data-toolbar-wrap][data-component-tag="Section"]');if(r){if(e){let t=getChildrenByAttrSelector(r,"data-toolbar"),e=getChildrenByAttrSelector(r,"data-outline");t&&t.setAttribute("data-toolbar-force-hover","true"),e&&e.setAttribute("data-outline-force-hover","true")}else{let t=getChildrenByAttrSelector(r,"data-toolbar"),e=getChildrenByAttrSelector(r,"data-outline");t&&t.removeAttribute("data-toolbar-force-hover"),e&&e.removeAttribute("data-outline-force-hover")}}},f=react.useCallback(async({componentUid:e,productId:r,timeAwait:o=500,forceReActive:i})=>{if(!e)return;let n=await waitForElementToExist(`${r?`[data-product-id="${r}"] `:""}[data-uid="${e}"]`,o);if(!n||!i&&e==t.current?.componentUid&&r==t.current?.productId)return;(i||e===t.current?.componentUid)&&r===t.current?.productId||c();let l=getChildrenByAttrSelector(n,"data-toolbar"),d=getChildrenByAttrSelector(n,"data-outline"),m=getChildrenByAttrSelector(n,"data-toolbar-add-top"),g=getChildrenByAttrSelector(n,"data-toolbar-add-bottom");if(l&&(t.current={componentUid:e,productId:r},l.removeAttribute("style"),l.setAttribute("data-toolbar-active","true"),a({$toolbar:l,$component:n,state:"active"})),d&&d.setAttribute("data-outline-active","true"),m&&m.setAttribute("data-toolbar-add-active","true"),g&&g.setAttribute("data-toolbar-add-active","true"),r){let t=document.querySelectorAll(`[data-uid="${e}"]`);t?.length&&t.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&e.setAttribute("data-outline-active","true")})}b({$component:n}),v(n,!0),u(),s(n,()=>{f({componentUid:e,productId:r,timeAwait:2e3,forceReActive:!0})})},[c,u,b]),m=async e=>{if(e){if(t.current?.componentUid){let r=t.current?.componentUid,o=t.current?.productId,a=await waitForElementToExist(`${o?`[data-product-id="${o}"] `:""}[data-uid="${r}"]`,500);if(a){let t=getChildrenByAttrSelector(a,"data-toolbar"),r=getChildrenByAttrSelector(a,"data-outline"),o=getChildrenByAttrSelector(a,"data-spacing");t&&e&&t.setAttribute("data-toolbar-editor-inline-focus","true"),r&&e&&r.setAttribute("data-outline-editor-inline-focus","true"),o&&e&&o.setAttribute("data-spacing-hidden","true")}}}else{let t=document.querySelectorAll("[data-outline-editor-inline-focus],[data-toolbar-editor-inline-focus],[data-spacing-hidden]");t.length&&t.forEach(t=>{t&&(t.removeAttribute("data-toolbar-editor-inline-focus"),t.removeAttribute("data-outline-editor-inline-focus"),t.removeAttribute("data-spacing-hidden"))})}},g=react.useCallback(e=>{let r=e.closest("[data-theme-section]"),o=r?.getAttribute("data-uid"),a=r&&o===t.current?.componentUid;if(!a)return;let i=getChildrenByAttrSelector(r,"data-theme-section-status");i&&i.setAttribute("data-theme-section-status-active","true")},[]),h=async({value:e})=>{if(!e)return;let r=await waitForElementToExist(`${t.current?.productId?`[data-product-id="${t.current?.productId}"] `:""}[data-uid="${t.current?.componentUid}"]`,500);if(r){let e=r?.querySelectorAll("[data-toolbar-parent]");if(e.length){let r=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.setAttribute("data-outline-force-hover","true"),e.setAttribute("data-outline-force-overlay","true"))})},o=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.removeAttribute("data-outline-force-hover"),e.removeAttribute("data-outline-force-overlay"))})},a=async e=>{let r=e.getAttribute("data-parent-uid");if(!r)return;let a=async()=>{let t=await waitForElementToExist(`[data-uid="${r}"]`,500),e=t?.closest("[data-product-id]"),o=e?.getAttribute("data-product-id")||"";return!!o},i="";await a()&&(i=t.current?.productId||"");let n=new CustomEvent("editor:toolbar:force-active-component",{bubbles:!0,detail:{componentUid:r,productId:i}});o(e),window.dispatchEvent(n)};e.forEach(t=>{t.addEventListener("mouseover",()=>r(t)),t.addEventListener("mouseout",()=>o(t)),t.addEventListener("click",()=>a(t))})}}},p=react.useCallback(r=>{if(e.current||o.current)return;let a=r.target;if(!a){d();return}let l=a.closest("[data-toolbar-hover]");if(l)return;let c=a.closest("[data-toolbar-wrap]"),s=c?.getAttribute("data-uid");if(!c||!s||"ROOT"==s){u();return}let b=getChildrenByAttrSelector(c,"data-toolbar"),v=getChildrenByAttrSelector(c,"data-outline");if(v&&v.removeAttribute("data-outline-overlay"),!s||"ROOT"==s||b?.getAttribute("data-toolbar-hover-focus"))return;if(b?.getAttribute("data-toolbar-hover-focus")||u(),g(a),s==t.current?.componentUid){if(t.current.productId){let e=c.closest("[data-product-id]");if(e){let r=e.getAttribute("data-product-id");if(r==t.current.productId)return}}let e=a.closest("[data-theme-section]");if(!e)return;i({$component:e,focus:!0,isThemeSection:!0})}let f=a.closest("[data-theme-section]");f?i({$component:f,focus:!0,isThemeSection:!0}):(i({$component:c,componentUid:s,focus:!0}),n({$component:c,componentUid:s}))},[g,u,i,n,d,t]),A=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid?f({componentUid:r.componentUid,productId:r.productId}):c()},[f,c,e]),y=react.useCallback(()=>{u()},[u]),C=react.useCallback(t=>{let r=t.detail;r.value&&(u(),c()),e.current=r.value},[u,c]),E=react.useCallback(t=>{let e=t.detail;e.value?m(!0):m(!1)},[]),S=react.useCallback(t=>{if(e.current)return;let r=t.detail;h({value:r?.value||!1})},[]),w=react.useCallback(t=>{let e=t.detail;e?.value?(u(),o.current=!0):o.current=!1},[u]);return react.useEffect(()=>(document.addEventListener("mousemove",p),window.addEventListener("editor:active-component",A),window.addEventListener("editor:focus-outside-preview",y),window.addEventListener("editor:is-dragging",C),window.addEventListener("editor:is-editing-text-editor",E),window.addEventListener("editor:toolbar:show-parents",S),window.addEventListener("editor:toolbar:resize-spacing",w),()=>{document.removeEventListener("mousemove",p),window.removeEventListener("editor:active-component",A),window.removeEventListener("editor:is-dragging",y),window.removeEventListener("editor:is-dragging",C),window.removeEventListener("editor:is-editing-text-editor",E),window.removeEventListener("editor:toolbar:show-parents",S),window.removeEventListener("editor:toolbar:resize-spacing",w)}),[p,A,y,C,E,S,w]),null};var Toolbar$1=react.memo(Toolbar);exports.default=Toolbar$1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{memo as t,useRef as e,useCallback as r,useEffect as o}from"react";let TOOLBAR_HOVER_HEIGHT=24,TOOLBAR_ACTIVE_HEIGHT=32,getDOMElementParents=(t,e,r)=>{let o=[];for(;t;)if(t=t.parentElement??void 0){if("BODY"===t.tagName||"ROOT"===t.getAttribute("data-uid"))break;if(e){if(t.matches(e)&&(o.push(t),r&&o.length==r))return o;continue}if(o.push(t),r&&o.length==r)break}return o},getChildrenByAttrSelector=(t,e)=>{let r=t.children.length;if(r)for(let o=0;o<r;o++){let r=t.children[o];if(r){let t=r.getAttribute(e);if(t)return r}}},isOverParent=({current:t,parent:e,index:r,revert:o})=>{for(let a=0;a<r;a++){let r=t.top-23*a>=e.top&&t.top-23*a<=e.top+e.height||t.top-23*a>=e.top+e.height&&t.top-23*a<=e.top;if(o&&(r=t.bottom+23*a>=e.bottom&&t.bottom+23*a<=e.bottom-e.height||t.bottom+23*a>=e.bottom-e.height&&t.bottom+23*a<=e.bottom),r)return!0}return!1},waitForElementToExist=(t,e=200)=>new Promise(r=>{let o=setInterval(()=>{let e=document.querySelector(t);e&&(clearInterval(o),clearTimeout(a),r(e))},50),a=setTimeout(()=>{clearInterval(o),clearTimeout(a),r(null)},e)}),notVisible=t=>{let e=getComputedStyle(t).overflow;return"visible"!==e},isSection=t=>{let e=t.getAttribute("data-component-tag");return"Section"===e},isOverToolbarPosition=(t,e)=>{let r=t.getBoundingClientRect(),o=e.getBoundingClientRect();return r.top-o.top<33},findOverflowParent=(t,e)=>{let r=e||t;if(t&&!isSection(t))return notVisible(t)&&isOverToolbarPosition(e,t)?t:t.parentElement?findOverflowParent(t.parentElement,r):void 0},Toolbar=()=>{let t=e(null),a=e(!1),i=e(),n=e(!1),l=({state:t,$toolbar:e,$component:r})=>{let o=findOverflowParent(r,e);if(o){let o=r.getBoundingClientRect();o?.height>=60?e.setAttribute(`data-toolbar-${t}-inside`,"true"):e.setAttribute(`data-toolbar-${t}-revert`,"true")}else{let r=e.getBoundingClientRect();r.top<33&&(r?.height>=60?e.setAttribute(`data-toolbar-${t}-inside`,"true"):e.setAttribute(`data-toolbar-${t}-revert`,"true"))}},d=r(({$component:t,componentUid:e,focus:r,isThemeSection:o})=>{if(!t&&!e)return;if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}if(!e){let r=t.getAttribute("data-uid");if(!r)return;e=r}let a=getChildrenByAttrSelector(t,"data-toolbar"),i=getChildrenByAttrSelector(t,"data-outline"),n=getChildrenByAttrSelector(t,"data-toolbar-add-top"),d=getChildrenByAttrSelector(t,"data-toolbar-add-bottom"),u=getChildrenByAttrSelector(t,"data-theme-section-status");o&&u&&u.setAttribute("data-theme-section-status-active","true"),a&&(a.removeAttribute("style"),a.setAttribute("data-toolbar-hover","true"),r&&a.setAttribute("data-toolbar-hover-focus","true"),l({$toolbar:a,$component:t,state:"hover"})),i&&(i.setAttribute("data-outline-hover","true"),o&&i.setAttribute("data-outline-overlay-theme-section","true"),r&&i.setAttribute("data-outline-hover-focus","true")),n&&n.setAttribute("data-toolbar-add-hover","true"),d&&d.setAttribute("data-toolbar-add-hover","true")},[]),u=r(({$component:t,componentUid:e})=>{if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}let r=getDOMElementParents(t,'[data-uid][data-component-type="component"]:not([data-component-no-setting])');if(r.length){for(let t of r)t&&d({$component:t});c({$component:t,$parents:r})}},[d]),c=({$component:t,$parents:e})=>{if(!t||!e?.length)return;let r=getChildrenByAttrSelector(t,"data-toolbar-hover-focus");if(r){let t=r.getBoundingClientRect(),o=!!r.getAttribute("data-toolbar-hover-revert"),a=!!r.getAttribute("data-toolbar-hover-inside"),i=1;for(let r of e)if(r){let e=r.getAttribute("data-component-tag");if("Section"===e)continue;let n=getChildrenByAttrSelector(r,"data-toolbar-hover");if(n){let e=n.getAttribute("data-toolbar-active");if(e)continue;let r=n.getBoundingClientRect(),l=o||a;if(isOverParent({current:t,parent:r,index:i,revert:l})){let e=getComputedStyle(n),o=t.top-r.top,a=t.left-r.left,d=parseFloat(e.top)+o-23*i;l&&(d=parseFloat(e.top)-o+23*i);let u=parseFloat(e.left)+a;n.setAttribute("style",`top: ${d}px;left: ${u}px;`),i++}}}}},s=r(()=>{let t=["data-outline-overlay","data-outline-overlay-theme-section","data-theme-section-status-active"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))})},[]),b=r(()=>{let t=["data-toolbar-hover-focus","data-toolbar-hover","data-outline-hover-focus","data-toolbar-hover-revert","data-outline-hover","data-toolbar-add-hover"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))}),s()},[s]),v=r(()=>{t.current=null;let e=["data-toolbar-active","data-outline-active","data-toolbar-add-active","data-toolbar-active-revert","data-spacing-margin-bottom-active","data-toolbar-force-hover","data-outline-force-hover"],r=document.querySelectorAll(e.map(t=>`[${t}]`).join(","));r&&e.forEach(t=>{r.forEach(e=>e.removeAttribute(t))}),p(!1),i.current&&i.current.disconnect()},[]),m=(t,e)=>{let r=t.parentNode;r&&(i.current&&i.current.disconnect(),i.current=new MutationObserver(r=>{for(let o of r)o.removedNodes.forEach(r=>{r===t&&(i.current&&i.current.disconnect(),e())})}),i.current.observe(r,{childList:!0}))},f=r(({$component:t})=>{if(!t)return;let e=getComputedStyle(t),r=getChildrenByAttrSelector(t,"data-spacing"),o=r?.querySelector("[data-spacing-margin-bottom]")||null;if(o){let t=o.querySelector("[data-spacing-margin-bottom-bg]")||null,r=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(t&&r){let a=e.marginBottom;t.style.height=a,r.style.top=a,o.setAttribute("data-spacing-margin-bottom-active","true")}}},[]),g=(t,e)=>{let r=t.closest('[data-toolbar-wrap][data-component-tag="Section"]');if(r){if(e){let t=getChildrenByAttrSelector(r,"data-toolbar"),e=getChildrenByAttrSelector(r,"data-outline");t&&t.setAttribute("data-toolbar-force-hover","true"),e&&e.setAttribute("data-outline-force-hover","true")}else{let t=getChildrenByAttrSelector(r,"data-toolbar"),e=getChildrenByAttrSelector(r,"data-outline");t&&t.removeAttribute("data-toolbar-force-hover"),e&&e.removeAttribute("data-outline-force-hover")}}},h=r(async({componentUid:e,productId:r,timeAwait:o=500,forceReActive:a})=>{if(!e)return;let i=await waitForElementToExist(`${r?`[data-product-id="${r}"] `:""}[data-uid="${e}"]`,o);if(!i||!a&&e==t.current?.componentUid&&r==t.current?.productId)return;(a||e===t.current?.componentUid)&&r===t.current?.productId||v();let n=getChildrenByAttrSelector(i,"data-toolbar"),d=getChildrenByAttrSelector(i,"data-outline"),u=getChildrenByAttrSelector(i,"data-toolbar-add-top"),c=getChildrenByAttrSelector(i,"data-toolbar-add-bottom");if(n&&(t.current={componentUid:e,productId:r},n.removeAttribute("style"),n.setAttribute("data-toolbar-active","true"),l({$toolbar:n,$component:i,state:"active"})),d&&d.setAttribute("data-outline-active","true"),u&&u.setAttribute("data-toolbar-add-active","true"),c&&c.setAttribute("data-toolbar-add-active","true"),r){let t=document.querySelectorAll(`[data-uid="${e}"]`);t?.length&&t.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&e.setAttribute("data-outline-active","true")})}f({$component:i}),g(i,!0),b(),m(i,()=>{h({componentUid:e,productId:r,timeAwait:2e3,forceReActive:!0})})},[v,b,f]),p=async e=>{if(e){if(t.current?.componentUid){let r=t.current?.componentUid,o=t.current?.productId,a=await waitForElementToExist(`${o?`[data-product-id="${o}"] `:""}[data-uid="${r}"]`,500);if(a){let t=getChildrenByAttrSelector(a,"data-toolbar"),r=getChildrenByAttrSelector(a,"data-outline"),o=getChildrenByAttrSelector(a,"data-spacing");t&&e&&t.setAttribute("data-toolbar-editor-inline-focus","true"),r&&e&&r.setAttribute("data-outline-editor-inline-focus","true"),o&&e&&o.setAttribute("data-spacing-hidden","true")}}}else{let t=document.querySelectorAll("[data-outline-editor-inline-focus],[data-toolbar-editor-inline-focus],[data-spacing-hidden]");t.length&&t.forEach(t=>{t&&(t.removeAttribute("data-toolbar-editor-inline-focus"),t.removeAttribute("data-outline-editor-inline-focus"),t.removeAttribute("data-spacing-hidden"))})}},A=r(e=>{let r=e.closest("[data-theme-section]"),o=r?.getAttribute("data-uid"),a=r&&o===t.current?.componentUid;if(!a)return;let i=getChildrenByAttrSelector(r,"data-theme-section-status");i&&i.setAttribute("data-theme-section-status-active","true")},[]),y=async({value:e})=>{if(!e)return;let r=await waitForElementToExist(`${t.current?.productId?`[data-product-id="${t.current?.productId}"] `:""}[data-uid="${t.current?.componentUid}"]`,500);if(r){let e=r?.querySelectorAll("[data-toolbar-parent]");if(e.length){let r=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.setAttribute("data-outline-force-hover","true"),e.setAttribute("data-outline-force-overlay","true"))})},o=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.removeAttribute("data-outline-force-hover"),e.removeAttribute("data-outline-force-overlay"))})},a=async e=>{let r=e.getAttribute("data-parent-uid");if(!r)return;let a=async()=>{let t=await waitForElementToExist(`[data-uid="${r}"]`,500),e=t?.closest("[data-product-id]"),o=e?.getAttribute("data-product-id")||"";return!!o},i="";await a()&&(i=t.current?.productId||"");let n=new CustomEvent("editor:toolbar:force-active-component",{bubbles:!0,detail:{componentUid:r,productId:i}});o(e),window.dispatchEvent(n)};e.forEach(t=>{t.addEventListener("mouseover",()=>r(t)),t.addEventListener("mouseout",()=>o(t)),t.addEventListener("click",()=>a(t))})}}},E=r(e=>{if(a.current||n.current)return;let r=e.target;if(!r){s();return}let o=r.closest("[data-toolbar-hover]");if(o)return;let i=r.closest("[data-toolbar-wrap]"),l=i?.getAttribute("data-uid");if(!i||!l||"ROOT"==l){b();return}let c=getChildrenByAttrSelector(i,"data-toolbar"),v=getChildrenByAttrSelector(i,"data-outline");if(v&&v.removeAttribute("data-outline-overlay"),!l||"ROOT"==l||c?.getAttribute("data-toolbar-hover-focus"))return;if(c?.getAttribute("data-toolbar-hover-focus")||b(),A(r),l==t.current?.componentUid){if(t.current.productId){let e=i.closest("[data-product-id]");if(e){let r=e.getAttribute("data-product-id");if(r==t.current.productId)return}}let e=r.closest("[data-theme-section]");if(!e)return;d({$component:e,focus:!0,isThemeSection:!0})}let m=r.closest("[data-theme-section]");m?d({$component:m,focus:!0,isThemeSection:!0}):(d({$component:i,componentUid:l,focus:!0}),u({$component:i,componentUid:l}))},[A,b,d,u,s,t]),S=r(t=>{if(a.current)return;let e=t.detail;e?.componentUid?h({componentUid:e.componentUid,productId:e.productId}):v()},[h,v,a]),w=r(()=>{b()},[b]),C=r(t=>{let e=t.detail;e.value&&(b(),v()),a.current=e.value},[b,v]),B=r(t=>{let e=t.detail;e.value?p(!0):p(!1)},[]),$=r(t=>{if(a.current)return;let e=t.detail;y({value:e?.value||!1})},[]),T=r(t=>{let e=t.detail;e?.value?(b(),n.current=!0):n.current=!1},[b]);return o(()=>(document.addEventListener("mousemove",E),window.addEventListener("editor:active-component",S),window.addEventListener("editor:focus-outside-preview",w),window.addEventListener("editor:is-dragging",C),window.addEventListener("editor:is-editing-text-editor",B),window.addEventListener("editor:toolbar:show-parents",$),window.addEventListener("editor:toolbar:resize-spacing",T),()=>{document.removeEventListener("mousemove",E),window.removeEventListener("editor:active-component",S),window.removeEventListener("editor:is-dragging",w),window.removeEventListener("editor:is-dragging",C),window.removeEventListener("editor:is-editing-text-editor",B),window.removeEventListener("editor:toolbar:show-parents",$),window.removeEventListener("editor:toolbar:resize-spacing",T)}),[E,S,w,C,B,$,T]),null};var Toolbar$1=t(Toolbar);export{Toolbar$1 as default};
|
|
1
|
+
import{memo as t,useRef as e,useCallback as r,useEffect as o}from"react";let TOOLBAR_HOVER_HEIGHT=24,TOOLBAR_ACTIVE_HEIGHT=32,getDOMElementParents=(t,e,r)=>{let o=[];for(;t;)if(t=t.parentElement??void 0){if("BODY"===t.tagName||"ROOT"===t.getAttribute("data-uid"))break;if(e){if(t.matches(e)&&(o.push(t),r&&o.length==r))return o;continue}if(o.push(t),r&&o.length==r)break}return o},getChildrenByAttrSelector=(t,e)=>{let r=t.children.length;if(r)for(let o=0;o<r;o++){let r=t.children[o];if(r){let t=r.getAttribute(e);if(t)return r}}},isOverParent=({current:t,parent:e,index:r,revert:o})=>{for(let a=0;a<r;a++){let r=t.top-23*a>=e.top&&t.top-23*a<=e.top+e.height||t.top-23*a>=e.top+e.height&&t.top-23*a<=e.top;if(o&&(r=t.bottom+23*a>=e.bottom&&t.bottom+23*a<=e.bottom-e.height||t.bottom+23*a>=e.bottom-e.height&&t.bottom+23*a<=e.bottom),r)return!0}return!1},waitForElementToExist=(t,e=200)=>new Promise(r=>{let o=setInterval(()=>{let e=document.querySelector(t);e&&(clearInterval(o),clearTimeout(a),r(e))},50),a=setTimeout(()=>{clearInterval(o),clearTimeout(a),r(null)},e)}),notVisible=t=>{let e=getComputedStyle(t).overflow;return"visible"!==e},isSection=t=>{let e=t.getAttribute("data-component-tag");return"Section"===e},isOverToolbarPosition=(t,e)=>{let r=t.getBoundingClientRect(),o=e.getBoundingClientRect();return r.top-o.top<33},findOverflowParent=(t,e)=>{let r=e||t;if(t&&!isSection(t))return notVisible(t)&&isOverToolbarPosition(e,t)?t:t.parentElement?findOverflowParent(t.parentElement,r):void 0},Toolbar=()=>{let t=e(null),a=e(!1),i=e(),n=e(!1),l=({state:t,$toolbar:e,$component:r})=>{let o=findOverflowParent(r,e);if(o){let o=r.getBoundingClientRect();o?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true")}else{let o=e.getBoundingClientRect(),a=r.getBoundingClientRect();o.top<33&&(a?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true"))}},d=r(({$component:t,componentUid:e,focus:r,isThemeSection:o})=>{if(!t&&!e)return;if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}if(!e){let r=t.getAttribute("data-uid");if(!r)return;e=r}let a=getChildrenByAttrSelector(t,"data-toolbar"),i=getChildrenByAttrSelector(t,"data-outline"),n=getChildrenByAttrSelector(t,"data-toolbar-add-top"),d=getChildrenByAttrSelector(t,"data-toolbar-add-bottom"),u=getChildrenByAttrSelector(t,"data-theme-section-status");o&&u&&u.setAttribute("data-theme-section-status-active","true"),a&&(a.removeAttribute("style"),a.setAttribute("data-toolbar-hover","true"),r&&a.setAttribute("data-toolbar-hover-focus","true"),l({$toolbar:a,$component:t,state:"hover"})),i&&(i.setAttribute("data-outline-hover","true"),o&&i.setAttribute("data-outline-overlay-theme-section","true"),r&&i.setAttribute("data-outline-hover-focus","true")),n&&n.setAttribute("data-toolbar-add-hover","true"),d&&d.setAttribute("data-toolbar-add-hover","true")},[]),u=r(({$component:t,componentUid:e})=>{if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}let r=getDOMElementParents(t,'[data-uid][data-component-type="component"]:not([data-component-no-setting])');if(r.length){for(let t of r)t&&d({$component:t});c({$component:t,$parents:r})}},[d]),c=({$component:t,$parents:e})=>{if(!t||!e?.length)return;let r=getChildrenByAttrSelector(t,"data-toolbar-hover-focus");if(r){let t=r.getBoundingClientRect(),o=!!r.getAttribute("data-toolbar-hover-revert"),a=!!r.getAttribute("data-toolbar-hover-inside"),i=1;for(let r of e)if(r){let e=r.getAttribute("data-component-tag");if("Section"===e)continue;let n=getChildrenByAttrSelector(r,"data-toolbar-hover");if(n){let e=n.getAttribute("data-toolbar-active");if(e)continue;let r=n.getBoundingClientRect(),l=o||a;if(isOverParent({current:t,parent:r,index:i,revert:l})){let e=getComputedStyle(n),o=t.top-r.top,a=t.left-r.left,d=parseFloat(e.top)+o-23*i;l&&(d=parseFloat(e.top)-o+23*i);let u=parseFloat(e.left)+a;n.setAttribute("style",`top: ${d}px;left: ${u}px;`),i++}}}}},s=r(()=>{let t=["data-outline-overlay","data-outline-overlay-theme-section","data-theme-section-status-active"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))})},[]),b=r(()=>{let t=["data-toolbar-hover-focus","data-toolbar-hover","data-outline-hover-focus","data-toolbar-hover-revert","data-toolbar-hover-inside","data-outline-hover","data-toolbar-add-hover"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))}),s()},[s]),v=r(()=>{t.current=null;let e=["data-toolbar-active","data-outline-active","data-toolbar-add-active","data-toolbar-active-revert","data-toolbar-active-inside","data-spacing-margin-bottom-active","data-toolbar-force-hover","data-outline-force-hover"],r=document.querySelectorAll(e.map(t=>`[${t}]`).join(","));r&&e.forEach(t=>{r.forEach(e=>e.removeAttribute(t))}),p(!1),i.current&&i.current.disconnect()},[]),m=(t,e)=>{let r=t.parentNode;r&&(i.current&&i.current.disconnect(),i.current=new MutationObserver(r=>{for(let o of r)o.removedNodes.forEach(r=>{r===t&&(i.current&&i.current.disconnect(),e())})}),i.current.observe(r,{childList:!0}))},f=r(({$component:t})=>{if(!t)return;let e=getComputedStyle(t),r=getChildrenByAttrSelector(t,"data-spacing"),o=r?.querySelector("[data-spacing-margin-bottom]")||null;if(o){let t=o.querySelector("[data-spacing-margin-bottom-bg]")||null,r=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(t&&r){let a=e.marginBottom;t.style.height=a,r.style.top=a,o.setAttribute("data-spacing-margin-bottom-active","true")}}},[]),g=(t,e)=>{let r=t.closest('[data-toolbar-wrap][data-component-tag="Section"]');if(r){if(e){let t=getChildrenByAttrSelector(r,"data-toolbar"),e=getChildrenByAttrSelector(r,"data-outline");t&&t.setAttribute("data-toolbar-force-hover","true"),e&&e.setAttribute("data-outline-force-hover","true")}else{let t=getChildrenByAttrSelector(r,"data-toolbar"),e=getChildrenByAttrSelector(r,"data-outline");t&&t.removeAttribute("data-toolbar-force-hover"),e&&e.removeAttribute("data-outline-force-hover")}}},h=r(async({componentUid:e,productId:r,timeAwait:o=500,forceReActive:a})=>{if(!e)return;let i=await waitForElementToExist(`${r?`[data-product-id="${r}"] `:""}[data-uid="${e}"]`,o);if(!i||!a&&e==t.current?.componentUid&&r==t.current?.productId)return;(a||e===t.current?.componentUid)&&r===t.current?.productId||v();let n=getChildrenByAttrSelector(i,"data-toolbar"),d=getChildrenByAttrSelector(i,"data-outline"),u=getChildrenByAttrSelector(i,"data-toolbar-add-top"),c=getChildrenByAttrSelector(i,"data-toolbar-add-bottom");if(n&&(t.current={componentUid:e,productId:r},n.removeAttribute("style"),n.setAttribute("data-toolbar-active","true"),l({$toolbar:n,$component:i,state:"active"})),d&&d.setAttribute("data-outline-active","true"),u&&u.setAttribute("data-toolbar-add-active","true"),c&&c.setAttribute("data-toolbar-add-active","true"),r){let t=document.querySelectorAll(`[data-uid="${e}"]`);t?.length&&t.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&e.setAttribute("data-outline-active","true")})}f({$component:i}),g(i,!0),b(),m(i,()=>{h({componentUid:e,productId:r,timeAwait:2e3,forceReActive:!0})})},[v,b,f]),p=async e=>{if(e){if(t.current?.componentUid){let r=t.current?.componentUid,o=t.current?.productId,a=await waitForElementToExist(`${o?`[data-product-id="${o}"] `:""}[data-uid="${r}"]`,500);if(a){let t=getChildrenByAttrSelector(a,"data-toolbar"),r=getChildrenByAttrSelector(a,"data-outline"),o=getChildrenByAttrSelector(a,"data-spacing");t&&e&&t.setAttribute("data-toolbar-editor-inline-focus","true"),r&&e&&r.setAttribute("data-outline-editor-inline-focus","true"),o&&e&&o.setAttribute("data-spacing-hidden","true")}}}else{let t=document.querySelectorAll("[data-outline-editor-inline-focus],[data-toolbar-editor-inline-focus],[data-spacing-hidden]");t.length&&t.forEach(t=>{t&&(t.removeAttribute("data-toolbar-editor-inline-focus"),t.removeAttribute("data-outline-editor-inline-focus"),t.removeAttribute("data-spacing-hidden"))})}},A=r(e=>{let r=e.closest("[data-theme-section]"),o=r?.getAttribute("data-uid"),a=r&&o===t.current?.componentUid;if(!a)return;let i=getChildrenByAttrSelector(r,"data-theme-section-status");i&&i.setAttribute("data-theme-section-status-active","true")},[]),y=async({value:e})=>{if(!e)return;let r=await waitForElementToExist(`${t.current?.productId?`[data-product-id="${t.current?.productId}"] `:""}[data-uid="${t.current?.componentUid}"]`,500);if(r){let e=r?.querySelectorAll("[data-toolbar-parent]");if(e.length){let r=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.setAttribute("data-outline-force-hover","true"),e.setAttribute("data-outline-force-overlay","true"))})},o=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.removeAttribute("data-outline-force-hover"),e.removeAttribute("data-outline-force-overlay"))})},a=async e=>{let r=e.getAttribute("data-parent-uid");if(!r)return;let a=async()=>{let t=await waitForElementToExist(`[data-uid="${r}"]`,500),e=t?.closest("[data-product-id]"),o=e?.getAttribute("data-product-id")||"";return!!o},i="";await a()&&(i=t.current?.productId||"");let n=new CustomEvent("editor:toolbar:force-active-component",{bubbles:!0,detail:{componentUid:r,productId:i}});o(e),window.dispatchEvent(n)};e.forEach(t=>{t.addEventListener("mouseover",()=>r(t)),t.addEventListener("mouseout",()=>o(t)),t.addEventListener("click",()=>a(t))})}}},E=r(e=>{if(a.current||n.current)return;let r=e.target;if(!r){s();return}let o=r.closest("[data-toolbar-hover]");if(o)return;let i=r.closest("[data-toolbar-wrap]"),l=i?.getAttribute("data-uid");if(!i||!l||"ROOT"==l){b();return}let c=getChildrenByAttrSelector(i,"data-toolbar"),v=getChildrenByAttrSelector(i,"data-outline");if(v&&v.removeAttribute("data-outline-overlay"),!l||"ROOT"==l||c?.getAttribute("data-toolbar-hover-focus"))return;if(c?.getAttribute("data-toolbar-hover-focus")||b(),A(r),l==t.current?.componentUid){if(t.current.productId){let e=i.closest("[data-product-id]");if(e){let r=e.getAttribute("data-product-id");if(r==t.current.productId)return}}let e=r.closest("[data-theme-section]");if(!e)return;d({$component:e,focus:!0,isThemeSection:!0})}let m=r.closest("[data-theme-section]");m?d({$component:m,focus:!0,isThemeSection:!0}):(d({$component:i,componentUid:l,focus:!0}),u({$component:i,componentUid:l}))},[A,b,d,u,s,t]),S=r(t=>{if(a.current)return;let e=t.detail;e?.componentUid?h({componentUid:e.componentUid,productId:e.productId}):v()},[h,v,a]),w=r(()=>{b()},[b]),C=r(t=>{let e=t.detail;e.value&&(b(),v()),a.current=e.value},[b,v]),B=r(t=>{let e=t.detail;e.value?p(!0):p(!1)},[]),$=r(t=>{if(a.current)return;let e=t.detail;y({value:e?.value||!1})},[]),T=r(t=>{let e=t.detail;e?.value?(b(),n.current=!0):n.current=!1},[b]);return o(()=>(document.addEventListener("mousemove",E),window.addEventListener("editor:active-component",S),window.addEventListener("editor:focus-outside-preview",w),window.addEventListener("editor:is-dragging",C),window.addEventListener("editor:is-editing-text-editor",B),window.addEventListener("editor:toolbar:show-parents",$),window.addEventListener("editor:toolbar:resize-spacing",T),()=>{document.removeEventListener("mousemove",E),window.removeEventListener("editor:active-component",S),window.removeEventListener("editor:is-dragging",w),window.removeEventListener("editor:is-dragging",C),window.removeEventListener("editor:is-editing-text-editor",B),window.removeEventListener("editor:toolbar:show-parents",$),window.removeEventListener("editor:toolbar:resize-spacing",T)}),[E,S,w,C,B,$,T]),null};var Toolbar$1=t(Toolbar);export{Toolbar$1 as default};
|