From 8af6eb31afd237416bc2ccaa84a81b5f1ae790d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 24 Mar 2022 18:03:38 +0200 Subject: [PATCH] Viewer header config service initial --- .../pdf-viewer/pdf-viewer.component.ts | 147 ++++------------- .../file-preview/file-preview-providers.ts | 2 + .../services/viewer-header-config.service.ts | 153 ++++++++++++++++++ 3 files changed, 184 insertions(+), 118 deletions(-) create mode 100644 apps/red-ui/src/app/modules/file-preview/services/viewer-header-config.service.ts 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 757c15cdb..66ad47926 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 @@ -11,7 +11,7 @@ import { SimpleChanges, ViewChild, } from '@angular/core'; -import { Dossier, File, IHeaderElement, IManualRedactionEntry, RotationTypes } from '@red/domain'; +import { Dossier, File, IHeaderElement, IManualRedactionEntry } from '@red/domain'; import { Core, WebViewerInstance } from '@pdftron/webviewer'; import { TranslateService } from '@ngx-translate/core'; import { @@ -43,17 +43,11 @@ import { FilePreviewDialogService } from '../../services/file-preview-dialog.ser import { loadCompareDocumentWrapper } from '../../../dossier/utils/compare-mode.utils'; import { from, fromEvent } from 'rxjs'; import { FileDataService } from '../../services/file-data.service'; +import { ViewerHeaderConfigService } from '../../services/viewer-header-config.service'; import Tools = Core.Tools; import TextTool = Tools.TextTool; import Annotation = Core.Annotations.Annotation; -function getDivider(hiddenOn?: readonly ('desktop' | 'mobile' | 'tablet')[]) { - return { - type: 'divider', - hidden: hiddenOn, - }; -} - @Component({ selector: 'redaction-pdf-viewer', templateUrl: './pdf-viewer.component.html', @@ -89,6 +83,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha private readonly _fileManagementService: FileManagementService, private readonly _pageRotationService: PageRotationService, private readonly _fileDataService: FileDataService, + private readonly _headerConfigService: ViewerHeaderConfigService, readonly stateService: FilePreviewStateService, readonly viewModeService: ViewModeService, readonly multiSelectService: MultiSelectService, @@ -97,20 +92,6 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha super(); } - private get _toggleTooltipsBtnTitle(): string { - return this._translateService.instant(_('pdf-viewer.toggle-tooltips'), { - active: this._userPreferenceService.getFilePreviewTooltipsPreference(), - }); - } - - private get _toggleTooltipsIcon(): string { - return this._convertPath( - this._userPreferenceService.getFilePreviewTooltipsPreference() - ? '/assets/icons/general/pdftron-action-enable-tooltips.svg' - : '/assets/icons/general/pdftron-action-disable-tooltips.svg', - ); - } - async ngOnInit() { this._setReadyAndInitialState = this._setReadyAndInitialState.bind(this); await this._loadViewer(); @@ -200,7 +181,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha fileReader.readAsArrayBuffer(fileToCompare); } - async closeCompareMode() { + private async _closeCompareMode() { this.viewModeService.compareMode = false; const pdfNet = this.instance.Core.PDFNet; await pdfNet.initialize(environment.licenseKey ? atob(environment.licenseKey) : null); @@ -333,6 +314,12 @@ 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', @@ -357,107 +344,31 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha 'annotationGroupButton', ]); - const applyRotation: IHeaderElement = { - type: 'customElement', - dataElement: HeaderElements.APPLY_ROTATION, - render: () => { - const paragraph = document.createElement('p'); - paragraph.innerText = this._translateService.instant('page-rotation.apply'); - paragraph.style.cssText = ` - font-size: 11px; - font-weight: 600; - color: #DD4D50; - cursor: pointer; - margin: 0 12px; - `; - paragraph.addEventListener('click', async () => { - await this._pageRotationService.applyRotation(); - }); - return paragraph; - }, - }; - const discardRotation: IHeaderElement = { - type: 'customElement', - dataElement: HeaderElements.DISCARD_ROTATION, - render: () => { - const paragraph = document.createElement('p'); - paragraph.innerText = this._translateService.instant('page-rotation.discard'); - paragraph.style.cssText = ` - font-size: 11px; - font-weight: 600; - color: #283241; - cursor: pointer; - opacity: 0.7; - `; - paragraph.addEventListener('click', () => { - this._pageRotationService.discardRotation(); - }); - return paragraph; - }, - }; + const applyRotation: IHeaderElement = this._headerConfigService.applyRotation; + const discardRotation: IHeaderElement = this._headerConfigService.discardRotation; + const compare: IHeaderElement = this._headerConfigService.compare(this.compareFileInput); + const closeCompare: IHeaderElement = this._headerConfigService.closeCompare(async () => { + await this._closeCompareMode(); + }); + const toggleTooltips: IHeaderElement = this._headerConfigService.toggleTooltips(async (title: string, img: string) => { + await this._toggleTooltips(title, img); + }); + const rectangle = this._headerConfigService.rectangle; + const rotateLeft = this._headerConfigService.rotateLeft; + const rotateRight = this._headerConfigService.rotateRight; + const divider = this._headerConfigService.divider; - const divider = getDivider(); const headerItems: IHeaderElement[] = [ divider, - { - type: 'actionButton', - element: 'compare', - dataElement: HeaderElements.COMPARE_BUTTON, - img: this._convertPath('/assets/icons/general/pdftron-action-compare.svg'), - title: 'Compare', - onClick: () => { - this.compareFileInput.nativeElement.click(); - }, - }, - { - type: 'actionButton', - element: 'closeCompare', - dataElement: HeaderElements.CLOSE_COMPARE_BUTTON, - img: this._convertPath('/assets/icons/general/pdftron-action-close-compare.svg'), - title: 'Leave Compare Mode', - onClick: async () => { - await this.closeCompareMode(); - }, - }, + compare, + closeCompare, divider, - { - type: 'actionButton', - element: 'tooltips', - dataElement: HeaderElements.TOGGLE_TOOLTIPS, - img: this._toggleTooltipsIcon, - title: this._toggleTooltipsBtnTitle, - onClick: async () => { - await this._userPreferenceService.toggleFilePreviewTooltipsPreference(); - this._updateTooltipsVisibility(); - this.instance.UI.updateElement(HeaderElements.TOGGLE_TOOLTIPS, { - title: this._toggleTooltipsBtnTitle, - img: this._toggleTooltipsIcon, - }); - }, - }, + toggleTooltips, divider, - { - type: 'toolGroupButton', - toolGroup: 'rectangleTools', - dataElement: HeaderElements.SHAPE_TOOL_GROUP_BUTTON, - img: this._convertPath('/assets/icons/general/rectangle.svg'), - title: 'annotation.rectangle', - }, + rectangle, divider, - { - type: 'actionButton', - element: 'tooltips', - dataElement: HeaderElements.ROTATE_LEFT_BUTTON, - img: this._convertPath('/assets/icons/general/rotate-left.svg'), - onClick: () => this._pageRotationService.addRotation(RotationTypes.LEFT), - }, - { - type: 'actionButton', - element: 'tooltips', - dataElement: HeaderElements.ROTATE_RIGHT_BUTTON, - img: this._convertPath('/assets/icons/general/rotate-right.svg'), - onClick: () => this._pageRotationService.addRotation(RotationTypes.RIGHT), - }, + rotateLeft, + rotateRight, applyRotation, discardRotation, divider, 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 98c44dc3e..cc630ae8a 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 @@ -14,6 +14,7 @@ import { dossiersServiceProvider } from '@services/entity-services/dossiers.serv 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'; export const filePreviewScreenProviders = [ FilterService, @@ -32,4 +33,5 @@ export const filePreviewScreenProviders = [ AnnotationProcessingService, FileDataService, dossiersServiceProvider, + ViewerHeaderConfigService, ]; 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 new file mode 100644 index 000000000..38bf0ec72 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/services/viewer-header-config.service.ts @@ -0,0 +1,153 @@ +import { ElementRef, Inject, Injectable } from '@angular/core'; +import { IHeaderElement, RotationTypes } from '@red/domain'; +import { HeaderElements } from '../shared/constants'; +import { TranslateService } from '@ngx-translate/core'; +import { PageRotationService } from './page-rotation.service'; +import { BASE_HREF } from '../../../tokens'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; +import { UserPreferenceService } from '@services/user-preference.service'; + +@Injectable() +export class ViewerHeaderConfigService { + constructor( + @Inject(BASE_HREF) private readonly _baseHref: string, + private readonly _translateService: TranslateService, + private readonly _pageRotationService: PageRotationService, + private readonly _userPreferenceService: UserPreferenceService, + ) {} + + get applyRotation(): IHeaderElement { + return { + type: 'customElement', + dataElement: HeaderElements.APPLY_ROTATION, + render: () => { + const paragraph = document.createElement('p'); + paragraph.innerText = this._translateService.instant('page-rotation.apply'); + paragraph.style.cssText = ` + font-size: 11px; + font-weight: 600; + color: #DD4D50; + cursor: pointer; + margin: 0 12px; + `; + paragraph.addEventListener('click', async () => { + await this._pageRotationService.applyRotation(); + }); + return paragraph; + }, + }; + } + + get discardRotation(): IHeaderElement { + return { + type: 'customElement', + dataElement: HeaderElements.DISCARD_ROTATION, + render: () => { + const paragraph = document.createElement('p'); + paragraph.innerText = this._translateService.instant('page-rotation.discard'); + paragraph.style.cssText = ` + font-size: 11px; + font-weight: 600; + color: #283241; + cursor: pointer; + opacity: 0.7; + `; + paragraph.addEventListener('click', () => { + this._pageRotationService.discardRotation(); + }); + return paragraph; + }, + }; + } + + get divider(): IHeaderElement { + return { + type: 'divider', + }; + } + + get rectangle(): IHeaderElement { + return { + type: 'toolGroupButton', + toolGroup: 'rectangleTools', + dataElement: HeaderElements.SHAPE_TOOL_GROUP_BUTTON, + img: this._convertPath('/assets/icons/general/rectangle.svg'), + title: 'annotation.rectangle', + }; + } + + get rotateLeft(): IHeaderElement { + return { + type: 'actionButton', + element: 'tooltips', + dataElement: HeaderElements.ROTATE_LEFT_BUTTON, + img: this._convertPath('/assets/icons/general/rotate-left.svg'), + onClick: () => this._pageRotationService.addRotation(RotationTypes.LEFT), + }; + } + + get rotateRight(): IHeaderElement { + return { + type: 'actionButton', + element: 'tooltips', + dataElement: HeaderElements.ROTATE_RIGHT_BUTTON, + img: this._convertPath('/assets/icons/general/rotate-right.svg'), + onClick: () => this._pageRotationService.addRotation(RotationTypes.RIGHT), + }; + } + + 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', + ); + } + + 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); + }, + }; + } + + closeCompare(closeCompareMode: () => Promise): IHeaderElement { + return { + type: 'actionButton', + element: 'closeCompare', + dataElement: HeaderElements.CLOSE_COMPARE_BUTTON, + img: this._convertPath('/assets/icons/general/pdftron-action-close-compare.svg'), + title: 'Leave Compare Mode', + onClick: async () => { + await closeCompareMode(); + }, + }; + } + + compare(compareFileInput: ElementRef): IHeaderElement { + return { + type: 'actionButton', + element: 'compare', + dataElement: HeaderElements.COMPARE_BUTTON, + img: this._convertPath('/assets/icons/general/pdftron-action-compare.svg'), + title: 'Compare', + onClick: () => compareFileInput.nativeElement.click(), + }; + } + + private _convertPath(path: string): string { + return this._baseHref + path; + } +}