[ADF-1412] Viewer enhancements (#2873)

* collection navigation support for Viewer

* code cleanup

* full screen mode support

* keyboard shortcuts

* zooming scale label

* layout fixes

* test fixes

* image toolbar with basic tranformations

* test fixes

* test fixes

lib/core/viewer/components/viewer.component.ts

@@ -17,7 +17,7 @@
 
 import { Location } from '@angular/common';
 import {
-    Component, ContentChild, EventEmitter, HostListener,
+    Component, ContentChild, EventEmitter, HostListener, ElementRef,
     Input, OnChanges, Output, SimpleChanges, TemplateRef, ViewEncapsulation
 } from '@angular/core';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
@@ -90,6 +90,18 @@ export class ViewerComponent implements OnChanges {
     @Input()
     allowShare = false;
 
+    @Input()
+    allowFullScreen = true;
+
+    @Input()
+    allowNavigate = false;
+
+    @Input()
+    canNavigateBefore = true;
+
+    @Input()
+    canNavigateNext = true;
+
     @Input()
     allowSidebar = false;
 
@@ -129,6 +141,12 @@ export class ViewerComponent implements OnChanges {
     @Output()
     extensionChange = new EventEmitter<string>();
 
+    @Output()
+    navigateBefore = new EventEmitter();
+
+    @Output()
+    navigateNext = new EventEmitter();
+
     viewerType = 'unknown';
     isLoading = false;
     node: MinimalNodeEntryEntity;
@@ -143,7 +161,7 @@ export class ViewerComponent implements OnChanges {
     private extensions = {
         image: ['png', 'jpg', 'jpeg', 'gif', 'bpm'],
         media: ['wav', 'mp4', 'mp3', 'webm', 'ogg'],
-        text: ['txt', 'xml', 'js', 'html', 'json'],
+        text: ['txt', 'xml', 'js', 'html', 'json', 'ts'],
         pdf: ['pdf']
     };
 
@@ -155,7 +173,8 @@ export class ViewerComponent implements OnChanges {
     constructor(private apiService: AlfrescoApiService,
                 private logService: LogService,
                 private location: Location,
-                private renditionService: RenditionsService) {
+                private renditionService: RenditionsService,
+                private el: ElementRef) {
     }
 
     isSourceDefined(): boolean {
@@ -354,6 +373,14 @@ export class ViewerComponent implements OnChanges {
         }
     }
 
+    onNavigateBeforeClick() {
+        this.navigateBefore.next();
+    }
+
+    onNavigateNextClick() {
+        this.navigateNext.next();
+    }
+
     /**
      * close the viewer
      */
@@ -409,15 +436,35 @@ export class ViewerComponent implements OnChanges {
     }
 
     /**
-     * Litener Keyboard Event
+     * Keyboard event listener
      * @param {KeyboardEvent} event
      */
-    @HostListener('document:keydown', ['$event'])
+    @HostListener('document:keyup', ['$event'])
     handleKeyboardEvent(event: KeyboardEvent) {
-        let key = event.keyCode;
+        const key = event.keyCode;
+
+        // Esc
         if (key === 27 && this.overlayMode) { // esc
             this.close();
         }
+
+        // Left arrow
+        if (key === 37 && this.canNavigateBefore) {
+            event.preventDefault();
+            this.onNavigateBeforeClick();
+        }
+
+        // Right arrow
+        if (key === 39 && this.canNavigateNext) {
+            event.preventDefault();
+            this.onNavigateNextClick();
+        }
+
+        // Ctrl+F
+        if (key === 70 && event.ctrlKey) {
+            event.preventDefault();
+            this.enterFullScreen();
+        }
     }
 
     downloadContent() {
@@ -453,6 +500,26 @@ export class ViewerComponent implements OnChanges {
         }
     }
 
+    /**
+     * Triggers full screen mode with a main content area displayed.
+     */
+    enterFullScreen(): void {
+        if (this.allowFullScreen) {
+            const container = this.el.nativeElement.querySelector('.adf-viewer__fullscreen-container');
+            if (container) {
+                if (container.requestFullscreen) {
+                    container.requestFullscreen();
+                } else if (container.webkitRequestFullscreen) {
+                    container.webkitRequestFullscreen();
+                } else if (container.mozRequestFullScreen) {
+                    container.mozRequestFullScreen();
+                } else if (container.msRequestFullscreen) {
+                    container.msRequestFullscreen();
+                }
+            }
+        }
+    }
+
     private async displayNodeRendition(nodeId: string) {
         this.isLoading = true;