Background panel config

manual/CONFIG.md

@@ -640,7 +640,7 @@ Order in which manifests are displayed.
 
 **Type**: `string`  
 **Default**: `""`  
-Excludes the field from the displayed manifest e.g "title". 
+Excludes the field from the displayed manifest e.g "title".
 
 ##### panelAnimationDuration
 
@@ -922,30 +922,12 @@ Determines if ranges auto advance.
 
 #### openSeadragonCenterPanel
 
-##### animationTime
-
-**Type**: `number`  
-**Default**: `0.15`  
-Duration of the animation.
-
 ##### autoHideControls
 
 **Type**: `boolean`  
 **Default**: `true`  
 Determines if controls are hidden automatically.
 
-##### blendTime
-
-**Type**: `number`  
-**Default**: `0`  
-Time taken to blend images.
-
-##### constrainDuringPan
-
-**Type**: `boolean`  
-**Default**: `false`  
-Determines if panning is constrained.
-
 ##### controlsFadeAfterInactive
 
 **Type**: `number`  
@@ -964,30 +946,6 @@ Delay before controls start to fade.
 **Default**: `250`  
 Duration of controls fade.
 
-##### defaultZoomLevel
-
-**Type**: `number`  
-**Default**: `0`  
-Default zoom level.
-
-##### doubleClickAnnotationEnabled
-
-**Type**: `boolean`  
-**Default**: `false`  
-Determines if annotation is enabled.
-
-##### immediateRender
-
-**Type**: `boolean`  
-**Default**: `false`  
-Determines if rendering is immediate.
-
-##### maxZoomPixelRatio
-
-**Type**: `number`  
-**Default**: `1.25`  
-Maximum pixel ratio for zoom.
-
 ##### mostSpecificRequiredStatement
 
 **Type**: `boolean`  
@@ -1000,12 +958,6 @@ Determines whether the most specific (deeply nested) requiredStatement is displa
 **Default**: `"BOTTOM_RIGHT"`  
 Position of the navigator.
 
-##### pageGap
-
-**Type**: `number`  
-**Default**: `50`  
-Gap between pages.
-
 ##### requiredStatementEnabled
 
 **Type**: `boolean`
@@ -1030,18 +982,68 @@ Determines if adjust image control is shown.
 **Default**: `true`  
 Determines if the subtitle is enabled.
 
-##### tileTimeout
-
-**Type**: `number`
-**Default**: `30_000`
-Controls the maximum amount of time in milliseconds OpenSeadragon allows for any tile operation.
-
 ##### titleEnabled
 
 **Type**: `boolean`  
 **Default**: `true`  
 Determines if the title is enabled.
 
+#### openSeadragonBackgroundPanel
+
+##### animationTime
+
+**Type**: `number`  
+**Default**: `0.15`  
+Duration of the animation.
+
+##### blendTime
+
+**Type**: `number`  
+**Default**: `0`  
+Time taken to blend images.
+
+##### constrainDuringPan
+
+**Type**: `boolean`  
+**Default**: `false`  
+Determines if panning is constrained.
+
+##### defaultZoomLevel
+
+**Type**: `number`  
+**Default**: `0`  
+Default zoom level.
+
+##### doubleClickAnnotationEnabled
+
+**Type**: `boolean`  
+**Default**: `false`  
+Determines if annotation is enabled.
+
+##### immediateRender
+
+**Type**: `boolean`  
+**Default**: `false`  
+Determines if rendering is immediate.
+
+##### maxZoomPixelRatio
+
+**Type**: `number`  
+**Default**: `1.25`  
+Maximum pixel ratio for zoom.
+
+##### pageGap
+
+**Type**: `number`  
+**Default**: `50`  
+Gap between pages.
+
+##### tileTimeout
+
+**Type**: `number`
+**Default**: `30_000`
+Controls the maximum amount of time in milliseconds OpenSeadragon allows for any tile operation.
+
 ##### visibilityRatio
 
 **Type**: `number`  

src/content-handlers/iiif/BaseConfig.ts

@@ -166,6 +166,15 @@ type CenterPanel = ModuleConfig & {
   content: CenterPanelContent;
 };
 
