diff --git a/.gitignore b/.gitignore index 8aea253..8a90e90 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ node_modules/ dist/ package-lock.json -.cache/ +.parcel-cache diff --git a/AnotherCustomMenuItem.jsx b/AnotherCustomMenuItem.jsx new file mode 100644 index 0000000..67c0fb2 --- /dev/null +++ b/AnotherCustomMenuItem.jsx @@ -0,0 +1,15 @@ +// DummyPluginForMenu.js +const AnotherCustomMenuItem = () => { + return ( +
+

More!

+
+ ); +}; + +export default { + target: 'WindowTopBarPluginMenu', + mode: 'add', + name: 'AnotherCustomMenuItem', + component: AnotherCustomMenuItem, +}; \ No newline at end of file diff --git a/CustomMenuComponent.jsx b/CustomMenuComponent.jsx new file mode 100644 index 0000000..013c94d --- /dev/null +++ b/CustomMenuComponent.jsx @@ -0,0 +1,33 @@ +import SvgIcon from '@mui/material/SvgIcon'; +import { WindowTopBarPluginMenu } from 'mirador'; + +const CustomIcon = (props) => ( + + + + + + + +); + +const CustomMenuComponent = (props) => { + return ( + } + pluginTarget="CustomMenuComponent" + windowId={props.windowId} + /> + ); +}; + +export default { + target: 'WindowTopBarPluginArea', + mode: 'add', + name: 'CustomMenuPlugin', + component: CustomMenuComponent, + mapStateToProps: (state, { windowId }) => ({ + windowId: windowId, + }), +}; + \ No newline at end of file diff --git a/CustomMenuItem.jsx b/CustomMenuItem.jsx new file mode 100644 index 0000000..0e6f3a0 --- /dev/null +++ b/CustomMenuItem.jsx @@ -0,0 +1,13 @@ + +const CustomMenuItem = () => ( +
+

Custom Menu Item :)

+
+); + +export default { + target: 'CustomMenuComponent', + mode: 'add', + name: 'CustomMenuItem', + component: CustomMenuItem, +}; \ No newline at end of file diff --git a/README.md b/README.md index 4baf1cf..fd778cd 100644 --- a/README.md +++ b/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. + + + diff --git a/index-umd.html b/index-umd.html new file mode 100644 index 0000000..c83dc69 --- /dev/null +++ b/index-umd.html @@ -0,0 +1,32 @@ + + + + + + Basic Mirador: UMD / CDN + + + +
+ + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..318a0b1 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + Basic Mirador: ES Modules + + + +
+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..ec609fb --- /dev/null +++ b/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, +]); + diff --git a/package.json b/package.json index 92db028..aa2c00c 100644 --- a/package.json +++ b/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" } } diff --git a/parcel/index.html b/parcel/index.html deleted file mode 100644 index 567af4c..0000000 --- a/parcel/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - Basic Mirador - - -
- - - diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 2e8b000..0000000 --- a/src/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import Mirador from 'mirador/dist/es/src/index'; -import { miradorImageToolsPlugin } from 'mirador-image-tools'; - -const config = { - id: 'demo', - windows: [{ - imageToolsEnabled: true, - imageToolsOpen: true, - manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest', - }], - theme: { - palette: { - primary: { - main: '#1967d2', - }, - }, - }, -}; - -Mirador.viewer(config, [ - ...miradorImageToolsPlugin, -]); diff --git a/webpack/index.html b/webpack/index.html deleted file mode 100644 index 3b87560..0000000 --- a/webpack/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - Basic Mirador - - -
- - - diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js deleted file mode 100644 index 25c398e..0000000 --- a/webpack/webpack.config.js +++ /dev/null @@ -1,10 +0,0 @@ -const path = require('path'); - -module.exports = { - entry: './src/index.js', - output: { - filename: 'main.js', - path: path.resolve(__dirname, 'dist'), - publicPath: './dist/', - }, -};