Update demos for Mirador 4

.gitignore

@@ -1,4 +1,4 @@
 node_modules/
 dist/
 package-lock.json
-.cache/
+.parcel-cache

AnotherCustomMenuItem.jsx

@@ -0,0 +1,15 @@
+// DummyPluginForMenu.js
+const AnotherCustomMenuItem = () => {
+  return (
+    <div>
+      <p style={{ textAlign: 'center' }}>More!</p>
+    </div>
+  );
+};
+
+export default {
+  target: 'WindowTopBarPluginMenu',
+  mode: 'add',
+  name: 'AnotherCustomMenuItem',
+  component: AnotherCustomMenuItem,
+};

CustomMenuComponent.jsx

@@ -0,0 +1,33 @@
+import SvgIcon from '@mui/material/SvgIcon';
+import { WindowTopBarPluginMenu } from 'mirador';
+
+const CustomIcon = (props) => (
+  <SvgIcon {...props}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M0,0H24V24H0Z" fill="none" />
+      <path d="M19,12v7H5V12H3v9H21V12Z" />
+      <path d="M11.741,8.178V5L17.3,10.562l-5.562,5.562V12.867c-3.973,0-6.754,1.271-8.741,4.052C3.795,12.946,6.178,8.973,11.741,8.178Z" transform="translate(4 -4)" />
+    </svg>
+  </SvgIcon>
+);
+
+const CustomMenuComponent = (props) => {
+  return (
+    <WindowTopBarPluginMenu
+        menuIcon={<CustomIcon />}
+        pluginTarget="CustomMenuComponent"
+        windowId={props.windowId}
+    />
+  );
+};
+
+export default {
+  target: 'WindowTopBarPluginArea',
+  mode: 'add',
+  name: 'CustomMenuPlugin',
+  component: CustomMenuComponent,
+  mapStateToProps: (state, { windowId }) => ({
+    windowId: windowId,
+  }),
+};
+

CustomMenuItem.jsx

@@ -0,0 +1,13 @@
+
+const CustomMenuItem = () => (
+  <div>
+    <p style={{ textAlign: 'center' }}>Custom Menu Item :)</p>
+  </div>
+);
+
+export default {
+  target: 'CustomMenuComponent',
+  mode: 'add',
+  name: 'CustomMenuItem',
+  component: CustomMenuItem,
+};

README.md

@@ -1,28 +1,68 @@
 ## Integrating Mirador
 
-This repository is designed to show integrating Mirador 3 with modern frontend build systems.
+This repository is designed to show integrating Mirador 4 with modern frontend build systems.
 
-### Dependencies
+We demonstrate the use of both our ES Module and packged UMD/CDN (served from unpkg) builds. See `index.html` and `index-umd.html`:
+```
+npm run serve
+```
+```
+npm run serve-umd
+```
+
+The pages will load at `http://localhost:1234`.
 
-You will likely need to have at least the following dependencies available in your `package.json`.
+Plugins are not compatible with the UMD style of loading Mirador.
+In order to integrate Mirador with any plugins, you need to use our ES Module build.
+Refer to `index.js` for this setup -- here we integrate the `mirador-image-tools` plugin.
 
+### Dependencies
+
+In order to work directly with the Mirador code to integrate existing or custom plugins, you will need to have at least the following dependencies available in your `package.json`.
  - `mirador`
  - `react`
  - `react-dom`
- - `mirador-image-tools` - A plugin just to test plugin integration
+ - `react-i18next`
+ - `@emotion/react`
+ - `@emotion/styled`
+ - `@mui/material`
+ - `@mui/system`
+ -  `mirador-image-tools` - A plugin just to test plugin integration
+- `mirador-share-plugin` - Another plugin to test plugin integration
 
-### Webpack
 
-See `./webpack` for a basic webpack setup for Mirador 3 + a plugin.
 
-```sh
-npm run webpack
-```
+We also include `parcel`, which is a simple package that serves up our example HTML pages here. It would most likely not be used in a real application.
+
+### Plugin system
+
+This repository demonstrates a number of ways to integrate plugins with Mirador.
 
-### Parcel
+1. `mirador-image-tools`: this plugin is supported by ProjectMirador and loaded from npm. By default internally, this plugin targets Mirador's `WindowTopBarPluginMenu` (the menu with three dots) as the location for its menu items. Including `...miradorImageToolsPlugin` in the initializer therefore adds the plugin, the image tools and the show/hide menu item.
 
-See `./parcel`, but essentially it is just an html file referencing the JavaScript.
+2. `CustomMenuComponent.jsx`: This component (a Mirador "add" plugin) models how to create an additional Menu in Mirador's top bar. With its custom arrow icon, it sits next to the default `WindowTopBarPluginMenu` in the window top bar.
 
