Mirador 3: setting different configuration options when using build with plug-ins

Question

I am using Mirador 3 in the context of a static website built with Hugo.

When I embed Mirador from the unpkg URL, I can easily set different options on different pages (here using Hugo templating syntax to set the manifest):

<script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>

<div id="mirador"></div>

<script>
const mirador = Mirador.viewer({
      id: "mirador",
      windows: [
        {
          manifestId: '/manifests/{{ .Params.internalCatalogueID }}.json'
        }
      ]
});
</script>

However, I need to use a few plugins, including the download plugin.

When I create a Mirador build with plug-ins, I don't have an obvious way to set different configuration options on different pages. The configuration options are stuck with whatever was set when the build was created.

I.e., something like this doesn't work:

<div id="demo"></div>
<script src="dist/main.js"></script>

<script>
const mirador = Mirador.viewer({
      id: "demo",
      windows: [
        {
          manifestId: '/manifests/{{ .Params.internalCatalogueID }}.json'
        }
      ]
});
</script>

-> What's the best practice for setting Mirador configurations on different pages, when using a build with plug-ins?

score 2 · Answer 1 · answered Oct 15 '22 at 13:06

2

Instead of hardcoding the parameters at build time, export a function from the bundle to the global namespace that sets up Mirador and that you can then pass your custom options to from outside of the bundle:

window.renderMirador = function (options) {
  return Mirador.viewer({
    // ... your default options
    plugins: [ /* ... */ ],
    ...options
  })
}

And then in your HTML:

<div id="demo"></div>
<script src="dist/main.js"></script>

<script>
const mirador = renderMirador({
      id: "demo",
      windows: [
        {
          manifestId: '/manifests/{{ .Params.internalCatalogueID }}.json'
        }
      ]
});
</script>

answered Oct 15 '22 at 13:06

jbaiter

6,913
4
30
40

Thank you so much! Got it to work now -- found that the parentheses had to be like this in the renderMirador function: window.renderMirador = function (options) { return Mirador.viewer({ ...options }, [ /* ... */], ) } – Ulrik Lyngs Oct 17 '22 at 09:14
within your solution, how do I programmatically e.g. change the canvas? With your solution e.g. ´var action = Mirador.actions.setCanvas(‘known-window-id’, ‘https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-43182083’)` (taken from https://stackoverflow.com/questions/62752053/mirador-3-jump-to-page-set-page-set-canvas) throws an error “Can’t find variable: Mirador”? Similarly change it to ‘renderMirador.actions.SetCanvas’ just throws the error “undefined is not an object (evaluating ‘renderMirador.actions.setCanvas’)” – Ulrik Lyngs Jan 01 '23 at 13:03

score 0 · Answer 2 · answered Oct 17 '22 at 09:21

Here's a full example, using jbaiter's solution to create a build with the image tools and the download plugin:

index.js

import Mirador from 'mirador/dist/es/src/index';
import { miradorImageToolsPlugin } from 'mirador-image-tools';
import miradorDownloadPlugins from 'mirador-dl-plugin';

window.renderMirador = function (options) {
  return Mirador.viewer({
    // ... your default options
    ...options
  },
  [
    ...miradorImageToolsPlugin,
    ...miradorDownloadPlugins,
  ])
}

This is built with npm run webpack, which creates a bunch of .js files in a directory named dist. We point to main.js in our HTML file, and pass it the options we want:

index.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Mirador 3 with plug-ins, yay!</title>
  </head>
  <body>
    <div id="mirador"></div>
    <script src="dist/main.js"></script>
    <script>
      const mirador = renderMirador({
        id: 'mirador',
        windows: [{
          imageToolsEnabled: true,
          imageToolsOpen: true, 
          manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
        }]
      });
      </script>

  </body>
</html>

Mirador 3: setting different configuration options when using build with plug-ins

2 Answers2

Linked