Merge pull request #1701 from ProjectMirador/1686-thumbnail-nav-config

Set a thumbnailNavigationDisplayed boolean value in the window state.

__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>

__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,
         },

__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}
       />,
     );

__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];

__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);
     });
   });
 });

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,
   };

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 }

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>

src/config/settings.js

 export default {
   windows: [],
-  thumbnailNavigationHeight: 150,
+  thumbnailNavigation: {
+    displayedByDefault: true,
+    height: 150,
+  },
 };

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,
       }));
     });
   }