Extending the thumbnail label to reveal more text #758

__tests__/test.js

@@ -1,13 +1,67 @@
 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('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('.thumbs .thumb .info .label');
+      return getComputedStyle(label).overflowX;
+    });
+    expect(labelOverflowBeforeToggle).toBe('visible');
+
+    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('.thumbs .thumb .info .label');
+      return getComputedStyle(label).overflowX;
+    });
+    expect(labelOverflowAfterToggle).toBe('hidden');
+  });
+
+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 +71,4 @@ describe('Universal Viewer', () => {
 //       )
 //     );
 //   });
-});
+

package.json

@@ -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;
+  truncateThumbnailLabels: 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)",
+        "truncateThumbnailLabels": "Display Full 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",
+        "truncateThumbnailLabels": "$truncateThumbnailLabels",
         "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",
+        "truncateThumbnailLabels": "$truncateThumbnailLabels",
         "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",
+        "truncateThumbnailLabels": "$truncateThumbnailLabels",
         "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",
+        "truncateThumbnailLabels": "$truncateThumbnailLabels",
         "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",
+        "truncateThumbnailLabels": "$truncateThumbnailLabels",
         "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;
+  truncateThumbnailLabels?: boolean;
 }

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

@@ -5,6 +5,9 @@ export class SettingsDialogue extends BaseSettingsDialogue {
   $clickToZoomEnabled: JQuery;
   $clickToZoomEnabledCheckbox: JQuery;
   $clickToZoomEnabledLabel: JQuery;
+  $truncateThumbnailLabels: JQuery;
+  $truncateThumbnailLabelsLabel: JQuery;
+  $truncateThumbnailLabelsCheckbox: JQuery;
   $navigatorEnabled: JQuery;
   $navigatorEnabledCheckbox: JQuery;
   $navigatorEnabledLabel: JQuery;
@@ -15,6 +18,7 @@ export class SettingsDialogue extends BaseSettingsDialogue {
   $preserveViewportCheckbox: JQuery;
   $preserveViewportLabel: JQuery;
 
+
   constructor($element: JQuery) {
     super($element);
   }
@@ -53,6 +57,32 @@ export class SettingsDialogue extends BaseSettingsDialogue {
     );
     this.$pagingEnabled.append(this.$pagingEnabledLabel);
 
+     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);
+
+    const settings: ISettings = {};
+    this.$truncateThumbnailLabelsCheckbox.prop('checked', settings.truncateThumbnailLabels || true);
+
+     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);
 

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

@@ -39,6 +39,7 @@
     "rightPanelEnabled": true,
     "saveUserSettings": false,
     "clickToZoomEnabled": true,
+    "truncateThumbnailLabels": true,
     "searchWithinEnabled": true,
     "seeAlsoEnabled": false,
     "termsOfUseEnabled": true,
@@ -365,6 +366,7 @@
         "clickToZoomEnabled": "$clickToZoomEnabled",
         "pagingEnabled": "$goHome",
         "reducedMotion": "$reducedMotion",
+        "truncateThumbnailLabels": "$truncateThumbnailLabels",
         "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",
+        "truncateThumbnailLabels": "$truncateThumbnailLabels",
         "preserveViewport": "$preserveViewport",
         "title": "$settings",
         "website": "$uvWebsite"

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

@@ -491,27 +491,28 @@ export class ContentLeftPanel extends LeftPanel<ContentLeftPanelConfig> {
     }
 
     const paged: boolean =
-      !!this.extension.getSettings().pagingEnabled &&
-      this.extension.helper.isPaged();
+    !!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();
 
     this.thumbsRoot.render(
       createElement(ThumbsView, {
         thumbs,
         paged,
         viewingDirection: viewingDirection || ViewingDirection.LEFT_TO_RIGHT,
         selected: selectedIndices,
+        truncateThumbnailLabels: settings.truncateThumbnailLabels !== undefined ? settings.truncateThumbnailLabels : true,
         onClick: (thumb: Thumb) => {
           this.extensionHost.publish(IIIFEvents.THUMB_SELECTED, thumb);
         },
       })
     );
-  }
+    }
 
   createGalleryView(): void {
     this.galleryView = new GalleryView(this.$galleryView);

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

@@ -1,8 +1,8 @@
-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;
@@ -31,7 +31,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 +40,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
@@ -68,6 +68,7 @@ export class GalleryView extends BaseView<ContentLeftPanel> {
     // 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);
   }
 
@@ -82,4 +83,10 @@ export class GalleryView extends BaseView<ContentLeftPanel> {
     const $header: JQuery = this.$gallery.find(".header");
     $main.height(this.$element.height() - $header.height());
   }
+
+  public applyExtendedLabelsStyles(): void {
+
+    this.$gallery.addClass('label-extended');
+  }
+
 }