+export type BackgroundPanelOptions = {};
+
+export type BackgroundPanelContent = {};
+
+type BackgroundPanel = ModuleConfig & {
+  options: BackgroundPanelOptions;
+  content: BackgroundPanelContent;
+};
+
 export type FooterPanelOptions = {
   /** Determines if bookmarking is enabled */
   bookmarkEnabled: boolean;
@@ -486,6 +495,7 @@ export type BaseConfig = {
     shareDialogue: ShareDialogue;
     adjustImageDialogue: AdjustImageDialogue;
     choiceSwitchDialogue: ChoiceSwitchDialogue;
+    backgroundPanel?: BackgroundPanel;
   };
   localisation: Localisation;
   content: Content;

src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/Config.ts

@@ -17,6 +17,8 @@ import {
   SettingsDialogueOptions,
   ShareDialogueContent,
   ShareDialogueOptions,
+  BackgroundPanelContent,
+  BackgroundPanelOptions,
 } from "@/content-handlers/iiif/BaseConfig";
 
 import { ContentLeftPanel } from "../../config/ContentLeftPanel";
@@ -97,51 +99,28 @@ type PagingHeaderPanel = ModuleConfig & {
 };
 
 type OpenSeadragonCenterPanelOptions = CenterPanelOptions & {
-  /** Duration of the animation */
-  animationTime: number;
   /** Determines if controls are hidden automatically */
   autoHideControls: boolean;
   /** Determines if required statement is enabled */
   requiredStatementEnabled: boolean;
-  /** Time taken to blend images */
-  blendTime: number;
-  /** Determines if panning is constrained */
-  constrainDuringPan: boolean;
   /** Time after which controls fade after inactivity */
   controlsFadeAfterInactive: number;
   /** Delay before controls start to fade */
   controlsFadeDelay: number;
   /** Duration of controls fade */
   controlsFadeLength: number;
-  /** Default zoom level */
-  defaultZoomLevel: number;
-  /** Determines if annotation is enabled */
-  doubleClickAnnotationEnabled: boolean;
-  /** Determines if rendering is immediate */
-  immediateRender: boolean;
-  /** Maximum pixel ratio for zoom */
-  maxZoomPixelRatio: number;
   /** Position of the navigator */
   navigatorPosition: string;
-  /** Gap between pages */
-  pageGap: number;
   /** Determines if home control is shown */
   showHomeControl: boolean;
   /** Determines if adjust image control is shown */
   showAdjustImageControl: boolean;
-  /** Ratio of visibility */
-  visibilityRatio: number;
-  /** The maximum amount of time in milliseconds an image operation can take */
-  tileTimeout: number;
-  /** Whether to zoom in to first annotation on load */
-  zoomToInitialAnnotation: boolean;
 };
 
 type OpenSeadragonCenterPanelContent = CenterPanelContent & {
   attribution: string;
   goHome: string;
   imageUnavailable: string;
-  mediaViewer: string;
   nextImage: string;
   previousImage: string;
   rotateRight: string;
@@ -156,6 +135,40 @@ type OpenSeadragonCenterPanel = ModuleConfig & {
   content: OpenSeadragonCenterPanelContent;
 };
 
+type OpenSeadragonBackgroundPanelOptions = BackgroundPanelOptions & {
+  /** Duration of the animation */
+  animationTime: number;
+  /** Time taken to blend images */
+  blendTime: number;
+  /** Determines if panning is constrained */
+  constrainDuringPan: boolean;
+  /** Default zoom level */
+  defaultZoomLevel: number;
+  /** Determines if annotation is enabled */
+  doubleClickAnnotationEnabled: boolean;
+  /** Determines if rendering is immediate */
+  immediateRender: boolean;
+  /** Maximum pixel ratio for zoom */
+  maxZoomPixelRatio: number;
+  /** Gap between pages */
+  pageGap: number;
+  /** Ratio of visibility */
+  visibilityRatio: number;
+  /** The maximum amount of time in milliseconds an image operation can take */
+  tileTimeout: number;
+  /** Whether to zoom in to first annotation on load */
+  zoomToInitialAnnotation: boolean;
+};
+
+type OpenSeadragonBackgroundPanelContent = BackgroundPanelContent & {
+  mediaViewer: string;
+};
+
+type OpenSeadragonBackgroundPanel = ModuleConfig & {
+  options: OpenSeadragonBackgroundPanelOptions;
+  content: OpenSeadragonBackgroundPanelContent;
+};
+
 type SearchFooterPanelOptions = FooterPanelOptions & {
   /** Determines if autocomplete for words is allowed */
   autocompleteAllowWords: boolean;
@@ -296,6 +309,7 @@ type Modules = {
   settingsDialogue: OSDSettingsDialogue;
   adjustImageDialogue: AdjustImageDialogue;
   choiceSwitchDialogue: ChoiceSwitchDialogue;
+  openSeadragonBackgroundPanel: OpenSeadragonBackgroundPanel;
 };
 
 export type Config = BaseConfig & {

src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/config.json

@@ -349,37 +349,24 @@
     },
     "openSeadragonCenterPanel": {
       "options": {
-        "animationTime": 0.15,
         "autoHideControls": true,
-        "blendTime": 0,
-        "constrainDuringPan": false,
         "controlsFadeAfterInactive": 1500,
         "controlsFadeDelay": 250,
         "controlsFadeLength": 250,
-        "defaultZoomLevel": 0,
-        "doubleClickAnnotationEnabled": false,
-        "immediateRender": false,
-        "maxZoomPixelRatio": 1.25,
         "mostSpecificRequiredStatement": true,
         "navigatorPosition": "BOTTOM_RIGHT",
-        "pageGap": 50,
         "requiredStatementEnabled": true,
         "showHomeControl": false,
         "showAdjustImageControl": true,
         "subtitleEnabled": true,
-        "titleEnabled": true,
-        "visibilityRatio": 0.5,
-        "zoomToInitialAnnotation": true,
-        "trimAttributionCount": 150,
-        "tileTimeout": 30000
+        "titleEnabled": true
       },
       "content": {
         "attribution": "$attribution",
         "close": "$close",
         "closeAttribution": "$closeAttribution",
         "goHome": "$goHome",
         "imageUnavailable": "$imageUnavailable",
-        "mediaViewer": "$mediaViewer",
         "nextImage": "$nextImage",
         "previousImage": "$previousImage",
         "rotateRight": "$rotateRight",
@@ -389,6 +376,29 @@
         "layers": "$layers"
       }
     },
+
+    "backgroundPanel": {
+      "options": {},
+      "content": {}
+    },
+    "openSeadragonBackgroundPanel": {
+      "options": {
+        "animationTime": 0.15,
+        "blendTime": 0,
+        "constrainDuringPan": false,
+        "defaultZoomLevel": 0,
+        "doubleClickAnnotationEnabled": false,
+        "immediateRender": false,
+        "maxZoomPixelRatio": 1.25,
+        "pageGap": 50,
+        "visibilityRatio": 0.5,
+        "zoomToInitialAnnotation": true,
+        "tileTimeout": 30000
+      },
+      "content": {
+        "mediaViewer": "$mediaViewer"
+      }
+    },
     "searchFooterPanel": {
       "options": {
         "autocompleteAllowWords": false,

src/content-handlers/iiif/modules/uv-openseadragonbackgroundpanel-module/OpenSeadragonBackgroundPanel.ts

@@ -30,8 +30,7 @@ interface AnnotationOverlayRect extends OpenSeadragon.Rect {
   chars: string;
 }
 export class OpenSeadragonBackgroundPanel extends BackgroundPanel<
-  // JM todo: split out a new BackgroundPanel general config and OpenSeadragonBackgroundPanel config, when other extensions have been split to use background panel
-  Config["modules"]["openSeadragonCenterPanel"]
+  Config["modules"]["openSeadragonBackgroundPanel"]
 > {
   currentAnnotationRect: AnnotationRect;
   currentBounds: XYWHFragment | null;
@@ -56,7 +55,7 @@ export class OpenSeadragonBackgroundPanel extends BackgroundPanel<
   }
 
   create(): void {
-    this.setConfig("openSeadragonCenterPanel");
+    this.setConfig("openSeadragonBackgroundPanel");
 
     super.create();
 

src/content-handlers/iiif/modules/uv-shared-module/BackgroundPanel.ts

@@ -1,9 +1,7 @@
 import { BaseView } from "./BaseView";
-import { BaseConfig } from "../../BaseConfig";
+import { ModuleConfig } from "../../BaseConfig";
 
-export class BackgroundPanel<
-  T extends BaseConfig["modules"]["centerPanel"], // todo: backgroundPanel config
-> extends BaseView<T> {
+export class BackgroundPanel<T extends ModuleConfig> extends BaseView<T> {
   constructor($element: JQuery) {
     super($element);
   }