Replacing Only the Window Title of External Manifests in Mirador 4

Background

Mirador is an IIIF-compatible image viewer that allows side-by-side comparison of multiple IIIF manifests. When displaying manifests published by multiple institutions in a single view, each window title shows the manifest’s label as-is.

However, there are cases where you want to display a custom name as the window title for your own project. For example, when the manifest’s label is a long string containing individual volume information, but you want to display a short name indicating the collection.

Constraint: The Manifest Contents Must Not Be Changed

Since external manifests published by other institutions are loaded and displayed, modifying their contents should be avoided. While it is possible to intercept fetch or rewrite Mirador’s internal state to replace the label in the manifest JSON, this amounts to modifying the manifest itself.

What should be changed is only the title display (DOM) of the window rendered by Mirador on screen, while keeping the manifest data itself in its original form.

Approaches Tried and Results

1. Rewriting Internal State via Mirador.actions.receiveManifest

Result: Did not work. In the UMD build of Mirador 4 distributed via unpkg, Mirador.actions is undefined, and this API was not available.

2. Intercepting window.fetch

Result: Works, but amounts to modifying the manifest contents. Since the JSON received by Mirador itself is rewritten, the modified label is also displayed in the information panel. Rejected due to concerns about modifying other institutions’ manifests.

3. Traversing and Replacing All Text Nodes in the DOM

Result: Impact scope too wide. Not only the window title but all occurrences of the same label text, including metadata displays in the manifest information panel, were replaced.

4. Targeting Only the h2 Element in the Window Top Bar (Adopted)

Mirador 4’s window top bar has the following DOM structure:

By targeting only this h2 element for replacement, the window title display can be controlled without changing the manifest contents or metadata display at all.

Final Implementation

Add a titles parameter to the URL, specifying custom titles separated by semicolons for each manifest.

Building the Title Map

Specify titles in the same order and count as the manifest parameter. Build a map with manifest URLs as keys and custom titles as values.

DOM Replacement Processing

The key points are the following three:

1. store.subscribe – Monitors Mirador’s Redux store and detects when manifest loading is complete. Gets the original label from the store to identify replacement targets.
2. MutationObserver – Since the DOM is updated every time Mirador re-renders with React, it detects changes and replaces the title again.
3. observer.disconnect() / observer.observe() – Pauses the observer during replacement processing to prevent the MutationObserver from re-firing due to its own DOM changes and creating an infinite loop.

Summary

This allows presenting display names suited to your project’s context while respecting the IIIF manifests published by external institutions. It is a simple approach that can be achieved using only standard DOM APIs without Mirador’s plugin mechanism.