diff --git a/__tests__/test.js b/__tests__/test.js index 1f050fcb1..c43c3f8a9 100644 --- a/__tests__/test.js +++ b/__tests__/test.js @@ -193,6 +193,25 @@ describe("Universal Viewer", () => { expect(galleryViewAfterTwoUpToggle).toBe("hidden"); }); + it("labels gallery thumbnail size controls", async () => { + await page.waitForSelector(".iiif-gallery-component .size-down"); + + const labels = await page.$$eval( + [ + ".iiif-gallery-component .size-down", + ".iiif-gallery-component input[type='range'][name='size']", + ".iiif-gallery-component .size-up", + ].join(", "), + (controls) => controls.map((control) => control.getAttribute("aria-label")) + ); + + expect(labels).toEqual([ + "Decrease thumbnail size", + "Thumbnail size", + "Increase thumbnail size", + ]); + }); + it("settings button is visible", async () => { await page.waitForSelector(".btn.imageBtn.settings"); diff --git a/src/content-handlers/iiif/extensions/config/ContentLeftPanel.ts b/src/content-handlers/iiif/extensions/config/ContentLeftPanel.ts index a7f2b46ae..38bfaeb3f 100644 --- a/src/content-handlers/iiif/extensions/config/ContentLeftPanel.ts +++ b/src/content-handlers/iiif/extensions/config/ContentLeftPanel.ts @@ -59,10 +59,13 @@ type ContentLeftPanelOptions = ExpandPanelOptions & { type ContentLeftPanelContent = ExpandPanelContent & { date: string; + decreaseThumbnailSize: string; index: string; + increaseThumbnailSize: string; manifestRanges: string; searchResult: string; searchResults: string; + thumbnailSize: string; sortBy: string; thumbnails: string; title: string; 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 index 0a31683f1..7e4b09d99 100644 --- a/src/content-handlers/iiif/extensions/uv-av-extension/config/config.json +++ b/src/content-handlers/iiif/extensions/uv-av-extension/config/config.json @@ -91,12 +91,15 @@ "collapse": "$collapse", "collapseFull": "$collapseFull", "date": "$date", + "decreaseThumbnailSize": "$decreaseThumbnailSize", "expand": "$expandContents", "expandFull": "$expandGallery", "index": "$index", + "increaseThumbnailSize": "$increaseThumbnailSize", "manifestRanges": "$manifestRanges", "searchResult": "$searchResult", "searchResults": "$searchResults", + "thumbnailSize": "$thumbnailSize", "sortBy": "$sortBy", "thumbnails": "$thumbnails", "title": "$contents", 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 index 4a3df8ecd..ccd9adfd3 100644 --- a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/Config.ts +++ b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/Config.ts @@ -35,8 +35,11 @@ type MultiSelectDialogueOptions = DialogueOptions & { }; type MultiSelectDialogueContent = DialogueContent & { + decreaseThumbnailSize: string; download: string; + increaseThumbnailSize: string; selectAll: string; + thumbnailSize: string; title: string; }; diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/config.json index 5b3eb2145..bcf242d14 100644 --- a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/config.json +++ b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/config.json @@ -101,12 +101,15 @@ "collapse": "$collapse", "collapseFull": "$collapseFull", "date": "$date", + "decreaseThumbnailSize": "$decreaseThumbnailSize", "expand": "$expandContents", "expandFull": "$expandGallery", "index": "$index", + "increaseThumbnailSize": "$increaseThumbnailSize", "manifestRanges": "$manifestRanges", "searchResult": "$searchResult", "searchResults": "$searchResults", + "thumbnailSize": "$thumbnailSize", "sortBy": "$sortBy", "thumbnails": "$thumbnails", "title": "$contents", @@ -280,8 +283,11 @@ }, "content": { "close": "$close", + "decreaseThumbnailSize": "$decreaseThumbnailSize", "download": "$download", + "increaseThumbnailSize": "$increaseThumbnailSize", "selectAll": "$selectAll", + "thumbnailSize": "$thumbnailSize", "title": "$selectPagesForDownload" } }, diff --git a/src/content-handlers/iiif/modules/uv-shared-module/GalleryComponent.ts b/src/content-handlers/iiif/modules/uv-shared-module/GalleryComponent.ts index b5fbe9eb3..20c29da04 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/GalleryComponent.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/GalleryComponent.ts @@ -12,8 +12,11 @@ import { BaseComponent, IBaseComponentOptions } from "@iiif/base-component"; import { Strings, Maths } from "../../Utils"; export interface IGalleryComponentContent { + decreaseThumbnailSize: string; + increaseThumbnailSize: string; searchResult: string; searchResults: string; + thumbnailSize: string; download: string; selectAll: string; } @@ -60,6 +63,11 @@ export class GalleryComponent extends BaseComponent { constructor(options: IBaseComponentOptions) { super(options); + this.options.data.content = Object.assign( + {}, + this.data().content, + this.options.data.content + ); this._data = this.options.data; this._init(); this._resize(); @@ -81,19 +89,19 @@ export class GalleryComponent extends BaseComponent { this._$sizeDownButton = $( '' - ); + ).attr("aria-label", this.options.data.content.decreaseThumbnailSize); this._$leftOptions.append(this._$sizeDownButton); this._$sizeRange = $( '' - ); + ).attr("aria-label", this.options.data.content.thumbnailSize); this._$leftOptions.append(this._$sizeRange); this._$sizeUpButton = $( '' - ); + ).attr("aria-label", this.options.data.content.increaseThumbnailSize); this._$leftOptions.append(this._$sizeUpButton); this._$multiSelectOptions = $('
'); @@ -199,8 +207,11 @@ export class GalleryComponent extends BaseComponent { return { chunkedResizingThreshold: 400, content: