\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","auto-scroll#Auto Scroll":"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 informationPanel.vtt.autoScroll configuration option. The possible values are:\n{ behavior: (behavior), block: (block) }: auto-scroll using the given settings (see below).\ntrue: Auto-scroll using the default behavior. This is equivalent to { behavior: \"smooth\", block: \"center\" }.\nfalse: Do not auto-scroll.\nThe settings take the form { behavior: \"auto\" | \"instant\" | \"smooth\", block: \"center\" | \"end\" | \"nearest\" | \"start\" }, and have the same effect as the scrollIntoViewOptions object documented with the Element.scrollIntoView() Web API method. (The inline option does not apply since there is no horizontal scrolling involved.)","custom-displays#Custom Displays":"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 customDisplays prop, which is an array of objects defining display and target properties. See an example implementationdisplay.component is a custom React component, and display.componentProps are pass-through props which Viewer will attach to your Custom Display component. The target object provides two methods of matching a Canvas to a Custom Display: target.canvasId which is a manifest's canvas id. Or by target.paintingFormat (ie. application/pdf) which is the body.type in a canvas's Annotation of type \"painting\".\nProp\tType\tRequired\tDefault\tcustomDisplays.display.component\tReact.Node\tNo\t\tcustomDisplays.display.componentProps\tobject\tNo\t\tcustomDisplays.target.canvasId\tstring[]\tNo\t\tcustomDisplays.target.paintingFormat\tstring[]\tNo","deprecated-options#Deprecated Options":"Prop\tIn Favor Of\tDeprecated\tid\tiiifContent\tv2.0.0\tmanifestId\tiiifContent\tv2.0.0\toptions.renderAbout\toptions.informationPanel.renderAbout\tv2.0.3\toptions.showInformationToggle\toptions.informationPanel.renderToggle\tv2.0.3","basic-configuration#Basic Configuration":"Example customization of various options.\nconst options = {\n // Primary title (Manifest label) for top level canvas. Defaults to true\n showTitle: false,\n // IIIF Badge and popover containing options. Defaults to true\n showIIIFBadge: false,\n // Ignore supplementing canvases by label value that are not for captioning\n ignoreCaptionLabels: ['Chapters'],\n // Override canvas background color, defaults to #1a1d1e\n canvasBackgroundColor: \"#000\",\n // Set canvas zooming onScoll (this defaults to false)\n openSeadragon: {\n gestureSettingsMouse: {\n scrollToZoom: true;\n }\n }\n}\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
\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-e33304bf8fbb32bc.js b/_next/static/chunks/pages/docs/viewer-64e385341d571d12.js
similarity index 99%
rename from _next/static/chunks/pages/docs/viewer-e33304bf8fbb32bc.js
rename to _next/static/chunks/pages/docs/viewer-64e385341d571d12.js
index 164b7d8b..eb22ffde 100644
--- a/_next/static/chunks/pages/docs/viewer-e33304bf8fbb32bc.js
+++ b/_next/static/chunks/pages/docs/viewer-64e385341d571d12.js
@@ -1 +1 @@
-(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:"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:"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"})]})]})]}),"\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"})]})]})]}),"\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:"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)(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:"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"})]})]})]}),"\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"})]})]})]}),"\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:"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(d.O).every(function(e){return d.O[e](n[f])})?n.splice(f--,1):(i=!1,o0&&e[u-1][2]>o;u--)e[u]=e[u-1];e[u]=[n,r,o];return}for(var i=1/0,u=0;u=o&&Object.keys(d.O).every(function(e){return d.O[e](n[f])})?n.splice(f--,1):(c=!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