diff --git a/__tests__/test.js b/__tests__/test.js index 28356314d..79b036e7c 100644 --- a/__tests__/test.js +++ b/__tests__/test.js @@ -18,3 +18,4 @@ describe('Universal Viewer', () => { ); }); }); + diff --git a/src/content-handlers/iiif/BaseConfig.ts b/src/content-handlers/iiif/BaseConfig.ts index b3e871153..e09c15082 100644 --- a/src/content-handlers/iiif/BaseConfig.ts +++ b/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; 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 index f89826d76..25d538ef6 100644 --- a/src/content-handlers/iiif/extensions/uv-aleph-extension/config/config.json +++ b/src/content-handlers/iiif/extensions/uv-aleph-extension/config/config.json @@ -225,6 +225,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": "more info" 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 6be55c64e..c73649c30 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 @@ -268,6 +268,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 index 290702f32..544f0913e 100644 --- a/src/content-handlers/iiif/extensions/uv-default-extension/config/config.json +++ b/src/content-handlers/iiif/extensions/uv-default-extension/config/config.json @@ -318,6 +318,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 index 203a61c1f..f6552e11f 100644 --- a/src/content-handlers/iiif/extensions/uv-ebook-extension/config/config.json +++ b/src/content-handlers/iiif/extensions/uv-ebook-extension/config/config.json @@ -220,6 +220,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 index 7ca31ede6..7d19b3259 100644 --- a/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json +++ b/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json @@ -312,6 +312,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 index 52a1e16b9..7c4df25d5 100644 --- 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 @@ -326,6 +326,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/ISettings.ts b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/ISettings.ts index f12cf0973..b80ccff6e 100644 --- a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/ISettings.ts +++ b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/ISettings.ts @@ -6,4 +6,5 @@ interface ISettings { preserveViewport?: boolean; clickToZoomEnabled?: boolean; reducedAnimation?: boolean; + truncateThumbnailLabels?: boolean; } diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/SettingsDialogue.ts b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/SettingsDialogue.ts index 5af6fe46c..8c2ef9104 100644 --- a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/SettingsDialogue.ts +++ b/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; @@ -53,6 +56,32 @@ export class SettingsDialogue extends BaseSettingsDialogue { ); this.$pagingEnabled.append(this.$pagingEnabledLabel); + this.$truncateThumbnailLabels = $('
'); + this.$scroll.append(this.$truncateThumbnailLabels); + + this.$truncateThumbnailLabelsCheckbox = $( + '' + ); + + this.$truncateThumbnailLabels.append(this.$truncateThumbnailLabelsCheckbox); + + this.$truncateThumbnailLabelsLabel = $( + '" + ); + + 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 = $('
'); this.$scroll.append(this.$clickToZoomEnabled); 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 55af7fd85..72ee78fc1 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 @@ -39,6 +39,7 @@ "rightPanelEnabled": true, "saveUserSettings": false, "clickToZoomEnabled": true, + "truncateThumbnailLabels": true, "searchWithinEnabled": true, "seeAlsoEnabled": false, "termsOfUseEnabled": true, @@ -427,6 +428,7 @@ "clickToZoomEnabled": "$clickToZoomEnabled", "pagingEnabled": "$twoPageView", "reducedMotion": "$reducedMotion", + "truncateThumbnailLabels": "$truncateThumbnailLabels", "preserveViewport": "$preserveViewport", "title": "$settings", "website": "$uvWebsite" diff --git a/src/content-handlers/iiif/extensions/uv-pdf-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-pdf-extension/config/config.json index 970159df0..f582aac04 100644 --- a/src/content-handlers/iiif/extensions/uv-pdf-extension/config/config.json +++ b/src/content-handlers/iiif/extensions/uv-pdf-extension/config/config.json @@ -339,6 +339,7 @@ "clickToZoomEnabled": "$clickToZoomEnabled", "pagingEnabled": "$twoPageView", "reducedMotion": "$reducedMotion", + "truncateThumbnailLabels": "$truncateThumbnailLabels", "preserveViewport": "$preserveViewport", "title": "$settings", "website": "$uvWebsite" diff --git a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts index e35e98d26..833ad6cd0 100644 --- a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts +++ b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts @@ -498,7 +498,7 @@ export class ContentLeftPanel extends LeftPanel { this.extension.helper.canvasIndex ); - // console.log("selectedIndeces", selectedIndices); + const settings = this.extension.getSettings(); this.thumbsRoot.render( createElement(ThumbsView, { @@ -506,6 +506,7 @@ export class ContentLeftPanel extends LeftPanel { 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); }, diff --git a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/GalleryView.ts b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/GalleryView.ts index 0e7acfb3f..3a282d0ae 100644 --- a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/GalleryView.ts +++ b/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 { isOpen: boolean = false; @@ -31,7 +31,7 @@ export class GalleryView extends BaseView { 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,7 +40,7 @@ export class GalleryView extends BaseView { this.galleryComponent.on( "decreaseSize", - function() { + function () { that.extensionHost.publish(IIIFEvents.GALLERY_DECREASE_SIZE); }, false @@ -48,7 +48,7 @@ export class GalleryView extends BaseView { this.galleryComponent.on( "increaseSize", - function() { + function () { that.extensionHost.publish(IIIFEvents.GALLERY_INCREASE_SIZE); }, false @@ -68,6 +68,7 @@ export class GalleryView extends BaseView { // 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,9 @@ export class GalleryView extends BaseView { const $header: JQuery = this.$gallery.find(".header"); $main.height(this.$element.height() - $header.height()); } + + public applyExtendedLabelsStyles(): void { + this.$gallery.addClass('label-extended'); + } + } diff --git a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ThumbsView.tsx b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ThumbsView.tsx index bac81b9f7..df99c6bdc 100644 --- a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ThumbsView.tsx +++ b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ThumbsView.tsx @@ -10,6 +10,7 @@ const ThumbImage = ({ paged, selected, thumb, + truncateThumbnailLabels, viewingDirection, }: { first: boolean; @@ -17,6 +18,7 @@ const ThumbImage = ({ paged: boolean; selected: boolean; thumb: Thumb; + truncateThumbnailLabels: boolean; viewingDirection: ViewingDirection; }) => { const [ref, inView] = useInView({ @@ -37,6 +39,7 @@ const ThumbImage = ({ viewingDirection === ViewingDirection.RIGHT_TO_LEFT), oneCol: !paged, selected: selected, + "truncate-labels": truncateThumbnailLabels, })} tabIndex={0} > @@ -50,7 +53,6 @@ const ThumbImage = ({ {inView && {thumb.label}}
- {/* {thumb.viewingHint} */} {thumb.label}  @@ -68,17 +70,21 @@ const Thumbnails = ({ selected, thumbs, viewingDirection, + truncateThumbnailLabels, }: { onClick: (thumb: Thumb) => void; paged: boolean; selected: number[]; thumbs: Thumb[]; viewingDirection: ViewingDirection; + truncateThumbnailLabels: boolean; }) => { const ref = useRef(null); useEffect(() => { - const thumb: HTMLElement = ref.current?.querySelector(`#thumb-${selected[0]}`) as HTMLElement; + const thumb: HTMLElement = ref.current?.querySelector( + `#thumb-${selected[0]}` + ) as HTMLElement; const y: number = thumb?.offsetTop; ref.current?.parentElement!.scrollTo({ top: y, @@ -115,6 +121,7 @@ const Thumbnails = ({ "left-to-right": viewingDirection === ViewingDirection.LEFT_TO_RIGHT, "right-to-left": viewingDirection === ViewingDirection.RIGHT_TO_LEFT, paged: paged, + "truncate-labels": truncateThumbnailLabels, })} > {thumbs.map((thumb, index) => ( @@ -125,6 +132,7 @@ const Thumbnails = ({ paged={paged} selected={selected.includes(index)} thumb={thumb} + truncateThumbnailLabels={truncateThumbnailLabels} viewingDirection={viewingDirection} /> {showSeparator(paged, thumb.viewingHint, index) && ( diff --git a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/css/styles.less b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/css/styles.less index 018dc149a..ab4d30e3b 100644 --- a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/css/styles.less +++ b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/css/styles.less @@ -121,9 +121,24 @@ } } - //.galleryView{ - // iiif-gallery-component (shared-module) - //} + .galleryView { + .main { + .thumbs { + .thumb { + .info { + .label { + min-height: 35px; + max-height: 35px; + overflow-x: visible; + text-overflow: nowrap; + white-space: break-spaces; + max-width: 100%; + } + } + } + } + } + } } } } diff --git a/src/content-handlers/iiif/modules/uv-dialogues-module/SettingsDialogue.ts b/src/content-handlers/iiif/modules/uv-dialogues-module/SettingsDialogue.ts index 69d55bec6..25c7f9910 100644 --- a/src/content-handlers/iiif/modules/uv-dialogues-module/SettingsDialogue.ts +++ b/src/content-handlers/iiif/modules/uv-dialogues-module/SettingsDialogue.ts @@ -4,9 +4,7 @@ import { IIIFEvents } from "../../IIIFEvents"; import { Dialogue } from "../uv-shared-module/Dialogue"; import { ILocale } from "../uv-shared-module/ILocale"; -export class SettingsDialogue extends Dialogue< - BaseConfig["modules"]["settingsDialogue"] -> { +export class SettingsDialogue extends Dialogue { $locale: JQuery; $localeDropDown: JQuery; $localeLabel: JQuery; diff --git a/src/content-handlers/iiif/modules/uv-shared-module/ThumbsView.ts b/src/content-handlers/iiif/modules/uv-shared-module/ThumbsView.ts index b6a165394..36a1cc7b1 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/ThumbsView.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/ThumbsView.ts @@ -56,16 +56,16 @@ export class ThumbsView extends BaseView { $.templates({ thumbsTemplate: '\ -
\ -
\ - {{:#index + 1}}\ - {{>label}} \ - {{>data.searchResults}}\ -
\ - \ - {{if ~separator()}} \ -
\ - {{/if}}', +
\ +
\ + {{:#index + 1}}\ + {{>label}} \ + {{>data.searchResults}}\ +
\ + \ + {{if ~separator()}} \ +
\ + {{/if}}', }); const extraHeight: number = this.options.thumbsExtraHeight; diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/thumbs-view.less b/src/content-handlers/iiif/modules/uv-shared-module/css/thumbs-view.less index 70c026ff1..a83f52c68 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/thumbs-view.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/thumbs-view.less @@ -76,11 +76,19 @@ float: left; } - .thumbsView .thumbs .thumb .info .label { - float: left; + .thumbsView .thumbs.truncate-labels .thumb .info .label { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; + max-width: 100%; + } + + .thumbsView .thumbs .thumb .info .label { + float: left; + overflow-x: visible; + text-overflow: nowrap; + white-space: break-spaces; + max-width: 100%; } .thumbsView .thumbs .thumb .info .searchResults { @@ -133,7 +141,7 @@ } .thumbsView .thumbs .thumb.twoCol .label { - width: 63px; + width: 98px; } .thumbsView .thumbs .thumb.twoCol .wrap { diff --git a/src/locales/cy-GB.json b/src/locales/cy-GB.json index 19d561af3..662aa7a64 100644 --- a/src/locales/cy-GB.json +++ b/src/locales/cy-GB.json @@ -114,6 +114,7 @@ "$navigatorEnabled": "Ffenest llywio ar gae", "$clickToZoomEnabled": "Cliciwch gyda'r llygoden i glosio", "$reducedMotion": "Lleihau symudiad (analluogi animeiddiadau)", + "truncateThumbnailLabels": "Labeli Bawd Torri", "$preserveViewport": "Cadw'r lefel o glosio", "$uvWebsite": "mwy o wybodaeth<\/a>", "$custom": "dewisol", diff --git a/src/locales/en-GB.json b/src/locales/en-GB.json index a8af0f50e..8933a01f8 100644 --- a/src/locales/en-GB.json +++ b/src/locales/en-GB.json @@ -114,6 +114,7 @@ "$navigatorEnabled": "Navigator Enabled", "$clickToZoomEnabled": "Mouse Click To Zoom", "$reducedMotion": "Reduce motion (disables animations)", + "truncateThumbnailLabels": "Truncate Thumbnail Labels", "$preserveViewport": "Preserve Zoom", "$uvWebsite": "more info", "$custom": "custom", diff --git a/src/locales/fr-FR.json b/src/locales/fr-FR.json index ad5fa6713..0fd190b91 100644 --- a/src/locales/fr-FR.json +++ b/src/locales/fr-FR.json @@ -114,6 +114,7 @@ "$navigatorEnabled": "Navigateur activé", "$clickToZoomEnabled": "Cliquer pour zoomer", "$reducedMotion": "Réduire le mouvement (désactive les animations)", + "truncateThumbnailLabels": "Tronquer les étiquettes des vignettes", "$preserveViewport": "Conserver le zoom", "$uvWebsite": "informations", "$custom": "personnalisée", diff --git a/src/locales/pl-PL.json b/src/locales/pl-PL.json index 2ade88313..64dbb3486 100644 --- a/src/locales/pl-PL.json +++ b/src/locales/pl-PL.json @@ -114,6 +114,7 @@ "$navigatorEnabled": "Włączona nawigacja", "$clickToZoomEnabled": "Przybliżenie przez kliknięcie myszą", "$reducedMotion": "Zmniejsz ruch (wyłącza animacje)", + "truncateThumbnailLabels": "Obetnij etykiety miniatur", "$preserveViewport": "Zachowanie przybliżenia", "$uvWebsite": "więcej informacji", "$custom": "Ustawienia", diff --git a/src/locales/sv-SE.json b/src/locales/sv-SE.json index 602f297b3..b4403b019 100644 --- a/src/locales/sv-SE.json +++ b/src/locales/sv-SE.json @@ -114,6 +114,7 @@ "$navigatorEnabled": "Visa minivy", "$clickToZoomEnabled": "Zooma med musklick", "$reducedMotion": "Minska rörelse (inaktiverar animationer)", + "truncateThumbnailLabels": "Trunkera miniatyretiketter", "$preserveViewport": "Behåll zoomnivå", "$uvWebsite": "mer info", "$custom": "Anpassad",