Skip to content
Snippets Groups Projects
Unverified Commit c4684d42 authored by Jack Reed's avatar Jack Reed Committed by GitHub
Browse files

Merge pull request #1829 from ProjectMirador/1782-embedded-integration-test

Add test page for multiple miradors
parents ab917f46 364947b8
Branches
Tags
No related merge requests found
<!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>
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<title>Mirador</title> <title>Mirador</title>
</head> </head>
<body> <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>document.write("<script type='text/javascript' src='../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
<script type="text/javascript"> <script type="text/javascript">
var miradorInstance = Mirador.viewer({ var miradorInstance = Mirador.viewer({
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<title>Mirador</title> <title>Mirador</title>
</head> </head>
<body> <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> <script src="../../../node_modules/react/umd/react.development.js"></script>
<!-- Request from CDN if unavailable locally --> <!-- Request from CDN if unavailable locally -->
<script type="text/javascript"> <script type="text/javascript">
......
...@@ -10,7 +10,6 @@ import * as actions from '../state/actions'; ...@@ -10,7 +10,6 @@ import * as actions from '../state/actions';
import settings from '../config/settings'; import settings from '../config/settings';
import i18n from '../i18n'; import i18n from '../i18n';
const store = createStore();
/** /**
* Default Mirador instantiation * Default Mirador instantiation
*/ */
...@@ -18,16 +17,17 @@ class MiradorViewer { ...@@ -18,16 +17,17 @@ class MiradorViewer {
/** /**
*/ */
constructor(config) { constructor(config) {
this.store = createStore();
this.config = config; this.config = config;
this.processPlugins(); this.processPlugins();
this.processConfig(); this.processConfig();
const viewer = { const viewer = {
actions, actions,
store, store: this.store,
}; };
ReactDOM.render( ReactDOM.render(
<Provider store={store}> <Provider store={this.store}>
<I18nextProvider i18n={i18n}> <I18nextProvider i18n={i18n}>
<App config={config} /> <App config={config} />
</I18nextProvider> </I18nextProvider>
...@@ -44,7 +44,7 @@ class MiradorViewer { ...@@ -44,7 +44,7 @@ class MiradorViewer {
processConfig() { processConfig() {
const mergedConfig = deepmerge(settings, this.config); const mergedConfig = deepmerge(settings, this.config);
const action = actions.setConfig(mergedConfig); const action = actions.setConfig(mergedConfig);
store.dispatch(action); this.store.dispatch(action);
mergedConfig.windows.forEach((miradorWindow) => { mergedConfig.windows.forEach((miradorWindow) => {
let thumbnailNavigationPosition; let thumbnailNavigationPosition;
...@@ -53,8 +53,8 @@ class MiradorViewer { ...@@ -53,8 +53,8 @@ class MiradorViewer {
} else { } else {
thumbnailNavigationPosition = mergedConfig.thumbnailNavigation.defaultPosition; thumbnailNavigationPosition = mergedConfig.thumbnailNavigation.defaultPosition;
} }
store.dispatch(actions.fetchManifest(miradorWindow.loadedManifest)); this.store.dispatch(actions.fetchManifest(miradorWindow.loadedManifest));
store.dispatch(actions.addWindow({ this.store.dispatch(actions.addWindow({
canvasIndex: (miradorWindow.canvasIndex || 0), canvasIndex: (miradorWindow.canvasIndex || 0),
manifestId: miradorWindow.loadedManifest, manifestId: miradorWindow.loadedManifest,
thumbnailNavigationPosition, thumbnailNavigationPosition,
...@@ -92,8 +92,8 @@ class MiradorViewer { ...@@ -92,8 +92,8 @@ class MiradorViewer {
}); });
actionCreators.forEach((action) => { actions[action.name] = action.action; }); actionCreators.forEach((action) => { actions[action.name] = action.action; });
reducers.forEach((reducer) => { store.pluginReducers[reducer.name] = reducer.reducer; }); reducers.forEach((reducer) => { this.store.pluginReducers[reducer.name] = reducer.reducer; });
store.replaceReducer(createRootReducer(store.pluginReducers)); this.store.replaceReducer(createRootReducer(this.store.pluginReducers));
} }
} }
......
@import 'variables'; @import 'variables';
.mirador { .mirador {
&-app {
height: 100%;
position: relative;
width: 100%;
}
&-workspace { &-workspace {
bottom: 0; bottom: 0;
box-sizing: border-box; box-sizing: border-box;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment