mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-24 14:36:59 +02:00
1 line
No EOL
14 KiB
JavaScript
1 line
No EOL
14 KiB
JavaScript
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[78526],{71670:(t,e,o)=>{o.d(e,{Z:()=>s,a:()=>r});var i=o(27378);const n={},a=i.createContext(n);function r(t){const e=i.useContext(a);return i.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function s(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(n):t.components||n:r(t.components),i.createElement(a.Provider,{value:e},t.children)}},47257:(t,e,o)=>{o.d(e,{Z:()=>L});var i=o(27378),n=o(31542);const a=(t,e)=>t===e?.tagName?.toUpperCase?.(),r=t=>a("DIV",t)||a("SPAN",t),s=t=>a("IMG",t),h=t=>t.complete&&0!==t.naturalHeight,l=t=>a("SVG",t),d=({height:t,offset:e,width:o})=>Math.min((window.innerWidth-2*e)/o,(window.innerHeight-2*e)/t),c=({containerHeight:t,containerWidth:e,hasScalableSrc:o,offset:i,targetHeight:n,targetWidth:a})=>t&&e?!o&&n&&a?(({containerHeight:t,containerWidth:e,offset:o,targetHeight:i,targetWidth:n})=>{const a=d({height:i,offset:o,width:n}),r=n>i?n/e:i/t;return a>1?r:a*r})({containerHeight:t,containerWidth:e,offset:i,targetHeight:n,targetWidth:a}):d({height:t,offset:i,width:e}):1,m=/url(?:\(['"]?)(.*?)(?:['"]?\))/,g=t=>{if(t){if(s(t))return t.currentSrc;if(r(t)){const e=window.getComputedStyle(t).backgroundImage;if(e)return m.exec(e)?.[1]}}},u=({position:t,relativeNum:e})=>{const o=parseFloat(t);return t.endsWith("%")?e*o/100:o},f=/\.svg$/i,v=({hasZoomImg:t,imgSrc:e,isSvg:o,isZoomed:i,loadedImgEl:n,offset:a,shouldRefresh:s,targetEl:h})=>{const l=o||"data:image/svg+xml"===e?.slice?.(0,18)||t||!(!e||!f.test(e)),d=h.getBoundingClientRect(),m=window.getComputedStyle(h),g=null!=n&&r(h),v=null!=n&&!g,p=(({containerHeight:t,containerLeft:e,containerTop:o,containerWidth:i,hasScalableSrc:n,offset:a,targetHeight:r,targetWidth:s})=>{const h=c({containerHeight:t,containerWidth:i,hasScalableSrc:n,offset:a,targetHeight:r,targetWidth:s});return{top:o,left:e,width:i*h,height:t*h,transform:`translate(0,0) scale(${1/h})`}})({containerHeight:d.height,containerLeft:d.left,containerTop:d.top,containerWidth:d.width,hasScalableSrc:l,offset:a,targetHeight:n?.naturalHeight??d.height,targetWidth:n?.naturalWidth??d.width}),w=v?(({containerHeight:t,containerLeft:e,containerTop:o,containerWidth:i,hasScalableSrc:n,objectFit:a,objectPosition:r,offset:s,targetHeight:h,targetWidth:l})=>{if("scale-down"===a&&(a=l<=i&&h<=t?"none":"contain"),"cover"===a||"contain"===a){const d=i/l,m=t/h,g="cover"===a?Math.max(d,m):Math.min(d,m),[f="50%",v="50%"]=r.split(" "),p=u({position:f,relativeNum:i-l*g}),w=u({position:v,relativeNum:t-h*g}),E=c({containerHeight:h*g,containerWidth:l*g,hasScalableSrc:n,offset:s,targetHeight:h,targetWidth:l});return{top:o+w,left:e+p,width:l*g*E,height:h*g*E,transform:`translate(0,0) scale(${1/E})`}}if("none"===a){const[a="50%",d="50%"]=r.split(" "),m=u({position:a,relativeNum:i-l}),g=u({position:d,relativeNum:t-h}),f=c({containerHeight:h,containerWidth:l,hasScalableSrc:n,offset:s,targetHeight:h,targetWidth:l});return{top:o+g,left:e+m,width:l*f,height:h*f,transform:`translate(0,0) scale(${1/f})`}}if("fill"===a){const e=i/l,o=t/h,a=Math.max(e,o),r=c({containerHeight:h*a,containerWidth:l*a,hasScalableSrc:n,offset:s,targetHeight:h,targetWidth:l});return{width:i*r,height:t*r,transform:`translate(0,0) scale(${1/r})`}}return{}})({containerHeight:d.height,containerLeft:d.left,containerTop:d.top,containerWidth:d.width,hasScalableSrc:l,objectFit:m.objectFit,objectPosition:m.objectPosition,offset:a,targetHeight:n.naturalHeight,targetWidth:n.naturalWidth}):void 0,E=g?(({backgroundPosition:t,backgroundSize:e,containerHeight:o,containerLeft:i,containerTop:n,containerWidth:a,hasScalableSrc:r,offset:s,targetHeight:h,targetWidth:l})=>{if("cover"===e||"contain"===e){const d=a/l,m=o/h,g="cover"===e?Math.max(d,m):Math.min(d,m),[f="50%",v="50%"]=t.split(" "),p=u({position:f,relativeNum:a-l*g}),w=u({position:v,relativeNum:o-h*g}),E=c({containerHeight:h*g,containerWidth:l*g,hasScalableSrc:r,offset:s,targetHeight:h,targetWidth:l});return{top:n+w,left:i+p,width:l*g*E,height:h*g*E,transform:`translate(0,0) scale(${1/E})`}}if("auto"===e){const[e="50%",d="50%"]=t.split(" "),m=u({position:e,relativeNum:a-l}),g=u({position:d,relativeNum:o-h}),f=c({containerHeight:h,containerWidth:l,hasScalableSrc:r,offset:s,targetHeight:h,targetWidth:l});return{top:n+g,left:i+m,width:l*f,height:h*f,transform:`translate(0,0) scale(${1/f})`}}{const[d="50%",m="50%"]=e.split(" "),g=u({position:d,relativeNum:a})/l,f=u({position:m,relativeNum:o})/h,v=Math.min(g,f),[p="50%",w="50%"]=t.split(" "),E=u({position:p,relativeNum:a-l*v}),S=u({position:w,relativeNum:o-h*v}),b=c({containerHeight:h*v,containerWidth:l*v,hasScalableSrc:r,offset:s,targetHeight:h,targetWidth:l});return{top:n+S,left:i+E,width:l*v*b,height:h*v*b,transform:`translate(0,0) scale(${1/b})`}}})({backgroundPosition:m.backgroundPosition,backgroundSize:m.backgroundSize,containerHeight:d.height,containerLeft:d.left,containerTop:d.top,containerWidth:d.width,hasScalableSrc:l,offset:a,targetHeight:n.naturalHeight,targetWidth:n.naturalWidth}):void 0,S=Object.assign({},p,w,E);if(i){const t=window.innerWidth/2,e=window.innerHeight/2,o=t-(parseFloat(String(S.left||0))+parseFloat(String(S.width||0))/2),i=e-(parseFloat(String(S.top||0))+parseFloat(String(S.height||0))/2);s&&(S.transitionDuration="0.01ms"),S.transform=`translate(${o}px,${i}px) scale(1)`}return S};let p;"undefined"!=typeof document&&(p=document.createElement("div"),p.setAttribute("data-rmiz-portal",""),document.body.appendChild(p));const w=["img","svg",'[role="img"]',"[data-zoom]"].map((t=>`${t}:not([aria-hidden="true"])`)).join(","),E={overflow:"",width:""};function S(t){return i.createElement(b,{...t})}class b extends i.Component{constructor(){super(...arguments),this.state={id:"",isZoomImgLoaded:!1,loadedImgEl:void 0,modalState:"UNLOADED",shouldRefresh:!1},this.refContent=(0,i.createRef)(),this.refDialog=(0,i.createRef)(),this.refModalContent=(0,i.createRef)(),this.refModalImg=(0,i.createRef)(),this.refWrap=(0,i.createRef)(),this.imgEl=null,this.prevBodyAttrs=E,this.styleModalImg={},this.setId=()=>{const t=()=>Math.random().toString(16).slice(-4);this.setState({id:t()+t()+t()})},this.setAndTrackImg=()=>{const t=this.refContent.current;t&&(this.imgEl=t.querySelector(w),this.imgEl?(this.changeObserver?.disconnect?.(),this.imgEl?.addEventListener?.("load",this.handleImgLoad),this.imgEl?.addEventListener?.("click",this.handleZoom),this.state.loadedImgEl||this.handleImgLoad(),this.imgElObserver=new ResizeObserver((t=>{const e=t[0];e?.target&&(this.imgEl=e.target,this.setState({}))})),this.imgElObserver.observe(this.imgEl)):this.changeObserver||(this.changeObserver=new MutationObserver(this.setAndTrackImg),this.changeObserver.observe(t,{childList:!0,subtree:!0})))},this.handleIfZoomChanged=t=>{const{isZoomed:e}=this.props;!t&&e?this.zoom():t&&!e&&this.unzoom()},this.handleImgLoad=()=>{const{imgEl:t}=this,e=g(t);if(!e)return;const o=new Image;s(t)&&(o.sizes=t.sizes,o.srcset=t.srcset),o.src=e;const i=()=>{this.setState({loadedImgEl:o})};o.decode().then(i).catch((()=>{h(o)?i():o.onload=i}))},this.handleZoom=()=>{this.props.onZoomChange?.(!0)},this.handleUnzoom=()=>{this.props.onZoomChange?.(!1)},this.handleDialogCancel=t=>{t.preventDefault()},this.handleDialogClick=t=>{t.target!==this.refModalContent.current&&t.target!==this.refModalImg.current||this.handleUnzoom()},this.handleDialogKeyDown=t=>{"Escape"!==t.key&&27!==t.keyCode||(t.preventDefault(),t.stopPropagation(),this.handleUnzoom())},this.handleWheel=t=>{t.stopPropagation(),queueMicrotask((()=>{this.handleUnzoom()}))},this.handleTouchStart=t=>{1===t.changedTouches.length&&t.changedTouches[0]&&(this.touchYStart=t.changedTouches[0].screenY)},this.handleTouchMove=t=>{if(null!=this.touchYStart&&t.changedTouches[0]){this.touchYEnd=t.changedTouches[0].screenY;const e=Math.max(this.touchYStart,this.touchYEnd),o=Math.min(this.touchYStart,this.touchYEnd);Math.abs(e-o)>10&&(this.touchYStart=void 0,this.touchYEnd=void 0,this.handleUnzoom())}},this.handleTouchCancel=()=>{this.touchYStart=void 0,this.touchYEnd=void 0},this.handleResize=()=>{this.setState({shouldRefresh:!0})},this.zoom=()=>{this.bodyScrollDisable(),this.refDialog.current?.showModal?.(),this.setState({modalState:"LOADING"}),this.loadZoomImg(),window.addEventListener("wheel",this.handleWheel,{passive:!0}),window.addEventListener("touchstart",this.handleTouchStart,{passive:!0}),window.addEventListener("touchend",this.handleTouchMove,{passive:!0}),window.addEventListener("touchcancel",this.handleTouchCancel,{passive:!0}),this.refModalImg.current?.addEventListener?.("transitionend",this.handleZoomEnd,{once:!0})},this.handleZoomEnd=()=>{setTimeout((()=>{this.setState({modalState:"LOADED"}),window.addEventListener("resize",this.handleResize,{passive:!0})}),0)},this.unzoom=()=>{this.setState({modalState:"UNLOADING"}),window.removeEventListener("wheel",this.handleWheel),window.removeEventListener("touchstart",this.handleTouchStart),window.removeEventListener("touchend",this.handleTouchMove),window.removeEventListener("touchcancel",this.handleTouchCancel),this.refModalImg.current?.addEventListener?.("transitionend",this.handleUnzoomEnd,{once:!0})},this.handleUnzoomEnd=()=>{setTimeout((()=>{window.removeEventListener("resize",this.handleResize),this.setState({shouldRefresh:!1,modalState:"UNLOADED"}),this.refDialog.current?.close?.(),this.bodyScrollEnable()}),0)},this.bodyScrollDisable=()=>{this.prevBodyAttrs={overflow:document.body.style.overflow,width:document.body.style.width};const t=document.body.clientWidth;document.body.style.overflow="hidden",document.body.style.width=`${t}px`},this.bodyScrollEnable=()=>{document.body.style.width=this.prevBodyAttrs.width,document.body.style.overflow=this.prevBodyAttrs.overflow,this.prevBodyAttrs=E},this.loadZoomImg=()=>{const{props:{zoomImg:t}}=this,e=t?.src;if(e){const o=new Image;o.sizes=t?.sizes??"",o.srcset=t?.srcSet??"",o.src=e;const i=()=>{this.setState({isZoomImgLoaded:!0})};o.decode().then(i).catch((()=>{h(o)?i():o.onload=i}))}},this.UNSAFE_handleSvg=()=>{const{imgEl:t,refModalImg:e,styleModalImg:o}=this;if(l(t)){const i=document.createElement("div");i.innerHTML=t.outerHTML;const n=i.firstChild;n.style.width=`${o.width||0}px`,n.style.height=`${o.height||0}px`,n.addEventListener("click",this.handleUnzoom),e.current?.firstChild?.remove?.(),e.current?.appendChild?.(n)}}}render(){const{handleDialogCancel:t,handleDialogClick:e,handleDialogKeyDown:o,handleUnzoom:a,handleZoom:h,imgEl:d,props:{a11yNameButtonUnzoom:c,a11yNameButtonZoom:m,children:u,classDialog:f,IconUnzoom:w,IconZoom:E,isZoomed:S,wrapElement:b,ZoomContent:L,zoomImg:z,zoomMargin:y},refContent:I,refDialog:M,refModalContent:W,refModalImg:C,refWrap:D,state:{id:H,isZoomImgLoaded:Z,loadedImgEl:N,modalState:T,shouldRefresh:U}}=this,A=`rmiz-modal-${H}`,k=`rmiz-modal-img-${H}`,O=r(d),x=s(d),R=l(d),$=(t=>{if(t)return s(t)?t.alt??void 0:t.getAttribute("aria-label")??void 0})(d),B=g(d),P=x?d.sizes:void 0,Y=x?d.srcset:void 0,F=!!z?.src,j=d&&(N||R)&&"none"!==window.getComputedStyle(d).display,G=$?`${m}: ${$}`:m,K="LOADING"===T||"LOADED"===T,_=j?"found":"not-found",q="UNLOADED"===T||"UNLOADING"===T?"hidden":"visible",V={visibility:"UNLOADED"===T?"visible":"hidden"},J=(t=>{if(!t)return{};if(l(t)){const e=t.parentElement,o=t.getBoundingClientRect();if(e){const t=e.getBoundingClientRect();return{height:o.height,left:t.left-o.left,top:t.top-o.top,width:o.width}}return{height:o.height,left:o.left,width:o.width,top:o.top}}return{height:t.offsetHeight,left:t.offsetLeft,width:t.offsetWidth,top:t.offsetTop}})(d);this.styleModalImg=j?v({hasZoomImg:F,imgSrc:B,isSvg:R,isZoomed:S&&K,loadedImgEl:N,offset:y,shouldRefresh:U,targetEl:d}):{};let Q=null;if(j){const t=x||O?i.createElement("img",{alt:$,sizes:P,src:B,srcSet:Y,...Z&&"LOADED"===T?z:{},"data-rmiz-modal-img":"",height:this.styleModalImg.height||void 0,id:k,ref:C,style:this.styleModalImg,width:this.styleModalImg.width||void 0}):R?i.createElement("div",{"data-rmiz-modal-img":!0,ref:C,style:this.styleModalImg}):null,e=i.createElement("button",{"aria-label":c,"data-rmiz-btn-unzoom":"",onClick:a,type:"button"},i.createElement(w,null));Q=L?i.createElement(L,{buttonUnzoom:e,modalState:T,img:t,onUnzoom:a}):i.createElement(i.Fragment,null,t,e)}return i.createElement(b,{"aria-owns":A,"data-rmiz":"",ref:D},i.createElement(b,{"data-rmiz-content":_,ref:I,style:V},u),j&&i.createElement(b,{"data-rmiz-ghost":"",style:J},i.createElement("button",{"aria-label":G,"data-rmiz-btn-zoom":"",onClick:h,type:"button"},i.createElement(E,null))),j&&null!=p&&(0,n.createPortal)(i.createElement("dialog",{"aria-labelledby":k,"aria-modal":"true",className:f,"data-rmiz-modal":"",id:A,onClick:e,onClose:a,onCancel:t,onKeyDown:o,ref:M,role:"dialog"},i.createElement("div",{"data-rmiz-modal-overlay":q}),i.createElement("div",{"data-rmiz-modal-content":"",ref:W},Q)),p))}componentDidMount(){this.setId(),this.setAndTrackImg(),this.handleImgLoad(),this.UNSAFE_handleSvg()}componentWillUnmount(){"UNLOADED"!==this.state.modalState&&this.bodyScrollEnable(),this.changeObserver?.disconnect?.(),this.imgElObserver?.disconnect?.(),this.imgEl?.removeEventListener?.("load",this.handleImgLoad),this.imgEl?.removeEventListener?.("click",this.handleZoom),this.refModalImg.current?.removeEventListener?.("transitionend",this.handleZoomEnd),this.refModalImg.current?.removeEventListener?.("transitionend",this.handleUnzoomEnd),window.removeEventListener("wheel",this.handleWheel),window.removeEventListener("touchstart",this.handleTouchStart),window.removeEventListener("touchend",this.handleTouchMove),window.removeEventListener("touchcancel",this.handleTouchCancel),window.removeEventListener("resize",this.handleResize)}componentDidUpdate(t){this.UNSAFE_handleSvg(),this.handleIfZoomChanged(t.isZoomed)}}function L(t){const[e,o]=(0,i.useState)(!1);return i.createElement(S,{...t,isZoomed:e,onZoomChange:o})}b.defaultProps={a11yNameButtonUnzoom:"Minimize image",a11yNameButtonZoom:"Expand image",IconUnzoom:function(){return i.createElement("svg",{"aria-hidden":"true","data-rmiz-btn-unzoom-icon":!0,fill:"currentColor",focusable:"false",viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg"},i.createElement("path",{d:"M 14.144531 1.148438 L 9 6.292969 L 9 3 L 8 3 L 8 8 L 13 8 L 13 7 L 9.707031 7 L 14.855469 1.851563 Z M 8 8 L 3 8 L 3 9 L 6.292969 9 L 1.148438 14.144531 L 1.851563 14.855469 L 7 9.707031 L 7 13 L 8 13 Z"}))},IconZoom:function(){return i.createElement("svg",{"aria-hidden":"true","data-rmiz-btn-zoom-icon":!0,fill:"currentColor",focusable:"false",viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg"},i.createElement("path",{d:"M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z"}))},wrapElement:"div",zoomMargin:0}}}]); |