Add menu for canvas choice

package.json

@@ -99,7 +99,7 @@
     "@google/model-viewer": "^4.0.0",
     "@iiif/base-component": "2.0.1",
     "@iiif/iiif-av-component": "1.2.4",
-    "@iiif/manifold": "^2.2.0",
+    "@iiif/manifold": "^2.3.0",
     "@iiif/presentation-3": "^1.0.5",
     "@iiif/vocabulary": "^1.0.31",
     "@openseadragon-imaging/openseadragon-viewerinputhook": "^2.2.1",

src/content-handlers/iiif/BaseConfig.ts

@@ -310,6 +310,15 @@ export type AdjustImageDialogue = ModuleConfig & {
   content: AdjustImageDialogueContent;
 };
 
+type ChoiceSwitchDialogueOptions = DialogueOptions & {};
+
+type ChoiceSwitchDialogueContent = DialogueContent & {};
+
+export type ChoiceSwitchDialogue = ModuleConfig & {
+  options: ChoiceSwitchDialogueOptions;
+  content: ChoiceSwitchDialogueContent;
+};
+
 export type DownloadDialogueOptions = DialogueOptions & {};
 
 export type DownloadDialogueContent = DialogueContent & {
@@ -473,6 +482,7 @@ export type BaseConfig = {
     settingsDialogue: SettingsDialogue;
     shareDialogue: ShareDialogue;
     adjustImageDialogue: AdjustImageDialogue;
+    choiceSwitchDialogue: ChoiceSwitchDialogue;
   };
   localisation: Localisation;
   content: Content;

src/content-handlers/iiif/IIIFEvents.ts

@@ -8,6 +8,7 @@ export class IIIFEvents {
   static BOOKMARK: string = "bookmark";
   static CANVAS_INDEX_CHANGE_FAILED: string = "canvasIndexChangeFailed";
   static CANVAS_INDEX_CHANGE: string = "canvasIndexChange";
+  static CHOICE_CHANGE: string = "choiceChange";
   static CLEAR_ANNOTATIONS: string = "clearAnnotations";
   static CLICKTHROUGH: string = "clickthrough";
   static CLOSE_ACTIVE_DIALOGUE: string = "closeActiveDialogue";
@@ -90,6 +91,7 @@ export class IIIFEvents {
   static SETTINGS_CHANGE: string = "settingsChange";
   static SHOW_AUTH_DIALOGUE: string = "showAuthDialogue";
   static SHOW_CLICKTHROUGH_DIALOGUE: string = "showClickThroughDialogue";
+  static SHOW_CHOICE_SWITCH_DIALOGUE: string = "showChoiceSwitchDialogue";
   static SHOW_DOWNLOAD_DIALOGUE: string = "showDownloadDialogue";
   static SHOW_EMBED_DIALOGUE: string = "showEmbedDialogue";
   static SHOW_EXTERNALCONTENT_DIALOGUE: string = "showExternalContentDialogue";

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

@@ -291,6 +291,14 @@
         "remember": "$remember"
       }
     },
+    "choiceSwitchDialogue": {
+      "options": {
+        "topCloseButtonEnabled": false
+      },
+      "content": {
+        "close": "$close"
+      }
+    },
     "clickThroughDialogue": {
       "options": {
         "topCloseButtonEnabled": false

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

@@ -366,6 +366,14 @@
         "remember": "$remember"
       }
     },
+    "choiceSwitchDialogue": {
+      "options": {
+        "topCloseButtonEnabled": false
+      },
+      "content": {
+        "close": "$close"
+      }
+    },
     "clickThroughDialogue": {
       "options": {
         "topCloseButtonEnabled": false

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

@@ -283,6 +283,14 @@
         "remember": "$remember"
       }
     },
+    "choiceSwitchDialogue": {
+      "options": {
+        "topCloseButtonEnabled": false
+      },
+      "content": {
+        "close": "$close"
+      }
+    },
     "clickThroughDialogue": {
       "options": {
         "topCloseButtonEnabled": false

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

@@ -286,6 +286,14 @@
         "remember": "$remember"
       }
     },
+    "choiceSwitchDialogue": {
+      "options": {
+        "topCloseButtonEnabled": false
+      },
+      "content": {
+        "close": "$close"
+      }
+    },
     "clickThroughDialogue": {
       "options": {
         "topCloseButtonEnabled": false

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

@@ -213,6 +213,14 @@
         "remember": "$remember"
       }
     },
+    "choiceSwitchDialogue": {
+      "options": {
+        "topCloseButtonEnabled": false
+      },
+      "content": {
+        "close": "$close"
+      }
+    },
     "clickThroughDialogue": {
       "options": {
         "topCloseButtonEnabled": false

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

@@ -356,6 +356,14 @@
         "reset": "$reset",
         "remember": "$remember"
       }
+    },
+    "choiceSwitchDialogue": {
+      "options": {
+        "topCloseButtonEnabled": false
+      },
+      "content": {
+        "close": "$close"
+      }
     }
   },
   "localisation": {

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

@@ -0,0 +1,17 @@
+import { ChoiceSwitchDialogue as BaseChoiceSwitchDialogue } from "../../modules/uv-dialogues-module/ChoiceSwitchDialogue";
+import { Shell } from "../../modules/uv-shared-module/Shell";
+
+export class ChoiceSwitchDialogue extends BaseChoiceSwitchDialogue {
+  constructor($element: JQuery, shell: Shell) {
+    super($element, shell);
+  }
+
+  create(): void {
+    this.setConfig("choiceSwitchDialogue");
+    super.create();
+  }
+
+  resize(): void {
+    super.resize();
+  }
+}

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

@@ -3,6 +3,8 @@ export class OpenSeadragonExtensionEvents {
 
   static CURRENT_VIEW_URI: string =
     OpenSeadragonExtensionEvents.namespace + "currentViewUri";
+  static CHOICE_CHANGE: string =
+    OpenSeadragonExtensionEvents.namespace + "choiceChange";
   static DOUBLECLICK: string =
     OpenSeadragonExtensionEvents.namespace + "doubleClick";
   static IMAGE_SEARCH: string =

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

@@ -55,6 +55,7 @@ import { merge } from "../../../../Utils";
 import defaultConfig from "./config/config.json";
 import { Config } from "./config/Config";
 import { AdjustImageDialogue } from "../../modules/uv-dialogues-module/AdjustImageDialogue";
+import { ChoiceSwitchDialogue } from "../../modules/uv-dialogues-module/ChoiceSwitchDialogue";
 
 export default class OpenSeadragonExtension extends BaseExtension<Config> {
   $downloadDialogue: JQuery;
@@ -64,6 +65,7 @@ export default class OpenSeadragonExtension extends BaseExtension<Config> {
   $settingsDialogue: JQuery;
   $shareDialogue: JQuery;
   $adjustImageDialogue: JQuery;
+  $choiceSwitchDialogue: JQuery;
   centerPanel: OpenSeadragonCenterPanel;
   currentAnnotationRect: AnnotationRect | null;
   currentRotation: number = 0;
@@ -73,6 +75,7 @@ export default class OpenSeadragonExtension extends BaseExtension<Config> {
   headerPanel: PagingHeaderPanel;
   helpDialogue: HelpDialogue;
   adjustImageDialogue: AdjustImageDialogue;
+  choiceSwitchDialogue: ChoiceSwitchDialogue;
   isAnnotating: boolean = false;
   leftPanel: ContentLeftPanel;
   mobileFooterPanel: MobileFooterPanel;
@@ -110,6 +113,8 @@ export default class OpenSeadragonExtension extends BaseExtension<Config> {
       (canvasIndex: number) => {
         this.previousAnnotationRect = null;
         this.currentAnnotationRect = null;
+
+        // JM todo: make config option for preserving choice over canvas changes
         this.changeCanvas(canvasIndex);
       }
     );
@@ -600,6 +605,17 @@ export default class OpenSeadragonExtension extends BaseExtension<Config> {
     if (this.isFooterPanelEnabled()) {
       this.footerPanel.init();
     }
+
+    if (this.helper.hasChoices()) {
+      this.$choiceSwitchDialogue = $(
+        '<div class="overlay choiceSwitch" aria-hidden="true"></div>'
+      );
+      this.shell.$overlays.append(this.$choiceSwitchDialogue);
+      this.choiceSwitchDialogue = new ChoiceSwitchDialogue(
+        this.$choiceSwitchDialogue,
+        this.shell
+      );
+    }
   }
 
   render(): void {

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

@@ -1,5 +1,6 @@
 import {
   AdjustImageDialogue,
+  ChoiceSwitchDialogue,
   BaseConfig,
   CenterPanelContent,
   CenterPanelOptions,
@@ -289,6 +290,7 @@ type Modules = {
   shareDialogue: OSDShareDialogue;
   settingsDialogue: OSDSettingsDialogue;
   adjustImageDialogue: AdjustImageDialogue;
+  choiceSwitchDialogue: ChoiceSwitchDialogue;
 };
 
 export type Config = BaseConfig & {

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

@@ -501,6 +501,14 @@
         "remember": "$remember"
       }
     },
+    "choiceSwitchDialogue": {
+      "options": {
+        "topCloseButtonEnabled": false
+      },
+      "content": {
+        "close": "$close"
+      }
+    },
     "clickThroughDialogue": {
       "options": {
         "topCloseButtonEnabled": false

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

@@ -168,6 +168,14 @@
         "remember": "$remember"
       }
     },
+    "choiceSwitchDialogue": {
+      "options": {
+        "topCloseButtonEnabled": false
+      },
+      "content": {
+        "close": "$close"
+      }
+    },
     "moreInfoRightPanel": {
       "options": {
         "canvasDisplayOrder": "",

src/content-handlers/iiif/modules/uv-dialogues-module/ChoiceSwitchDialogue.ts

@@ -0,0 +1,78 @@
+import { BaseConfig } from "../../BaseConfig";
+import { IIIFEvents } from "../../IIIFEvents";
+import { Dialogue } from "../uv-shared-module/Dialogue";
+import OpenSeadragonExtension from "../../extensions/uv-openseadragon-extension/Extension";
+import { Shell } from "../uv-shared-module/Shell";
+
+export class ChoiceSwitchDialogue extends Dialogue<
+  BaseConfig["modules"]["choiceSwitchDialogue"]
+> {
+  $choiceList: JQuery;
+  shell: Shell;
+
+  constructor($element: JQuery, shell: Shell) {
+    super($element);
+    this.shell = shell;
+  }
+
+  create(): void {
+    this.setConfig("choiceSwitchDialogue");
+
+    super.create();
+
+    this.extensionHost.subscribe(IIIFEvents.SHOW_CHOICE_SWITCH_DIALOGUE, () => {
+      this.open();
+    });
+
+    this.$choiceList = $(
+      '<div class="choiceList" role="radiogroup" aria-label="Image choices"></div>'
+    );
+    this.$content.append(this.$choiceList);
+
+    this.$closeButton.hide();
+
+    this.$element.hide();
+  }
+
+  open(): void {
+    this.$choiceList.empty();
+
+    const choices = (<OpenSeadragonExtension>(
+      this.extension
+    )).helper.getChoices();
+
+    choices.forEach((choice, index) => {
+      const label = choice.getLabel().getValue() ?? `Choice ${index + 1}`;
+      const isActive =
+        index === (<OpenSeadragonExtension>this.extension).helper.choiceIndex;
+
+      const $item = $(`
+        <label class="choiceItem">
+          <input type="radio" name="choice" value="${index}" ${isActive ? "checked" : ""} />
+          ${label}
+        </label>
+      `);
+
+      $item.find("input").on("change", () => {
+        this.extensionHost.publish(IIIFEvents.CHOICE_CHANGE, index);
+      });
+
+      this.$choiceList.append($item);
+    });
+
+    const $button = (<OpenSeadragonExtension>this.extension).centerPanel
+      .$choiceSwitchButton;
+    super.open($button[0]);
+    this.shell.$overlays.css("background", "none");
+  }
+
+  close(): void {
+    this.shell.$overlays.css("background", "");
+    super.close();
+  }
+
+  resize(): void {
+    super.resize();
+    this.setDockedPosition("below");
+  }
+}