wip

6fa70de0 · Loïs Poujade · 6fa70de0 · 6fa70de0 · 6fa70de0 · 6fa70de0
Verified Commit 6fa70de0 authored 2 years ago by Loïs Poujade
--- a/.gitignore
+++ b/.gitignore
+node_modules/
+dist/
+package-lock.json
+.cache/
--- a/README.md
+++ b/README.md
+## Integrating Mirador
+This repository is designed to show integrating Mirador 3 with modern frontend build systems.
+### Dependencies
+You will likely 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
+### Webpack
+See `./webpack` for a basic webpack setup for Mirador 3 + a plugin.
+```sh
+npm run webpack
+```
+### Parcel
+See `./parcel`, but essentially it is just an html file referencing the JavaScript.
+```sh
+npm run parcel
+```
--- a/package.json
+++ b/package.json
+{
+  "name": "mirador-integration",
+  "version": "0.0.0",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "webpack": "webpack --config webpack/webpack.config.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "mirador": "git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation.git#95e5ece6522482c0028ffe895f4460ac513816ad",
+    "css-loader": "^3.6.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "style-loader": "^1.2.1",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^4.3.12"
+  }
+}
--- a/src/index.js
+++ b/src/index.js
+import Mirador from 'mirador/dist/es/src/index';
+// 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,
+]);
+const config = {
+  id: 'mirador',
+  theme: { transitions: window.location.port === '4488' ?  { create: () => 'none' } : {}, },
+  annotation: {
+    adapter: (canvasId) => new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`),
+    exportLocalStorageAnnotations: true,
+  },
+  catalog: [
+    { manifestId: 'http://localhost/dzkimgs_annotated_video.json' },
+    { manifestId: 'http://localhost/video_split_annopage.json' },
+    { manifestId: 'http://localhost/fediverse.json' },
+    { manifestId: 'http://localhost/localvideo.json' },
+    { manifestId: 'http://localhost/local_catvideo.json' },
+    { manifestId: 'https://dzkimgs.l.u-tokyo.ac.jp/videos/iiif_in_japan_2017/manifest.json' },
+    { manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json' },
+    { manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843' }
+  ]
+}
--- a/webpack/index.html
+++ b/webpack/index.html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Basic Mirador</title>
+  </head>
+  <body>
+    <div id="demo"></div>
+    <script src="dist/main.js"></script>
+  </body>
+</html>
--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
+const path = require('path');
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    filename: 'main.js',
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: './dist/',
+  },
+};