-```sh
-npm run parcel
+
+3. `AnotherCustomMenuItem.jsx`: similar to `CustomMenuItem`, but targeting `CustomMenuComponent`. 
+
+4.  `mirador-share-plugin`: this plugin is supported by ProjectMirador and loaded from npm. By default internally, this plugin targets Mirador's `WindowTopBarPluginMenu` (the menu with three dots). However in this repo we are demonstrating how to use a custom target, in this case `CustomMenuComponent`. The share plugin controls are visible inside CustomMenuComponent thanks to this line: `{...miradorSharePlugin, target: 'CustomMenuComponent' }`
+
+
+5. `CustomMenuItem.jsx`: This is just a simple component targeting our `CustomMenuComponent`. The target is set in the component's export:
+```js
+export default {
+  target: 'CustomMenuComponent',
+  mode: 'add',
+  name: 'CustomMenuItem',
+  component: CustomMenuItem,
+};
 ```
+When it is included in the intializer, the target is already set.
+
+5. `AnotherCustomMenuItem.js`: Similar to `CustomMenuItem`, but targeting the default `WindowTopBarPluginMenu`. 
+
+
+For more info on Mirador plugins please [visit Mirador](https://github.com/ProjectMirador/mirador/wiki/Architecture-overview-1:-Components,-containers,-and-plugins)! This repo is meant to be a demo, not a full explanation. 
+
+
+

index-umd.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Basic Mirador: UMD / CDN</title>
+</head>
+
+<body>
+    <div id="demo"></div>
+    <script src="https://unpkg.com/[email protected]/dist/mirador.min.js"></script>
+    <script>
+        // Mirador is now available as a global variable
+        Mirador.viewer({
+            id: 'demo',
+            windows: [{
+                imageToolsEnabled: true,
+                imageToolsOpen: true,
+                manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
+            }],
+            theme: {
+                palette: {
+                    primary: {
+                        main: '#1967d2',
+                    },
+                },
+            },
+        });
+    </script>
+</body>
+
+</html>

index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Basic Mirador: ES Modules</title>
+</head>
+
+<body>
+    <div id="demo"></div>
+    <script type="module" src="index.js"></script>
+</body>
+
+</html>

index.js

@@ -0,0 +1,32 @@
+// Import Mirador from node_modules
+import Mirador from 'mirador';
+import { miradorImageToolsPlugin } from 'mirador-image-tools';
+import { miradorSharePlugin, miradorShareDialogPlugin } from 'mirador-share-plugin';
+import AnotherCustomMenuItem from './AnotherCustomMenuItem.jsx';
+import CustomMenuItem from './CustomMenuItem.jsx';
+import CustomMenuComponent from './CustomMenuComponent.jsx';
+
+Mirador.viewer({
+    id: 'demo',
+    windows: [{
+        imageToolsEnabled: true,
+        imageToolsOpen: true,
+        manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
+    }],
+    theme: {
+        palette: {
+            primary: {
+                main: '#1967d2',
+            },
+
+        },
+    },
+}, [
+    ...miradorImageToolsPlugin,
+    {...miradorSharePlugin, target: 'CustomMenuComponent' },
+    miradorShareDialogPlugin,
+    AnotherCustomMenuItem,
+    CustomMenuItem,
+    CustomMenuComponent,
+]);
+

package.json

@@ -1,24 +1,30 @@
 {
   "name": "mirador-integration",
-  "version": "0.0.0",
-  "description": "",
+  "version": "1.0.0",
+  "description": "Examples of integrating Mirador 4 with plugins",
   "private": true,
   "scripts": {
-    "parcel": "parcel parcel/index.html",
-    "webpack": "webpack --config webpack/webpack.config.js",
+    "serve": "rm -rf dist .parcel-cache && parcel index.html",
+    "serve-umd": "rm -rf dist .parcel-cache && parcel index-umd.html",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "css-loader": "^3.6.0",
-    "mirador": "^3.3.0",
-    "mirador-image-tools": "^0.11.0",
-    "parcel-bundler": "^1.12.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "style-loader": "^1.2.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12"
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/material": "^7.0.0",
+    "@mui/system": "^7.0.0",
+    "mirador": "4.0.0",
+    "mirador-image-tools": "1.0.0",
+    "mirador-share-plugin": "1.0.0",
+    "prop-types": "^15.7.2",
+    "parcel": "^2.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^15.0.0"
+  },
+  "devDependencies": {
+    "process": "^0.11.10"
   }
 }