Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Tooltips service

Browse Source
This commit is contained in:
Adina Țeudan 2022-03-25 17:02:26 +02:00
parent f8922bfbdb
commit d9478d25ff
4 changed files with 73 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
apps/red-ui/src/app/modules/file-preview/components/pdf-viewer/pdf-viewer.component.ts
View File

@ -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(
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));
}
}

2
apps/red-ui/src/app/modules/file-preview/file-preview-providers.ts
View File

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

49
apps/red-ui/src/app/modules/file-preview/services/tooltips.service.ts Normal file
View File

@ -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;
}
}

52
apps/red-ui/src/app/modules/file-preview/services/viewer-header-config.service.ts
View File

@ -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<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',