diff --git a/__tests__/integration/mirador/embedding.html b/__tests__/integration/mirador/embedding.html
new file mode 100644
index 0000000000000000000000000000000000000000..e37a484d7c0a8f443c89f9dfe573e07ef8e2c978
--- /dev/null
+++ b/__tests__/integration/mirador/embedding.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="theme-color" content="#000000">
+ <style type="text/css">
+ html, body {
+ height: 100%;
+ width: 100%;
+ }
+ #instanceOne {
+ width: 100%;
+ height: 50%;
+ }
+ #instanceTwo {
+ margin: 0 auto;
+ width: 800px;
+ height: 600px;
+ }
+ </style>
+ <title>Mirador</title>
+ </head>
+ <body>
+ <h1>This is the first instance</h1>
+ <div id="instanceOne"></div>
+ <h1>And this is the second instance</h1>
+ <div id="instanceTwo"></div>
+ <script>document.write("<script type='text/javascript' src='../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
+ <script type="text/javascript">
+ var miradorInstanceOne = Mirador.viewer({
+ id: 'instanceOne',
+ windows: [{
+ loadedManifest: 'https://iiif.harvardartmuseums.org/manifests/object/299843',
+ canvasIndex: 2,
+ },
+ {
+ loadedManifest: 'https://media.nga.gov/public/manifests/nga_highlights.json',
+ thumbnailNavigationPosition: 'off',
+ }]
+ });
+ var miradorInstanceTwo = Mirador.viewer({
+ id: 'instanceTwo',
+ windows: [{
+ loadedManifest: 'https://iiif.harvardartmuseums.org/manifests/object/299843',
+ canvasIndex: 2,
+ },
+ {
+ loadedManifest: 'https://media.nga.gov/public/manifests/nga_highlights.json',
+ thumbnailNavigationPosition: 'off',
+ }]
+ });
+ </script>
+ </body>
+</html>
diff --git a/__tests__/integration/mirador/index.html b/__tests__/integration/mirador/index.html
index e088e95e99ebca0c7f5d39507bb6d156ad23ae8d..0d1d65e24fa85abd8f7eb23399e921b323f83fa8 100644
--- a/__tests__/integration/mirador/index.html
+++ b/__tests__/integration/mirador/index.html
@@ -7,7 +7,7 @@
<title>Mirador</title>
</head>
<body>
- <div id="mirador"></div>
+ <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
<script>document.write("<script type='text/javascript' src='../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
<script type="text/javascript">
var miradorInstance = Mirador.viewer({
diff --git a/__tests__/integration/mirador/plugins.html b/__tests__/integration/mirador/plugins.html
index df5ddbd9e3efdc624bc4ef0b3d171260eb14e788..3310af53b64fd24c985824bdd26fede98097c0c0 100644
--- a/__tests__/integration/mirador/plugins.html
+++ b/__tests__/integration/mirador/plugins.html
@@ -7,7 +7,7 @@
<title>Mirador</title>
</head>
<body>
- <div id="mirador"></div>
+ <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
<script src="../../../node_modules/react/umd/react.development.js"></script>
<!-- Request from CDN if unavailable locally -->
<script type="text/javascript">
diff --git a/src/lib/MiradorViewer.js b/src/lib/MiradorViewer.js
index 55d1635909ef2dca5450fc0ddb2b33e0dd71759b..2fd7d8b5558780c8d4e97db1ac81ed04bfd8870f 100644
--- a/src/lib/MiradorViewer.js
+++ b/src/lib/MiradorViewer.js
@@ -10,7 +10,6 @@ import * as actions from '../state/actions';
import settings from '../config/settings';
import i18n from '../i18n';
-const store = createStore();
/**
* Default Mirador instantiation
*/
@@ -18,16 +17,17 @@ class MiradorViewer {
/**
*/
constructor(config) {
+ this.store = createStore();
this.config = config;
this.processPlugins();
this.processConfig();
const viewer = {
actions,
- store,
+ store: this.store,
};
ReactDOM.render(
- <Provider store={store}>
+ <Provider store={this.store}>
<I18nextProvider i18n={i18n}>
<App config={config} />
</I18nextProvider>
@@ -44,7 +44,7 @@ class MiradorViewer {
processConfig() {
const mergedConfig = deepmerge(settings, this.config);
const action = actions.setConfig(mergedConfig);
- store.dispatch(action);
+ this.store.dispatch(action);
mergedConfig.windows.forEach((miradorWindow) => {
let thumbnailNavigationPosition;
@@ -53,8 +53,8 @@ class MiradorViewer {
} else {
thumbnailNavigationPosition = mergedConfig.thumbnailNavigation.defaultPosition;
}
- store.dispatch(actions.fetchManifest(miradorWindow.loadedManifest));
- store.dispatch(actions.addWindow({
+ this.store.dispatch(actions.fetchManifest(miradorWindow.loadedManifest));
+ this.store.dispatch(actions.addWindow({
canvasIndex: (miradorWindow.canvasIndex || 0),
manifestId: miradorWindow.loadedManifest,
thumbnailNavigationPosition,
@@ -92,8 +92,8 @@ class MiradorViewer {
});
actionCreators.forEach((action) => { actions[action.name] = action.action; });
- reducers.forEach((reducer) => { store.pluginReducers[reducer.name] = reducer.reducer; });
- store.replaceReducer(createRootReducer(store.pluginReducers));
+ reducers.forEach((reducer) => { this.store.pluginReducers[reducer.name] = reducer.reducer; });
+ this.store.replaceReducer(createRootReducer(this.store.pluginReducers));
}
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c7932e0ad740fb41574ea3cab8fa01bfc4cff5ba..cd70bf40fbe52aaf9a456390c4b401f20eb323b2 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,6 +1,12 @@
@import 'variables';
.mirador {
+ &-app {
+ height: 100%;
+ position: relative;
+ width: 100%;
+ }
+
&-workspace {
bottom: 0;
box-sizing: border-box;