Création de plugin pour Mirador

Contexte

Ici nous allons chercher à créer un plugin pour Mirador ainsi que l'intégrer.

Création d'un plugin

Conventions

Dans un premier temps, il faut savoir que pour créer un plugin il faut respecter une certaine convention. Il faut tout d'abord que le plugin possède au moins ces 3 propriétés :

{
  name: 'Demo',
  target: 'WindowTopBarPluginMenu',
  mode: 'add',
}

- name: Tout simplement le nom du plugin

- target: Le composant de Mirador qui est ciblé par le plugin à savoir que seul les composants suivant peuvent être ciblés :

• Window
• BackgroundPluginArea
• WindowTopBarPluginMenu
• WorkspaceControlPanelButtons
• WorkspaceMenu
• WorkspaceOptionsMenu

- mode: Ce que fait le plugin donc ici "add" pour le faite qu'il ajoute une fonction

Ensuite, les propriétés s'accompagnent aussi d'habitude de ceci :

{
  component: DemoComponent,
}

- component: La fonction, constante ou encore classe qui va indiquer ce que fait notre plugin.

Exemple

Le tout est montré dans l'exemple ci-dessous:

const DemoComponent = props => {
  console.log(props);
  return <div id="add-plugin-component-anything">Hello World!</div>;
};

export default {
  name: "Demo",
  target: "WindowTopBarPluginMenu",
  mode: "add",
  component: DemoComponent
};

On a donc toutes les propriétés qui se retrouvent dans la partie "export default" et l'action qu'effectue notre plugin dans "const DemoComponent", qui ici affiche donc juste un "Hello World!" dans le composant "WindowTopBarPluginMenu" de Mirador.

Références

cf. https://github.com/ProjectMirador/mirador/wiki/M3-Configuration-Recipes (Doc officielle de Mirador 3) cf. https://github.com/ProjectMirador/mirador-dl-plugin (Exemple Dl-Plugin) cf. https://github.com/mejackreed/mirador-plugin-example/tree/master/src (Exemple d'un petit plugin)