[DSC-1309] Mirador's index.js refactoring and fixes

Author: davide-negretti

src/mirador-viewer/config.default.js

@@ -26,7 +26,7 @@ const multi = params.get('multi');
 const notMobile = params.get('notMobile');
 
 let windowSettings = {};
-let sidbarPanel = 'info';
+let sideBarPanel = 'info';
 let defaultView = 'single';
 let multipleItems = false;
 let thumbNavigation = 'off';
@@ -36,7 +36,7 @@ windowSettings.manifestId = manifest;
 (() => {
   if (searchOption) {
     defaultView = 'book';
-    sidbarPanel = 'search';
+    sideBarPanel = 'search';
     multipleItems = true;
     if (notMobile) {
       thumbNavigation = 'far-right';
@@ -45,7 +45,7 @@ windowSettings.manifestId = manifest;
       windowSettings.defaultSearchQuery = query;
     }
   } else {
-    if(multi) {
+    if (multi) {
       multipleItems = multi;
       if (notMobile) {
         thumbNavigation = 'far-right';
@@ -54,127 +54,127 @@ windowSettings.manifestId = manifest;
   }
 })();
 
-(Mirador.viewer(
-    {
-      id: 'mirador',
-      mainMenuSettings: {
-        show: true
-      },
-      thumbnailNavigation: {
-        defaultPosition: thumbNavigation, // Which position for the thumbnail navigation to be be displayed. Other possible values are "far-bottom" or "far-right"
-        displaySettings: true, // Display the settings for this in WindowTopMenu
-        height: 120, // height of entire ThumbnailNavigation area when position is "far-bottom"
-        width: 100, // width of one canvas (doubled for book view) in ThumbnailNavigation area when position is "far-right"
-      },
-      themes: {
-        light: {
-          palette: {
-            type: 'light',
-            primary: {
-              main: '#266883',
-            },
-            secondary: {
-              main: '#b03727',
-            },
-            shades: { // Shades that can be used to offset color areas of the Workspace / Window
-              dark: '#eeeeee',
-              main: '#ffffff',
-              light: '#ffffff',
-            },
-            highlights: {
-              primary: '#ffff00',
-              secondary: '#00BFFF',
-            },
-            search: {
-              default: { fillStyle: '#00BFFF', globalAlpha: 0.3 },
-              hovered: { fillStyle: '#00FFFF', globalAlpha: 0.3 },
-              selected: { fillStyle: '#ff0900', globalAlpha: 0.3 },
-            },
-          },
+const miradorConfiguration = {
+  id: 'mirador',
+  mainMenuSettings: {
+    show: true
+  },
+  thumbnailNavigation: {
+    defaultPosition: thumbNavigation, // Which position for the thumbnail navigation to be be displayed. Other possible values are "far-bottom" or "far-right"
+    displaySettings: true, // Display the settings for this in WindowTopMenu
+    height: 120, // height of entire ThumbnailNavigation area when position is "far-bottom"
+    width: 100, // width of one canvas (doubled for book view) in ThumbnailNavigation area when position is "far-right"
+  },
+  themes: {
+    light: {
+      palette: {
+        type: 'light',
+        primary: {
+          main: '#266883',
         },
-        dark: {
-          palette: {
-            type: 'dark',
-            primary: {
-              main: '#2790b0',
-            },
-            secondary: {
-              main: '#eeeeee',
-            },
-            highlights: {
-              primary: '#ffff00',
-              secondary: '#00BFFF',
-            },
-          },
+        secondary: {
+          main: '#b03727',
         },
-      },
-      selectedTheme: 'light',
-      data: [manifest],
-      windows: [
-        windowSettings
-      ],
-      miradorSharePlugin: {
-        dragAndDropInfoLink: 'https://iiif.io',
-        embedOption: {
-          enabled: true,
-          embedUrlReplacePattern: [
-            /.*/,
-            embedURL
-          ],
-          syncIframeDimensions: {
-            height: {param: 'maxheight'},
-          },
+        shades: { // Shades that can be used to offset color areas of the Workspace / Window
+          dark: '#eeeeee',
+          main: '#ffffff',
+          light: '#ffffff',
         },
-        shareLink: {
-          enabled: true,
-          manifestIdReplacePattern: [
-            /\/iiif\/manifest/,
-            '',
-          ],
+        highlights: {
+          primary: '#ffff00',
+          secondary: '#00BFFF',
+        },
+        search: {
+          default: { fillStyle: '#00BFFF', globalAlpha: 0.3 },
+          hovered: { fillStyle: '#00FFFF', globalAlpha: 0.3 },
+          selected: { fillStyle: '#ff0900', globalAlpha: 0.3 },
         },
       },
-      miradorDownloadPlugin: {
-        restrictDownloadOnSizeDefinition: false
-      },
-      window: {
-        allowClose: false,
-        // sideBarOpenByDefault: false,
-        allowFullscreen: true,
-        allowMaximize: false,
-        defaultView: defaultView,
-        sideBarOpen: notMobile,
-        allowTopMenuButton: true,
-        defaultSidebarPanelWidth: 230,
-        switchCanvasOnSearch: true,
-        views: [
-          { key: 'single', behaviors: ['individuals'] },
-          { key: 'book', behaviors: ['paged'] },
-          { key: 'scroll', behaviors: ['continuous'] },
-          { key: 'gallery' },
-        ],
-        panels: {
-          info: true,
-          attribution: false,
-          canvas: true,
-          search: searchOption,
-          layers: false,
+    },
+    dark: {
+      palette: {
+        type: 'dark',
+        primary: {
+          main: '#2790b0',
+        },
+        secondary: {
+          main: '#eeeeee',
+        },
+        highlights: {
+          primary: '#ffff00',
+          secondary: '#00BFFF',
         },
-        sideBarPanel: sidbarPanel
       },
-      workspace: {
-        allowNewWindows: false,
-        showZoomControls: true,
-        type: 'mosaic'
+    },
+  },
+  selectedTheme: 'light',
+  data: [manifest],
+  windows: [
+    windowSettings
+  ],
+  miradorSharePlugin: {
+    dragAndDropInfoLink: 'https://iiif.io',
+    embedOption: {
+      enabled: true,
+      embedUrlReplacePattern: [
+        /.*/,
+        embedURL
+      ],
+      syncIframeDimensions: {
+        height: {param: 'maxheight'},
       },
-      workspaceControlPanel: {
-        enabled: false
-      }
     },
-    [
-      miradorShareDialogPlugin,
-      miradorSharePlugin,
-      miradorDownloadDialog,
-      miradorDownloadPlugin
-    ]
-  )
-)(manifest);
+    shareLink: {
+      enabled: true,
+      manifestIdReplacePattern: [
+        /\/iiif\/manifest/,
+        '',
+      ],
+    },
+  },
+  miradorDownloadPlugin: {
+    restrictDownloadOnSizeDefinition: false
+  },
+  window: {
+    allowClose: false,
+    // sideBarOpenByDefault: false,
+    allowFullscreen: true,
+    allowMaximize: false,
+    defaultView: defaultView,
+    sideBarOpen: notMobile,
+    allowTopMenuButton: true,
+    defaultSidebarPanelWidth: 230,
+    switchCanvasOnSearch: true,
+    views: [
+      { key: 'single', behaviors: ['individuals'] },
+      { key: 'book', behaviors: ['paged'] },
+      { key: 'scroll', behaviors: ['continuous'] },
+      { key: 'gallery' },
+    ],
+    panels: {
+      info: true,
+      attribution: false,
+      canvas: true,
+      search: searchOption,
+      layers: false,
+    },
+    sideBarPanel: sideBarPanel
+  },
+  workspace: {
+    allowNewWindows: false,
+    showZoomControls: true,
+    type: 'mosaic'
+  },
+  workspaceControlPanel: {
+    enabled: false
+  }
+};
+
+const miradorPlugins = [
+  miradorShareDialogPlugin,
+  miradorSharePlugin,
+  miradorDownloadDialog,
+  miradorDownloadPlugin
+];
+
+Mirador.viewer(miradorConfiguration, miradorPlugins);