diff --git a/apps/red-ui/src/app/modules/file-preview/components/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/file-preview/components/pdf-viewer/pdf-viewer.component.ts index c6c2e6cc2..b28008e9f 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/pdf-viewer/pdf-viewer.component.ts @@ -44,6 +44,7 @@ import { loadCompareDocumentWrapper } from '../../../dossier/utils/compare-mode. import { from, fromEvent } from 'rxjs'; import { FileDataService } from '../../services/file-data.service'; import { ViewerHeaderConfigService } from '../../services/viewer-header-config.service'; +import { TooltipsService } from '../../services/tooltips.service'; import Tools = Core.Tools; import TextTool = Tools.TextTool; import Annotation = Core.Annotations.Annotation; @@ -84,6 +85,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha private readonly _pageRotationService: PageRotationService, private readonly _fileDataService: FileDataService, private readonly _headerConfigService: ViewerHeaderConfigService, + private readonly _tooltipsService: TooltipsService, readonly stateService: FilePreviewStateService, readonly viewModeService: ViewModeService, readonly multiSelectService: MultiSelectService, @@ -317,12 +319,6 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha } } - private async _toggleTooltips(title: string, img: string): Promise { - await this._userPreferenceService.toggleFilePreviewTooltipsPreference(); - this._updateTooltipsVisibility(); - this.instance.UI.updateElement(HeaderElements.TOGGLE_TOOLTIPS, { title, img }); - } - private _configureElements() { this.instance.UI.disableElements([ 'pageNavOverlay', @@ -347,9 +343,6 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha 'annotationGroupButton', ]); - const toggleTooltipsFn = async (title: string, img: string) => { - await this._toggleTooltips(title, img); - }; const closeCompareFn = async () => { await this._closeCompareMode(); }; @@ -363,14 +356,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha this._pageRotationService.discardRotation(); }; - this._headerConfigService.initialize( - toggleTooltipsFn, - this.compareFileInput, - closeCompareFn, - addRotation, - applyRotation, - discardRotation, - ); + this._headerConfigService.initialize(this.compareFileInput, closeCompareFn, addRotation, applyRotation, discardRotation); const dossierTemplateId = this.dossier.dossierTemplateId; @@ -600,12 +586,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha const routePageNumber: number = this._activatedRoute.snapshot.queryParams.page; this.pageChanged.emit(routePageNumber || 1); this._setInitialDisplayMode(); - this._updateTooltipsVisibility(); + this._tooltipsService.updateTooltipsVisibility(); }); } - - private _updateTooltipsVisibility(): void { - const current = this._userPreferenceService.getFilePreviewTooltipsPreference(); - this.instance.UI.setAnnotationContentOverlayHandler(() => (current ? undefined : false)); - } } diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-providers.ts b/apps/red-ui/src/app/modules/file-preview/file-preview-providers.ts index cc630ae8a..c89b22949 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview-providers.ts +++ b/apps/red-ui/src/app/modules/file-preview/file-preview-providers.ts @@ -15,6 +15,7 @@ import { PageRotationService } from './services/page-rotation.service'; import { PdfViewer } from './services/pdf-viewer.service'; import { FileDataService } from './services/file-data.service'; import { ViewerHeaderConfigService } from './services/viewer-header-config.service'; +import { TooltipsService } from './services/tooltips.service'; export const filePreviewScreenProviders = [ FilterService, @@ -34,4 +35,5 @@ export const filePreviewScreenProviders = [ FileDataService, dossiersServiceProvider, ViewerHeaderConfigService, + TooltipsService, ]; diff --git a/apps/red-ui/src/app/modules/file-preview/services/tooltips.service.ts b/apps/red-ui/src/app/modules/file-preview/services/tooltips.service.ts new file mode 100644 index 000000000..a99304094 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/services/tooltips.service.ts @@ -0,0 +1,49 @@ +import { Inject, Injectable } from '@angular/core'; +import { PdfViewer } from './pdf-viewer.service'; +import { UserPreferenceService } from '@services/user-preference.service'; +import { HeaderElements } from '../shared/constants'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; +import { TranslateService } from '@ngx-translate/core'; +import { BASE_HREF } from '../../../tokens'; + +@Injectable() +export class TooltipsService { + constructor( + @Inject(BASE_HREF) private readonly _baseHref: string, + private readonly _pdfViewer: PdfViewer, + private readonly _userPreferenceService: UserPreferenceService, + private readonly _translateService: TranslateService, + ) {} + + get toggleTooltipsBtnTitle(): string { + return this._translateService.instant(_('pdf-viewer.toggle-tooltips'), { + active: this._userPreferenceService.getFilePreviewTooltipsPreference(), + }); + } + + get toggleTooltipsBtnIcon(): string { + return this._convertPath( + this._userPreferenceService.getFilePreviewTooltipsPreference() + ? '/assets/icons/general/pdftron-action-enable-tooltips.svg' + : '/assets/icons/general/pdftron-action-disable-tooltips.svg', + ); + } + + updateTooltipsVisibility(): void { + const current = this._userPreferenceService.getFilePreviewTooltipsPreference(); + this._pdfViewer.instance.UI.setAnnotationContentOverlayHandler(() => (current ? undefined : false)); + } + + async toggleTooltips(): Promise { + await this._userPreferenceService.toggleFilePreviewTooltipsPreference(); + this.updateTooltipsVisibility(); + this._pdfViewer.instance.UI.updateElement(HeaderElements.TOGGLE_TOOLTIPS, { + title: this.toggleTooltipsBtnTitle, + img: this.toggleTooltipsBtnIcon, + }); + } + + private _convertPath(path: string): string { + return this._baseHref + path; + } +} diff --git a/apps/red-ui/src/app/modules/file-preview/services/viewer-header-config.service.ts b/apps/red-ui/src/app/modules/file-preview/services/viewer-header-config.service.ts index 51a79e3bd..422f6b9e8 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/viewer-header-config.service.ts +++ b/apps/red-ui/src/app/modules/file-preview/services/viewer-header-config.service.ts @@ -3,9 +3,8 @@ import { IHeaderElement, RotationType, RotationTypes } from '@red/domain'; import { HeaderElements, HeaderElementType } from '../shared/constants'; import { TranslateService } from '@ngx-translate/core'; import { BASE_HREF } from '../../../tokens'; -import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { UserPreferenceService } from '@services/user-preference.service'; import { PdfViewer } from './pdf-viewer.service'; +import { TooltipsService } from './tooltips.service'; @Injectable() export class ViewerHeaderConfigService { @@ -27,8 +26,8 @@ export class ViewerHeaderConfigService { constructor( @Inject(BASE_HREF) private readonly _baseHref: string, private readonly _translateService: TranslateService, - private readonly _userPreferenceService: UserPreferenceService, private readonly _pdfViewer: PdfViewer, + private readonly _tooltipsService: TooltipsService, ) {} private get _rectangle(): IHeaderElement { @@ -41,22 +40,20 @@ export class ViewerHeaderConfigService { }; } - private get _toggleTooltipsBtnTitle(): string { - return this._translateService.instant(_('pdf-viewer.toggle-tooltips'), { - active: this._userPreferenceService.getFilePreviewTooltipsPreference(), - }); - } - - private get _toggleTooltipsBtnIcon(): string { - return this._convertPath( - this._userPreferenceService.getFilePreviewTooltipsPreference() - ? '/assets/icons/general/pdftron-action-enable-tooltips.svg' - : '/assets/icons/general/pdftron-action-disable-tooltips.svg', - ); + private get _toggleTooltips(): IHeaderElement { + return { + type: 'actionButton', + element: HeaderElements.TOGGLE_TOOLTIPS, + dataElement: HeaderElements.TOGGLE_TOOLTIPS, + title: this._tooltipsService.toggleTooltipsBtnTitle, + img: this._tooltipsService.toggleTooltipsBtnIcon, + onClick: async () => { + await this._tooltipsService.toggleTooltips(); + }, + }; } initialize( - toggleTooltips: (title: string, img: string) => Promise, compareFileInput: ElementRef, closeCompareMode: () => Promise, addRotation: (type: RotationType) => void, @@ -74,7 +71,7 @@ export class ViewerHeaderConfigService { [HeaderElements.ROTATE_RIGHT_BUTTON, this._rotateRight(addRotation)], [HeaderElements.APPLY_ROTATION, this._applyRotation(applyRotation)], [HeaderElements.DISCARD_ROTATION, this._discardRotation(discardRotation)], - [HeaderElements.TOGGLE_TOOLTIPS, this._toggleTooltips(toggleTooltips)], + [HeaderElements.TOGGLE_TOOLTIPS, this._toggleTooltips], [HeaderElements.COMPARE_BUTTON, this._compare(compareFileInput)], [HeaderElements.CLOSE_COMPARE_BUTTON, this._closeCompare(closeCompareMode)], ]); @@ -135,7 +132,7 @@ export class ViewerHeaderConfigService { private _rotateLeft(addRotation: (type: RotationType) => void): IHeaderElement { return { type: 'actionButton', - element: 'tooltips', + element: HeaderElements.ROTATE_LEFT_BUTTON, dataElement: HeaderElements.ROTATE_LEFT_BUTTON, img: this._convertPath('/assets/icons/general/rotate-left.svg'), onClick: () => addRotation(RotationTypes.LEFT), @@ -145,30 +142,17 @@ export class ViewerHeaderConfigService { private _rotateRight(addRotation: (type: RotationType) => void): IHeaderElement { return { type: 'actionButton', - element: 'tooltips', + element: HeaderElements.ROTATE_RIGHT_BUTTON, dataElement: HeaderElements.ROTATE_RIGHT_BUTTON, img: this._convertPath('/assets/icons/general/rotate-right.svg'), onClick: () => addRotation(RotationTypes.RIGHT), }; } - private _toggleTooltips(toggleTooltips: (title: string, img: string) => Promise): IHeaderElement { - return { - type: 'actionButton', - element: 'tooltips', - dataElement: HeaderElements.TOGGLE_TOOLTIPS, - img: this._toggleTooltipsBtnIcon, - title: this._toggleTooltipsBtnTitle, - onClick: async () => { - await toggleTooltips(this._toggleTooltipsBtnTitle, this._toggleTooltipsBtnIcon); - }, - }; - } - private _closeCompare(closeCompareMode: () => Promise): IHeaderElement { return { type: 'actionButton', - element: 'closeCompare', + element: HeaderElements.CLOSE_COMPARE_BUTTON, dataElement: HeaderElements.CLOSE_COMPARE_BUTTON, img: this._convertPath('/assets/icons/general/pdftron-action-close-compare.svg'), title: 'Leave Compare Mode', @@ -181,7 +165,7 @@ export class ViewerHeaderConfigService { private _compare(compareFileInput: ElementRef): IHeaderElement { return { type: 'actionButton', - element: 'compare', + element: HeaderElements.COMPARE_BUTTON, dataElement: HeaderElements.COMPARE_BUTTON, img: this._convertPath('/assets/icons/general/pdftron-action-compare.svg'), title: 'Compare',