From 036b921977e33a7f96afc11d4d02080cdd88220e Mon Sep 17 00:00:00 2001 From: Nicoleta Panaghiu Date: Fri, 29 Nov 2024 13:11:51 +0200 Subject: [PATCH] RED-10563: fixed key actions not prevented when input is focused. --- .../annotations-list.component.ts | 3 ++- .../file-header/file-header.component.ts | 16 +++++++++------- .../file-workload/file-workload.component.ts | 10 +++------- .../services/document-viewer.service.ts | 5 +++-- apps/red-ui/src/app/utils/functions.ts | 10 +++++++++- 5 files changed, 26 insertions(+), 18 deletions(-) diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts index 0ed6fb918..4dd43e3db 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts @@ -15,6 +15,7 @@ import { NgForOf, NgIf } from '@angular/common'; import { HighlightsSeparatorComponent } from '../highlights-separator/highlights-separator.component'; import { AnnotationWrapperComponent } from '../annotation-wrapper/annotation-wrapper.component'; import { AnnotationReferencesListComponent } from '../annotation-references-list/annotation-references-list.component'; +import { isTargetInput } from '@utils/functions'; @Component({ selector: 'redaction-annotations-list', @@ -53,7 +54,7 @@ export class AnnotationsListComponent extends HasScrollbarDirective { console.log('Selected Annotation:', annotation); } - if (($event?.target as IqserEventTarget)?.localName === 'input') { + if (isTargetInput($event)) { return; } diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts index c62b29a40..6c137a79f 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts @@ -51,6 +51,7 @@ import { ALL_HOTKEYS } from '../../utils/constants'; import { AnnotationDrawService } from '../../../pdf-viewer/services/annotation-draw.service'; import { FileManagementService } from '@services/files/file-management.service'; import { MatDialog } from '@angular/material/dialog'; +import { isTargetInput, isTargetTextArea } from '@utils/functions'; @Component({ selector: 'redaction-file-header', @@ -208,19 +209,20 @@ export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnD this._changeRef.markForCheck(); } + if ($event.key === 'F5') { + window.location.reload(); + } + + if (isTargetInput($event) || isTargetTextArea($event)) { + return; + } + if (!$event.ctrlKey && !$event.metaKey && ['f', 'F'].includes($event.key)) { - // if you type in an input, don't toggle full-screen - if ($event.target instanceof HTMLInputElement || $event.target instanceof HTMLTextAreaElement) { - return; - } this.toggleFullScreen(); return; } if (['h', 'H'].includes($event.key)) { - if ($event.target instanceof HTMLInputElement || $event.target instanceof HTMLTextAreaElement) { - return; - } this._ngZone.run(() => { window.focus(); this._helpModeService.activateHelpMode(false); diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts index 0a0db6df7..1ddd1ce2f 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts @@ -58,7 +58,7 @@ import { PageExclusionComponent } from '../page-exclusion/page-exclusion.compone import { PagesComponent } from '../pages/pages.component'; import { ReadonlyBannerComponent } from '../readonly-banner/readonly-banner.component'; import { DocumentInfoComponent } from '../document-info/document-info.component'; -import { getLast } from '@utils/functions'; +import { getLast, isTargetInput } from '@utils/functions'; const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape']; const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; @@ -237,11 +237,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On @HostListener('window:keyup', ['$event']) handleKeyEvent($event: KeyboardEvent): void { - if ( - !ALL_HOTKEY_ARRAY.includes($event.key) || - this._dialog.openDialogs.length || - ($event.target as IqserEventTarget).localName === 'input' - ) { + if (!ALL_HOTKEY_ARRAY.includes($event.key) || this._dialog.openDialogs.length || isTargetInput($event)) { return; } @@ -321,7 +317,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On } preventKeyDefault($event: KeyboardEvent): void { - if (COMMAND_KEY_ARRAY.includes($event.key) && !(($event.target as any).localName === 'input')) { + if (COMMAND_KEY_ARRAY.includes($event.key) && !isTargetInput($event)) { $event.preventDefault(); } } diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/document-viewer.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/document-viewer.service.ts index 88fbff253..a7b6be744 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/document-viewer.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/document-viewer.service.ts @@ -14,6 +14,7 @@ import { PdfViewer } from './pdf-viewer.service'; import Color = Core.Annotations.Color; import DocumentViewer = Core.DocumentViewer; import Quad = Core.Math.Quad; +import { isTargetInput } from '@utils/functions'; @Injectable() export class REDDocumentViewer { @@ -71,12 +72,12 @@ export class REDDocumentViewer { return fromEvent(this.#document, 'keyUp').pipe( tap(stopAndPreventIfNotAllowed), filter($event => { - if (($event.target as HTMLElement)?.tagName?.toLowerCase() === 'input') { + if (isTargetInput($event)) { if ($event.key === 'Escape') { return true; } } - return ($event.target as HTMLElement)?.tagName?.toLowerCase() !== 'input'; + return isTargetInput($event); }), filter($event => $event.key.startsWith('Arrow') || ['f', 'h', 'H', 'Escape', 'Shift'].includes($event.key)), tap(stopAndPrevent), diff --git a/apps/red-ui/src/app/utils/functions.ts b/apps/red-ui/src/app/utils/functions.ts index 0aca86784..e06f64098 100644 --- a/apps/red-ui/src/app/utils/functions.ts +++ b/apps/red-ui/src/app/utils/functions.ts @@ -1,5 +1,5 @@ import { ITrackable } from '@iqser/common-ui'; -import type { List } from '@iqser/common-ui/lib/utils'; +import type { IqserEventTarget, List } from '@iqser/common-ui/lib/utils'; import type { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { Dayjs } from 'dayjs'; @@ -143,3 +143,11 @@ export function urlFileId() { const fileId = splitUrl[splitUrl.length - 1]; return fileId.split('?')[0]; } + +export function isTargetInput(event: Event) { + return (event?.target as IqserEventTarget)?.localName === 'input'; +} + +export function isTargetTextArea(event: Event) { + return (event?.target as IqserEventTarget)?.localName === 'textarea'; +}