Merge branch 'dev' into dependabot/npm_and_yarn/dev/typedoc-0.27.2

UniversalViewer · Dec 10, 2024 · 6a018f3 · 6a018f3
2 parents 01bd9f5 + 6c96669
commit 6a018f3
Show file tree

Hide file tree

Showing 40 changed files with 840 additions and 1,123 deletions.
diff --git a/__tests__/test.js b/__tests__/test.js
@@ -1,13 +1,26 @@
 test.skip('Configuration options', () => {});
 
+const puppeteer = require('puppeteer');
+
 describe('Universal Viewer', () => {
+  let browser;
+  let page;
+
   beforeAll(async () => {
-    await page.goto('http://localhost:4444/');
+    browser = await puppeteer.launch();
+    page = await browser.newPage();
+    await page.goto('http://localhost:4444');
   });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
   it('has the correct page title', async () => {
     const title = await page.title();
     expect(title).toBe('Universal Viewer Examples');
   });
+
   it('loads the viewer images', async () => {
     await page.waitForSelector('#thumb-0');
     const imageSrc = await page.$eval('#thumb-0 img', e => e.src);
@@ -17,4 +30,44 @@ describe('Universal Viewer', () => {
       )
     );
   });
+
+  it('can toggle thumbnail label truncation', async () => {
+    await page.waitForSelector('#truncateThumbnailLabels');
+
+    const isCheckedBeforeToggle = await page.$eval('#truncateThumbnailLabels', checkbox => checkbox.checked);
+    expect(isCheckedBeforeToggle).toBe(true);
+
+    const labelOverflowBeforeToggle = await page.evaluate(() => {
+        const label = document.querySelector('.thumbsView .thumbs .thumb .info .label');
+        return getComputedStyle(label).overflowX;
+    });
+    expect(labelOverflowBeforeToggle).toBe('hidden');
+
+    await page.evaluate(() => {
+        document.querySelector('#truncateThumbnailLabels').click();
+    });
+
+    const isCheckedAfterToggle = await page.$eval('#truncateThumbnailLabels', checkbox => checkbox.checked);
+    expect(isCheckedAfterToggle).toBe(false);
+
+    const labelOverflowAfterToggle = await page.evaluate(() => {
+        const label = document.querySelector('.thumbsView .thumbs .thumb .info .label');
+        return getComputedStyle(label).overflowX;
+    });
+    expect(labelOverflowAfterToggle).toBe('visible');
+  });
+
+  it('settings button is visible', async () => {
+
+    await page.waitForSelector('.btn.imageBtn.settings');
+
+    const isSettingsButtonVisible = await page.evaluate(() => {
+      const settingsButton = document.querySelector('.btn.imageBtn.settings');
+      const style = window.getComputedStyle(settingsButton);
+      return style.getPropertyValue('visibility') !== 'hidden' && style.getPropertyValue('display') !== 'none';
+    });
+
+    expect(isSettingsButtonVisible).toBe(true);
+  });
 });
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -90,7 +90,7 @@
     "@iiif/base-component": "2.0.1",
     "@iiif/iiif-av-component": "1.2.4",
     "@iiif/iiif-gallery-component": "^1.1.22",
-    "@iiif/iiif-metadata-component": "^1.1.19",
+    "@iiif/iiif-metadata-component": "^1.2.0",
     "@iiif/iiif-tree-component": "2.0.6",
     "@iiif/manifold": "2.1.0",
     "@iiif/presentation-3": "^1.0.5",

