grapesjs-float
Version:
GrapesJS float plugin with Floating UI
2 lines (1 loc) • 17.2 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P="[GrapesJS::FloatPlugin]",ut="float",dt=`${ut}:show-element`,mt=`${ut}:hide-element`,Dt=["top","right","bottom","left"],ot=["start","end"],it=Dt.reduce((t,e)=>t.concat(e,e+"-"+ot[0],e+"-"+ot[1]),[]),U=Math.min,$=Math.max,j=Math.round,I=Math.floor,F=t=>({x:t,y:t}),Vt={left:"right",right:"left",bottom:"top",top:"bottom"},Bt={start:"end",end:"start"};function rt(t,e,n){return $(t,U(e,n))}function q(t,e){return typeof t=="function"?t(e):t}function k(t){return t.split("-")[0]}function T(t){return t.split("-")[1]}function gt(t){return t==="x"?"y":"x"}function ht(t){return t==="y"?"height":"width"}function Y(t){return["top","bottom"].includes(k(t))?"y":"x"}function pt(t){return gt(Y(t))}function Mt(t,e,n){n===void 0&&(n=!1);const o=T(t),i=pt(t),s=ht(i);let r=i==="x"?o===(n?"end":"start")?"right":"left":o==="start"?"bottom":"top";return e.reference[s]>e.floating[s]&&(r=st(r)),[r,st(r)]}function Nt(t){return t.replace(/start|end/g,e=>Bt[e])}function st(t){return t.replace(/left|right|bottom|top/g,e=>Vt[e])}function kt(t){return{top:0,right:0,bottom:0,left:0,...t}}function Wt(t){return typeof t!="number"?kt(t):{top:t,right:t,bottom:t,left:t}}function X(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}function ct(t,e,n){let{reference:o,floating:i}=t;const s=Y(e),r=pt(e),c=ht(r),l=k(e),a=s==="y",d=o.x+o.width/2-i.width/2,f=o.y+o.height/2-i.height/2,g=o[c]/2-i[c]/2;let u;switch(l){case"top":u={x:d,y:o.y-i.height};break;case"bottom":u={x:d,y:o.y+o.height};break;case"right":u={x:o.x+o.width,y:f};break;case"left":u={x:o.x-i.width,y:f};break;default:u={x:o.x,y:o.y}}switch(T(e)){case"start":u[r]-=g*(n&&a?-1:1);break;case"end":u[r]+=g*(n&&a?-1:1);break}return u}const _t=async(t,e,n)=>{const{placement:o="bottom",strategy:i="absolute",middleware:s=[],platform:r}=n,c=s.filter(Boolean),l=await(r.isRTL==null?void 0:r.isRTL(e));let a=await r.getElementRects({reference:t,floating:e,strategy:i}),{x:d,y:f}=ct(a,o,l),g=o,u={},p=0;for(let h=0;h<c.length;h++){const{name:y,fn:m}=c[h],{x:w,y:x,data:b,reset:v}=await m({x:d,y:f,initialPlacement:o,placement:g,strategy:i,middlewareData:u,rects:a,platform:r,elements:{reference:t,floating:e}});d=w??d,f=x??f,u={...u,[y]:{...u[y],...b}},v&&p<=50&&(p++,typeof v=="object"&&(v.placement&&(g=v.placement),v.rects&&(a=v.rects===!0?await r.getElementRects({reference:t,floating:e,strategy:i}):v.rects),{x:d,y:f}=ct(a,g,l)),h=-1)}return{x:d,y:f,placement:g,strategy:i,middlewareData:u}};async function wt(t,e){var n;e===void 0&&(e={});const{x:o,y:i,platform:s,rects:r,elements:c,strategy:l}=t,{boundary:a="clippingAncestors",rootBoundary:d="viewport",elementContext:f="floating",altBoundary:g=!1,padding:u=0}=q(e,t),p=Wt(u),y=c[g?f==="floating"?"reference":"floating":f],m=X(await s.getClippingRect({element:(n=await(s.isElement==null?void 0:s.isElement(y)))==null||n?y:y.contextElement||await(s.getDocumentElement==null?void 0:s.getDocumentElement(c.floating)),boundary:a,rootBoundary:d,strategy:l})),w=f==="floating"?{...r.floating,x:o,y:i}:r.reference,x=await(s.getOffsetParent==null?void 0:s.getOffsetParent(c.floating)),b=await(s.isElement==null?void 0:s.isElement(x))?await(s.getScale==null?void 0:s.getScale(x))||{x:1,y:1}:{x:1,y:1},v=X(s.convertOffsetParentRelativeRectToViewportRelativeRect?await s.convertOffsetParentRelativeRectToViewportRelativeRect({elements:c,rect:w,offsetParent:x,strategy:l}):w);return{top:(m.top-v.top+p.top)/b.y,bottom:(v.bottom-m.bottom+p.bottom)/b.y,left:(m.left-v.left+p.left)/b.x,right:(v.right-m.right+p.right)/b.x}}function Ht(t,e,n){return(t?[...n.filter(i=>T(i)===t),...n.filter(i=>T(i)!==t)]:n.filter(i=>k(i)===i)).filter(i=>t?T(i)===t||(e?Nt(i)!==i:!1):!0)}const zt=function(t){return t===void 0&&(t={}),{name:"autoPlacement",options:t,async fn(e){var n,o,i;const{rects:s,middlewareData:r,placement:c,platform:l,elements:a}=e,{crossAxis:d=!1,alignment:f,allowedPlacements:g=it,autoAlignment:u=!0,...p}=q(t,e),h=f!==void 0||g===it?Ht(f||null,u,g):g,y=await wt(e,p),m=((n=r.autoPlacement)==null?void 0:n.index)||0,w=h[m];if(w==null)return{};const x=Mt(w,s,await(l.isRTL==null?void 0:l.isRTL(a.floating)));if(c!==w)return{reset:{placement:h[0]}};const b=[y[k(w)],y[x[0]],y[x[1]]],v=[...((o=r.autoPlacement)==null?void 0:o.overflows)||[],{placement:w,overflows:b}],V=h[m+1];if(V)return{data:{index:m+1,overflows:v},reset:{placement:V}};const et=v.map(C=>{const W=T(C.placement);return[C.placement,W&&d?C.overflows.slice(0,2).reduce(($t,Pt)=>$t+Pt,0):C.overflows[0],C.overflows]}).sort((C,W)=>C[1]-W[1]),nt=((i=et.filter(C=>C[2].slice(0,T(C[0])?2:3).every(W=>W<=0))[0])==null?void 0:i[0])||et[0][0];return nt!==c?{data:{index:m+1,overflows:v},reset:{placement:nt}}:{}}}};async function It(t,e){const{placement:n,platform:o,elements:i}=t,s=await(o.isRTL==null?void 0:o.isRTL(i.floating)),r=k(n),c=T(n),l=Y(n)==="y",a=["left","top"].includes(r)?-1:1,d=s&&l?-1:1,f=q(e,t);let{mainAxis:g,crossAxis:u,alignmentAxis:p}=typeof f=="number"?{mainAxis:f,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...f};return c&&typeof p=="number"&&(u=c==="end"?p*-1:p),l?{x:u*d,y:g*a}:{x:g*a,y:u*d}}const Ut=function(t){return t===void 0&&(t=0),{name:"offset",options:t,async fn(e){var n,o;const{x:i,y:s,placement:r,middlewareData:c}=e,l=await It(e,t);return r===((n=c.offset)==null?void 0:n.placement)&&(o=c.arrow)!=null&&o.alignmentOffset?{}:{x:i+l.x,y:s+l.y,data:{...l,placement:r}}}}},jt=function(t){return t===void 0&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:o,placement:i}=e,{mainAxis:s=!0,crossAxis:r=!1,limiter:c={fn:y=>{let{x:m,y:w}=y;return{x:m,y:w}}},...l}=q(t,e),a={x:n,y:o},d=await wt(e,l),f=Y(k(i)),g=gt(f);let u=a[g],p=a[f];if(s){const y=g==="y"?"top":"left",m=g==="y"?"bottom":"right",w=u+d[y],x=u-d[m];u=rt(w,u,x)}if(r){const y=f==="y"?"top":"left",m=f==="y"?"bottom":"right",w=p+d[y],x=p-d[m];p=rt(w,p,x)}const h=c.fn({...e,[g]:u,[f]:p});return{...h,data:{x:h.x-n,y:h.y-o}}}}};function L(t){return yt(t)?(t.nodeName||"").toLowerCase():"#document"}function E(t){var e;return(t==null||(e=t.ownerDocument)==null?void 0:e.defaultView)||window}function O(t){var e;return(e=(yt(t)?t.ownerDocument:t.document)||window.document)==null?void 0:e.documentElement}function yt(t){return t instanceof Node||t instanceof E(t).Node}function R(t){return t instanceof Element||t instanceof E(t).Element}function S(t){return t instanceof HTMLElement||t instanceof E(t).HTMLElement}function lt(t){return typeof ShadowRoot>"u"?!1:t instanceof ShadowRoot||t instanceof E(t).ShadowRoot}function z(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=A(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function Xt(t){return["table","td","th"].includes(L(t))}function J(t){const e=Q(),n=A(t);return n.transform!=="none"||n.perspective!=="none"||(n.containerType?n.containerType!=="normal":!1)||!e&&(n.backdropFilter?n.backdropFilter!=="none":!1)||!e&&(n.filter?n.filter!=="none":!1)||["transform","perspective","filter"].some(o=>(n.willChange||"").includes(o))||["paint","layout","strict","content"].some(o=>(n.contain||"").includes(o))}function qt(t){let e=N(t);for(;S(e)&&!K(e);){if(J(e))return e;e=N(e)}return null}function Q(){return typeof CSS>"u"||!CSS.supports?!1:CSS.supports("-webkit-backdrop-filter","none")}function K(t){return["html","body","#document"].includes(L(t))}function A(t){return E(t).getComputedStyle(t)}function G(t){return R(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function N(t){if(L(t)==="html")return t;const e=t.assignedSlot||t.parentNode||lt(t)&&t.host||O(t);return lt(e)?e.host:e}function xt(t){const e=N(t);return K(e)?t.ownerDocument?t.ownerDocument.body:t.body:S(e)&&z(e)?e:xt(e)}function _(t,e,n){var o;e===void 0&&(e=[]),n===void 0&&(n=!0);const i=xt(t),s=i===((o=t.ownerDocument)==null?void 0:o.body),r=E(i);return s?e.concat(r,r.visualViewport||[],z(i)?i:[],r.frameElement&&n?_(r.frameElement):[]):e.concat(i,_(i,[],n))}function vt(t){const e=A(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const i=S(t),s=i?t.offsetWidth:n,r=i?t.offsetHeight:o,c=j(n)!==s||j(o)!==r;return c&&(n=s,o=r),{width:n,height:o,$:c}}function Z(t){return R(t)?t:t.contextElement}function M(t){const e=Z(t);if(!S(e))return F(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:s}=vt(e);let r=(s?j(n.width):n.width)/o,c=(s?j(n.height):n.height)/i;return(!r||!Number.isFinite(r))&&(r=1),(!c||!Number.isFinite(c))&&(c=1),{x:r,y:c}}const Yt=F(0);function bt(t){const e=E(t);return!Q()||!e.visualViewport?Yt:{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}}function Kt(t,e,n){return e===void 0&&(e=!1),!n||e&&n!==E(t)?!1:e}function D(t,e,n,o){e===void 0&&(e=!1),n===void 0&&(n=!1);const i=t.getBoundingClientRect(),s=Z(t);let r=F(1);e&&(o?R(o)&&(r=M(o)):r=M(t));const c=Kt(s,n,o)?bt(s):F(0);let l=(i.left+c.x)/r.x,a=(i.top+c.y)/r.y,d=i.width/r.x,f=i.height/r.y;if(s){const g=E(s),u=o&&R(o)?E(o):o;let p=g,h=p.frameElement;for(;h&&o&&u!==p;){const y=M(h),m=h.getBoundingClientRect(),w=A(h),x=m.left+(h.clientLeft+parseFloat(w.paddingLeft))*y.x,b=m.top+(h.clientTop+parseFloat(w.paddingTop))*y.y;l*=y.x,a*=y.y,d*=y.x,f*=y.y,l+=x,a+=b,p=E(h),h=p.frameElement}}return X({width:d,height:f,x:l,y:a})}const Gt=[":popover-open",":modal"];function Et(t){return Gt.some(e=>{try{return t.matches(e)}catch{return!1}})}function Jt(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const s=i==="fixed",r=O(o),c=e?Et(e.floating):!1;if(o===r||c&&s)return n;let l={scrollLeft:0,scrollTop:0},a=F(1);const d=F(0),f=S(o);if((f||!f&&!s)&&((L(o)!=="body"||z(r))&&(l=G(o)),S(o))){const g=D(o);a=M(o),d.x=g.x+o.clientLeft,d.y=g.y+o.clientTop}return{width:n.width*a.x,height:n.height*a.y,x:n.x*a.x-l.scrollLeft*a.x+d.x,y:n.y*a.y-l.scrollTop*a.y+d.y}}function Qt(t){return Array.from(t.getClientRects())}function At(t){return D(O(t)).left+G(t).scrollLeft}function Zt(t){const e=O(t),n=G(t),o=t.ownerDocument.body,i=$(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),s=$(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let r=-n.scrollLeft+At(t);const c=-n.scrollTop;return A(o).direction==="rtl"&&(r+=$(e.clientWidth,o.clientWidth)-i),{width:i,height:s,x:r,y:c}}function te(t,e){const n=E(t),o=O(t),i=n.visualViewport;let s=o.clientWidth,r=o.clientHeight,c=0,l=0;if(i){s=i.width,r=i.height;const a=Q();(!a||a&&e==="fixed")&&(c=i.offsetLeft,l=i.offsetTop)}return{width:s,height:r,x:c,y:l}}function ee(t,e){const n=D(t,!0,e==="fixed"),o=n.top+t.clientTop,i=n.left+t.clientLeft,s=S(t)?M(t):F(1),r=t.clientWidth*s.x,c=t.clientHeight*s.y,l=i*s.x,a=o*s.y;return{width:r,height:c,x:l,y:a}}function at(t,e,n){let o;if(e==="viewport")o=te(t,n);else if(e==="document")o=Zt(O(t));else if(R(e))o=ee(e,n);else{const i=bt(t);o={...e,x:e.x-i.x,y:e.y-i.y}}return X(o)}function Ct(t,e){const n=N(t);return n===e||!R(n)||K(n)?!1:A(n).position==="fixed"||Ct(n,e)}function ne(t,e){const n=e.get(t);if(n)return n;let o=_(t,[],!1).filter(c=>R(c)&&L(c)!=="body"),i=null;const s=A(t).position==="fixed";let r=s?N(t):t;for(;R(r)&&!K(r);){const c=A(r),l=J(r);!l&&c.position==="fixed"&&(i=null),(s?!l&&!i:!l&&c.position==="static"&&!!i&&["absolute","fixed"].includes(i.position)||z(r)&&!l&&Ct(t,r))?o=o.filter(d=>d!==r):i=c,r=N(r)}return e.set(t,o),o}function oe(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t;const r=[...n==="clippingAncestors"?ne(e,this._c):[].concat(n),o],c=r[0],l=r.reduce((a,d)=>{const f=at(e,d,i);return a.top=$(f.top,a.top),a.right=U(f.right,a.right),a.bottom=U(f.bottom,a.bottom),a.left=$(f.left,a.left),a},at(e,c,i));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}}function ie(t){const{width:e,height:n}=vt(t);return{width:e,height:n}}function re(t,e,n){const o=S(e),i=O(e),s=n==="fixed",r=D(t,!0,s,e);let c={scrollLeft:0,scrollTop:0};const l=F(0);if(o||!o&&!s)if((L(e)!=="body"||z(i))&&(c=G(e)),o){const f=D(e,!0,s,e);l.x=f.x+e.clientLeft,l.y=f.y+e.clientTop}else i&&(l.x=At(i));const a=r.left+c.scrollLeft-l.x,d=r.top+c.scrollTop-l.y;return{x:a,y:d,width:r.width,height:r.height}}function ft(t,e){return!S(t)||A(t).position==="fixed"?null:e?e(t):t.offsetParent}function St(t,e){const n=E(t);if(!S(t)||Et(t))return n;let o=ft(t,e);for(;o&&Xt(o)&&A(o).position==="static";)o=ft(o,e);return o&&(L(o)==="html"||L(o)==="body"&&A(o).position==="static"&&!J(o))?n:o||qt(t)||n}const se=async function(t){const e=this.getOffsetParent||St,n=this.getDimensions;return{reference:re(t.reference,await e(t.floating),t.strategy),floating:{x:0,y:0,...await n(t.floating)}}};function ce(t){return A(t).direction==="rtl"}const le={convertOffsetParentRelativeRectToViewportRelativeRect:Jt,getDocumentElement:O,getClippingRect:oe,getOffsetParent:St,getElementRects:se,getClientRects:Qt,getDimensions:ie,getScale:M,isElement:R,isRTL:ce};function ae(t,e){let n=null,o;const i=O(t);function s(){var c;clearTimeout(o),(c=n)==null||c.disconnect(),n=null}function r(c,l){c===void 0&&(c=!1),l===void 0&&(l=1),s();const{left:a,top:d,width:f,height:g}=t.getBoundingClientRect();if(c||e(),!f||!g)return;const u=I(d),p=I(i.clientWidth-(a+f)),h=I(i.clientHeight-(d+g)),y=I(a),w={rootMargin:-u+"px "+-p+"px "+-h+"px "+-y+"px",threshold:$(0,U(1,l))||1};let x=!0;function b(v){const V=v[0].intersectionRatio;if(V!==l){if(!x)return r();V?r(!1,V):o=setTimeout(()=>{r(!1,1e-7)},100)}x=!1}try{n=new IntersectionObserver(b,{...w,root:i.ownerDocument})}catch{n=new IntersectionObserver(b,w)}n.observe(t)}return r(!0),s}function fe(t,e,n,o){o===void 0&&(o={});const{ancestorScroll:i=!0,ancestorResize:s=!0,elementResize:r=typeof ResizeObserver=="function",layoutShift:c=typeof IntersectionObserver=="function",animationFrame:l=!1}=o,a=Z(t),d=i||s?[...a?_(a):[],..._(e)]:[];d.forEach(m=>{i&&m.addEventListener("scroll",n,{passive:!0}),s&&m.addEventListener("resize",n)});const f=a&&c?ae(a,n):null;let g=-1,u=null;r&&(u=new ResizeObserver(m=>{let[w]=m;w&&w.target===a&&u&&(u.unobserve(e),cancelAnimationFrame(g),g=requestAnimationFrame(()=>{var x;(x=u)==null||x.observe(e)})),n()}),a&&!l&&u.observe(a),u.observe(e));let p,h=l?D(t):null;l&&y();function y(){const m=D(t);h&&(m.x!==h.x||m.y!==h.y||m.width!==h.width||m.height!==h.height)&&n(),h=m,p=requestAnimationFrame(y)}return n(),()=>{var m;d.forEach(w=>{i&&w.removeEventListener("scroll",n),s&&w.removeEventListener("resize",n)}),f==null||f(),(m=u)==null||m.disconnect(),u=null,l&&cancelAnimationFrame(p)}}const ue=zt,de=jt,me=(t,e,n)=>{const o=new Map,i={platform:le,...n},s={...i.platform,_c:o};return _t(t,e,{...i,platform:s})};function H(t){return(t==null?void 0:t.isConnected)===!0}function Rt(t){const e=t.getSelected(),n=t.getWrapper();return!e&&n?n.getEl():e==null?void 0:e.getEl()}const B={};function Ot(){return B}function ge(t){for(const e in t){const n=e,o=t[n];B[n]=o}}function tt(){B.stopAutoUpdate&&B.stopAutoUpdate();for(const t in B){const e=t;delete B[e]}}function Tt(t,e){const n={placement:"right",middleware:[Ut(10),ue(),de({crossAxis:!0,padding:10})]};return()=>{if(!e||!H(e)){tt();return}me(t,e,n).then(({x:o,y:i})=>{e.style.left=`${o}px`,e.style.top=`${i}px`}).catch(o=>{const{message:i}=o;console.warn(`${P} updateFloatingPosition - ${i}`)})}}function Ft(t,e){try{const n=window.getComputedStyle(e);n.display==="none"&&(e.style.display="block"),n.position!=="absolute"&&(e.style.position="absolute"),["0","auto"].includes(n.zIndex)&&(e.style.zIndex="99999"),n.width==="auto"&&(e.style.width="max-content"),n.top!=="0"&&(e.style.top="0"),n.left!=="0"&&(e.style.left="0");const o=Tt(t,e);return fe(t,e,o)}catch(n){const{message:o}=n;console.warn(`${P} showFloatingElement - ${o}`)}}function Lt(t,e){try{window.getComputedStyle(t).display!=="none"&&(t.style.display="none"),e&&e()}catch(n){const{message:o}=n;console.warn(`${P} hideFloatingElement - ${o}`)}}function he(t){return(e,n,o)=>{try{const{isDebugging:i}=o;i&&console.log(`${P} onShowFloatingElement`,{editor:e,sender:n,options:o,pluginOptions:t});const s=o.referenceElement||Rt(e);if(!s||!H(s))throw new Error('"referenceElement" is empty');const r=o.floatingElement||t.floatingElement;if(!r||!H(r))throw new Error('"floatingElement" is required');const c=Ot();c.stopAutoUpdate&&c.stopAutoUpdate();const l=Ft(s,r);if(!l)throw new Error('"stopAutoUpdate" is empty');ge({floatingElement:r,stopAutoUpdate:l}),e.trigger(dt,r,s)}catch(i){const{message:s}=i;console.warn(`${P} onShowFloatingElement - ${s}`),tt()}}}function pe(t){return(e,n,o)=>{try{const{isDebugging:i}=o;i&&console.log(`${P} onHideFloatingElement`,{editor:e,sender:n,options:o,pluginOptions:t});const s=o.referenceElement||Rt(e);if(!s||!H(s))throw new Error('"referenceElement" is empty');const r=Ot();let c=o.floatingElement||t.floatingElement;if(r.floatingElement&&(c=r.floatingElement),!c||!H(c))throw new Error('"floatingElement" is required');Lt(c),e.trigger(mt,c,s)}catch(i){const{message:s}=i;console.warn(`${P} onHideFloatingElement - ${s}`)}finally{tt()}}}const we=(t,e={})=>{const n=t.Commands;n.add(dt,he(e)),n.add(mt,pe(e))};exports.default=we;exports.hideFloatingElement=Lt;exports.showFloatingElement=Ft;exports.updateFloatingPosition=Tt;