Tooltips service

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<void> {
-        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(
+        this._headerConfigService.initialize(this.compareFileInput, closeCompareFn, addRotation, applyRotation, discardRotation);
-            toggleTooltipsFn,
-            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));
-    }
 }

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,
 ];

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<void> {
+        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;
+    }
+}

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 {
+    private get _toggleTooltips(): IHeaderElement {
-        return this._translateService.instant(_('pdf-viewer.toggle-tooltips'), {
+        return {
-            active: this._userPreferenceService.getFilePreviewTooltipsPreference(),
+            type: 'actionButton',
-        });
+            element: HeaderElements.TOGGLE_TOOLTIPS,
-    }
+            dataElement: HeaderElements.TOGGLE_TOOLTIPS,
-
+            title: this._tooltipsService.toggleTooltipsBtnTitle,
-    private get _toggleTooltipsBtnIcon(): string {
+            img: this._tooltipsService.toggleTooltipsBtnIcon,
-        return this._convertPath(
+            onClick: async () => {
-            this._userPreferenceService.getFilePreviewTooltipsPreference()
+                await this._tooltipsService.toggleTooltips();
-                ? '/assets/icons/general/pdftron-action-enable-tooltips.svg'
+            },
-                : '/assets/icons/general/pdftron-action-disable-tooltips.svg',
+        };
-        );
     }
 
     initialize(
-        toggleTooltips: (title: string, img: string) => Promise<void>,
         compareFileInput: ElementRef,
         closeCompareMode: () => Promise<void>,
         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<void>): 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<void>): 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',