diff --git a/__tests__/integration/mirador/basic.test.js b/__tests__/integration/mirador/basic.test.js
index 0b7fbbedde365ed6cc3beeee9991482a9134e3e8..16e174dfda7dae0ee9b0cb5a1e0600d82e38c9ae 100644
--- a/__tests__/integration/mirador/basic.test.js
+++ b/__tests__/integration/mirador/basic.test.js
@@ -8,6 +8,7 @@ describe('Basic end to end Mirador', () => {
});
it('loads a manifest and displays it', async () => {
await expect(page).toClick('#addBtn');
+ await expect(page).toClick('.mirador-add-resource-button');
await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/sn904cj3439');
await expect(page).toClick('#fetchBtn');
await expect(page).toMatchElement('[data-manifestid="http://localhost:5000/api/sn904cj3439"] button');
diff --git a/__tests__/integration/mirador/embedding.html b/__tests__/integration/mirador/embedding.html
index e37a484d7c0a8f443c89f9dfe573e07ef8e2c978..8b00ffc077dbaa6c154455db385658f505aca5c7 100644
--- a/__tests__/integration/mirador/embedding.html
+++ b/__tests__/integration/mirador/embedding.html
@@ -18,6 +18,9 @@
width: 800px;
height: 600px;
}
+ .mirador-app {
+ border: 2px solid black;
+ }
</style>
<title>Mirador</title>
</head>
diff --git a/__tests__/integration/mirador/invalid-api-response.test.js b/__tests__/integration/mirador/invalid-api-response.test.js
index 4cec574815a8ae86f09e7b1fa10c88c012c8b812..e89638524847f9379475517174322d55467bf6a1 100644
--- a/__tests__/integration/mirador/invalid-api-response.test.js
+++ b/__tests__/integration/mirador/invalid-api-response.test.js
@@ -4,6 +4,7 @@ describe('Mirador Invalid API Response Handler Test', () => {
});
it('breaks Mirador', async () => {
await expect(page).toClick('#addBtn');
+ await expect(page).toClick('.mirador-add-resource-button');
await expect(page).toFill('#manifestURL', 'http://localhost:5000/invalid');
await expect(page).toClick('#fetchBtn');
await page.waitFor(1000);
@@ -17,6 +18,7 @@ describe('Mirador Invalid API Response Handler Test', () => {
it('renders an error message when a manifest cannot be loaded (and allows it to be dismissed)', async () => {
await expect(page).toClick('#addBtn');
+ await expect(page).toClick('.mirador-add-resource-button');
await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/broken');
await expect(page).toClick('#fetchBtn');
diff --git a/__tests__/integration/mirador/plugins.test.js b/__tests__/integration/mirador/plugins.test.js
index 775316b86682af357c16229382a6476313d1d747..8816fc2faa87b7c7b9bd491d1870a9ffb4d945e4 100644
--- a/__tests__/integration/mirador/plugins.test.js
+++ b/__tests__/integration/mirador/plugins.test.js
@@ -4,6 +4,7 @@ describe('Mirador plugin use', () => {
beforeAll(async () => {
await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins.html');
await expect(page).toClick('#addBtn');
+ await expect(page).toClick('.mirador-add-resource-button');
await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/sn904cj3439');
await expect(page).toClick('#fetchBtn');
diff --git a/__tests__/integration/mirador/window_actions.test.js b/__tests__/integration/mirador/window_actions.test.js
index 5d3f1899fec06d2cce6c365200d09df9ba7b243b..d7c892b22f6853cebdedf616975ae43c1d903772 100644
--- a/__tests__/integration/mirador/window_actions.test.js
+++ b/__tests__/integration/mirador/window_actions.test.js
@@ -4,6 +4,7 @@ describe('Window actions', () => {
});
it('opens a window and closes it', async () => {
await expect(page).toClick('#addBtn');
+ await expect(page).toClick('.mirador-add-resource-button');
await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/sn904cj3439');
await expect(page).toClick('#fetchBtn');
diff --git a/__tests__/integration/mirador/window_sidebar.test.js b/__tests__/integration/mirador/window_sidebar.test.js
index 7b82d44ec92bc5926d2848e0903f8ae71c370896..242c5934518fd270b30b63cb8c6f4f15eabeb2f3 100644
--- a/__tests__/integration/mirador/window_sidebar.test.js
+++ b/__tests__/integration/mirador/window_sidebar.test.js
@@ -5,6 +5,7 @@ describe('Window Sidebars', () => {
await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/');
await expect(page).toClick('#addBtn');
+ await expect(page).toClick('.mirador-add-resource-button');
await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/001');
await expect(page).toClick('#fetchBtn');
diff --git a/__tests__/src/components/App.test.js b/__tests__/src/components/App.test.js
index 3c34047dc72e8fa014b904e6bc8eae46d4669540..8c2add87f3c8b06d3bbf57d0ada7d3646a43b6ef 100644
--- a/__tests__/src/components/App.test.js
+++ b/__tests__/src/components/App.test.js
@@ -1,7 +1,7 @@
import React from 'react';
import { shallow } from 'enzyme';
import { MuiThemeProvider } from '@material-ui/core/styles';
-import Fullscreen from 'react-fullscreen-crossbrowser';
+import Fullscreen from 'react-full-screen';
import WorkspaceControlPanel from '../../../src/containers/WorkspaceControlPanel';
import Workspace from '../../../src/containers/Workspace';
import WorkspaceAdd from '../../../src/containers/WorkspaceAdd';
diff --git a/__tests__/src/components/OpenSeadragonViewer.test.js b/__tests__/src/components/OpenSeadragonViewer.test.js
index 1b387e1cf924ba4b64910bb5885ff470cf9eea0a..a6da5617a245d7838d63ecbe999cbada0049c0c7 100644
--- a/__tests__/src/components/OpenSeadragonViewer.test.js
+++ b/__tests__/src/components/OpenSeadragonViewer.test.js
@@ -2,6 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import OpenSeadragon from 'openseadragon';
import { OpenSeadragonViewer } from '../../../src/components/OpenSeadragonViewer';
+import ZoomControls from '../../../src/containers/ZoomControls';
jest.mock('openseadragon');
@@ -30,6 +31,9 @@ describe('OpenSeadragonViewer', () => {
it('renders child components', () => {
expect(wrapper.find('.foo').length).toBe(1);
});
+ it('renders ZoomControls', () => {
+ expect(wrapper.find(ZoomControls).length).toBe(1);
+ });
describe('tileSourcesMatch', () => {
it('when they do not match', () => {
expect(wrapper.instance().tileSourcesMatch([])).toBe(false);
diff --git a/package.json b/package.json
index 7b64a3c3730e104bdf203d3a4d1451f69dfb0953..77679bac16c92a00635d9c18e70ac0cedd728eaa 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,10 @@
"name": "mirador",
"version": "3.0.0-alpha.0",
"description": "",
- "main": "index.js",
+ "main": "dist/mirador.min.js",
+ "files": [
+ "dist"
+ ],
"scripts": {
"lint": "node_modules/.bin/eslint ./ && node_modules/.bin/sass-lint -v ./src/styles/**/*",
"server": "node_modules/.bin/http-server",
@@ -46,7 +49,7 @@
"prop-types": "^15.6.2",
"react": "^16.8.3",
"react-dom": "^16.8.3",
- "react-fullscreen-crossbrowser": "^1.0.9",
+ "react-full-screen": "^0.2.4",
"react-i18next": "^10.2.0",
"react-mosaic-component": "^2.1.0",
"react-placeholder": "^3.0.1",
diff --git a/src/components/App.js b/src/components/App.js
index 44c84b0301c4155a8d7c4f0205099307f2085ac7..32b67a3822f480322afaaf7e256b988faca1354f 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
-import Fullscreen from 'react-fullscreen-crossbrowser';
+import Fullscreen from 'react-full-screen';
import { I18nextProvider } from 'react-i18next';
import WorkspaceControlPanel from '../containers/WorkspaceControlPanel';
import Workspace from '../containers/Workspace';
diff --git a/src/components/OpenSeadragonViewer.js b/src/components/OpenSeadragonViewer.js
index df58c9911fdc38cc7462a8b519b48bf299407e20..9c97077ddc3ae55b0f5a129e40bf5b708de3aa31 100644
--- a/src/components/OpenSeadragonViewer.js
+++ b/src/components/OpenSeadragonViewer.js
@@ -209,8 +209,8 @@ export class OpenSeadragonViewer extends Component {
ref={this.ref}
>
{ children }
+ <ZoomControls windowId={windowId} />
</div>
- <ZoomControls windowId={windowId} />
</>
);
}
diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js
index 33674bdcde9cbd4d714da4b6963816052f2250e5..ac4d6d5bd34324e1654f969a344946ef65664363 100644
--- a/src/components/ThumbnailNavigation.js
+++ b/src/components/ThumbnailNavigation.js
@@ -82,6 +82,7 @@ export class ThumbnailNavigation extends Component {
>
<CanvasThumbnail
imageUrl={manifestoCanvas.thumbnail(null, height)}
+ isValid={manifestoCanvas.hasValidDimensions}
maxHeight={config.thumbnailNavigation.height}
maxWidth={style.width}
aspectRatio={manifestoCanvas.aspectRatio}
@@ -103,8 +104,8 @@ export class ThumbnailNavigation extends Component {
const { config, canvasGroupings } = this.props;
return canvasGroupings
.getCanvases(options.index)
- .map(canvas => new ManifestoCanvas(canvas).aspectRatio)
- .reduce((acc, current) => acc + Math.floor(config.thumbnailNavigation.height * current), 8);
+ .map(canvas => new ManifestoCanvas(canvas))
+ .reduce((acc, currentCanvas) => { return acc + (currentCanvas.hasValidDimensions ? Math.floor(config.thumbnailNavigation.height * currentCanvas.aspectRatio) : config.thumbnailNavigation.width); }, 8); // eslint-disable-line arrow-body-style, max-len
}
/**
diff --git a/src/components/WindowSideBarCanvasPanel.js b/src/components/WindowSideBarCanvasPanel.js
index f97cb053655e1deab8649869a59d0b57c2e3f103..f5799eda84006f8b257224dad2808105529bac44 100644
--- a/src/components/WindowSideBarCanvasPanel.js
+++ b/src/components/WindowSideBarCanvasPanel.js
@@ -21,7 +21,6 @@ export class WindowSideBarCanvasPanel extends Component {
} = this.props;
const canvasesIdAndLabel = getIdAndLabelOfCanvases(canvases);
-
return (
<>
<Typography variant="h2" className={classes.windowSideBarH2}>{t('canvasIndex')}</Typography>
diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js
index 5fa01594bc23c04bb818be9a7994d3313f5f8b71..4bd4257ee1e2040c4e41a0bc308968451dfcf14d 100644
--- a/src/components/WorkspaceAdd.js
+++ b/src/components/WorkspaceAdd.js
@@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
+import classNames from 'classnames';
import AddIcon from '@material-ui/icons/AddSharp';
import ExpandMoreIcon from '@material-ui/icons/ExpandMoreSharp';
import AppBar from '@material-ui/core/AppBar';
@@ -56,12 +57,21 @@ export class WorkspaceAdd extends React.Component {
<div className={ns('workspace-add')}>
{manifestList}
- <Fab variant="extended" disabled={addResourcesOpen} className={classes.fab} color="secondary" onClick={() => (this.setAddResourcesVisibility(true))}>
+ <Fab
+ variant="extended"
+ disabled={addResourcesOpen}
+ className={classNames(classes.fab, ns('add-resource-button'))}
+ color="secondary"
+ onClick={() => (this.setAddResourcesVisibility(true))}
+ >
<AddIcon />
{t('addResource')}
</Fab>
<Drawer
+ className={classNames({
+ [classes.displayNone]: !addResourcesOpen,
+ })}
variant="persistent"
anchor="bottom"
open={addResourcesOpen}
diff --git a/src/config/settings.js b/src/config/settings.js
index bbb9561d623d4830efbb965786ffb42c1b60cfb7..59f866b93c0c61a146c59c582e2cbf6bdd491254 100644
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -38,6 +38,7 @@ export default {
thumbnailNavigation: {
defaultPosition: 'bottom',
height: 150,
+ width: 100,
},
workspace: {
type: 'mosaic',
diff --git a/src/containers/WorkspaceAdd.js b/src/containers/WorkspaceAdd.js
index 95eb22480ca373abade048334ba43958ea1fc1f3..6c0d45602ff3bdb6e0c40c110f468b9c773e554f 100644
--- a/src/containers/WorkspaceAdd.js
+++ b/src/containers/WorkspaceAdd.js
@@ -39,6 +39,9 @@ const styles = theme => ({
bottom: theme.spacing.unit * 2,
right: theme.spacing.unit * 2,
},
+ displayNone: {
+ display: 'none',
+ },
typographyBody: {
flexGrow: 1,
fontSize: '1em',
diff --git a/src/containers/WorkspaceControlPanel.js b/src/containers/WorkspaceControlPanel.js
index 03fb31567f0c5d4dd4ec0fa1d61111febc60143a..3b83bc9415f541edde5477a4f76ba30fa7dd42e0 100644
--- a/src/containers/WorkspaceControlPanel.js
+++ b/src/containers/WorkspaceControlPanel.js
@@ -13,7 +13,6 @@ const styles = theme => ({
},
drawer: {
overflowX: 'hidden',
- height: '100%',
},
});
diff --git a/src/containers/ZoomControls.js b/src/containers/ZoomControls.js
index eeb3ed897c62805cd22c7f4d2d1d57137c36a4c5..2f468c4354379592b700fe2a77d50963ff69668f 100644
--- a/src/containers/ZoomControls.js
+++ b/src/containers/ZoomControls.js
@@ -34,6 +34,8 @@ const styles = theme => ({
zoom_controls: {
position: 'absolute',
right: 0,
+ zIndex: 33,
+ top: 0,
},
ListItem: {
paddingTop: 0,
diff --git a/src/lib/ManifestoCanvas.js b/src/lib/ManifestoCanvas.js
index 885e080dfc3ed1ccae09f3c1a8258776d98ef51b..a2eeefdf88cac2d8facbffc8b463a25843b1215f 100644
--- a/src/lib/ManifestoCanvas.js
+++ b/src/lib/ManifestoCanvas.js
@@ -39,6 +39,36 @@ export default class ManifestoCanvas {
}/info.json`;
}
+ /**
+ * checks whether the canvas has a valid height
+ */
+ get hasValidHeight() {
+ return (
+ typeof this.canvas.getHeight() === 'number'
+ && this.canvas.getHeight() > 0
+ );
+ }
+
+ /**
+ * checks whether the canvas has a valid height
+ */
+ get hasValidWidth() {
+ return (
+ typeof this.canvas.getHeight() === 'number'
+ && this.canvas.getHeight() > 0
+ );
+ }
+
+ /**
+ * checks whether the canvas has valid dimensions
+ */
+ get hasValidDimensions() {
+ return (
+ this.hasValidHeight
+ && this.hasValidWidth
+ );
+ }
+
/**
* Creates a canonical image request for a thumb
* @param {Number} height
@@ -79,34 +109,4 @@ export default class ManifestoCanvas {
return desiredAspectRatio < aspectRatio ? 'sizeByW' : 'sizeByH';
}
-
- /**
- * checks whether the canvas has a valid height
- */
- get hasValidHeight() {
- return (
- typeof this.canvas.getHeight() === 'number'
- && this.canvas.getHeight() > 0
- );
- }
-
- /**
- * checks whether the canvas has a valid height
- */
- get hasValidWidth() {
- return (
- typeof this.canvas.getHeight() === 'number'
- && this.canvas.getHeight() > 0
- );
- }
-
- /**
- * checks whether the canvas has valid dimensions
- */
- get hasValidDimensions() {
- return (
- this.hasValidHeight
- && this.hasValidWidth
- );
- }
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 97ac3b29902deed7ee26d88118f0b11b18492fef..d99ce766fa8244a130e84b9f6f0f29e73805dd9a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -24,6 +24,7 @@
bottom: 0;
left: 0;
overflow: hidden;
+ margin: 0;
position: absolute;
right: 0;
top: 0;