mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[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:
@@ -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();
|
||||
}
|
||||
|
Reference in New Issue
Block a user