Extending the thumbnail label to reveal more text #758

__tests__/test.js

@@ -1,13 +1,68 @@
 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:8080/#?xywh=-1741%2C125%2C8017%2C6807&iiifManifestId=http%3A%2F%2Fiiif.bodleian.ox.ac.uk%2Fexamples%2Fmushaf4.json');
+  });
+
+  afterAll(async () => {
+    await browser.close();
   });
+
   it('has the correct page title', async () => {
     const title = await page.title();
     expect(title).toBe('Universal Viewer Examples');
   });
+
+  it('extends thumbnail labels when "extend labels" checkbox is clicked', async () => {
+
+    jest.setTimeout(10000);
+
+
+    await page.waitForSelector('.btn.imageBtn.settings .uv-icon-settings');
+    await page.click('.btn.imageBtn.settings .uv-icon-settings');
+
+
+    await page.waitForSelector('.setting.extendThumbnailLabels');
+
+
+    await page.click('#extendThumbnailLabels');
+
+
+    await page.waitForSelector('.thumb.extend-labels');
+
+
+    const labelContainerStyle = await page.evaluate(() => {
+        const firstThumbnailLabelContainer = document.querySelector('.thumb.extend-labels .info .label');
+        return window.getComputedStyle(firstThumbnailLabelContainer).getPropertyValue('white-space');
+    });
+
+
+    expect(labelContainerStyle).toBe('break-spaces');
+});
+
+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);
+});
+});
+
 //   it('loads the viewer images', async () => {
 //     await page.waitForSelector('#thumb0');
 //     const imageSrc = await page.$eval('#thumb0 img', e => e.src);
@@ -17,4 +72,4 @@ describe('Universal Viewer', () => {
 //       )
 //     );
 //   });
-});
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "universalviewer",
-  "version": "4.0.25",
+  "version": "4.1.0",
   "description": "The Universal Viewer is a community-developed open source project on a mission to help you share your 📚📜📰📽️📻🗿 with the 🌎",
   "engines": {
     "node": ">=14.18.1",
@@ -134,6 +134,7 @@
         "enableTsDiagnostics": true
       }
     },
