diff --git a/__tests__/integration/mirador/index.html b/__tests__/integration/mirador/index.html index 341047c88ee41c230bf05e50c5d10d0d90f1ba9f..621f12c0acdeadf9a8ba2aa59e1fd11c8dba0bce 100644 --- a/__tests__/integration/mirador/index.html +++ b/__tests__/integration/mirador/index.html @@ -16,7 +16,8 @@ loadedManifest: 'https://iiif.harvardartmuseums.org/manifests/object/299843', }, { - loadedManifest: 'https://iiif.harvardartmuseums.org/manifests/object/299843' + loadedManifest: 'https://iiif.harvardartmuseums.org/manifests/object/299843', + thumbnailNavigationDisplayed: false, }] }); </script> diff --git a/__tests__/src/actions/window.test.js b/__tests__/src/actions/window.test.js index ec93d081bef77b4d5cf5fa09ea15f33239c3569b..99a36f538defc1e10831134aab3ea5726c8f2a8a 100644 --- a/__tests__/src/actions/window.test.js +++ b/__tests__/src/actions/window.test.js @@ -17,6 +17,7 @@ describe('window actions', () => { collectionIndex: 0, manifestId: null, rangeId: null, + thumbnailNavigationDisplayed: true, xywh: [0, 0, 400, 400], rotation: null, }, diff --git a/__tests__/src/components/ThumbnailNavigation.test.js b/__tests__/src/components/ThumbnailNavigation.test.js index 8a6fd80873d1359ea4c3e20d5fefe07c3dcf305d..a6c8a4caedd076a26f9340c6e016ae1537f73cfc 100644 --- a/__tests__/src/components/ThumbnailNavigation.test.js +++ b/__tests__/src/components/ThumbnailNavigation.test.js @@ -20,8 +20,9 @@ describe('ThumbnailNavigation', () => { window={{ id: 'foobar', canvasIndex: 1, + thumbnailNavigationDisplayed: true, }} - config={{}} + config={{ thumbnailNavigation: { height: 150 } }} setCanvas={setCanvas} />, ); diff --git a/__tests__/src/components/WindowViewer.test.js b/__tests__/src/components/WindowViewer.test.js index 543ac4acc145420e651cec1128326faff331e1a3..eef9e5b78fe54fcfdef8d360137c57e92bbdece2 100644 --- a/__tests__/src/components/WindowViewer.test.js +++ b/__tests__/src/components/WindowViewer.test.js @@ -9,6 +9,7 @@ describe('WindowViewer', () => { beforeEach(() => { store.dispatch(actions.receiveManifest('foo', fixture)); store.dispatch(actions.addWindow({ manifestId: 'foo' })); + store.dispatch(actions.setConfig({ thumbnailNavigation: { height: 150 } })); const manifest = store.getState().manifests.foo; const { windows } = store.getState(); const window = Object.values(windows)[0]; diff --git a/__tests__/src/lib/MiradorViewer.test.js b/__tests__/src/lib/MiradorViewer.test.js index 330e7a207b4d5585d996f689455904dc818ecabe..c1cfaa9958c27564ac9dd47975da2d4e6a0873ae 100644 --- a/__tests__/src/lib/MiradorViewer.test.js +++ b/__tests__/src/lib/MiradorViewer.test.js @@ -49,11 +49,16 @@ describe('MiradorViewer', () => { }, { loadedManifest: 'https://iiif.harvardartmuseums.org/manifests/object/299843', + thumbnailNavigationDisplayed: false, }, ], }); - expect(Object.keys(instance.store.getState().windows).length).toBe(2); + const { windows } = instance.store.getState(); + const windowIds = Object.keys(windows); + expect(Object.keys(windowIds).length).toBe(2); + expect(windows[windowIds[0]].thumbnailNavigationDisplayed).toBe(true); + expect(windows[windowIds[1]].thumbnailNavigationDisplayed).toBe(false); }); }); }); diff --git a/src/actions/window.js b/src/actions/window.js index 782e71018ec9073cd900a8fd3c589ef56f2639fe..722ce922ce19cc8e4b61f488b31fed1cb9f72863 100644 --- a/src/actions/window.js +++ b/src/actions/window.js @@ -24,6 +24,7 @@ export function addWindow(options) { collectionIndex: 0, manifestId: null, rangeId: null, + thumbnailNavigationDisplayed: true, // True by default in settings.js xywh: [0, 0, 400, 400], rotation: null, }; diff --git a/src/components/OpenSeadragonViewer.js b/src/components/OpenSeadragonViewer.js index 13daf38ec01ebc8ceef51a76d7e3a90785d22e6a..79545f205b0b1eb343f5d9696c1073ef1064bb95 100644 --- a/src/components/OpenSeadragonViewer.js +++ b/src/components/OpenSeadragonViewer.js @@ -105,11 +105,22 @@ export class OpenSeadragonViewer extends Component { }); } + /** + * Returns the height of the thumbnail navigation drawer + */ + calculatedThumbnailNavigationHeight() { + const { config, window } = this.props; + if (window.thumbnailNavigationDisplayed && config.thumbnailNavigation) { + return config.thumbnailNavigation.height; + } + return 0; + } + /** * Renders things */ render() { - const { window, config, children } = this.props; + const { window, children } = this.props; return ( <> <div @@ -117,7 +128,7 @@ export class OpenSeadragonViewer extends Component { id={`${window.id}-osd`} ref={this.ref} style={{ - height: `calc(100% - ${config.thumbnailNavigationHeight}px)`, + height: `calc(100% - ${this.calculatedThumbnailNavigationHeight()}px)`, }} > { children } diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js index a1e353fb5aff0cfe9d7d7e2d11063b05b2213fa9..302e7b3570299aeefcbc4fb51e3339ec02a385f3 100644 --- a/src/components/ThumbnailNavigation.js +++ b/src/components/ThumbnailNavigation.js @@ -41,14 +41,15 @@ export class ThumbnailNavigation extends Component { * Renders things */ render() { - const { - config, - } = this.props; + const { config, window } = this.props; + if (!window.thumbnailNavigationDisplayed) { + return <></>; + } return ( <div className={ns('thumb-navigation')} style={{ - height: `${config.thumbnailNavigationHeight}px`, + height: `${config.thumbnailNavigation.height}px`, }} > <ul> diff --git a/src/config/settings.js b/src/config/settings.js index f34e30c0933befda7d2f744a262440ba676ed03b..b84d0e81884cda6cfaa9cbc3fc67281e4d43125c 100644 --- a/src/config/settings.js +++ b/src/config/settings.js @@ -1,4 +1,7 @@ export default { windows: [], - thumbnailNavigationHeight: 150, + thumbnailNavigation: { + displayedByDefault: true, + height: 150, + }, }; diff --git a/src/lib/MiradorViewer.js b/src/lib/MiradorViewer.js index d131e06e56bc56165f2e06bc9290e88b7bf69e17..aed4eb5432bd3f3c1d2a7581bda70b1ed41a30ca 100644 --- a/src/lib/MiradorViewer.js +++ b/src/lib/MiradorViewer.js @@ -42,9 +42,16 @@ class MiradorViewer { store.dispatch(action); mergedConfig.windows.forEach((miradorWindow) => { + let thumbnailNavigationDisplayed; + if (miradorWindow.thumbnailNavigationDisplayed !== undefined) { + ({ thumbnailNavigationDisplayed } = miradorWindow); + } else { + thumbnailNavigationDisplayed = mergedConfig.thumbnailNavigation.displayedByDefault; + } store.dispatch(actions.fetchManifest(miradorWindow.loadedManifest)); store.dispatch(actions.addWindow({ manifestId: miradorWindow.loadedManifest, + thumbnailNavigationDisplayed, })); }); }