Contents

<Clover.Root iiifContent={url}>
  <Clover.Body />
  <Clover.Contents />
</Clover.Root>

<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-body></clover-body>
  <clover-contents></clover-contents>
</clover-root>

API reference

Inside a Root<clover-root>, it lists the Manifest’s Ranges (structures), nested as they nest, in a nav named “Contents”: choosing an entry goes to its Canvas, framed to its region or at its time, and the entry the reader is in is aria-current. An entry with entries under it opens and closes them by the button at the end of its row; they start closed, but for the entries holding the one the reader is in, open from the top down to it and set in bold, so the way to it shows. An entry in parts, columns or pages out of order, steps through them in its Range’s order while it is the current one, and the regions any Range names are drawn on the Canvas as annotations are. The entry the reader is in shows its Range’s thumbnail under its words, as a chapter’s shows over the seek bar and under it in the chapters’ menu. It renders nothing without Ranges. Its other props, and its ref, go to its element. For the view itself, see Body<clover-body>.

Examples

Chapters

On a video or sound, Ranges that name a time are chapters, on the seek bar too. The entry follows playback, and pointing at either marks the other.

<Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/rudolf-hess-nuremberg/manifest.json">
  <Clover.Body />
  <Clover.Contents />
</Clover.Root>

<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/rudolf-hess-nuremberg/manifest.json">
  <clover-body></clover-body>
  <clover-contents></clover-contents>
</clover-root>

Articles in parts

A Range may read parts of pages, in an order of its own: a newspaper’s article in columns, continued pages later. Its regions are drawn on the Canvas, and while it is the current entry it steps through them, each framed and marked. This article starts in two columns on page 2 and goes on in two on page 5.

<Clover.Root iiifContent="https://iiif.io/api/cookbook/recipe/0025-newspaper-article-index/manifest.json">
  <Clover.Body />
  <Clover.Contents />
</Clover.Root>

<clover-root
  iiif-content="https://iiif.io/api/cookbook/recipe/0025-newspaper-article-index/manifest.json">
  <clover-body></clover-body>
  <clover-contents></clover-contents>
</clover-root>

Without regions

The regions are drawn as the annotation set CONTENTS_SET_ID. Hide it, and Contents still steps through them.

clover.setSetVisible(Clover.CONTENTS_SET_ID, false);

<script type="module">
  // The Ranges' regions are the set "contents".
  document.querySelector("clover-root").clover.setSetVisible("contents", false);
</script>

In the Viewer

The Viewer’s Panel shows it as its Contents section, for a Manifest with Ranges.

<Viewer iiifContent="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json" />

<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"></clover-viewer>

Your own

Use tableOfContentsroot.clover.contents() for the same entries, in a table of your own: each has its label, the canvasIdcanvas-id it goes to, its time or region, its parts where it has some, and its children. currentContents names the entry the reader is in, and chaptersOf gives a recording’s chapters.

const manifest = Clover.useManifest();
const entries = Clover.tableOfContents(manifest);

<script type="module">
  const root = document.querySelector("clover-root");
  root.addEventListener("clover-ready", () => {
    root.clover.subscribe(() => {
      const entries = root.clover.contents();
    });
  });
</script>

Previous versions

Clover 3.x › Viewer

• The Contents tab is a part of its own, for anywhere in a Root<clover-root>.
• renderContents: false is a Panel<clover-panel> of Tab<clover-tab>s without it.
• defaultTab: "manifest-contents" is the Panel’s defaultValue="contents".