diff --git a/src/content-handlers/iiif/BaseConfig.ts b/src/content-handlers/iiif/BaseConfig.ts
@@ -226,6 +226,7 @@ export type SettingsDialogueContent = DialogueContent & {
   clickToZoomEnabled: string;
   pagingEnabled: string;
   reducedMotion: string;
+  truncateThumbnailLabels: string; 
   preserveViewport: string;
   title: string;
   website: string;

diff --git a/src/content-handlers/iiif/extensions/uv-aleph-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-aleph-extension/config/config.json
@@ -229,6 +229,7 @@
         "clickToZoomEnabled": "Mouse Click To Zoom",
         "pagingEnabled": "Two Page View",
         "reducedMotion": "Reduce motion (disables animations)",
+        "truncateThumbnailLabels": "Truncate Thumbnail Labels",
         "preserveViewport": "Preserve Zoom",
         "title": "Settings",
         "website": "<a href='https://github.com/universalviewer/universalviewer#contributors'>more info</a>"

diff --git a/src/content-handlers/iiif/extensions/uv-av-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-av-extension/config/config.json
@@ -273,6 +273,7 @@
         "clickToZoomEnabled": "$clickToZoomEnabled",
         "pagingEnabled": "$twoPageView",
         "reducedMotion": "$reducedMotion",
+        "truncateThumbnailLabels": "$truncateThumbnailLabels",
         "preserveViewport": "$preserveViewport",
         "title": "$settings",
         "website": "$uvWebsite"

diff --git a/src/content-handlers/iiif/extensions/uv-default-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-default-extension/config/config.json
@@ -336,6 +336,7 @@
         "clickToZoomEnabled": "$clickToZoomEnabled",
         "pagingEnabled": "$twoPageView",
         "reducedMotion": "$reducedMotion",
+        "truncateThumbnailLabels": "$truncateThumbnailLabels",
         "preserveViewport": "$preserveViewport",
         "title": "$settings",
         "website": "$uvWebsite"

diff --git a/src/content-handlers/iiif/extensions/uv-ebook-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-ebook-extension/config/config.json
@@ -224,6 +224,7 @@
         "clickToZoomEnabled": "$clickToZoomEnabled",
         "pagingEnabled": "$twoPageView",
         "reducedMotion": "$reducedMotion",
+        "truncateThumbnailLabels": "$truncateThumbnailLabels",
         "preserveViewport": "$preserveViewport",
         "title": "$settings",
         "website": "$uvWebsite"

diff --git a/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json
@@ -331,6 +331,7 @@
         "clickToZoomEnabled": "$clickToZoomEnabled",
         "pagingEnabled": "$twoPageView",
         "reducedMotion": "$reducedMotion",
+        "truncateThumbnailLabels": "$truncateThumbnailLabels",
         "preserveViewport": "$preserveViewport",
         "title": "$settings",
         "website": "$uvWebsite"

diff --git a/src/content-handlers/iiif/extensions/uv-model-viewer-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-model-viewer-extension/config/config.json
@@ -330,6 +330,7 @@
         "clickToZoomEnabled": "$clickToZoomEnabled",
         "pagingEnabled": "$twoPageView",
         "reducedMotion": "$reducedMotion",
+        "truncateThumbnailLabels": "$truncateThumbnailLabels",
         "preserveViewport": "$preserveViewport",
         "title": "$settings",
         "website": "$uvWebsite"

diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/DownloadDialogue.tsx b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/DownloadDialogue.tsx
@@ -10,6 +10,7 @@ import {
   IExternalImageResourceData,
   Resource,
   Annotation,
+  AnnotationBody,
   ManifestResource,
   Rendering,
   LanguageMap,
@@ -314,7 +315,22 @@ const DownloadDialogue = ({
     return null;
   }
 
+  function getCanvasImageAnnotationBody(canvas: Canvas): AnnotationBody | null {
+    const images: Annotation[] = canvas.getContent();
+    if (images.length == 0) {
+      return null;
+    }
+
+    const bodies: AnnotationBody[] = images[0].getBody();
+    if (bodies.length == 0) {
+      return null;
+    }
+
+    return bodies[0];
+  }
+
   function getCanvasMimeType(canvas: Canvas): string | null {
+    // presentation api version 2
     const resource: Resource | null = getCanvasImageResource(canvas);
 
     if (resource) {
@@ -325,6 +341,16 @@ const DownloadDialogue = ({
       }
     }
 
+    // presentation api version 3
+    const annotationBody: AnnotationBody | null = getCanvasImageAnnotationBody(canvas);
+    if (annotationBody) {
+      const format: MediaType | null = annotationBody.getFormat();
+
+      if (format) {
+        return format.toString();
+      }
+    }
+
     return null;
   }
 

diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/ISettings.ts b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/ISettings.ts
@@ -6,6 +6,7 @@ interface ISettings {
   preserveViewport?: boolean;
   clickToZoomEnabled?: boolean;
   reducedAnimation?: boolean;
+  truncateThumbnailLabels?: boolean;
   contrastPercent?: number;
   brightnessPercent?: number;
   saturationPercent?: number;

diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/SettingsDialogue.ts b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/SettingsDialogue.ts
@@ -1,10 +1,14 @@
 const $ = require("jquery");
 import { SettingsDialogue as BaseSettingsDialogue } from "../../modules/uv-dialogues-module/SettingsDialogue";
+import config from "./config/config.json"; 
 
 export class SettingsDialogue extends BaseSettingsDialogue {
   $clickToZoomEnabled: JQuery;
   $clickToZoomEnabledCheckbox: JQuery;
   $clickToZoomEnabledLabel: JQuery;
+  $truncateThumbnailLabels: JQuery;
+  $truncateThumbnailLabelsLabel: JQuery;
+  $truncateThumbnailLabelsCheckbox: JQuery;
   $navigatorEnabled: JQuery;
   $navigatorEnabledCheckbox: JQuery;
   $navigatorEnabledLabel: JQuery;
@@ -53,6 +57,29 @@ export class SettingsDialogue extends BaseSettingsDialogue {
     );
     this.$pagingEnabled.append(this.$pagingEnabledLabel);
 
+    if (config.options.truncateThumbnailLabels) { 
+      this.$truncateThumbnailLabels = $('<div class="setting truncateThumbnailLabels"></div>');
+      this.$scroll.append(this.$truncateThumbnailLabels);
+
+      this.$truncateThumbnailLabelsCheckbox = $(
+        '<input id="truncateThumbnailLabels" type="checkbox" tabindex="0" />'
+      );
+      this.$truncateThumbnailLabels.append(this.$truncateThumbnailLabelsCheckbox);
+
+      this.$truncateThumbnailLabelsLabel = $(
+        '<label for="truncateThumbnailLabels">' + this.content.truncateThumbnailLabels + "</label>"
+      );
+      this.$truncateThumbnailLabels.append(this.$truncateThumbnailLabelsLabel);
+
+      this.$truncateThumbnailLabelsCheckbox.prop('checked', config.options.truncateThumbnailLabels);
+
+      this.$truncateThumbnailLabelsCheckbox.change(() => {
+        const settings: ISettings = {};
+        settings.truncateThumbnailLabels = this.$truncateThumbnailLabelsCheckbox.is(":checked");
+        this.updateSettings(settings);
+      });
+    }
+
     this.$clickToZoomEnabled = $('<div class="setting clickToZoom"></div>');
     this.$scroll.append(this.$clickToZoomEnabled);
 
@@ -164,5 +191,13 @@ export class SettingsDialogue extends BaseSettingsDialogue {
     } else {
       this.$preserveViewportCheckbox.removeAttr("checked");
     }
+
+    if (this.$truncateThumbnailLabelsCheckbox) {
+      if (settings.truncateThumbnailLabels) {
+        this.$truncateThumbnailLabelsCheckbox.prop("checked", true);
+      } else {
+        this.$truncateThumbnailLabelsCheckbox.prop("checked", false);
+      }
+  }
   }
 }
diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/Config.ts b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/Config.ts
@@ -141,8 +141,8 @@ type OpenSeadragonCenterPanelContent = CenterPanelContent & {
   attribution: string;
   goHome: string;
   imageUnavailable: string;
-  next: string;
-  previous: string;
+  nextImage: string;
+  previousImage: string;
   rotateRight: string;
   zoomIn: string;
   zoomOut: string;