Scroll

A UI component rendering a vertical scrolling articles that output individual Canvases, basic descriptive properties, and Annotations with commenting motivations with support for transcribing and translating motivations.

Features

Provide a IIIF Presentation API  Manifest and the component:

• Renders the Canvases of a IIIF Manifest as HTML5 article elements
• Outputs Annotation textual content along with OpenSeadragon for images
• Supports vertical scrolling and textual discovery with a fixed Search… input

Installation

  npm install @samvera/clover-iiif

  yarn add @samvera/clover-iiif

  pnpm install @samvera/clover-iiif

Usage

React

Add the Scroll component to your jsx or tsx code.

import Viewer from "@samvera/clover-iiif/scroll";

Render Scroll with a IIIF Manifest URI. The only required prop is the iiifContent, which is the URI of the IIIF Manifest.

<Scroll iiifContent="https://digital.lib.utk.edu/assemble/manifest/civilwar/5390" />

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.

import dynamic from "next/dynamic";
 
const Scroll = dynamic(
  () => import("@samvera/clover-iiif").then((Clover) => Clover.Scroll),
  {
    ssr: false,
  },
);
 
const MyCustomScroll = () => {
  const iiifContent =
    "https://digital.lib.utk.edu/assemble/manifest/civilwar/5390";
 
  return <Scroll iiifContent={iiifContent} />;
};

API Reference

Scroll can configured through an options prop, which will serve as a object for common options.

Offset

The options.offset refers to the number of pixels to offset the fixed Search… input when scrolling vertically. This is useful when the Scroll is rendered within a page with a fixed header.

<Scroll
  iiifContent="https://digital.lib.utk.edu/assemble/manifest/civilwar/5390"
  options={{ offset: 90 }}
/>

Figure

The Scroll component renders a figure element for each Canvas. The options.figure object allows for customization of the figure width, aspect ratio, and display. This can be useful for customizing the Scroll component to fit within a specific layout alongside other image viewers.

<Scroll
  iiifContent="https://digital.lib.utk.edu/assemble/manifest/civilwar/5390"
  options={{
    figure: {
      aspectRatio: 1,
      display: "thumbnail",
      width: "200px",
    },
  }}
/>

Language

The options.language object allows for the configuration of the language options for the Scroll component. This includes the default languages and language options.

By default, the options.language object is not set, and the Scroll component will not display any language options. When the options.language object is set, the Scroll component will display a language dropdown that allows users to filter the content by languages within the Manifest annotation body resources. If defaultLanguages are not set, the Scroll component will display all languages available in the Manifest.

The options.language.options array should be an array of objects with key-value pairs where the key is the language code and the value is the language name. The language code should match the language code in the Manifest annotation body resources.

<Scroll
  iiifContent="https://iiif-maktaba.dc.library.northwestern.edu/dc8ff749-adad-42a7-81e0-0eb473ef88a5.json"
  options={{
    offset: 90,
    language: {
      defaultLanguages: ["en"],
      enabled: true,
      options: [{ en: "English" }, { ar: "Arabic" }],
    },
  }}
/>

Annotation Motivations

Control which annotation motivations the Scroll experience renders by providing options.annotations.motivations. Clover filters every manifest annotation so only allowed motivations are surfaced in the scrolling articles, search panel, and language extraction. Omit the option to display every available motivation.

<Scroll
  iiifContent="https://digital.lib.utk.edu/assemble/manifest/civilwar/5390"
  options={{
    annotations: {
      motivations: ["commenting"],
    },
  }}
/>