https://content.www.wellcomecollection.org/_next/static/chunks/2426.71ed7a55d0b86a36.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2426],{12426:(e,t,i)=>{i.r(t),i.d(t,{default:()=>k});var o=i(6029),n=i(83730),r=i.n(n),a=i(55729),c=i(79945),l=i(80715),s=i(22901),d=i(6640),h=i(27229),u=i(64691),f=i(48465),p=i(94379),m=i(18772);let g=c.Ay.div.withConfig({componentId:"sc-77a77f5c-0"})(["position:relative;z-index:5;width:100%;height:100%;background:",";"],e=>e.theme.color("black")),v=c.Ay.div.withConfig({componentId:"sc-77a77f5c-1"})(["position:absolute;top:0;right:0;z-index:2;"]),x=c.Ay.div.withConfig({componentId:"sc-77a77f5c-2"})(["height:100%;"]),w=()=>(0,o.jsx)("div",{children:(0,o.jsx)("p",{children:"The image viewer is not working."})}),j=e=>{let{children:t}=e;return(0,o.jsx)(f.A,{as:"span",$h:{size:"sm",properties:["margin-left"]},children:t})},k=e=>{let{iiifImageLocation:t}=e,{mainImageService:i,setShowZoomed:n}=(0,p.qO)(),c=t?t.url:(0,m.y)(i["@id"]),[k,A]=(0,a.useState)(!1),[b,y]=(0,a.useState)(null),C=(0,a.useRef)(null),z=(0,a.useRef)(null),R=(0,a.useRef)(null),S=(0,a.useRef)(null),H=(0,a.useRef)(!1);function M(e,t){if(!e)return;let i=e.viewport.getZoom(),o=t>0?Math.min(i+t,e.viewport.getMaxZoom()):Math.max(i+t,e.viewport.getMinZoom());e.viewport.zoomTo(o)}function _(e,t){e&&e.isOpen()&&M(e,t)}return(0,a.useEffect)(()=>(!H.current&&c&&(H.current=!0,fetch(c).then(e=>e.json()).then(e=>{let t=r()({id:"image-viewer-".concat("zoomedImage"),showNavigationControl:!1,visibilityRatio:1,tileSources:[{"@context":"http://iiif.io/api/image/2/context.json","@id":e["@id"],height:e.height,width:e.width,profile:["http://iiif.io/api/image/2/level2.json"],protocol:"http://iiif.io/api/image",tiles:[{scaleFactors:[1,2,4,8,16,32],width:400}]}]});t.addOnceHandler("tile-loaded",()=>{M(t,.5)}),t.addHandler("tile-loaded",()=>{t.container.setAttribute("role","toolbar"),t.container.setAttribute("aria-description","use arrow keys to pan the image")}),y(t),C.current=t}).catch(()=>{A(!0)})),R.current&&R.current.focus(),()=>{var e;return null==(e=C.current)?void 0:e.destroy()}),[]),(0,o.jsxs)(g,{ref:S,onKeyDown:function(e){e.target===z.current&&function(e){if(e.shiftKey&&9===e.keyCode){var t;e.preventDefault(),(null==(t=S.current)?void 0:t.querySelector(".openseadragon-canvas")).focus()}}(e),e.target instanceof HTMLElement&&e.target.classList.contains("openseadragon-canvas")&&function(e){if(!e.shiftKey&&9===e.keyCode){var t;e.preventDefault(),null==z||null==(t=z.current)||t.focus()}}(e)},children:[(0,o.jsx)(v,{children:(0,o.jsxs)(f.A,{$v:{size:"md",properties:["margin-top","margin-bottom"]},$h:{size:"md",properties:["margin-left","margin-right"]},children:[(0,o.jsx)(j,{children:(0,o.jsx)(u.A,{ref:z,colorScheme:"black-on-white",text:"Zoom in",icon:l.A,clickHandler:()=>{_(b,.5)}})}),(0,o.jsx)(j,{children:(0,o.jsx)(u.A,{colorScheme:"black-on-white",text:"Zoom out",icon:s.A,clickHandler:()=>{_(b,-.5)}})}),(0,o.jsx)(j,{children:(0,o.jsx)(u.A,{colorScheme:"black-on-white",text:"Rotate",icon:d.A,clickHandler:()=>{!function(e){e&&e.viewport.setRotation(e.viewport.getRotation()+90)}(b)}})}),(0,o.jsx)(j,{children:(0,o.jsx)(u.A,{ref:R,colorScheme:"black-on-white",text:"Close",icon:h.A,clickHandler:()=>{n(!1)}})})]})}),(0,o.jsx)(x,{id:"image-viewer-zoomedImage","data-testid":"zoomed-image",children:k&&(0,o.jsx)(w,{})})]})}},22901:(e,t,i)=>{i.d(t,{A:()=>n});var o=i(6029);let n=function(e){return(0,o.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,o.jsx)("path",{fill:"currentColor",d:"M20.49 11h-17a1 1 0 1 0 0 2h17a1 1 0 0 0 0-2",className:"icon__shape"})})}}}]);