feat(document): changes to pdf viewer (DEV-1149) (#789)

* move tool bar to the bottom

* mat-menu, downloading document with org name

* fullscreen function

* style

* expanding input field

* update filename after replacement

src/app/workspace/resource/representation/document/document.component.html

@@ -1,21 +1,34 @@
 <div class="pdf-container">
-    <div class="action horizontal top overlay">
+    <div class="action horizontal bottom overlay">
         <!-- caption -->
-        <span class="caption mat-caption">
-            <input
-                #queryInp
-                type="text"
-                id="searchbox"
-                name="searchbox"
-                class="pdf-searchbox"
-                placeholder="Search in pdf..."
-                [value]="pdfQuery"
-                [disabled]="failedToLoad"
-                (input)="searchQueryChanged($event.target.value)"
-                (keyup.enter)="searchQueryChanged(queryInp.value)"
-            />
+        <span>
+            <button mat-icon-button [matMenuTriggerFor]="more">
+                <mat-icon>more_vert</mat-icon>
+            </button>
+            <mat-menu #more="matMenu">
+                <a mat-menu-item (click)="downloadDocument(src.fileValue.fileUrl)">
+                    Download file
+                </a>
+                <button mat-menu-item (click)="openReplaceFileDialog()">
+                    Replace file
+                </button>
+            </mat-menu>
         </span>
-        <span class="fill-remaining-space"></span>
+
+        <!-- input field for searching through document -->
+        <input matInput
+               #queryInp
+               type="text"
+               id="searchbox"
+               name="searchbox"
+               class="pdf-searchbox fill-remaining-space"
+               placeholder="Search in pdf..."
+               [value]="pdfQuery"
+               [disabled]="failedToLoad"
+               (input)="searchQueryChanged($event.target.value)"
+               (keyup.enter)="searchQueryChanged(queryInp.value)"
+        />
+
         <!-- image action tools e.g. zoom, rotate and flip -->
         <span>
             <!-- zoom buttons -->
@@ -28,18 +41,25 @@
             <button mat-icon-button id="DSP_PDF_ZOOM_IN" matTooltip="Zoom in" (click)="zoomFactor = zoomFactor + 0.2" [disabled]="failedToLoad">
                 <mat-icon>add_circle_outline</mat-icon>
             </button>
-            <button mat-icon-button id="DSP_PDF_REPLACE_FILE" class="replace-file" matTooltip="Replace PDF file" (click)="openReplaceFileDialog()">
-                <mat-icon>cloud_upload</mat-icon>
+        </span>
+
+        <!-- empty placeholders to center the zoom buttons -->
+        <span class="fill-remaining-space"></span>
+        <span class="empty-space"></span>
+        <span class="empty-space"></span>
+        <span class="empty-space"></span>
+
+        <!-- full screen button -->
+        <span>
+            <button mat-icon-button id="DSP_PDF_FULL_SCREEN" matTooltip="Fullscreen" (click)="openFullscreen()" [disabled]="failedToLoad">
+                <mat-icon>fullscreen</mat-icon>
             </button>
-            <a [href]="src.fileValue.fileUrl" download mat-icon-button id="DSP_PDF_DOWNLOAD" matTooltip="Open pdf in new tab">
-                <mat-icon>launch</mat-icon>
-            </a>
         </span>
     </div>
     <!-- in case of an error -->
     <app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'document'" *ngIf="failedToLoad"></app-status>
 
-    <pdf-viewer [src]="src.fileValue.fileUrl" [original-size]="false" [autoresize]="true" [show-all]="true"
+    <pdf-viewer class="pdf-viewer" [src]="src.fileValue.fileUrl" [original-size]="false" [autoresize]="true" [show-all]="true"
         [show-borders]="true" [zoom]="zoomFactor" [zoom-scale]="'page-width'">
     </pdf-viewer>
 </div>

src/app/workspace/resource/representation/document/document.component.scss

@@ -36,7 +36,8 @@ $osd-height: 460px;
   .pdf-searchbox {
     border-radius: $border-radius;
     border: none;
-    padding: 4px;
+    padding: 4px 12px;
+    margin: 4px;
 
     &:active {
       border: none;

src/app/workspace/resource/representation/document/document.component.ts

@@ -19,6 +19,8 @@ import { ErrorHandlerService } from 'src/app/main/services/error-handler.service
 import { EmitEvent, Events, UpdatedFileEventValue, ValueOperationEventService } from '../../services/value-operation-event.service';
 import { FileRepresentation } from '../file-representation';
 import { RepresentationService } from '../representation.service';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
     selector: 'app-document',
@@ -35,21 +37,29 @@ export class DocumentComponent implements OnInit, AfterViewInit {
 
     @ViewChild(PdfViewerComponent) private _pdfComponent: PdfViewerComponent;
 
+    originalFilename: string;
+
     zoomFactor = 1.0;
 
     pdfQuery = '';
 
     failedToLoad = false;
 
+    elem: any;
+
     constructor(
+        @Inject(DOCUMENT) private document: any,
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
+        private readonly _http: HttpClient,
         private _dialog: MatDialog,
         private _errorHandler: ErrorHandlerService,
         private _rs: RepresentationService,
         private _valueOperationEventService: ValueOperationEventService
     ) { }
 
     ngOnInit(): void {
+        this.elem = document.getElementsByClassName('pdf-viewer')[0];
+        this._getOriginalFilename();
         this.failedToLoad = !this._rs.doesFileExist(this.src.fileValue.fileUrl);
     }
 
@@ -72,6 +82,32 @@ export class DocumentComponent implements OnInit, AfterViewInit {
         }
     }
 
+    async downloadDocument(url: string) {
+        try {
+            const res = await this._http.get(url, { responseType: 'blob' }).toPromise();
+            this.downloadFile(res);
+        } catch (e) {
+            this._errorHandler.showMessage(e);
+        }
+    }
+
+    downloadFile(data) {
+        const url = window.URL.createObjectURL(data);
+        const e = document.createElement('a');
+        e.href = url;
+
+        // set filename
+        if (this.originalFilename === undefined) {
+            e.download = url.substr(url.lastIndexOf('/') + 1);
+        } else {
+            e.download = this.originalFilename;
+        }
+
+        document.body.appendChild(e);
+        e.click();
+        document.body.removeChild(e);
+    }
+
     openReplaceFileDialog(){
         const propId = this.parentResource.properties[Constants.HasDocumentFileValue][0].id;
 
@@ -96,6 +132,36 @@ export class DocumentComponent implements OnInit, AfterViewInit {
         });
     }
 
+    openFullscreen() {
+        if (this.elem.requestFullscreen) {
+            this.elem.requestFullscreen();
+        } else if (this.elem.mozRequestFullScreen) {
+            // firefox
+            this.elem.mozRequestFullScreen();
+        } else if (this.elem.webkitRequestFullscreen) {
+            // chrome, safari and opera
+            this.elem.webkitRequestFullscreen();
+        } else if (this.elem.msRequestFullscreen) {
+            // edge, ie
+            this.elem.msRequestFullscreen();
+        }
+    }
+
+    private _getOriginalFilename() {
+        const requestOptions = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+            withCredentials: true
+        };
+
+        const pathToJson = this.src.fileValue.fileUrl.substring(0, this.src.fileValue.fileUrl.lastIndexOf('/')) + '/knora.json';
+
+        this._http.get(pathToJson, requestOptions).subscribe(
+            res => {
+                this.originalFilename = res['originalFilename'];
+            }
+        );
+    }
+
     private _replaceFile(file: UpdateFileValue) {
         const updateRes = new UpdateResource();
         updateRes.id = this.parentResource.id;
@@ -113,6 +179,8 @@ export class DocumentComponent implements OnInit, AfterViewInit {
                 this.src.fileValue.strval = (res2.properties[Constants.HasDocumentFileValue][0] as ReadDocumentFileValue).strval;
                 this.src.fileValue.valueCreationDate = (res2.properties[Constants.HasDocumentFileValue][0] as ReadDocumentFileValue).valueCreationDate;
 
+                this._getOriginalFilename();
+
                 this.zoomFactor = 1.0;
                 this.pdfQuery = '';