Viewer enhancements and Viewer Dialog prototype (#2200)

* viewer dialog scaffold * toolbar divider component * simple error screen * material module and tooltips * show file name in the title * improved settings, simple image viewer * flex-based image viewer, minor fixes * ability to switch between viewers * single viewer for images * remove MDL from the Viewer component * remove hardcoded demo shell layout remove harcoded assumptions on "header" and "main" elements * rework text viewer, remove MDL dependency * upgrade 'unknown format' view, remove MDL * simplify media viewer layout * simplify image viewer * clean pdf viewer * migrate pdf viewer styles to scss * rewrite pdf viewer host styles in scss * fix unit tests and cleanup layout * file viewer service * viewer dialog supports downloads if url provided
2025-07-31 17:38:48 +00:00 · 2017-08-11 10:15:13 +01:00
parent 60b41e61f7
commit 9da61ddba7
43 changed files with 1139 additions and 965 deletions
--- a/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.ts
@@ -0,0 +1,81 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+
+import { ViewerDialogSettings } from './viewer-dialog.settings';
+
+@Component({
+    selector: 'adf-viewer-dialog',
+    templateUrl: 'viewer-dialog.component.html',
+    styleUrls: ['viewer-dialog.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'adf-viewer-dialog' }
+})
+export class ViewerDialogComponent implements OnInit {
+
+    fileName: string = 'Unknown file';
+    fileUrl: string = null;
+    fileMimeType: string = null;
+    downloadUrl: string = null;
+
+    unknownFormatIcon = 'wifi_tethering';
+    unknownFormatText = 'Document preview could not be loaded.';
+
+    viewerType: string = null;
+
+    constructor(private dialogRef: MdDialogRef<ViewerDialogComponent>,
+                @Inject(MD_DIALOG_DATA) settings: ViewerDialogSettings) {
+        this.fileUrl = settings.fileUrl;
+        this.fileName = settings.fileName;
+        this.fileMimeType = settings.fileMimeType;
+        this.downloadUrl = settings.downloadUrl;
+    }
+
+    ngOnInit() {
+        this.viewerType = this.detectViewerType(this.fileMimeType);
+    }
+
+    private detectViewerType(mimeType: string) {
+        if (mimeType) {
+            mimeType = mimeType.toLowerCase();
+            if (mimeType.startsWith('image/')) {
+                return 'image';
+            }
+        }
+        return 'unknown';
+    }
+
+    download() {
+        if (this.downloadUrl && this.fileName) {
+            const link = document.createElement('a');
+
+            link.style.display = 'none';
+            link.download = this.fileName;
+            link.href = this.downloadUrl;
+
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+
+    close() {
+        this.dialogRef.close(true);
+    }
+}