\n\n Interview with Michelle Childs, professor with the Retail, Hospitality,\n and Tourism Management department of UT. Childs discusses the effects of\n the wildfire on the businesses in Gatlinburg primarily over an extended\n time frame. She talks about the preparedness of businesses with contacting\n employees during the fire and in terms of insurance coverage. She also\n elaborates on the initial return of tourists to the area, and the steady\n recovery of the area. This is a representative quote from the interview:\n \"What was really interesting because likely its such a small, tightknit\n community that those personal stories were really intertwined with the\n business stories.\"\n
","html-attributes#HTML Attributes":"Summary, like all Clover IIIF primitives accept common HTMLElement attributes. Use the JSX style className prop to add custom classes. The same attribute methodology can be used for id, style, title, data-*, and aria-* props.\n\n Robin Goodfellow playing a horn that ends in a dragon-head in front of a\n Berkeley Folk Music Festival sign. Digital scan of a black and white\n negative.\n ","language#Language":"Additional to being rendered to the DOM like other attributes, the value of lang will couple with InternationalString props to output the denoted label, value, summary entries. If lang is undefined, entries will default to the first entry in the array index. The value of lang should be a two letter BCP 47 language code.In this example we will render Arabic entries from the summary prop. The lang prop will be set to ar and dir will be set to rtl for right-to-left reading.\n\n\n رسول الله صلى اعلي إن كان ولد سلطان يكون بحرمة الخاتم لا يموت حتى يكون\n ملك, إن كان عبد يكون الحر, من يمشي الى سفر كتبه في لوح و شرب واحد و غسل\n واحد و علق واحد لايرا مصيبة الطريق حتى يرجع سالما غانما, من كتبه ولحد\n
"}},"/docs/thumbnail":{"title":"Thumbnail","data":{"":"The Thumbnail component is used to display a thumbnail for a IIIF resource. This generally is an Image, however, could be a short Video or Sound clip.\n element depenpdent on the type of the resource in the thumbnail entry. Currently, only type Image and Video are supported.\nProp\tType\tDefault\tRequired\tas\timg, video\timg\t--\tthumbnail\tthumbnail\t--\tYes\tclassName\tstring, undefined\t--\t--\tstyle\tCSSProperties, undefined\t--\t--\tlang\tstring, undefined\t--\t--\ttitle\tstring, undefined\t--\t--\tdata-*\tstring, undefined\t--\t--\taria-*\tAriaAttributes, undefined\t--\t--","video-thumbnail#Video Thumbnail":"Using the Thumbnail component, you can render a video thumbnail. This is useful for displaying a short clip of a video resource. To do so, a W3C media fragment using temporal dimension should be appended to the id of the external Video resource, ex: #t=200,230. Additionally, a duration property should be used to account for time in seconds.\n "}},"/docs/viewer":{"title":"Viewer","data":{"":"A UI component that renders a multicanvas IIIF item viewer with pan-zoom support for Image via OpenSeadragon and Video and Sound content resources using the HTML video element.","features#Features":"Provide a IIIF Presentation API Manifest or Collection and the component:\nRenders a multi-canvas Video, Sound, and Image viewer\nRenders thumbnails as navigation between canvases\nRenders annotations with the motivation of supplementing with a content resource having the format of text/vtt for Video and Sound\nVideo and Sound are rendered within a HTML5 element\nImage canvases are renderered with OpenSeadragon\nSupports HLS streaming for Video and Audio canvases\nSupports IIIF Collections and toggling between child Manifests\nSupports placeholderCanvas for Image canvases.","installation#Installation":"npm install @samvera/clover-iiif\n yarn add @samvera/clover-iiif\n pnpm install @samvera/clover-iiif","usage#Usage":"","react#React":"Add the Viewer component to your jsx or tsx code.\nimport Viewer from \"@samvera/clover-iiif/viewer\";\nRender Viewer with a IIIF Manifest or Collection URI. The only required prop is the iiifContent, which is the URI of the IIIF Manifest or Collection.\n web component.\n\n \n Clover IIIF - Viewer - Web Component \n elements and the OpenseaDragon canvas.\nOption withCredentials being set as true will inform IIIF resource requests to be made using credentials such as cookies, authorization headers or TLS client certificates.\nOption options.openSeadragon will grant you ability to override the OpenSeadragon default options set within the Clover IIIF Viewer to adjust touch and mouse gesture settings and various other configurations.","canvas-height#Canvas Height":"The height of the canvas can be set using the options.canvasHeight prop. This prop accepts a string value that is a valid CSS height value. The default value is 500px.","automatic-height#Automatic Height":"If the height is set to auto or 100%, the Viewer will expand to the height of its wrapping container element. The wrapping element must have a position relative, along with a defined height for this to display as expected. Be aware to set a z-index value of 0 or an applicable value within your consuming application to ensure the viewer does not conflict with other page elements.\nexport default function App() {\n const iiifContent =\n \"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif\";\n const options = {\n canvasHeight: \"auto\", // or \"100%\"\n };\n return (\n \n
\n );\n}","information-panel#Information Panel":"The information panel is a collapsible panel that displays information about the current Manifest and renders supplementing resources for the active canvas. It is rendered by default, but can be configured to be hidden or to render only certain tabs.\nProp\tType\tRequired\tDefault\toptions.informationPanel.open\tboolean\tNo\ttrue\toptions.informationPanel.vtt.autoScroll\tSee Auto Scroll\tNo\ttrue\toptions.informationPanel.renderAbout\tboolean\tNo\ttrue\toptions.informationPanel.renderAnnotation\tboolean\tNo\ttrue\toptions.informationPanel.renderSupplementing\tboolean\tNo\ttrue\toptions.informationPanel.renderToggle\tboolean\tNo\ttrue\toptions.informationPanel.renderContentSearch\tboolean\tNo\ttrue\toptions.informationPanel.defaultTab\tstring\tNo\t\t\nIf renderAbout is true, Clover will use the About tab as the default tab. Use options.informationPanel.defaultTab to set the default tab.If you want content search to be the default tab, use manifest-content-search\n","active-canvas#Active Canvas":"Example on using canvasIdCallback to return to your consuming application the active canvas ID. This will return as a string.\nconst iiifContent =\n \"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif\";\nconst handlCanvasIdCallback = (activeCanvasId) => {\n if (activeCanvasId) console.log(activeCanvasId);\n};\nreturn (\n \n
My Custom Display \n
Canvas ID: {id}
\n
Annotation Body:
\n
{JSON.stringify(annotationBody)} \n
Custom props:
\n
{JSON.stringify(restProps)} \n ...your display here\n
\n P \n \n );\n}\n// PluginInfoPanel.tsx\nexport default function PluginInfoPanel(props) {\n const {\n canvas,\n useViewerDispatch,\n useViewerState,\n // componentProps\n objectId,\n } = props;\n return (\n \n
Plugin Info Panel
\n
objectId: {objectId}
\n
\n \n );\n}"}},"/docs/viewer/contentsearch":{"title":"Contentsearch","data":{"viewer#Viewer":"","content-search#Content search.":"Type in anything in the search field, and click the search button or type return. This demo will show the search results for \"Berliner\". Click on any of search results, and Clover will zoom and pan to that search result.Due to the fact that the Clover documentation site is a statically generated, search will only return results for \"Berliner\" because the search service returns a static content search manifest. In a fully functional site, the search service will return a dynamic content search manifest based on the entered search words."}},"/docs/viewer/demo":{"title":"Demo","data":{"viewer#Viewer":"A UI component that renders a multicanvas IIIF item viewer with pan-zoom support for Image via OpenSeadragon and Video and Sound content resources using the HTML video element."}},"/":{"title":"Index","data":{"":"\n
\nFor Simple Images, render Image with a src attribute of the image, ex: https://example.org/image.jpg. The isTiledImage must be omitted or set to false.\n\n
","using-the-iiif-annotation-body#Using the IIIF annotation body":"When using the IIIF annotation body from IIIF Manifest, the Image component will render the image based on the IIIF Image service id and other properties.\n\n
","vanilla-javascript#Vanilla JavaScript":"The Viewer can also be implemented in Vanilla Javascript by use of a web component. This web component example sources a registered web component.\n\n \n Clover IIIF - Image - Web Component \n \n
\n \n","nextjs#Next.js":"Implementation with Next.js requires a dynamic import utilizing next/dynamic. This is due to Next's node compilation method creating issue with an OpenSeadragon (a dependency of Clover IIIF) assumption of a browser document object.\nimport dynamic from \"next/dynamic\";\nconst Image = dynamic(\n () => import(\"@samvera/clover-iiif\").then((Clover) => Clover.Image),\n {\n ssr: false,\n },\n);\nconst MyCustomImage = () => {\n return (\n \n \n
Creator \n Fava, Antonio, 1949- \n \n \n
Date \n 2012 \n \n ","usage#Usage":"","react#React":"import { Metadata } from \"@samvera/clover-iiif/primitives\";\nconst CustomMetadata = ({ metadata }) => {\n return \n \n
Creator \n Fava, Antonio, 1949- \n \n \n
Date \n 2012 \n \n ","language#Language":"Additional to being rendered to the DOM like other attributes, the value of lang will couple with InternationalString props to output the denoted label, value, summary entries. If lang is undefined, entries will default to the first entry in the array index. The value of lang should be a two letter BCP 47 language code.\n\n\n \n
\n Beteiligte\n \n \n Jan (der Ältere) Brueghel\n \n \n \n
\n Technik\n \n \n Öl, Kupfer\n \n \n ","custom-values#Custom Values":"If a consuming application requires rendering specific metadata item values in a custom pattern, the customValueContent prop can be used. The pattern requires matchingLabel following https://iiif.io/api/presentation/3.0/#label and Content as a ReactElement carrying props. The element set for Content must map props.value to the appropriate code in the custom pattern.In the example below, the value of Pantaloon with a matching label of { none: [\"Subject\"] } would be rendered as Pantaloon , while the value entry of comic masks would render simply as comic masks .\nconst metadata = [\n {\n label: { none: [\"Genre\"] },\n value: { none: [\"comic masks\"] },\n },\n {\n label: { none: [\"Subject\"] },\n value: { none: [\"Pantaloon\"] },\n },\n];\nconst CustomValueSubject = (props) => (\n \n {props.value}\n \n);\nconst customValueContent = [\n {\n matchingLabel: { none: [\"Subject\"] },\n Content: \"\n/>\n\n \n
Subject \n \n Masks \n \n "}}}
\ No newline at end of file
diff --git a/_next/static/chunks/pages/docs/viewer-19f912e4f92bdc6e.js b/_next/static/chunks/pages/docs/viewer-19f912e4f92bdc6e.js
deleted file mode 100644
index 0d9d2f3d..00000000
--- a/_next/static/chunks/pages/docs/viewer-19f912e4f92bdc6e.js
+++ /dev/null
@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[81],{2813:function(s,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/viewer",function(){return n(2731)}])},2731:function(s,e,n){"use strict";n.r(e),n.d(e,{__toc:function(){return d}});var i=n(1527),r=n(8567),l=n(2610),o=n(2188);n(2897);var t=n(7088),a=n(2712),c=n(1762),h=n(2416);let d=[{depth:2,value:"Features",id:"features"},{depth:2,value:"Installation",id:"installation"},{depth:2,value:"Usage",id:"usage"},{depth:3,value:"React",id:"react"},{depth:3,value:"Vanilla JavaScript",id:"vanilla-javascript"},{depth:3,value:"Next.js",id:"nextjs"},{depth:2,value:"API Reference",id:"api-reference"},{depth:3,value:"Canvas Height",id:"canvas-height"},{depth:4,value:"Automatic Height",id:"automatic-height"},{depth:3,value:"Information Panel",id:"information-panel"},{depth:3,value:"Auto Scroll",id:"auto-scroll"},{depth:3,value:"Custom Displays",id:"custom-displays"},{depth:3,value:"Content search",id:"content-search"},{depth:3,value:"Deprecated Options",id:"deprecated-options"},{depth:3,value:"Basic Configuration",id:"basic-configuration"},{depth:3,value:"Active Canvas",id:"active-canvas"},{depth:3,value:"Captions",id:"captions"},{depth:3,value:"Custom Theme",id:"custom-theme"},{depth:4,value:"CSS Classes",id:"css-classes"},{depth:3,value:"Request Headers",id:"request-headers"},{depth:3,value:"Custom canvas displays",id:"custom-canvas-displays"}];function x(s){let e=Object.assign({h1:"h1",p:"p",code:"code",a:"a",hr:"hr",h2:"h2",ul:"ul",li:"li",em:"em",pre:"pre",span:"span",h3:"h3",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",h4:"h4",strong:"strong"},(0,t.a)(),s.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{children:"Viewer"}),"\n",(0,i.jsxs)(e.p,{children:["A UI component that renders a multicanvas IIIF item viewer with pan-zoom support for ",(0,i.jsx)(e.code,{children:"Image"})," via ",(0,i.jsx)(e.a,{href:"https://openseadragon.github.io/",children:"OpenSeadragon"})," and ",(0,i.jsx)(e.code,{children:"Video"})," and ",(0,i.jsx)(e.code,{children:"Sound"})," content resources using the ",(0,i.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video",children:"HTML video element"}),"."]}),"\n",(0,i.jsx)(c.Z,{href:"https://iiif.io/api/presentation/3.0/#21-defined-types",text:["Manifest","Collection"]}),"\n",(0,i.jsx)(e.hr,{}),"\n",(0,i.jsx)(a.Z,{iiifContent:"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif",options:{showIIIFBadge:!1,informationPanel:{open:!1}}}),"\n",(0,i.jsx)(e.h2,{id:"features",children:"Features"}),"\n",(0,i.jsxs)(e.p,{children:["Provide a ",(0,i.jsx)(e.a,{href:"https://iiif.io/api/presentation/3.0/",children:"IIIF Presentation API"})," Manifest or Collection and the component:"]}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:["Renders a multi-canvas ",(0,i.jsx)(e.em,{children:"Video"}),", ",(0,i.jsx)(e.em,{children:"Sound"}),", and ",(0,i.jsx)(e.em,{children:"Image"})," viewer"]}),"\n",(0,i.jsx)(e.li,{children:"Renders thumbnails as navigation between canvases"}),"\n",(0,i.jsxs)(e.li,{children:["Renders annotations with the ",(0,i.jsx)(e.a,{href:"https://iiif.io/api/presentation/3.0/#values-for-motivation",children:"motivation"})," of ",(0,i.jsx)(e.code,{children:"supplementing"})," with a content resource having the format of ",(0,i.jsx)(e.code,{children:"text/vtt"})," for ",(0,i.jsx)(e.em,{children:"Video"})," and ",(0,i.jsx)(e.em,{children:"Sound"})]}),"\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.em,{children:"Video"})," and ",(0,i.jsx)(e.em,{children:"Sound"})," are rendered within a HTML5 ",(0,i.jsx)(e.code,{children:""})," element"]}),"\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.em,{children:"Image"})," canvases are renderered with ",(0,i.jsx)(e.a,{href:"https://openseadragon.github.io/",children:"OpenSeadragon"})]}),"\n",(0,i.jsx)(e.li,{children:"Supports HLS streaming for Video and Audio canvases"}),"\n",(0,i.jsx)(e.li,{children:"Supports IIIF Collections and toggling between child Manifests"}),"\n",(0,i.jsxs)(e.li,{children:["Supports ",(0,i.jsx)(e.code,{children:"placeholderCanvas"})," for ",(0,i.jsx)(e.em,{children:"Image"})," canvases."]}),"\n"]}),"\n",(0,i.jsx)(e.h2,{id:"installation",children:"Installation"}),"\n",(0,i.jsxs)(h.mQ,{items:["npm","yarn","pnpm"],children:[(0,i.jsx)(h.OK,{children:(0,i.jsx)(e.pre,{"data-language":"shell","data-theme":"default",children:(0,i.jsx)(e.code,{"data-language":"shell","data-theme":"default",children:(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"npm"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"install"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"@samvera/clover-iiif"})]})})})}),(0,i.jsx)(h.OK,{children:(0,i.jsx)(e.pre,{"data-language":"shell","data-theme":"default",children:(0,i.jsx)(e.code,{"data-language":"shell","data-theme":"default",children:(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"add"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"@samvera/clover-iiif"})]})})})}),(0,i.jsx)(h.OK,{children:(0,i.jsx)(e.pre,{"data-language":"shell","data-theme":"default",children:(0,i.jsx)(e.code,{"data-language":"shell","data-theme":"default",children:(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pnpm"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"install"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"@samvera/clover-iiif"})]})})})})]}),"\n",(0,i.jsx)(e.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(e.h3,{id:"react",children:"React"}),"\n",(0,i.jsxs)(e.p,{children:["Add the ",(0,i.jsx)(e.code,{children:"Viewer"})," component to your ",(0,i.jsx)(e.code,{children:"jsx"})," or ",(0,i.jsx)(e.code,{children:"tsx"})," code."]}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsx)(e.code,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Viewer "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@samvera/clover-iiif/viewer"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})})}),"\n",(0,i.jsxs)(e.p,{children:["Render ",(0,i.jsx)(e.code,{children:"Viewer"})," with a IIIF Manifest or Collection URI. The only required prop is the ",(0,i.jsx)(e.code,{children:"iiifContent"}),", which is the URI of the IIIF Manifest or Collection."]}),"\n",(0,i.jsxs)(h.mQ,{items:["Code","Preview"],children:[(0,i.jsx)(h.OK,{children:(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsx)(e.code,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]})})})}),(0,i.jsx)(h.OK,{children:(0,i.jsx)(a.Z,{iiifContent:"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif"})})]}),"\n",(0,i.jsx)(e.h3,{id:"vanilla-javascript",children:"Vanilla JavaScript"}),"\n",(0,i.jsxs)(e.p,{children:["The Viewer can also be implemented in Vanilla Javascript by use of a web component. This web component example sources a registered ",(0,i.jsx)(e.code,{children:""})," web component."]}),"\n",(0,i.jsxs)(h.mQ,{items:["Code","Preview"],children:[(0,i.jsx)(h.OK,{children:(0,i.jsx)(e.pre,{"data-language":"html","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"html","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"html"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"head"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"title"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Clover IIIF - Viewer - Web Component"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"meta"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"charset"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"UTF-8"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"body"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"script"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://www.unpkg.com/@samvera/clover-iiif@latest/dist/web-components/index.umd.js"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"clover-viewer"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"id"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif"'})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:""})]})]})})}),(0,i.jsx)(h.OK,{children:(0,i.jsx)(a.Z,{})})]}),"\n",(0,i.jsx)(e.h3,{id:"nextjs",children:"Next.js"}),"\n",(0,i.jsxs)(e.p,{children:["Implementation with Next.js requires a ",(0,i.jsx)(e.a,{href:"https://nextjs.org/docs/advanced-features/dynamic-import",children:"dynamic import"})," utilizing ",(0,i.jsx)(e.code,{children:"next/dynamic"}),". This is due to Next's node compilation method creating issue with an ",(0,i.jsx)(e.code,{children:"OpenSeadragon"})," (a dependency of Clover IIIF) assumption of a browser ",(0,i.jsx)(e.code,{children:"document"})," object."]}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" dynamic "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"next/dynamic"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"dynamic"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" () "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@samvera/clover-iiif"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".then"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"((Clover) "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Clover"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:".Viewer)"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ssr"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:");"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"MyCustomViewer"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" () "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{iiifContent} />;"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"};"})})]})}),"\n",(0,i.jsx)(e.h2,{id:"api-reference",children:"API Reference"}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.code,{children:"Viewer"})," can configured through an ",(0,i.jsx)(e.code,{children:"options"})," prop, which will serve as a object for common options."]}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Required"}),(0,i.jsx)(e.th,{children:"Default"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"iiifContent"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"Yes"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"iiifContentSearchQuery"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"#content-search",children:"See Content Search"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"canvasIdCallback"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"function"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"customDisplays"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"#custom-displays",children:"See Custom Displays"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"customTheme"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"object"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"object"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.background"})}),(0,i.jsxs)(e.td,{children:[(0,i.jsx)(e.code,{children:"string"})," ",(0,i.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/background",children:"CSS"})]}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"transparent"})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.canvasBackgroundColor"})}),(0,i.jsxs)(e.td,{children:[(0,i.jsx)(e.code,{children:"string"})," ",(0,i.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/background",children:"CSS"})]}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"#1a1d1e"})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.canvasHeight"})}),(0,i.jsxs)(e.td,{children:[(0,i.jsx)(e.code,{children:"string"})," ",(0,i.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/height",children:"CSS"})]}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"500px"})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.ignoreCaptionLabels"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string[]"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"[]"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.openSeadragon"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"OpenSeadragon.Options"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"#information-panel",children:"See Information Panel"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.requestHeaders"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"IncomingHttpHeaders"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:'{ "Content-Type": "application/json" }'})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.showDownload"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.showIIIFBadge"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.showTitle"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.withCredentials"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"false"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"#content-search",children:"See Content Search"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]})]})]}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:["Options ",(0,i.jsx)(e.code,{children:"canvasBackgroundColor"})," and ",(0,i.jsx)(e.code,{children:"canvasHeight"})," will apply to both ",(0,i.jsx)(e.code,{children:""})," elements and the OpenseaDragon canvas."]}),"\n",(0,i.jsxs)(e.li,{children:["Option ",(0,i.jsx)(e.code,{children:"withCredentials"})," being set as ",(0,i.jsx)(e.code,{children:"true"})," will inform IIIF resource requests to be made ",(0,i.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials",children:"using credentials"})," such as cookies, authorization headers or TLS client certificates."]}),"\n",(0,i.jsxs)(e.li,{children:["Option ",(0,i.jsx)(e.code,{children:"options.openSeadragon"})," will grant you ability to override the ",(0,i.jsx)(e.a,{href:"https://openseadragon.github.io/docs/OpenSeadragon.html#.Options",children:"OpenSeadragon default options"})," set within the Clover IIIF Viewer to adjust touch and mouse gesture settings and various other configurations."]}),"\n"]}),"\n",(0,i.jsx)(e.h3,{id:"canvas-height",children:"Canvas Height"}),"\n",(0,i.jsxs)(e.p,{children:["The height of the canvas can be set using the ",(0,i.jsx)(e.code,{children:"options.canvasHeight"})," prop. This prop accepts a string value that is a valid CSS height value. The default value is ",(0,i.jsx)(e.code,{children:"500px"}),"."]}),"\n",(0,i.jsx)(e.h4,{id:"automatic-height",children:"Automatic Height"}),"\n",(0,i.jsxs)(e.p,{children:["If the height is set to ",(0,i.jsx)(e.code,{children:"auto"})," or ",(0,i.jsx)(e.code,{children:"100%"}),", the ",(0,i.jsx)(e.strong,{children:"Viewer"})," will expand to the height of its wrapping container element. The wrapping element must have a position ",(0,i.jsx)(e.code,{children:"relative"}),", along with a defined ",(0,i.jsx)(e.code,{children:"height"})," for this to display as expected. Be aware to set a ",(0,i.jsx)(e.code,{children:"z-index"})," value of ",(0,i.jsx)(e.code,{children:"0"})," or an applicable value within your consuming application to ensure the viewer does not conflict with other page elements."]}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"App"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"() {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" canvasHeight"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"auto"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:'// or "100%"'})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" };"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ("})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"style"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{{ position"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"relative"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" height"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"80vh"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" zIndex"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }}>"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{iiifContent} "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"options"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{options} />"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" );"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,i.jsx)(e.h3,{id:"information-panel",children:"Information Panel"}),"\n",(0,i.jsx)(e.p,{children:"The information panel is a collapsible panel that displays information about the current Manifest and renders supplementing resources for the active canvas. It is rendered by default, but can be configured to be hidden or to render only certain tabs."}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Required"}),(0,i.jsx)(e.th,{children:"Default"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.open"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.vtt.autoScroll"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"#auto-scroll",children:"See Auto Scroll"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.renderAbout"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.renderAnnotation"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.renderSupplementing"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.renderToggle"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.renderContentSearch"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.defaultTab"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]})]})]}),"\n",(0,i.jsxs)(e.p,{children:["If ",(0,i.jsx)(e.code,{children:"renderAbout"})," is true, Clover will use the About tab as the default tab. Use ",(0,i.jsx)(e.code,{children:"options.informationPanel.defaultTab"})," to set the default tab."]}),"\n",(0,i.jsxs)(e.p,{children:["If you want content search to be the default tab, use ",(0,i.jsx)(e.code,{children:"manifest-content-search"})]}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://example.com/manifest/1"'})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"options"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" informationPanel"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" defaultTab"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"manifest-content-search"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})})]})}),"\n",(0,i.jsx)(e.p,{children:"If the manifest has annotations, and you want one of the anotations to be the default tab, use the id from the annotation page."}),"\n",(0,i.jsx)(e.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"@context"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"http://iiif.io/api/presentation/3/context.json"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"type"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Manifest"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ..."})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"items"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"id"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"http://example.com/manifest/canvas/1"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"type"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Canvas"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"height"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1000"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"width"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"2000"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"annotations"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"id"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"http://example.com/manifest/annotation/1"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"type"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"AnnotationPage"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"items"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" [...]"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ]"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ]"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://example.com/manifest/1"'})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"options"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" informationPanel"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" defaultTab"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"http://example.com/manifest/annotation/1"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})})]})}),"\n",(0,i.jsx)(e.h3,{id:"auto-scroll",children:"Auto Scroll"}),"\n",(0,i.jsxs)(e.p,{children:["When VTT annotations are displayed, the Clover IIIF Viewer can automatically scroll the information panel to keep the currently active caption in view. Whether it does so (and how) is governed by the ",(0,i.jsx)(e.code,{children:"informationPanel.vtt.autoScroll"})," configuration option. The possible values are:"]}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"{ behavior: (behavior), block: (block) }"}),": auto-scroll using the given settings (see below)."]}),"\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"true"}),": Auto-scroll using the default behavior. This is equivalent to ",(0,i.jsx)(e.code,{children:'{ behavior: "smooth", block: "center" }'}),"."]}),"\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"false"}),": Do not auto-scroll."]}),"\n"]}),"\n",(0,i.jsxs)(e.p,{children:["The settings take the form ",(0,i.jsx)(e.code,{children:'{ behavior: "auto" | "instant" | "smooth", block: "center" | "end" | "nearest" | "start" }'}),", and have the same effect as the ",(0,i.jsx)(e.code,{children:"scrollIntoViewOptions"})," object documented with the ",(0,i.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView",children:(0,i.jsx)(e.code,{children:"Element.scrollIntoView()"})})," Web API method. (The ",(0,i.jsx)(e.code,{children:"inline"})," option does not apply since there is no horizontal scrolling involved.)"]}),"\n",(0,i.jsx)(e.h3,{id:"custom-displays",children:"Custom Displays"}),"\n",(0,i.jsxs)(e.p,{children:["Clients may wish to use their own display components (for example a PDF Viewer, or an audio player, etc). To configure custom displays, use the ",(0,i.jsx)(e.code,{children:"customDisplays"})," prop, which is an array of objects defining ",(0,i.jsx)(e.code,{children:"display"})," and ",(0,i.jsx)(e.code,{children:"target"})," properties. ",(0,i.jsx)(e.a,{href:"#custom-canvas-displays",children:"See an example implementation"})]}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.code,{children:"display.component"})," is a custom React component, and ",(0,i.jsx)(e.code,{children:"display.componentProps"})," are pass-through props which ",(0,i.jsx)(e.code,{children:"Viewer"})," will attach to your Custom Display component. The ",(0,i.jsx)(e.code,{children:"target"})," object provides two methods of matching a Canvas to a Custom Display: ",(0,i.jsx)(e.code,{children:"target.canvasId"})," which is a manifest's canvas ",(0,i.jsx)(e.code,{children:"id"}),". Or by ",(0,i.jsx)(e.code,{children:"target.paintingFormat"})," (ie. ",(0,i.jsx)(e.code,{children:"application/pdf"}),") which is the ",(0,i.jsx)(e.code,{children:"body.type"})," in a canvas's ",(0,i.jsx)(e.code,{children:"Annotation"}),' of type "painting".']}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Required"}),(0,i.jsx)(e.th,{children:"Default"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"customDisplays.display.component"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"React.Node"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"customDisplays.display.componentProps"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"object"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"customDisplays.target.canvasId"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string[]"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"customDisplays.target.paintingFormat"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string[]"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]})]})]}),"\n",(0,i.jsx)(e.h3,{id:"content-search",children:"Content search"}),"\n",(0,i.jsx)(e.p,{children:"Clover supports IIIF content search v2. In order to display content search in the information panel, add a content search service to the manifest."}),"\n",(0,i.jsx)(e.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"@context"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"http://iiif.io/api/presentation/3/context.json"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"type"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Manifest"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ..."})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"service"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"id"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://example.com/search"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"type"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"SearchService2"'})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ]"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Required"}),(0,i.jsx)(e.th,{children:"Default"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"iiifContentSearchQuery.q"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.searchResultsLimit"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"number"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"20"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.backgroundColor"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"#ff66660"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.borderColor"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"#990000"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.borderType"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"solid"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.borderWidth"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"1px"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.opacity"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"0.5"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.renderOverlays"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.zoomLevel"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"number"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"4"})]})]})]}),"\n",(0,i.jsxs)(e.p,{children:["Many sites have a search functionality that returns a list objects that match the search terms. Clicking on a search result will display a details page for one object. If you want to highlight the search terms when the Clover image viewer loads on the details page, use ",(0,i.jsx)(e.code,{children:"iiifContentSearchQuery"})," when setting up the viewer."]}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://example.com/manifest/1"'})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContentSearchQuery"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" q"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"my search terms"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})})]})}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.code,{children:"options.contentSearch.searchResultsLimit"})," is the maximum number of search results to display per canvas in the information panel. If set to ",(0,i.jsx)(e.code,{children:"undefined"}),", Clover will show all search results."]}),"\n",(0,i.jsxs)(e.p,{children:["By default, Clover's content search will draw light red boxes in the image viewer for each search result returned by the search service. You can set the appearance of the highlighted boxes using ",(0,i.jsx)(e.code,{children:"options.contentSearch.overlays"}),". If you don't want the search results to be highlighted, set ",(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.renderOverlays"})," to ",(0,i.jsx)(e.code,{children:"false"}),"."]}),"\n",(0,i.jsxs)(e.p,{children:["When you click on the list of search results, Clover will pan and zoom to the location of that search result. You can set the zoom level using ",(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.zoomLevel"}),". A small zoom level will zoom in real close; a large zoom level will zoom in less."]}),"\n",(0,i.jsx)(e.h3,{id:"deprecated-options",children:"Deprecated Options"}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"In Favor Of"}),(0,i.jsx)(e.th,{children:"Deprecated"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"id"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"iiifContent"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"v2.0.0"})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"manifestId"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"iiifContent"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"v2.0.0"})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.renderAbout"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.renderAbout"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"v2.0.3"})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.showInformationToggle"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.renderToggle"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"v2.0.3"})})]})]})]}),"\n",(0,i.jsx)(e.h3,{id:"basic-configuration",children:"Basic Configuration"}),"\n",(0,i.jsxs)(e.p,{children:["Example customization of various ",(0,i.jsx)(e.code,{children:"options"}),"."]}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// Primary title (Manifest label) for top level canvas. Defaults to true"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" showTitle"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// IIIF Badge and popover containing options. Defaults to true"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" showIIIFBadge"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// Ignore supplementing canvases by label value that are not for captioning"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ignoreCaptionLabels"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Chapters'"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// Override canvas background color, defaults to #1a1d1e"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" canvasBackgroundColor"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"#000"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// Set canvas zooming onScoll (this defaults to false)"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" openSeadragon"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" gestureSettingsMouse"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" scrollToZoom"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif"'})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"options"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{options}"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})})]})}),"\n",(0,i.jsx)(e.h3,{id:"active-canvas",children:"Active Canvas"}),"\n",(0,i.jsxs)(e.p,{children:["Example on using ",(0,i.jsx)(e.code,{children:"canvasIdCallback"})," to return to your consuming application the active canvas ID. This will return as a string."]}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"handlCanvasIdCallback"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" (activeCanvasId) "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" (activeCanvasId) "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"console"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".log"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(activeCanvasId);"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"};"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ("})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{iiifContent} "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"canvasIdCallback"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{handlCanvasIdCallback} />"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:");"})})]})}),"\n",(0,i.jsx)(e.hr,{}),"\n",(0,i.jsx)(e.h3,{id:"captions",children:"Captions"}),"\n",(0,i.jsxs)(e.p,{children:["WebVTT content resources are the source for both content mapped closed captioning ",(0,i.jsx)(e.code,{children:""})," element"]}),"\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.em,{children:"Image"})," canvases are renderered with ",(0,i.jsx)(e.a,{href:"https://openseadragon.github.io/",children:"OpenSeadragon"})]}),"\n",(0,i.jsx)(e.li,{children:"Supports HLS streaming for Video and Audio canvases"}),"\n",(0,i.jsx)(e.li,{children:"Supports IIIF Collections and toggling between child Manifests"}),"\n",(0,i.jsxs)(e.li,{children:["Supports ",(0,i.jsx)(e.code,{children:"placeholderCanvas"})," for ",(0,i.jsx)(e.em,{children:"Image"})," canvases."]}),"\n"]}),"\n",(0,i.jsx)(e.h2,{id:"installation",children:"Installation"}),"\n",(0,i.jsxs)(d.mQ,{items:["npm","yarn","pnpm"],children:[(0,i.jsx)(d.OK,{children:(0,i.jsx)(e.pre,{"data-language":"shell","data-theme":"default",children:(0,i.jsx)(e.code,{"data-language":"shell","data-theme":"default",children:(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"npm"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"install"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"@samvera/clover-iiif"})]})})})}),(0,i.jsx)(d.OK,{children:(0,i.jsx)(e.pre,{"data-language":"shell","data-theme":"default",children:(0,i.jsx)(e.code,{"data-language":"shell","data-theme":"default",children:(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"add"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"@samvera/clover-iiif"})]})})})}),(0,i.jsx)(d.OK,{children:(0,i.jsx)(e.pre,{"data-language":"shell","data-theme":"default",children:(0,i.jsx)(e.code,{"data-language":"shell","data-theme":"default",children:(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pnpm"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"install"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"@samvera/clover-iiif"})]})})})})]}),"\n",(0,i.jsx)(e.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(e.h3,{id:"react",children:"React"}),"\n",(0,i.jsxs)(e.p,{children:["Add the ",(0,i.jsx)(e.code,{children:"Viewer"})," component to your ",(0,i.jsx)(e.code,{children:"jsx"})," or ",(0,i.jsx)(e.code,{children:"tsx"})," code."]}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsx)(e.code,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" Viewer "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@samvera/clover-iiif/viewer"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})})}),"\n",(0,i.jsxs)(e.p,{children:["Render ",(0,i.jsx)(e.code,{children:"Viewer"})," with a IIIF Manifest or Collection URI. The only required prop is the ",(0,i.jsx)(e.code,{children:"iiifContent"}),", which is the URI of the IIIF Manifest or Collection."]}),"\n",(0,i.jsxs)(d.mQ,{items:["Code","Preview"],children:[(0,i.jsx)(d.OK,{children:(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsx)(e.code,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]})})})}),(0,i.jsx)(d.OK,{children:(0,i.jsx)(a.Z,{iiifContent:"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif"})})]}),"\n",(0,i.jsx)(e.h3,{id:"vanilla-javascript",children:"Vanilla JavaScript"}),"\n",(0,i.jsxs)(e.p,{children:["The Viewer can also be implemented in Vanilla Javascript by use of a web component. This web component example sources a registered ",(0,i.jsx)(e.code,{children:""})," web component."]}),"\n",(0,i.jsxs)(d.mQ,{items:["Code","Preview"],children:[(0,i.jsx)(d.OK,{children:(0,i.jsx)(e.pre,{"data-language":"html","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"html","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"html"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"head"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"title"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">Clover IIIF - Viewer - Web Component"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"meta"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"charset"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"UTF-8"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"body"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"script"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://www.unpkg.com/@samvera/clover-iiif@latest/dist/web-components/index.umd.js"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"clover-viewer"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"id"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif"'})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" />"})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:""})]})]})})}),(0,i.jsx)(d.OK,{children:(0,i.jsx)(a.Z,{})})]}),"\n",(0,i.jsx)(e.h3,{id:"nextjs",children:"Next.js"}),"\n",(0,i.jsxs)(e.p,{children:["Implementation with Next.js requires a ",(0,i.jsx)(e.a,{href:"https://nextjs.org/docs/advanced-features/dynamic-import",children:"dynamic import"})," utilizing ",(0,i.jsx)(e.code,{children:"next/dynamic"}),". This is due to Next's node compilation method creating issue with an ",(0,i.jsx)(e.code,{children:"OpenSeadragon"})," (a dependency of Clover IIIF) assumption of a browser ",(0,i.jsx)(e.code,{children:"document"})," object."]}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" dynamic "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"next/dynamic"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"dynamic"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" () "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@samvera/clover-iiif"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".then"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"((Clover) "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Clover"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:".Viewer)"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ssr"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:");"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"MyCustomViewer"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" () "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{iiifContent} />;"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"};"})})]})}),"\n",(0,i.jsx)(e.h2,{id:"api-reference",children:"API Reference"}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.code,{children:"Viewer"})," can configured through an ",(0,i.jsx)(e.code,{children:"options"})," prop, which will serve as a object for common options."]}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Required"}),(0,i.jsx)(e.th,{children:"Default"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"iiifContent"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"Yes"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"iiifContentSearchQuery"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"#content-search",children:"See Content Search"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"canvasIdCallback"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"function"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"customDisplays"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"#custom-displays",children:"See Custom Displays"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"customTheme"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"object"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"plugins"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"#plugins",children:"See Plugins"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"object"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.background"})}),(0,i.jsxs)(e.td,{children:[(0,i.jsx)(e.code,{children:"string"})," ",(0,i.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/background",children:"CSS"})]}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"transparent"})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.canvasBackgroundColor"})}),(0,i.jsxs)(e.td,{children:[(0,i.jsx)(e.code,{children:"string"})," ",(0,i.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/background",children:"CSS"})]}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"#1a1d1e"})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.canvasHeight"})}),(0,i.jsxs)(e.td,{children:[(0,i.jsx)(e.code,{children:"string"})," ",(0,i.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/height",children:"CSS"})]}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"500px"})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.ignoreCaptionLabels"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string[]"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"[]"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.openSeadragon"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"OpenSeadragon.Options"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"#information-panel",children:"See Information Panel"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.requestHeaders"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"IncomingHttpHeaders"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:'{ "Content-Type": "application/json" }'})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.showDownload"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.showIIIFBadge"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.showTitle"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.withCredentials"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"false"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"#content-search",children:"See Content Search"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]})]})]}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:["Options ",(0,i.jsx)(e.code,{children:"canvasBackgroundColor"})," and ",(0,i.jsx)(e.code,{children:"canvasHeight"})," will apply to both ",(0,i.jsx)(e.code,{children:""})," elements and the OpenseaDragon canvas."]}),"\n",(0,i.jsxs)(e.li,{children:["Option ",(0,i.jsx)(e.code,{children:"withCredentials"})," being set as ",(0,i.jsx)(e.code,{children:"true"})," will inform IIIF resource requests to be made ",(0,i.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials",children:"using credentials"})," such as cookies, authorization headers or TLS client certificates."]}),"\n",(0,i.jsxs)(e.li,{children:["Option ",(0,i.jsx)(e.code,{children:"options.openSeadragon"})," will grant you ability to override the ",(0,i.jsx)(e.a,{href:"https://openseadragon.github.io/docs/OpenSeadragon.html#.Options",children:"OpenSeadragon default options"})," set within the Clover IIIF Viewer to adjust touch and mouse gesture settings and various other configurations."]}),"\n"]}),"\n",(0,i.jsx)(e.h3,{id:"canvas-height",children:"Canvas Height"}),"\n",(0,i.jsxs)(e.p,{children:["The height of the canvas can be set using the ",(0,i.jsx)(e.code,{children:"options.canvasHeight"})," prop. This prop accepts a string value that is a valid CSS height value. The default value is ",(0,i.jsx)(e.code,{children:"500px"}),"."]}),"\n",(0,i.jsx)(e.h4,{id:"automatic-height",children:"Automatic Height"}),"\n",(0,i.jsxs)(e.p,{children:["If the height is set to ",(0,i.jsx)(e.code,{children:"auto"})," or ",(0,i.jsx)(e.code,{children:"100%"}),", the ",(0,i.jsx)(e.strong,{children:"Viewer"})," will expand to the height of its wrapping container element. The wrapping element must have a position ",(0,i.jsx)(e.code,{children:"relative"}),", along with a defined ",(0,i.jsx)(e.code,{children:"height"})," for this to display as expected. Be aware to set a ",(0,i.jsx)(e.code,{children:"z-index"})," value of ",(0,i.jsx)(e.code,{children:"0"})," or an applicable value within your consuming application to ensure the viewer does not conflict with other page elements."]}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"App"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"() {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" canvasHeight"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"auto"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:'// or "100%"'})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" };"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ("})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"style"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{{ position"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"relative"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" height"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"80vh"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" zIndex"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }}>"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{iiifContent} "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"options"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{options} />"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" );"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,i.jsx)(e.h3,{id:"information-panel",children:"Information Panel"}),"\n",(0,i.jsx)(e.p,{children:"The information panel is a collapsible panel that displays information about the current Manifest and renders supplementing resources for the active canvas. It is rendered by default, but can be configured to be hidden or to render only certain tabs."}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Required"}),(0,i.jsx)(e.th,{children:"Default"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.open"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.vtt.autoScroll"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.a,{href:"#auto-scroll",children:"See Auto Scroll"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.renderAbout"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.renderAnnotation"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.renderSupplementing"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.renderToggle"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.renderContentSearch"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.defaultTab"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]})]})]}),"\n",(0,i.jsxs)(e.p,{children:["If ",(0,i.jsx)(e.code,{children:"renderAbout"})," is true, Clover will use the About tab as the default tab. Use ",(0,i.jsx)(e.code,{children:"options.informationPanel.defaultTab"})," to set the default tab."]}),"\n",(0,i.jsxs)(e.p,{children:["If you want content search to be the default tab, use ",(0,i.jsx)(e.code,{children:"manifest-content-search"})]}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://example.com/manifest/1"'})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"options"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" informationPanel"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" defaultTab"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"manifest-content-search"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})})]})}),"\n",(0,i.jsx)(e.p,{children:"If the manifest has annotations, and you want one of the anotations to be the default tab, use the id from the annotation page."}),"\n",(0,i.jsx)(e.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"@context"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"http://iiif.io/api/presentation/3/context.json"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"type"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Manifest"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ..."})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"items"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"id"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"http://example.com/manifest/canvas/1"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"type"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Canvas"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"height"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1000"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"width"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"2000"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"annotations"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"id"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"http://example.com/manifest/annotation/1"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"type"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"AnnotationPage"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"items"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" [...]"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ]"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ]"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://example.com/manifest/1"'})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"options"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" informationPanel"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" defaultTab"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"http://example.com/manifest/annotation/1"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})})]})}),"\n",(0,i.jsx)(e.h3,{id:"auto-scroll",children:"Auto Scroll"}),"\n",(0,i.jsxs)(e.p,{children:["When VTT annotations are displayed, the Clover IIIF Viewer can automatically scroll the information panel to keep the currently active caption in view. Whether it does so (and how) is governed by the ",(0,i.jsx)(e.code,{children:"informationPanel.vtt.autoScroll"})," configuration option. The possible values are:"]}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"{ behavior: (behavior), block: (block) }"}),": auto-scroll using the given settings (see below)."]}),"\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"true"}),": Auto-scroll using the default behavior. This is equivalent to ",(0,i.jsx)(e.code,{children:'{ behavior: "smooth", block: "center" }'}),"."]}),"\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"false"}),": Do not auto-scroll."]}),"\n"]}),"\n",(0,i.jsxs)(e.p,{children:["The settings take the form ",(0,i.jsx)(e.code,{children:'{ behavior: "auto" | "instant" | "smooth", block: "center" | "end" | "nearest" | "start" }'}),", and have the same effect as the ",(0,i.jsx)(e.code,{children:"scrollIntoViewOptions"})," object documented with the ",(0,i.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView",children:(0,i.jsx)(e.code,{children:"Element.scrollIntoView()"})})," Web API method. (The ",(0,i.jsx)(e.code,{children:"inline"})," option does not apply since there is no horizontal scrolling involved.)"]}),"\n",(0,i.jsx)(e.h3,{id:"custom-displays",children:"Custom Displays"}),"\n",(0,i.jsxs)(e.p,{children:["Clients may wish to use their own display components (for example a PDF Viewer, or an audio player, etc). To configure custom displays, use the ",(0,i.jsx)(e.code,{children:"customDisplays"})," prop, which is an array of objects defining ",(0,i.jsx)(e.code,{children:"display"})," and ",(0,i.jsx)(e.code,{children:"target"})," properties. ",(0,i.jsx)(e.a,{href:"#custom-canvas-displays",children:"See an example implementation"})]}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.code,{children:"display.component"})," is a custom React component, and ",(0,i.jsx)(e.code,{children:"display.componentProps"})," are pass-through props which ",(0,i.jsx)(e.code,{children:"Viewer"})," will attach to your Custom Display component. The ",(0,i.jsx)(e.code,{children:"target"})," object provides two methods of matching a Canvas to a Custom Display: ",(0,i.jsx)(e.code,{children:"target.canvasId"})," which is a manifest's canvas ",(0,i.jsx)(e.code,{children:"id"}),". Or by ",(0,i.jsx)(e.code,{children:"target.paintingFormat"})," (ie. ",(0,i.jsx)(e.code,{children:"application/pdf"}),") which is the ",(0,i.jsx)(e.code,{children:"body.type"})," in a canvas's ",(0,i.jsx)(e.code,{children:"Annotation"}),' of type "painting".']}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Required"}),(0,i.jsx)(e.th,{children:"Default"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"customDisplays.display.component"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"React.Node"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"customDisplays.display.componentProps"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"object"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"customDisplays.target.canvasId"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string[]"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"customDisplays.target.paintingFormat"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string[]"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]})]})]}),"\n",(0,i.jsx)(e.h3,{id:"content-search",children:"Content search"}),"\n",(0,i.jsx)(e.p,{children:"Clover supports IIIF content search v2. In order to display content search in the information panel, add a content search service to the manifest."}),"\n",(0,i.jsx)(e.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"@context"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"http://iiif.io/api/presentation/3/context.json"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"type"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Manifest"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ..."})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"service"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"id"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://example.com/search"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'"type"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"SearchService2"'})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ]"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Required"}),(0,i.jsx)(e.th,{children:"Default"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"iiifContentSearchQuery.q"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.searchResultsLimit"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"number"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"20"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.backgroundColor"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"#ff66660"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.borderColor"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"#990000"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.borderType"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"solid"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.borderWidth"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"1px"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.opacity"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"0.5"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.renderOverlays"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"true"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.zoomLevel"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"number"})}),(0,i.jsx)(e.td,{children:"No"}),(0,i.jsx)(e.td,{children:"4"})]})]})]}),"\n",(0,i.jsxs)(e.p,{children:["Many sites have a search functionality that returns a list objects that match the search terms. Clicking on a search result will display a details page for one object. If you want to highlight the search terms when the Clover image viewer loads on the details page, use ",(0,i.jsx)(e.code,{children:"iiifContentSearchQuery"})," when setting up the viewer."]}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://example.com/manifest/1"'})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContentSearchQuery"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" q"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"my search terms"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})})]})}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.code,{children:"options.contentSearch.searchResultsLimit"})," is the maximum number of search results to display per canvas in the information panel. If set to ",(0,i.jsx)(e.code,{children:"undefined"}),", Clover will show all search results."]}),"\n",(0,i.jsxs)(e.p,{children:["By default, Clover's content search will draw light red boxes in the image viewer for each search result returned by the search service. You can set the appearance of the highlighted boxes using ",(0,i.jsx)(e.code,{children:"options.contentSearch.overlays"}),". If you don't want the search results to be highlighted, set ",(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.renderOverlays"})," to ",(0,i.jsx)(e.code,{children:"false"}),"."]}),"\n",(0,i.jsxs)(e.p,{children:["When you click on the list of search results, Clover will pan and zoom to the location of that search result. You can set the zoom level using ",(0,i.jsx)(e.code,{children:"options.contentSearch.overlays.zoomLevel"}),". A small zoom level will zoom in real close; a large zoom level will zoom in less."]}),"\n",(0,i.jsx)(e.h3,{id:"deprecated-options",children:"Deprecated Options"}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"In Favor Of"}),(0,i.jsx)(e.th,{children:"Deprecated"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"id"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"iiifContent"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"v2.0.0"})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"manifestId"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"iiifContent"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"v2.0.0"})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.renderAbout"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.renderAbout"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"v2.0.3"})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.showInformationToggle"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"options.informationPanel.renderToggle"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"v2.0.3"})})]})]})]}),"\n",(0,i.jsx)(e.h3,{id:"basic-configuration",children:"Basic Configuration"}),"\n",(0,i.jsxs)(e.p,{children:["Example customization of various ",(0,i.jsx)(e.code,{children:"options"}),"."]}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// Primary title (Manifest label) for top level canvas. Defaults to true"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" showTitle"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// IIIF Badge and popover containing options. Defaults to true"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" showIIIFBadge"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// Ignore supplementing canvases by label value that are not for captioning"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ignoreCaptionLabels"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Chapters'"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// Override canvas background color, defaults to #1a1d1e"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" canvasBackgroundColor"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"#000"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// Set canvas zooming onScoll (this defaults to false)"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" openSeadragon"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" gestureSettingsMouse"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" scrollToZoom"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif"'})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"options"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{options}"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})})]})}),"\n",(0,i.jsx)(e.h3,{id:"active-canvas",children:"Active Canvas"}),"\n",(0,i.jsxs)(e.p,{children:["Example on using ",(0,i.jsx)(e.code,{children:"canvasIdCallback"})," to return to your consuming application the active canvas ID. This will return as a string."]}),"\n",(0,i.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,i.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif"'}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"handlCanvasIdCallback"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" (activeCanvasId) "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" (activeCanvasId) "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"console"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".log"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(activeCanvasId);"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"};"})}),"\n",(0,i.jsx)(e.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ("})]}),"\n",(0,i.jsxs)(e.span,{className:"line",children:[(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Viewer"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"iiifContent"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{iiifContent} "}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"canvasIdCallback"}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"{handlCanvasIdCallback} />"})]}),"\n",(0,i.jsx)(e.span,{className:"line",children:(0,i.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:");"})})]})}),"\n",(0,i.jsx)(e.hr,{}),"\n",(0,i.jsx)(e.h3,{id:"captions",children:"Captions"}),"\n",(0,i.jsxs)(e.p,{children:["WebVTT content resources are the source for both content mapped closed captioning ",(0,i.jsx)(e.code,{children:"=o&&Object.keys(s.O).every(function(e){return s.O[e](n[f])})?n.splice(f--,1):(i=!1,o0&&e[c-1][2]>o;c--)e[c]=e[c-1];e[c]=[n,r,o];return}for(var u=1/0,c=0;c=o&&Object.keys(s.O).every(function(e){return s.O[e](n[f])})?n.splice(f--,1):(i=!1,o ![](\"https://rightsstatements.org/files/buttons/InC.dark-white-interior-blue-type.svg\"/)
![](\"https://rightsstatements.org/files/buttons/InC.dark-white-interior-blue-type.svg\")
\n \n \n