[ADF-5339] ESCAPE should close opened dialog not the overlay viewer (#6696)

* don't close viewer if Escape was performed on opened dialog

* subscribe only in overlayMode

* tests

* lint

* move logic to method
This commit is contained in:
Cilibiu Bogdan
2021-02-19 18:59:55 +02:00
committed by GitHub
parent 75f011292e
commit 588db58b5d
2 changed files with 83 additions and 29 deletions

View File

@@ -28,10 +28,11 @@ import { ViewerMoreActionsComponent } from './viewer-more-actions.component';
import { ViewerOpenWithComponent } from './viewer-open-with.component';
import { ViewerSidebarComponent } from './viewer-sidebar.component';
import { ViewerToolbarComponent } from './viewer-toolbar.component';
import { Subscription } from 'rxjs';
import { fromEvent, Subject } from 'rxjs';
import { ViewUtilService } from '../services/view-util.service';
import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions';
import { filter } from 'rxjs/operators';
import { filter, skipWhile, takeUntil } from 'rxjs/operators';
import { MatDialog } from '@angular/material/dialog';
@Component({
selector: 'adf-viewer',
@@ -224,8 +225,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
private cacheBusterNumber;
private subscriptions: Subscription[] = [];
// Extensions that are supported by the Viewer without conversion
private extensions = {
image: ['png', 'jpg', 'jpeg', 'gif', 'bpm', 'svg'],
@@ -242,11 +241,16 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
media: ['video/mp4', 'video/webm', 'video/ogg', 'audio/mpeg', 'audio/mp3', 'audio/ogg', 'audio/wav']
};
private onDestroy$ = new Subject<boolean>();
private shouldCloseViewer = true;
private keyDown$ = fromEvent<KeyboardEvent>(document, 'keydown');
constructor(private apiService: AlfrescoApiService,
private viewUtilService: ViewUtilService,
private logService: LogService,
private extensionService: AppExtensionService,
private el: ElementRef) {
private el: ElementRef,
public dialog: MatDialog) {
viewUtilService.maxRetries = this.maxRetries;
}
@@ -255,23 +259,20 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
}
ngOnInit() {
this.subscriptions.push(
this.apiService.nodeUpdated.pipe(
filter((node) => node && node.id === this.nodeId && node.name !== this.fileName)
).subscribe((node) => this.onNodeUpdated(node))
);
this.apiService.nodeUpdated.pipe(
filter((node) => node && node.id === this.nodeId && node.name !== this.fileName),
takeUntil(this.onDestroy$)
).subscribe((node) => this.onNodeUpdated(node));
this.subscriptions.push(
this.viewUtilService.viewerTypeChange.subscribe((type: string) => {
this.viewerType = type;
})
);
this.subscriptions.push(
this.viewUtilService.urlFileContentChange.subscribe((content: string) => {
this.urlFileContent = content;
})
);
this.viewUtilService.viewerTypeChange.pipe(takeUntil(this.onDestroy$)).subscribe((type: string) => {
this.viewerType = type;
});
this.viewUtilService.urlFileContentChange.pipe(takeUntil(this.onDestroy$)).subscribe((content: string) => {
this.urlFileContent = content;
});
this.closeOverlayManager();
this.loadExtensions();
}
@@ -284,8 +285,8 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
}
ngOnDestroy() {
this.subscriptions.forEach((subscription) => subscription.unsubscribe());
this.subscriptions = [];
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
private onNodeUpdated(node: Node) {
@@ -591,11 +592,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
const key = event.keyCode;
// Esc
if (key === 27 && this.overlayMode) { // esc
this.close();
}
// Left arrow
if (key === 37 && this.canNavigateBefore) {
event.preventDefault();
@@ -682,6 +678,30 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
this.viewerType = 'unknown';
}
private closeOverlayManager() {
this.dialog.afterOpened.pipe(
skipWhile(() => !this.overlayMode),
takeUntil(this.onDestroy$)
).subscribe(() => this.shouldCloseViewer = false);
this.dialog.afterAllClosed.pipe(
skipWhile(() => !this.overlayMode),
takeUntil(this.onDestroy$)
).subscribe(() => this.shouldCloseViewer = true);
this.keyDown$.pipe(
skipWhile(() => !this.overlayMode),
filter((e: KeyboardEvent) => e.keyCode === 27),
takeUntil(this.onDestroy$)
).subscribe( (event: KeyboardEvent) => {
event.preventDefault();
if (this.shouldCloseViewer) {
this.close();
}
});
}
private generateCacheBusterNumber() {
this.cacheBusterNumber = Date.now();
}