From 4ea83b8243ead53ee8f542c2584888399fac7cef Mon Sep 17 00:00:00 2001 From: whitewoood <975177209@qq.com> Date: Thu, 11 Jun 2026 13:44:27 +0800 Subject: [PATCH 1/2] Add labels to gallery size controls --- __tests__/test.js | 19 +++++++++++++++++++ .../extensions/config/ContentLeftPanel.ts | 3 +++ .../uv-av-extension/config/config.json | 3 +++ .../config/Config.ts | 3 +++ .../config/config.json | 6 ++++++ .../uv-shared-module/GalleryComponent.ts | 17 ++++++++++++++--- src/locales/cy-GB.json | 3 +++ src/locales/en-GB.json | 3 +++ src/locales/fr-FR.json | 3 +++ src/locales/pl-PL.json | 3 +++ src/locales/sv-SE.json | 3 +++ 11 files changed, 63 insertions(+), 3 deletions(-) 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..80ceec289 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; + decreaseSize: string; index: string; + increaseSize: string; manifestRanges: string; searchResult: string; searchResults: string; + size: 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..b9de0a117 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", + "decreaseSize": "$decreaseThumbnailSize", "expand": "$expandContents", "expandFull": "$expandGallery", "index": "$index", + "increaseSize": "$increaseThumbnailSize", "manifestRanges": "$manifestRanges", "searchResult": "$searchResult", "searchResults": "$searchResults", + "size": "$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..81f22f2b7 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 & { + decreaseSize: string; download: string; + increaseSize: string; selectAll: string; + size: 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..3aa6ed520 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", + "decreaseSize": "$decreaseThumbnailSize", "expand": "$expandContents", "expandFull": "$expandGallery", "index": "$index", + "increaseSize": "$increaseThumbnailSize", "manifestRanges": "$manifestRanges", "searchResult": "$searchResult", "searchResults": "$searchResults", + "size": "$thumbnailSize", "sortBy": "$sortBy", "thumbnails": "$thumbnails", "title": "$contents", @@ -280,8 +283,11 @@ }, "content": { "close": "$close", + "decreaseSize": "$decreaseThumbnailSize", "download": "$download", + "increaseSize": "$increaseThumbnailSize", "selectAll": "$selectAll", + "size": "$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..6e6fa0d13 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 { + decreaseSize: string; + increaseSize: string; searchResult: string; searchResults: string; + size: 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.decreaseSize); this._$leftOptions.append(this._$sizeDownButton); this._$sizeRange = $( '' - ); + ).attr("aria-label", this.options.data.content.size); this._$leftOptions.append(this._$sizeRange); this._$sizeUpButton = $( '' - ); + ).attr("aria-label", this.options.data.content.increaseSize); this._$leftOptions.append(this._$sizeUpButton); this._$multiSelectOptions = $('
'); @@ -199,8 +207,11 @@ export class GalleryComponent extends BaseComponent { return { chunkedResizingThreshold: 400, content: { + decreaseSize: "Decrease thumbnail size", + increaseSize: "Increase thumbnail size", searchResult: "{0} search result", searchResults: "{0} search results", + size: "Thumbnail size", }, debug: false, helper: null, diff --git a/src/locales/cy-GB.json b/src/locales/cy-GB.json index 349060930..c9171ee07 100644 --- a/src/locales/cy-GB.json +++ b/src/locales/cy-GB.json @@ -134,6 +134,9 @@ "$shareLink": "Dolen i'r dudalen hon", "$shareInstructions": "Er mwyn rhannu'r eitem hon, cop\u00efwch y URL isod.", "$size": "Maint:", + "$decreaseThumbnailSize": "Lleihau maint bawdluniau", + "$thumbnailSize": "Maint bawdluniau", + "$increaseThumbnailSize": "Cynyddu maint bawdluniau", "$width": "Lled", "$cancel": "Canslo", "$confirm": "Cadarnhau", diff --git a/src/locales/en-GB.json b/src/locales/en-GB.json index 308c8c874..c23544922 100644 --- a/src/locales/en-GB.json +++ b/src/locales/en-GB.json @@ -134,6 +134,9 @@ "$shareLink": "Link to this Page", "$shareInstructions": "To share this item, copy the URL below.", "$size": "Size:", + "$decreaseThumbnailSize": "Decrease thumbnail size", + "$thumbnailSize": "Thumbnail size", + "$increaseThumbnailSize": "Increase thumbnail size", "$width": "Width", "$cancel": "Cancel", "$confirm": "Confirm", diff --git a/src/locales/fr-FR.json b/src/locales/fr-FR.json index 6c0ec117c..e9821fb0d 100644 --- a/src/locales/fr-FR.json +++ b/src/locales/fr-FR.json @@ -133,6 +133,9 @@ "$shareLink": "Un lien vers cette page", "$shareInstructions": "Pour partager ce contenu, copier l'URL ci-dessous.", "$size": "Taille :", + "$decreaseThumbnailSize": "Réduire la taille des vignettes", + "$thumbnailSize": "Taille des vignettes", + "$increaseThumbnailSize": "Augmenter la taille des vignettes", "$width": "Largeur", "$cancel": "Annuler", "$confirm": "Confirmer", diff --git a/src/locales/pl-PL.json b/src/locales/pl-PL.json index 3d6e5d180..ec011c814 100644 --- a/src/locales/pl-PL.json +++ b/src/locales/pl-PL.json @@ -133,6 +133,9 @@ "$shareLink": "Link do tej strony", "$shareInstructions": "Aby udostępnić ten obiekt, skopiuj poniższy adres URL.", "$size": "Rozmiar:", + "$decreaseThumbnailSize": "Zmniejsz rozmiar miniatur", + "$thumbnailSize": "Rozmiar miniatur", + "$increaseThumbnailSize": "Zwiększ rozmiar miniatur", "$width": "Szerokość", "$cancel": "Anuluj", "$confirm": "Potwierdź", diff --git a/src/locales/sv-SE.json b/src/locales/sv-SE.json index 74dfb0c83..69f5c1658 100644 --- a/src/locales/sv-SE.json +++ b/src/locales/sv-SE.json @@ -133,6 +133,9 @@ "$shareLink": "Länk till denna sida", "$shareInstructions": "Kopiera länken nedan för att dela det här objektet.", "$size": "Storlek:", + "$decreaseThumbnailSize": "Minska miniatyrstorlek", + "$thumbnailSize": "Miniatyrstorlek", + "$increaseThumbnailSize": "Öka miniatyrstorlek", "$width": "Bredd", "$cancel": "Avbryt", "$confirm": "Bekräfta", From c1cf9acac9760e0308d414767a0ecb0b5b47275d Mon Sep 17 00:00:00 2001 From: whitewoood <975177209@qq.com> Date: Fri, 12 Jun 2026 15:25:51 +0800 Subject: [PATCH 2/2] Address gallery thumbnail label review --- .../iiif/extensions/config/ContentLeftPanel.ts | 6 +++--- .../uv-av-extension/config/config.json | 6 +++--- .../config/Config.ts | 6 +++--- .../config/config.json | 12 ++++++------ .../uv-shared-module/GalleryComponent.ts | 18 +++++++++--------- 5 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/content-handlers/iiif/extensions/config/ContentLeftPanel.ts b/src/content-handlers/iiif/extensions/config/ContentLeftPanel.ts index 80ceec289..38bfaeb3f 100644 --- a/src/content-handlers/iiif/extensions/config/ContentLeftPanel.ts +++ b/src/content-handlers/iiif/extensions/config/ContentLeftPanel.ts @@ -59,13 +59,13 @@ type ContentLeftPanelOptions = ExpandPanelOptions & { type ContentLeftPanelContent = ExpandPanelContent & { date: string; - decreaseSize: string; + decreaseThumbnailSize: string; index: string; - increaseSize: string; + increaseThumbnailSize: string; manifestRanges: string; searchResult: string; searchResults: string; - size: 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 b9de0a117..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,15 +91,15 @@ "collapse": "$collapse", "collapseFull": "$collapseFull", "date": "$date", - "decreaseSize": "$decreaseThumbnailSize", + "decreaseThumbnailSize": "$decreaseThumbnailSize", "expand": "$expandContents", "expandFull": "$expandGallery", "index": "$index", - "increaseSize": "$increaseThumbnailSize", + "increaseThumbnailSize": "$increaseThumbnailSize", "manifestRanges": "$manifestRanges", "searchResult": "$searchResult", "searchResults": "$searchResults", - "size": "$thumbnailSize", + "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 81f22f2b7..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,11 +35,11 @@ type MultiSelectDialogueOptions = DialogueOptions & { }; type MultiSelectDialogueContent = DialogueContent & { - decreaseSize: string; + decreaseThumbnailSize: string; download: string; - increaseSize: string; + increaseThumbnailSize: string; selectAll: string; - size: 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 3aa6ed520..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,15 +101,15 @@ "collapse": "$collapse", "collapseFull": "$collapseFull", "date": "$date", - "decreaseSize": "$decreaseThumbnailSize", + "decreaseThumbnailSize": "$decreaseThumbnailSize", "expand": "$expandContents", "expandFull": "$expandGallery", "index": "$index", - "increaseSize": "$increaseThumbnailSize", + "increaseThumbnailSize": "$increaseThumbnailSize", "manifestRanges": "$manifestRanges", "searchResult": "$searchResult", "searchResults": "$searchResults", - "size": "$thumbnailSize", + "thumbnailSize": "$thumbnailSize", "sortBy": "$sortBy", "thumbnails": "$thumbnails", "title": "$contents", @@ -283,11 +283,11 @@ }, "content": { "close": "$close", - "decreaseSize": "$decreaseThumbnailSize", + "decreaseThumbnailSize": "$decreaseThumbnailSize", "download": "$download", - "increaseSize": "$increaseThumbnailSize", + "increaseThumbnailSize": "$increaseThumbnailSize", "selectAll": "$selectAll", - "size": "$thumbnailSize", + "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 6e6fa0d13..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,11 +12,11 @@ import { BaseComponent, IBaseComponentOptions } from "@iiif/base-component"; import { Strings, Maths } from "../../Utils"; export interface IGalleryComponentContent { - decreaseSize: string; - increaseSize: string; + decreaseThumbnailSize: string; + increaseThumbnailSize: string; searchResult: string; searchResults: string; - size: string; + thumbnailSize: string; download: string; selectAll: string; } @@ -89,19 +89,19 @@ export class GalleryComponent extends BaseComponent { this._$sizeDownButton = $( '' - ).attr("aria-label", this.options.data.content.decreaseSize); + ).attr("aria-label", this.options.data.content.decreaseThumbnailSize); this._$leftOptions.append(this._$sizeDownButton); this._$sizeRange = $( '' - ).attr("aria-label", this.options.data.content.size); + ).attr("aria-label", this.options.data.content.thumbnailSize); this._$leftOptions.append(this._$sizeRange); this._$sizeUpButton = $( '' - ).attr("aria-label", this.options.data.content.increaseSize); + ).attr("aria-label", this.options.data.content.increaseThumbnailSize); this._$leftOptions.append(this._$sizeUpButton); this._$multiSelectOptions = $('
'); @@ -207,11 +207,11 @@ export class GalleryComponent extends BaseComponent { return { chunkedResizingThreshold: 400, content: { - decreaseSize: "Decrease thumbnail size", - increaseSize: "Increase thumbnail size", + decreaseThumbnailSize: "Decrease thumbnail size", + increaseThumbnailSize: "Increase thumbnail size", searchResult: "{0} search result", searchResults: "{0} search results", - size: "Thumbnail size", + thumbnailSize: "Thumbnail size", }, debug: false, helper: null,