+    "testTimeout": 10000,
     "preset": "jest-puppeteer",
     "transform": {
       "^.+\\.tsx?$": "ts-jest"

src/content-handlers/iiif/BaseConfig.ts

@@ -221,6 +221,7 @@ export type SettingsDialogueContent = DialogueContent & {
   clickToZoomEnabled: string;
   pagingEnabled: string;
   reducedMotion: string;
+  extendThumbnailLabels: string; 
   preserveViewport: string;
   title: string;
   website: string;

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

@@ -199,6 +199,7 @@
         "clickToZoomEnabled": "Mouse Click To Zoom",
         "pagingEnabled": "Two Page View",
         "reducedMotion": "Reduce motion (disables animations)",
+        "extendThumbnailLabels": "Extend Thumbnail Labels",
         "preserveViewport": "Preserve Zoom",
         "title": "Settings",
         "website": "<a href='https://github.com/universalviewer/universalviewer#contributors'>more info</a>"

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

@@ -242,6 +242,7 @@
         "clickToZoomEnabled": "$clickToZoomEnabled",
         "pagingEnabled": "$twoPageView",
         "reducedMotion": "$reducedMotion",
+        "extendThumbnailLabels": "$extendThumbnailLabels",
         "preserveViewport": "$preserveViewport",
         "title": "$settings",
         "website": "$uvWebsite"

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

@@ -292,6 +292,7 @@
         "clickToZoomEnabled": "$clickToZoomEnabled",
         "pagingEnabled": "$twoPageView",
         "reducedMotion": "$reducedMotion",
+        "extendThumbnailLabels": "$extendThumbnailLabels",
         "preserveViewport": "$preserveViewport",
         "title": "$settings",
         "website": "$uvWebsite"

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

@@ -194,6 +194,7 @@
         "clickToZoomEnabled": "$clickToZoomEnabled",
         "pagingEnabled": "$twoPageView",
         "reducedMotion": "$reducedMotion",
+        "extendThumbnailLabels": "$extendThumbnailLabels",
         "preserveViewport": "$preserveViewport",
         "title": "$settings",
         "website": "$uvWebsite"

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

@@ -301,6 +301,7 @@
         "clickToZoomEnabled": "$clickToZoomEnabled",
         "pagingEnabled": "$twoPageView",
         "reducedMotion": "$reducedMotion",
+        "extendThumbnailLabels": "$extendThumbnailLabels",
         "preserveViewport": "$preserveViewport",
         "title": "$settings",
         "website": "$uvWebsite"

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

@@ -307,6 +307,7 @@
         "clickToZoomEnabled": "$clickToZoomEnabled",
         "pagingEnabled": "$twoPageView",
         "reducedMotion": "$reducedMotion",
+        "extendThumbnailLabels": "$extendThumbnailLabels",
         "preserveViewport": "$preserveViewport",
         "title": "$settings",
         "website": "$uvWebsite"

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

@@ -6,4 +6,5 @@ interface ISettings {
   preserveViewport?: boolean;
   clickToZoomEnabled?: boolean;
   reducedAnimation?: boolean;
+  extendThumbnailLabels?: boolean;
 }

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

@@ -365,6 +365,7 @@
         "clickToZoomEnabled": "$clickToZoomEnabled",
         "pagingEnabled": "$goHome",
         "reducedMotion": "$reducedMotion",
+        "extendThumbnailLabels": "$extendThumbnailLabels",
         "preserveViewport": "$preserveViewport",
         "title": "$settings",
         "website": "$uvWebsite"

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

@@ -309,6 +309,7 @@
         "clickToZoomEnabled": "$clickToZoomEnabled",
         "pagingEnabled": "$goHome",
         "reducedMotion": "$reducedMotion",
+        "extendThumbnailLabels": "$extendThumbnailLabels",
         "preserveViewport": "$preserveViewport",
         "title": "$settings",
         "website": "$uvWebsite"

src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts

@@ -491,26 +491,30 @@ export class ContentLeftPanel extends LeftPanel<ContentLeftPanelConfig> {
     }
 
     const paged: boolean =
-      !!this.extension.getSettings().pagingEnabled &&
-      this.extension.helper.isPaged();
-
-    const selectedIndices: number[] = this.extension.getPagedIndices(
-      this.extension.helper.canvasIndex
-    );
-
-    // console.log("selectedIndeces", selectedIndices);
-
-    this.thumbsRoot.render(
-      createElement(ThumbsView, {
-        thumbs,
-        paged,
-        viewingDirection: viewingDirection || ViewingDirection.LEFT_TO_RIGHT,
-        selected: selectedIndices,
-        onClick: (thumb: Thumb) => {
-          this.extensionHost.publish(IIIFEvents.THUMB_SELECTED, thumb);
-        },
-      })
-    );
+    !!this.extension.getSettings().pagingEnabled &&
+    this.extension.helper.isPaged();
+
+  const selectedIndices: number[] = this.extension.getPagedIndices(
+    this.extension.helper.canvasIndex
+  );
+
+  // console.log("selectedIndeces", selectedIndices);
+
+  const settings = this.extension.getSettings(); // Get settings object
+
+  this.thumbsRoot.render(
+    createElement(ThumbsView, {
+      thumbs,
+      paged,
+      viewingDirection: viewingDirection || ViewingDirection.LEFT_TO_RIGHT,
+      selected: selectedIndices,
+      extendThumbnailLabels: settings.extendThumbnailLabels || false,
+      onClick: (thumb: Thumb) => {
+        this.extensionHost.publish(IIIFEvents.THUMB_SELECTED, thumb);
+      },
+    })
+  );
+
   }
 
   createGalleryView(): void {

src/content-handlers/iiif/modules/uv-contentleftpanel-module/GalleryView.ts

@@ -1,14 +1,15 @@
-const $ = require("jquery");
 import { IIIFEvents } from "../../IIIFEvents";
 import { ContentLeftPanel } from "../../extensions/config/ContentLeftPanel";
 import { BaseView } from "../uv-shared-module/BaseView";
 import { GalleryComponent } from "@iiif/iiif-gallery-component";
+import $ from "jquery";
 
 export class GalleryView extends BaseView<ContentLeftPanel> {
   isOpen: boolean = false;
   galleryComponent: any;
   galleryData: any;
   $gallery: JQuery;
+  $extendLabelsCheckbox: JQuery | undefined;
 
   constructor($element: JQuery) {
     super($element, true, true);
@@ -31,7 +32,7 @@ export class GalleryView extends BaseView<ContentLeftPanel> {
 
     this.galleryComponent.on(
       "thumbSelected",
-      function(thumb: any) {
+      function (thumb: any) {
         that.extensionHost.publish(IIIFEvents.GALLERY_THUMB_SELECTED, thumb);
         that.extensionHost.publish(IIIFEvents.THUMB_SELECTED, thumb);
       },
@@ -40,15 +41,15 @@ export class GalleryView extends BaseView<ContentLeftPanel> {
 
     this.galleryComponent.on(
       "decreaseSize",
-      function() {
+      function () {
         that.extensionHost.publish(IIIFEvents.GALLERY_DECREASE_SIZE);
       },
       false
     );
 
     this.galleryComponent.on(
       "increaseSize",
-      function() {
+      function () {
         that.extensionHost.publish(IIIFEvents.GALLERY_INCREASE_SIZE);
       },
       false
@@ -64,12 +65,14 @@ export class GalleryView extends BaseView<ContentLeftPanel> {
   show(): void {
     this.isOpen = true;
     this.$element.show();
-
+  
     // todo: would be better to have no imperative methods on components and use a reactive pattern
     setTimeout(() => {
       this.galleryComponent.selectIndex(this.extension.helper.canvasIndex);
+      this.applyExtendedLabelsStyles(); 
     }, 10);
   }
+
 
   hide(): void {
     this.isOpen = false;
@@ -82,4 +85,17 @@ export class GalleryView extends BaseView<ContentLeftPanel> {
     const $header: JQuery = this.$gallery.find(".header");
     $main.height(this.$element.height() - $header.height());
   }
-}
+
+
+
+  public applyExtendedLabelsStyles(): void {
+
+    // extend labels in gallery view
+    this.$gallery.find('.info .label').css({
+      'overflow-x': 'visible',
+      'text-overflow': 'nowrap',
+      'white-space': 'break-spaces',
+      'max-width': '100%',
+    });
+  }
+}