From 9985cc3ff13837d415cface0b64ab01c662bb85b Mon Sep 17 00:00:00 2001 From: Davide Negretti Date: Wed, 17 Jan 2024 12:00:06 +0100 Subject: [PATCH] [DURACOM-201] Refactor Mirador configuration --- src/mirador-viewer/config.default.js | 234 +++++++++++++-------------- webpack/webpack.mirador.config.ts | 2 +- 2 files changed, 118 insertions(+), 118 deletions(-) diff --git a/src/mirador-viewer/config.default.js b/src/mirador-viewer/config.default.js index 71df8adcc3f..f91d430ba74 100644 --- a/src/mirador-viewer/config.default.js +++ b/src/mirador-viewer/config.default.js @@ -25,7 +25,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'; @@ -35,7 +35,7 @@ windowSettings.manifestId = manifest; (() => { if (searchOption) { defaultView = 'book'; - sidbarPanel = 'search'; + sideBarPanel = 'search'; multipleItems = true; if (notMobile) { thumbNavigation = 'far-right'; @@ -53,127 +53,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: [ - /.*\.edu\/(\w+)\/iiif\/manifest/, - manifest - ], - 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: [ + /.*\.edu\/(\w+)\/iiif\/manifest/, + manifest + ], + 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); diff --git a/webpack/webpack.mirador.config.ts b/webpack/webpack.mirador.config.ts index 7699cf1bdc2..f93aa45e198 100644 --- a/webpack/webpack.mirador.config.ts +++ b/webpack/webpack.mirador.config.ts @@ -6,7 +6,7 @@ const fs = require('fs'); module.exports = { mode: 'production', entry: { - mirador: fs.existsSync('./src/mirador-viewer/config.local.js')? './src/mirador-viewer/config.local.js' : + mirador: fs.existsSync('./src/mirador-viewer/config.local.js') ? './src/mirador-viewer/config.local.js' : './src/mirador-viewer/config.default.js' }, output: {