From bb53844f926e57494209f785e824062ec78f59d7 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 11 Aug 2017 10:15:13 +0100 Subject: [PATCH] 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 --- .../app/components/files/files.component.html | 52 ++-- .../app/components/files/files.component.ts | 25 +- .../toolbar/toolbar-divider.component.ts | 35 +++ .../src/components/toolbar/toolbar.md | 13 + .../src/components/toolbar/toolbar.module.ts | 7 +- .../ng2-alfresco-viewer/index.js.map | 1 - ng2-components/ng2-alfresco-viewer/index.ts | 50 ++-- .../src/components/imgViewer.component.css | 40 --- .../src/components/imgViewer.component.html | 8 +- .../src/components/imgViewer.component.scss | 13 + .../src/components/imgViewer.component.ts | 10 +- .../src/components/mediaPlayer.component.css | 48 ---- .../src/components/mediaPlayer.component.html | 13 +- .../src/components/mediaPlayer.component.scss | 7 + .../src/components/mediaPlayer.component.ts | 10 +- .../notSupportedFormat.component.css | 48 ---- .../notSupportedFormat.component.html | 82 +++--- .../notSupportedFormat.component.scss | 5 + .../notSupportedFormat.component.spec.ts | 58 ++-- .../notSupportedFormat.component.ts | 10 +- .../src/components/pdfViewer.component.css | 96 ------- .../src/components/pdfViewer.component.html | 62 ++-- .../src/components/pdfViewer.component.scss | 91 ++++++ .../components/pdfViewer.component.spec.ts | 30 +- .../src/components/pdfViewer.component.ts | 19 +- .../components/pdfViewerHost.component.css | 264 ------------------ .../components/pdfViewerHost.component.scss | 250 +++++++++++++++++ .../src/components/txtViewer.component.css | 11 - .../src/components/txtViewer.component.html | 9 +- .../src/components/txtViewer.component.scss | 7 + .../components/txtViewer.component.spec.ts | 4 +- .../src/components/txtViewer.component.ts | 10 +- .../components/viewer-dialog.component.html | 66 +++++ .../components/viewer-dialog.component.scss | 36 +++ .../src/components/viewer-dialog.component.ts | 81 ++++++ .../src/components/viewer-dialog.settings.ts | 23 ++ .../src/components/viewer.component.css | 63 ----- .../src/components/viewer.component.html | 123 ++++---- .../src/components/viewer.component.scss | 69 +++++ .../src/components/viewer.component.spec.ts | 76 ++--- .../src/components/viewer.component.ts | 76 +---- .../src/material.module.ts | 47 ++++ .../src/services/viewer.service.ts | 56 ++++ 43 files changed, 1139 insertions(+), 965 deletions(-) create mode 100644 ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar-divider.component.ts delete mode 100644 ng2-components/ng2-alfresco-viewer/index.js.map delete mode 100644 ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.css create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.scss delete mode 100644 ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.css create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.scss delete mode 100644 ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.css create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.scss delete mode 100644 ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.css create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.scss delete mode 100644 ng2-components/ng2-alfresco-viewer/src/components/pdfViewerHost.component.css create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/pdfViewerHost.component.scss delete mode 100644 ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.css create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.scss create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.html create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.scss create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.ts create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.settings.ts delete mode 100644 ng2-components/ng2-alfresco-viewer/src/components/viewer.component.css create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/viewer.component.scss create mode 100644 ng2-components/ng2-alfresco-viewer/src/material.module.ts create mode 100644 ng2-components/ng2-alfresco-viewer/src/services/viewer.service.ts diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html index e178531592..913cad89f8 100644 --- a/demo-shell-ng2/app/components/files/files.component.html +++ b/demo-shell-ng2/app/components/files/files.component.html @@ -29,6 +29,8 @@ + + + + @@ -210,6 +214,14 @@
+
+ Use inline viewer (no overlay) +
+ +
+ Use File Viewer dialog +
+
Multiselect (with checkboxes)
@@ -291,26 +303,28 @@ -
- +
+ + - - - - - + + + + + - - - - - - - - - - + + + +
+ + +
+
diff --git a/demo-shell-ng2/app/components/files/files.component.ts b/demo-shell-ng2/app/components/files/files.component.ts index beb6bf1579..16d7a92f54 100644 --- a/demo-shell-ng2/app/components/files/files.component.ts +++ b/demo-shell-ng2/app/components/files/files.component.ts @@ -28,6 +28,8 @@ import { DocumentListComponent, PermissionStyleModel } from 'ng2-alfresco-docume import { CreateFolderDialogComponent } from '../../dialogs/create-folder.dialog'; import { DownloadZipDialogComponent } from './../../dialogs/download-zip.dialog'; +import { ViewerDialogComponent, ViewerDialogSettings, ViewerService } from 'ng2-alfresco-viewer'; + @Component({ selector: 'adf-files-component', templateUrl: './files.component.html', @@ -39,11 +41,13 @@ export class FilesComponent implements OnInit { errorMessage: string = null; fileNodeId: any; - fileShowed: boolean = false; + showViewer: boolean = false; useCustomToolbar = true; toolbarColor = 'default'; useDropdownBreadcrumb = false; + useViewerDialog = true; + useInlineViewer = false; selectionModes = [ { value: 'none', viewValue: 'None' }, @@ -90,16 +94,27 @@ export class FilesComponent implements OnInit { private contentService: AlfrescoContentService, private dialog: MdDialog, private translateService: AlfrescoTranslationService, + private viewerService: ViewerService, private router: Router, @Optional() private route: ActivatedRoute) { } showFile(event) { - if (event.value.entry.isFile) { - this.fileNodeId = event.value.entry.id; - this.fileShowed = true; + if (this.useViewerDialog) { + if (event.value.entry.isFile) { + this.viewerService + .showViewerForNode(event.value.entry) + .then(result => { + console.log(result); + }); + } } else { - this.fileShowed = false; + if (event.value.entry.isFile) { + this.fileNodeId = event.value.entry.id; + this.showViewer = true; + } else { + this.showViewer = false; + } } } diff --git a/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar-divider.component.ts b/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar-divider.component.ts new file mode 100644 index 0000000000..a1627b5c8b --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar-divider.component.ts @@ -0,0 +1,35 @@ +/*! + * @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, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'adf-toolbar-divider', + template: '
', + host: { 'class': 'adf-toolbar-divider' }, + styles: [` + .adf-toolbar-divider > div { + height: 24px; + width: 1px; + background: rgba(0, 0, 0, 0.26); + margin-left: 5px; + margin-right: 5px; + } + `], + encapsulation: ViewEncapsulation.None +}) +export class ToolbarDividerComponent {} diff --git a/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.md b/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.md index 703e86d693..663661c2e6 100644 --- a/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.md +++ b/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.md @@ -41,6 +41,19 @@ The toolbar should now look similar to the following: ![](docs/adf-toolbar-02.png) +## Divider + +You can divide groups of elements with a visual separator ``: + +```html + + + + + + +``` + ## Dropdown menu You can use the following example to create a dropdown menu: diff --git a/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.module.ts b/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.module.ts index fd2af1f57e..da68c818ee 100644 --- a/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.module.ts +++ b/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.module.ts @@ -19,6 +19,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { MdToolbarModule } from '@angular/material'; +import { ToolbarDividerComponent } from './toolbar-divider.component'; import { ToolbarTitleComponent } from './toolbar-title.component'; import { ToolbarComponent } from './toolbar.component'; @@ -29,12 +30,14 @@ import { ToolbarComponent } from './toolbar.component'; ], declarations: [ ToolbarComponent, - ToolbarTitleComponent + ToolbarTitleComponent, + ToolbarDividerComponent ], exports: [ MdToolbarModule, ToolbarComponent, - ToolbarTitleComponent + ToolbarTitleComponent, + ToolbarDividerComponent ] }) export class ToolbarModule {} diff --git a/ng2-components/ng2-alfresco-viewer/index.js.map b/ng2-components/ng2-alfresco-viewer/index.js.map deleted file mode 100644 index 521c7810bf..0000000000 --- a/ng2-components/ng2-alfresco-viewer/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;;;;;AAWH,sCAA8D;AAC9D,uDAA+C;AAE/C,sEAAoE;AACpE,oFAAiF;AACjF,4EAA0E;AAC1E,gFAA8E;AAC9E,8FAAmF;AACnF,4EAA0E;AAC1E,0FAAuF;AAEvF,uDAAkD;AAClD,6DAAwD;AACxD,0DAAqD;AACrD,4DAAuD;AACvD,mEAA8D;AAC9D,0DAAqD;AAExC,QAAA,iBAAiB,GAAU;IACpC,kCAAe;IACf,wCAAkB;IAClB,4CAAoB;IACpB,iDAAkB;IAClB,wCAAkB;IAClB,qDAAwB;CAC3B,CAAC;AAEW,QAAA,gBAAgB,GAAU;IACnC,iDAAsB;CACzB,CAAC;AAgBF,IAAa,YAAY;IAAzB;IASA,CAAC;IARU,oBAAO,GAAd;QACI,MAAM,CAAC;YACH,QAAQ,EAAE,cAAY;YACtB,SAAS,EACF,wBAAgB,QACtB;SACJ,CAAC;IACN,CAAC;IACL,mBAAC;AAAD,CAAC,AATD,IASC;AATY,YAAY;IAdxB,eAAQ,CAAC;QACN,OAAO,EAAE;YACL,8BAAU;SACb;QACD,YAAY,EACL,yBAAiB,QACvB;QACD,SAAS,EACF,wBAAgB,QACtB;QACD,OAAO,EACA,yBAAiB,QACvB;KACJ,CAAC;GACW,YAAY,CASxB;AATY,oCAAY"} \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-viewer/index.ts b/ng2-components/ng2-alfresco-viewer/index.ts index 7f1cd5652c..0a2b39c845 100644 --- a/ng2-components/ng2-alfresco-viewer/index.ts +++ b/ng2-components/ng2-alfresco-viewer/index.ts @@ -15,35 +15,27 @@ * limitations under the License. */ -/** - * ng2-alfresco-viewer, provide components to view files. - * - * Components provided: - * - * - * - */ - import { ModuleWithProviders, NgModule } from '@angular/core'; import { CoreModule } from 'ng2-alfresco-core'; -import { MdButtonModule, MdIconModule, MdProgressSpinnerModule } from '@angular/material'; +import { MaterialModule } from './src/material.module'; + +export { ViewerComponent } from './src/components/viewer.component'; import { ImgViewerComponent } from './src/components/imgViewer.component'; import { MediaPlayerComponent } from './src/components/mediaPlayer.component'; import { NotSupportedFormatComponent } from './src/components/notSupportedFormat.component'; import { PdfViewerComponent } from './src/components/pdfViewer.component'; import { TxtViewerComponent } from './src/components/txtViewer.component'; +import { ViewerDialogComponent } from './src/components/viewer-dialog.component'; import { ViewerComponent } from './src/components/viewer.component'; import { ExtensionViewerDirective } from './src/directives/extension-viewer.directive'; -import { RenderingQueueServices } from './src/services/rendering-queue.services'; -export * from './src/components/viewer.component'; -export * from './src/services/rendering-queue.services'; -export * from './src/components/imgViewer.component'; -export * from './src/components/mediaPlayer.component'; -export * from './src/components/notSupportedFormat.component'; -export * from './src/components/pdfViewer.component'; -export * from './src/components/txtViewer.component'; +import { RenderingQueueServices } from './src/services/rendering-queue.services'; +import { ViewerService } from './src/services/viewer.service'; + +export { ViewerDialogComponent } from './src/components/viewer-dialog.component'; +export { ViewerDialogSettings } from './src/components/viewer-dialog.settings'; +export { ViewerService } from './src/services/viewer.service'; export const VIEWER_DIRECTIVES: any[] = [ ViewerComponent, @@ -52,36 +44,38 @@ export const VIEWER_DIRECTIVES: any[] = [ MediaPlayerComponent, NotSupportedFormatComponent, PdfViewerComponent, - ExtensionViewerDirective -]; - -export const VIEWER_PROVIDERS: any[] = [ - RenderingQueueServices + ExtensionViewerDirective, + ViewerDialogComponent ]; @NgModule({ imports: [ CoreModule, - MdIconModule, - MdButtonModule, - MdProgressSpinnerModule + MaterialModule ], declarations: [ ...VIEWER_DIRECTIVES ], providers: [ - ...VIEWER_PROVIDERS + RenderingQueueServices, + ViewerService ], exports: [ ...VIEWER_DIRECTIVES + ], + entryComponents: [ + ViewerDialogComponent ] }) export class ViewerModule { + /** @deprecated in 1.8.0 */ static forRoot(): ModuleWithProviders { + console.log('ViewerModule.forRoot is deprecated and will be removed in future versions'); return { ngModule: ViewerModule, providers: [ - ...VIEWER_PROVIDERS + RenderingQueueServices, + ViewerService ] }; } diff --git a/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.css b/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.css deleted file mode 100644 index 4681524569..0000000000 --- a/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.css +++ /dev/null @@ -1,40 +0,0 @@ -.viewer-image-row { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - justify-content: center; - - -webkit-box-align: center; - -moz-box-align: center; - box-align: center; - align-items: center; -} - -.viewer-image-cell { - -webkit-box-flex: 1; - -moz-box-flex: 1; - box-flex: 1; - -webkit-flex: 1 1 auto; - flex: 1 1 auto; - - padding: 10px; - margin: 10px; - - text-align: center; -} - -.viewer-image { - height: 80vh; - max-width:100%; -} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.html b/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.html index 2a65bf5dac..f11c0bc495 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.html @@ -1,7 +1,3 @@ -
-
-
- -
-
+
+
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.scss b/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.scss new file mode 100644 index 0000000000..b62e87f509 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.scss @@ -0,0 +1,13 @@ +.adf-img-viewer { + .image-container { + display: flex; + flex: 1; + text-align: center; + flex-direction: row; + justify-content: center; + height: 90vh; + img { + object-fit: contain; + } + } +} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts index a491b3d7fa..378d8e6a23 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts @@ -15,15 +15,15 @@ * limitations under the License. */ -/* tslint:disable:component-selector */ - -import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { ContentService } from 'ng2-alfresco-core'; @Component({ - selector: 'img-viewer', + selector: 'adf-img-viewer', templateUrl: './imgViewer.component.html', - styleUrls: ['./imgViewer.component.css'] + styleUrls: ['./imgViewer.component.scss'], + host: { 'class': 'adf-img-viewer' }, + encapsulation: ViewEncapsulation.None }) export class ImgViewerComponent implements OnChanges { diff --git a/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.css b/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.css deleted file mode 100644 index 9a7c6e3e95..0000000000 --- a/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.css +++ /dev/null @@ -1,48 +0,0 @@ -.viewer-video-row { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - justify-content: center; - - -webkit-box-align: center; - -moz-box-align: center; - box-align: center; - align-items: center; -} - -.viewer-video-cell { - -webkit-box-flex: 1; - -moz-box-flex: 1; - box-flex: 1; - -webkit-flex: 1 1 auto; - flex: 1 1 auto; - - padding: 10px; - margin: 10px; - - text-align: center; -} - -video { - max-height: 80vh; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: center; - align-items: center; - align-content: center; - max-width: 100%; - margin-left: auto; - margin-right: auto; -} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.html b/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.html index cf89162907..d79967452a 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.html @@ -1,10 +1,3 @@ -
-
-
- -
-
-
- + diff --git a/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.scss b/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.scss new file mode 100644 index 0000000000..7add596dd5 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.scss @@ -0,0 +1,7 @@ +.adf-media-player { + video { + display: flex; + flex: 1; + max-height: 90vh; + } +} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.ts index 2f241532df..a8c7d8810f 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.ts @@ -15,15 +15,15 @@ * limitations under the License. */ -/* tslint:disable:component-selector */ - -import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { ContentService } from 'ng2-alfresco-core'; @Component({ - selector: 'media-player', + selector: 'adf-media-player', templateUrl: './mediaPlayer.component.html', - styleUrls: ['./mediaPlayer.component.css'] + styleUrls: ['./mediaPlayer.component.scss'], + host: { 'class': 'adf-media-player' }, + encapsulation: ViewEncapsulation.None }) export class MediaPlayerComponent implements OnChanges { diff --git a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.css b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.css deleted file mode 100644 index 3f4bb8d0d4..0000000000 --- a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.css +++ /dev/null @@ -1,48 +0,0 @@ - -.unsupported-container { - width: 600px; -} - -.viewer-margin { - margin: auto !important; - padding: 16px; - display: flex; - align-items: center; - justify-content: center; -} - -.viewer-download-text { - text-align: center; - word-wrap: break-word; - min-height: 100px; - display: flex; - align-items: center; - justify-content: center; -} - -.viewer-download-text h4 { - margin: 0; -} - -.adf-conversion-spinner { - margin: 16px 0; -} - -.viewer-margin >>> .adf-conversion-spinner.mat-spinner path { - stroke: #00BFD4; -} - -.button-container { - display: flex; - align-items: center; - justify-content: space-around; -} - -.button-container button { - line-height: 40px; -} - -.viewer-button-icon { - margin-right: 10px; - margin-top: -5px; -} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.html b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.html index 2c435e4690..01d5009114 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.html @@ -1,39 +1,47 @@ -
-
-
-

File '{{nameFile}}' is of an unsupported format

-
- - + + + Unknown format + + +

File '{{nameFile}}' is of an unsupported format

+ + + + + + + + + -
- - - -
-
-
- - + data-automation-id="pdf-rendition-viewer"> + diff --git a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.scss b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.scss new file mode 100644 index 0000000000..b6bae84645 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.scss @@ -0,0 +1,5 @@ +.adf-not-supported-format { + .mat-card { + max-width: 400px; + } +} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.spec.ts index d4bab0e344..5670e79a9b 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.spec.ts @@ -17,18 +17,10 @@ import { DebugElement } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { MdButtonModule, MdIconModule, MdProgressSpinnerModule } from '@angular/material'; import { By } from '@angular/platform-browser'; -import { - AlfrescoApiService, - AlfrescoAuthenticationService, - AlfrescoSettingsService, - ContentService, - CoreModule, - LogService, - RenditionsService -} from 'ng2-alfresco-core'; +import { ContentService, CoreModule, RenditionsService } from 'ng2-alfresco-core'; import { Subject } from 'rxjs/Subject'; +import { MaterialModule } from './../material.module'; import { NotSupportedFormatComponent } from './notSupportedFormat.component'; import { PdfViewerComponent } from './pdfViewer.component'; @@ -49,28 +41,18 @@ describe('NotSupportedFormatComponent', () => { let element: HTMLElement; let renditionsService: RenditionsService; - let renditionSubject: Subject, - conversionSubject: Subject; + let renditionSubject: Subject; + let conversionSubject: Subject; beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ CoreModule, - MdIconModule, - MdButtonModule, - MdProgressSpinnerModule + MaterialModule ], declarations: [ NotSupportedFormatComponent, PdfViewerComponent - ], - providers: [ - AlfrescoSettingsService, - AlfrescoAuthenticationService, - AlfrescoApiService, - ContentService, - RenditionsService, - LogService ] }).compileComponents(); })); @@ -96,8 +78,8 @@ describe('NotSupportedFormatComponent', () => { fixture.detectChanges(); }); - it('should be present Download button', () => { - expect(element.querySelector('#viewer-download-button')).not.toBeNull(); + it('should display the Download button', () => { + expect(element.querySelector('[data-automation-id="viewer-download-button"]')).not.toBeNull(); }); it('should display the name of the file', () => { @@ -107,7 +89,7 @@ describe('NotSupportedFormatComponent', () => { }); it('should NOT show loading spinner by default', () => { - expect(element.querySelector('#conversion-spinner')).toBeNull('Conversion spinner should NOT be shown by default'); + expect(element.querySelector('[data-automation-id="viewer-conversion-spinner"]')).toBeNull('Conversion spinner should NOT be shown by default'); }); }); @@ -115,7 +97,7 @@ describe('NotSupportedFormatComponent', () => { it('should not show the "Convert to PDF" button by default', () => { fixture.detectChanges(); - expect(element.querySelector('#viewer-convert-button')).toBeNull(); + expect(element.querySelector('[data-automation-id="viewer-convert-button"]')).toBeNull(); }); it('should be checked on ngInit', () => { @@ -135,7 +117,7 @@ describe('NotSupportedFormatComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); - expect(element.querySelector('#viewer-convert-button')).not.toBeNull(); + expect(element.querySelector('[data-automation-id="viewer-convert-button"]')).not.toBeNull(); }); })); @@ -146,7 +128,7 @@ describe('NotSupportedFormatComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); - expect(element.querySelector('#viewer-convert-button')).toBeNull(); + expect(element.querySelector('[data-automation-id="viewer-convert-button"]')).toBeNull(); }); })); @@ -155,7 +137,7 @@ describe('NotSupportedFormatComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); - expect(element.querySelector('#viewer-convert-button')).toBeNull(); + expect(element.querySelector('[data-automation-id="viewer-convert-button"]')).toBeNull(); }); })); @@ -226,7 +208,7 @@ describe('NotSupportedFormatComponent', () => { spyOn(window, 'open'); component.urlFile = 'test'; - let downloadButton: any = element.querySelector('#viewer-download-button'); + let downloadButton: any = element.querySelector('[data-automation-id="viewer-download-button"]'); downloadButton.click(); expect(window.open).toHaveBeenCalled(); @@ -237,7 +219,7 @@ describe('NotSupportedFormatComponent', () => { component.blobFile = new Blob(); - let downloadButton: any = element.querySelector('#viewer-download-button'); + let downloadButton: any = element.querySelector('[data-automation-id="viewer-download-button"]'); downloadButton.click(); expect(service.downloadBlob).toHaveBeenCalled(); @@ -250,7 +232,7 @@ describe('NotSupportedFormatComponent', () => { renditionSubject.next({ entry: { status: 'NOT_CREATED' } }); fixture.detectChanges(); - let convertButton: any = element.querySelector('#viewer-convert-button'); + let convertButton: any = element.querySelector('[data-automation-id="viewer-convert-button"]'); convertButton.click(); fixture.detectChanges(); } @@ -258,8 +240,8 @@ describe('NotSupportedFormatComponent', () => { it('should show loading spinner and disable the "Convert to PDF button" after the button was clicked', () => { clickOnConvertButton(); - let convertButton: any = element.querySelector('#viewer-convert-button'); - expect(element.querySelector('#conversion-spinner')).not.toBeNull('Conversion spinner should be shown'); + let convertButton: any = element.querySelector('[data-automation-id="viewer-convert-button"]'); + expect(element.querySelector('[data-automation-id="viewer-conversion-spinner"]')).not.toBeNull('Conversion spinner should be shown'); expect(convertButton.disabled).toBe(true); }); @@ -269,8 +251,8 @@ describe('NotSupportedFormatComponent', () => { conversionSubject.error(new Error()); fixture.detectChanges(); - let convertButton: any = element.querySelector('#viewer-convert-button'); - expect(element.querySelector('#conversion-spinner')).toBeNull('Conversion spinner should be shown'); + let convertButton: any = element.querySelector('[data-automation-id="viewer-convert-button"]'); + expect(element.querySelector('[data-automation-id="viewer-conversion-spinner"]')).toBeNull('Conversion spinner should be shown'); expect(convertButton.disabled).toBe(false); }); @@ -282,7 +264,7 @@ describe('NotSupportedFormatComponent', () => { fixture.detectChanges(); fixture.detectChanges(); - expect(element.querySelector('#pdf-rendition-viewer')).not.toBeNull('Pdf rendition should be shown.'); + expect(element.querySelector('[data-automation-id="pdf-rendition-viewer"]')).not.toBeNull('Pdf rendition should be shown.'); }); }); }); diff --git a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts index 8e6f72f1fc..178a92f176 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts @@ -15,18 +15,18 @@ * limitations under the License. */ -/* tslint:disable:component-selector */ - -import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { ContentService, RenditionsService } from 'ng2-alfresco-core'; import { AlfrescoApiService } from 'ng2-alfresco-core'; const DEFAULT_CONVERSION_ENCODING = 'pdf'; @Component({ - selector: 'not-supported-format', + selector: 'adf-not-supported-format', templateUrl: './notSupportedFormat.component.html', - styleUrls: ['./notSupportedFormat.component.css'] + styleUrls: ['./notSupportedFormat.component.scss'], + host: { 'class': 'adf-not-supported-format' }, + encapsulation: ViewEncapsulation.None }) export class NotSupportedFormatComponent implements OnInit, OnDestroy { diff --git a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.css b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.css deleted file mode 100644 index 98e4fa099a..0000000000 --- a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.css +++ /dev/null @@ -1,96 +0,0 @@ -.loader-container { - display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ - display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ - display: -webkit-flex; /* NEW - Chrome */ - display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ - -webkit-box-flex-direction: row; - -moz-box-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; - height:100%; -} - -.loader-item { - margin: auto; - max-height:100px; - max-width:300px; -} - -.loader-text{ - white-space: nowrap; - text-align: center; - position: relative; - color : #fff; -} - -.left { - float: left; -} - -.viewer-toolbar-pagination{ - padding-top: 4px; - top: 80px; - right:35px; - width:auto; - position:absolute; - border-radius: 10px; - background: #3E3E3E; - color: white; -} - -.viewer-toolbar-command{ - height: 30px; - padding-top: 4px; - top: 80px; - left:35px; - width:auto; - position:absolute; - border-radius: 10px; - background: #3E3E3E; - color: white; -} - -.viewer-pagenumber-input { - border: none; - display: block; - font-size: 16px; - padding: 4px 0; - background: 0 0; - text-align: right; - color: inherit; - width: 33px; - margin-right: 4px; - height: 20px; -} - -.viewer-total-pages { - border: medium none; - display: flex; - font-size: 16px; - padding: 4px 0px; - background: transparent none repeat scroll 0px 0px; - text-align: right; - color: inherit; - margin-right: 4px; - height: 20px; - align-items: center; - justify-content: center; -} - -.viewer-page-counter { - margin-right: 20px; -} - -.button-page { - margin-right: 4px; - height: 24px; - width: 24px; - margin-left: 4px; - cursor: pointer; -} - -.button-page:hover { - cursor: pointer; - background: grey; - border-radius: 24px; -} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.html b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.html index eb8eb2897f..05c6347d63 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.html @@ -3,8 +3,7 @@
-
-
Loading {{nameFile}} {{laodingPercent}}%
+
@@ -13,33 +12,62 @@ -
-
- keyboard_arrow_left +
+
+ keyboard_arrow_left
- -
/ {{totalPages}}
+ +
/ {{ totalPages }}
-
- keyboard_arrow_right +
+ keyboard_arrow_right
-
-
- zoom_out_map +
+
+ zoom_out_map
-
- zoom_in +
+ zoom_in
-
- zoom_out +
+ zoom_out
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.scss b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.scss new file mode 100644 index 0000000000..64ab329bf8 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.scss @@ -0,0 +1,91 @@ +.adf-pdf-viewer { + .loader-container { + display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ + display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ + display: -webkit-flex; /* NEW - Chrome */ + display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ + -webkit-box-flex-direction: row; + -moz-box-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + height:100%; + } + + .loader-item { + margin: auto; + max-height:100px; + max-width:300px; + } + + .left { + float: left; + } + + .viewer-toolbar-pagination{ + padding-top: 4px; + top: 80px; + right:35px; + width:auto; + position:absolute; + border-radius: 10px; + background: #3E3E3E; + color: white; + } + + .viewer-toolbar-command{ + height: 30px; + padding-top: 4px; + top: 80px; + left:35px; + width:auto; + position:absolute; + border-radius: 10px; + background: #3E3E3E; + color: white; + } + + .viewer-pagenumber-input { + border: none; + display: block; + font-size: 16px; + padding: 4px 0; + background: 0 0; + text-align: right; + color: inherit; + width: 33px; + margin-right: 4px; + height: 20px; + } + + .viewer-total-pages { + border: medium none; + display: flex; + font-size: 16px; + padding: 4px 0px; + background: transparent none repeat scroll 0px 0px; + text-align: right; + color: inherit; + margin-right: 4px; + height: 20px; + align-items: center; + justify-content: center; + } + + .viewer-page-counter { + margin-right: 20px; + } + + .button-page { + margin-right: 4px; + height: 24px; + width: 24px; + margin-left: 4px; + cursor: pointer; + } + + .button-page:hover { + cursor: pointer; + background: grey; + border-radius: 24px; + } +} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.spec.ts index 7088ba76b6..d0d273f28f 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.spec.ts @@ -95,12 +95,12 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { }); it('should Canvas be present', () => { - expect(element.querySelector('#viewer-viewerPdf')).not.toBeNull(); - expect(element.querySelector('#viewer-pdf-container')).not.toBeNull(); + expect(element.querySelector('.pdfViewer')).not.toBeNull(); + expect(element.querySelector('.viewer-pdf-container')).not.toBeNull(); }); it('should Loader be present', () => { - expect(element.querySelector('#loader-container')).not.toBeNull(); + expect(element.querySelector('.loader-container')).not.toBeNull(); }); it('should Next an Previous Buttons be present', () => { @@ -109,8 +109,8 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { }); it('should Input Page elements be present', () => { - expect(element.querySelector('#viewer-pagenumber-input')).toBeDefined(); - expect(element.querySelector('#viewer-total-pages')).toBeDefined(); + expect(element.querySelector('.viewer-pagenumber-input')).toBeDefined(); + expect(element.querySelector('.viewer-total-pages')).toBeDefined(); expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull(); expect(element.querySelector('#viewer-next-page-button')).not.toBeNull(); @@ -121,8 +121,8 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { fixture.detectChanges(); - expect(element.querySelector('#viewer-toolbar-command')).toBeNull(); - expect(element.querySelector('#viewer-toolbar-pagination')).toBeNull(); + expect(element.querySelector('.viewer-toolbar-command')).toBeNull(); + expect(element.querySelector('.viewer-toolbar-pagination')).toBeNull(); }); }); @@ -143,12 +143,12 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { }); it('should Canvas be present', () => { - expect(element.querySelector('#viewer-viewerPdf')).not.toBeNull(); - expect(element.querySelector('#viewer-pdf-container')).not.toBeNull(); + expect(element.querySelector('.pdfViewer')).not.toBeNull(); + expect(element.querySelector('.viewer-pdf-container')).not.toBeNull(); }); it('should Loader be present', () => { - expect(element.querySelector('#loader-container')).not.toBeNull(); + expect(element.querySelector('.loader-container')).not.toBeNull(); }); it('should Next an Previous Buttons be present', () => { @@ -157,8 +157,8 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { }); it('should Input Page elements be present', () => { - expect(element.querySelector('#viewer-pagenumber-input')).toBeDefined(); - expect(element.querySelector('#viewer-total-pages')).toBeDefined(); + expect(element.querySelector('.viewer-pagenumber-input')).toBeDefined(); + expect(element.querySelector('.viewer-total-pages')).toBeDefined(); expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull(); expect(element.querySelector('#viewer-next-page-button')).not.toBeNull(); @@ -169,8 +169,8 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { fixture.detectChanges(); - expect(element.querySelector('#viewer-toolbar-command')).toBeNull(); - expect(element.querySelector('#viewer-toolbar-pagination')).toBeNull(); + expect(element.querySelector('.viewer-toolbar-command')).toBeNull(); + expect(element.querySelector('.viewer-toolbar-pagination')).toBeNull(); }); }); @@ -370,7 +370,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { component.inputPage('2'); fixture.detectChanges(); expect(component.displayPage).toBe(2); - let documentContainer = element.querySelector('#viewer-pdf-container'); + let documentContainer = element.querySelector('.viewer-pdf-container'); documentContainer.scrollTop = 100000; component.watchScroll(documentContainer); fixture.detectChanges(); diff --git a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts index 04155a4576..7e60c90a5d 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts @@ -15,19 +15,22 @@ * limitations under the License. */ -/* tslint:disable:component-selector */ - -import { Component, HostListener, Input, OnChanges } from '@angular/core'; +import { Component, HostListener, Input, OnChanges, ViewEncapsulation } from '@angular/core'; import { LogService } from 'ng2-alfresco-core'; import { RenderingQueueServices } from '../services/rendering-queue.services'; declare let PDFJS: any; @Component({ - selector: 'pdf-viewer', + selector: 'adf-pdf-viewer', templateUrl: './pdfViewer.component.html', - styleUrls: ['./pdfViewer.component.css', './pdfViewerHost.component.css'], - providers: [RenderingQueueServices] + styleUrls: [ + './pdfViewer.component.scss', + './pdfViewerHost.component.scss' + ], + providers: [ RenderingQueueServices ], + host: { 'class': 'adf-pdf-viewer' }, + encapsulation: ViewEncapsulation.None }) export class PdfViewerComponent implements OnChanges { @@ -47,7 +50,7 @@ export class PdfViewerComponent implements OnChanges { page: number; displayPage: number; totalPages: number; - laodingPercent: number; + loadingPercent: number; pdfViewer: any; currentScaleMode: string = 'auto'; currentScale: number; @@ -86,7 +89,7 @@ export class PdfViewerComponent implements OnChanges { loadingTask.onProgress = (progressData) => { let level = progressData.loaded / progressData.total; - this.laodingPercent = Math.round(level * 100); + this.loadingPercent = Math.round(level * 100); }; loadingTask.then((pdfDocument) => { diff --git a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewerHost.component.css b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewerHost.component.css deleted file mode 100644 index a44e1c317e..0000000000 --- a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewerHost.component.css +++ /dev/null @@ -1,264 +0,0 @@ -:host >>> .textLayer { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - overflow: hidden; - opacity: 0.2; - line-height: 1.0; -} - -:host >>> .textLayer > div { - color: transparent; - position: absolute; - white-space: pre; - cursor: text; - -webkit-transform-origin: 0% 0%; - -moz-transform-origin: 0% 0%; - -o-transform-origin: 0% 0%; - -ms-transform-origin: 0% 0%; - transform-origin: 0% 0%; -} - -:host >>> .textLayer .highlight { - margin: -1px; - padding: 1px; - - background-color: rgb(180, 0, 170); - border-radius: 4px; -} - -:host >>> .textLayer .highlight.begin { - border-radius: 4px 0px 0px 4px; -} - -:host >>> .textLayer .highlight.end { - border-radius: 0px 4px 4px 0px; -} - -:host >>> .textLayer .highlight.middle { - border-radius: 0px; -} - -:host >>> .textLayer .highlight.selected { - background-color: rgb(0, 100, 0); -} - -:host >>> .textLayer ::selection { background: rgb(0,0,255); } -:host >>> .textLayer ::-moz-selection { background: rgb(0,0,255); } - -:host >>> .textLayer .endOfContent { - display: block; - position: absolute; - left: 0px; - top: 100%; - right: 0px; - bottom: 0px; - z-index: -1; - cursor: default; - -webkit-user-select: none; - -ms-user-select: none; - -moz-user-select: none; -} - -:host >>> .textLayer .endOfContent.active { - top: 0px; -} - - -:host >>> .annotationLayer section { - position: absolute; -} - -:host >>> .annotationLayer .linkAnnotation > a { - position: absolute; - font-size: 1em; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -:host >>> .annotationLayer .linkAnnotation > a /* -ms-a */ { - background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat; -} - -:host >>> .annotationLayer .linkAnnotation > a:hover { - opacity: 0.2; - background: #ff0; - box-shadow: 0px 2px 10px #ff0; -} - -:host >>> .annotationLayer .textAnnotation img { - position: absolute; - cursor: pointer; -} - -:host >>> .annotationLayer .popupWrapper { - position: absolute; - width: 20em; -} - -:host >>> .annotationLayer .popup { - position: absolute; - z-index: 200; - max-width: 20em; - background-color: #FFFF99; - box-shadow: 0px 2px 5px #333; - border-radius: 2px; - padding: 0.6em; - margin-left: 5px; - cursor: pointer; - word-wrap: break-word; -} - -:host >>> .annotationLayer .popup h1 { - font-size: 1em; - border-bottom: 1px solid #000000; - padding-bottom: 0.2em; -} - -:host >>> .annotationLayer .popup p { - padding-top: 0.2em; -} - -:host >>> .annotationLayer .highlightAnnotation, -.annotationLayer .underlineAnnotation, -.annotationLayer .squigglyAnnotation, -.annotationLayer .strikeoutAnnotation, -.annotationLayer .fileAttachmentAnnotation { - cursor: pointer; -} - -:host >>> .pdfViewer .canvasWrapper { - overflow: hidden; -} - -:host >>> .pdfViewer .page { - direction: ltr; - width: 816px; - height: 1056px; - margin: 1px auto -8px auto; - position: relative; - overflow: visible; - border: 9px solid transparent; - background-clip: content-box; - background-color: white; -} - -:host >>> .pdfViewer.removePageBorders .page { - margin: 0px auto 10px auto; - border: none; -} - -:host >>> .pdfViewer .page canvas { - margin: 0; - display: block; -} - -:host >>> .pdfViewer .page .loadingIcon { - position: absolute; - display: block; - left: 0; - top: 0; - right: 0; - bottom: 0; -} - -:host >>> .loadingIcon { - width: 100px; - height: 100px; - left: 50% !important; - top: 50% !important; - - margin-top: -50px; - margin-left: -50px; - - font-size: 5px; - text-indent: -9999em; - border-top: 1.1em solid rgba(3,0,2, 0.2); - border-right: 1.1em solid rgba(3,0,2, 0.2); - border-bottom: 1.1em solid rgba(3,0,2, 0.2); - border-left: 1.1em solid #030002; - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - -webkit-animation: load8 1.1s infinite linear; - animation: load8 1.1s infinite linear; -} -:host >>> .loadingIcon, -:host >>> .loadingIcon:after { - border-radius: 50%; -} -@-webkit-keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -:host >>> * { - padding: 0; - margin: 0; -} - -:host >>> html { - height: 100%; - width: 100%; - /* Font size is needed to make the activity bar the correct size. */ - font-size: 10px; -} - -:host >>> body { - height: 100%; - width: 100%; - background-color: #404040; -} - -:host >>> body, -input, -button, -select { - font: message-box; - outline: none; -} - -:host >>> .hidden { - display: none !important; -} -:host >>> [hidden] { - display: none !important; -} - - -#viewer-pdf-container { - overflow: auto; - -webkit-overflow-scrolling: touch; - position: absolute; - top: 32px; - right: 0; - bottom: 0; - left: 0; - outline: none; -} -html[dir='ltr'] #viewer-pdf-container { - box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05); -} -html[dir='rtl'] #viewer-pdf-container { - box-shadow: inset -1px 0 0 hsla(0,0%,100%,.05); -} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewerHost.component.scss b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewerHost.component.scss new file mode 100644 index 0000000000..17684164df --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewerHost.component.scss @@ -0,0 +1,250 @@ +.adf-pdf-viewer { + .textLayer { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + overflow: hidden; + opacity: 0.2; + line-height: 1.0; + + & > div { + color: transparent; + position: absolute; + white-space: pre; + cursor: text; + -webkit-transform-origin: 0% 0%; + -moz-transform-origin: 0% 0%; + -o-transform-origin: 0% 0%; + -ms-transform-origin: 0% 0%; + transform-origin: 0% 0%; + } + + .highlight { + margin: -1px; + padding: 1px; + + background-color: rgb(180, 0, 170); + border-radius: 4px; + + &.begin { + border-radius: 4px 0px 0px 4px; + } + + &.end { + border-radius: 0px 4px 4px 0px; + } + + &.middle { + border-radius: 0px; + } + + &.selected { + background-color: rgb(0, 100, 0); + } + } + + &::selection { background: rgb(0,0,255); } + &::-moz-selection { background: rgb(0,0,255); } + + .endOfContent { + display: block; + position: absolute; + left: 0px; + top: 100%; + right: 0px; + bottom: 0px; + z-index: -1; + cursor: default; + user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + -moz-user-select: none; + + &.active { + top: 0px; + } + } + } + + .annotationLayer { + section { + position: absolute; + } + + .linkAnnotation { + & > a { + position: absolute; + font-size: 1em; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat; + + &:hover { + opacity: 0.2; + background: #ff0; + box-shadow: 0px 2px 10px #ff0; + } + } + } + + .textAnnotation { + img { + position: absolute; + cursor: pointer; + } + } + + .popupWrapper { + position: absolute; + width: 20em; + } + + .popup { + position: absolute; + z-index: 200; + max-width: 20em; + background-color: #FFFF99; + box-shadow: 0px 2px 5px #333; + border-radius: 2px; + padding: 0.6em; + margin-left: 5px; + cursor: pointer; + word-wrap: break-word; + + h1 { + font-size: 1em; + border-bottom: 1px solid #000000; + padding-bottom: 0.2em; + } + + p { + padding-top: 0.2em; + } + } + + .highlightAnnotation, + .underlineAnnotation, + .squigglyAnnotation, + .strikeoutAnnotation, + .fileAttachmentAnnotation { + cursor: pointer; + } + } + + .pdfViewer { + canvasWrapper { + overflow: hidden; + } + + .page { + direction: ltr; + width: 816px; + height: 1056px; + margin: 1px auto -8px auto; + position: relative; + overflow: visible; + border: 9px solid transparent; + background-clip: content-box; + background-color: white; + + canvas { + margin: 0; + display: block; + } + + .loadingIcon { + position: absolute; + display: block; + left: 0; + top: 0; + right: 0; + bottom: 0; + } + } + + &.removePageBorders { + .page { + margin: 0px auto 10px auto; + border: none; + } + } + + .loadingIcon { + width: 100px; + height: 100px; + left: 50% !important; + top: 50% !important; + + margin-top: -50px; + margin-left: -50px; + + font-size: 5px; + text-indent: -9999em; + border-top: 1.1em solid rgba(3,0,2, 0.2); + border-right: 1.1em solid rgba(3,0,2, 0.2); + border-bottom: 1.1em solid rgba(3,0,2, 0.2); + border-left: 1.1em solid #030002; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: load8 1.1s infinite linear; + animation: load8 1.1s infinite linear; + + border-radius: 50%; + &:after { + border-radius: 50%; + } + } + } + + * { + padding: 0; + margin: 0; + } + + .hidden, [hidden] { + display: none !important; + } +} + +@-webkit-keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +.viewer-pdf-container { + overflow: auto; + -webkit-overflow-scrolling: touch; + position: absolute; + top: 32px; + right: 0; + bottom: 0; + left: 0; + outline: none; +} +html[dir='ltr'] .viewer-pdf-container { + box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05); +} +html[dir='rtl'] .viewer-pdf-container { + box-shadow: inset -1px 0 0 hsla(0,0%,100%,.05); +} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.css b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.css deleted file mode 100644 index 538a8f82cf..0000000000 --- a/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.css +++ /dev/null @@ -1,11 +0,0 @@ -.adf-txt-viewer-margin { - margin: auto !important; - overflow: auto; - font-size: 1em; - padding: 20px; - max-width: 70%; -} - -.full_width{ - width :95% !important; -} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.html b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.html index c5376f46f4..a64297053c 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.html @@ -1,6 +1,3 @@ -
- 
-        {{content}}
-
-
- +
+    {{content}}
+
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.scss b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.scss new file mode 100644 index 0000000000..4b58d2e074 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.scss @@ -0,0 +1,7 @@ +.adf-txt-viewer { + background-color: white; + width: 100vw; + overflow: hidden; + overflow-y: scroll; + margin-bottom: 42px; +} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.spec.ts index 6a9649d437..b5211e3855 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.spec.ts @@ -64,7 +64,7 @@ describe('Test ng2-alfresco-viewer Text View component', () => { component.ngOnChanges({ 'urlFile': change }).then(() => { fixture.detectChanges(); fixture.whenStable().then(() => { - expect(element.querySelector('#adf-viewer-text-container').textContent).toContain('example'); + expect(element.querySelector('.adf-txt-viewer-content').textContent).toContain('example'); done(); }); }); @@ -78,7 +78,7 @@ describe('Test ng2-alfresco-viewer Text View component', () => { component.ngOnChanges({ 'blobFile': change }).then(() => { fixture.detectChanges(); fixture.whenStable().then(() => { - expect(element.querySelector('#adf-viewer-text-container').textContent).toContain('example'); + expect(element.querySelector('.adf-txt-viewer-content').textContent).toContain('example'); done(); }); }); diff --git a/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts index f7b6aa060e..4dbc9d9a4a 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts @@ -15,17 +15,17 @@ * limitations under the License. */ -/* tslint:disable:component-selector */ - -import { Component, Input, OnChanges } from '@angular/core'; +import { Component, Input, OnChanges, ViewEncapsulation } from '@angular/core'; import { SimpleChanges } from '@angular/core'; import { Http, RequestOptions, Response, ResponseContentType } from '@angular/http'; import 'rxjs/add/operator/toPromise'; @Component({ - selector: 'txt-viewer', + selector: 'adf-txt-viewer', templateUrl: './txtViewer.component.html', - styleUrls: ['./txtViewer.component.css'] + styleUrls: ['./txtViewer.component.scss'], + host: { 'class': 'adf-txt-viewer' }, + encapsulation: ViewEncapsulation.None }) export class TxtViewerComponent implements OnChanges { diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.html b/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.html new file mode 100644 index 0000000000..5974c8b748 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.html @@ -0,0 +1,66 @@ + + + + {{ fileName }} + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + +
+
+ {{ unknownFormatIcon }} +
{{ unknownFormatText | translate }}
+
+
+ + + diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.scss b/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.scss new file mode 100644 index 0000000000..ff916accbd --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.scss @@ -0,0 +1,36 @@ +.adf-viewer-dialog-panel { + .mat-dialog-container { + padding: 0; + max-width: none; + width: 99vw; + height: 99vh; + } +} + +.adf-viewer-dialog { + .mat-dialog-content { + display: flex; + max-height: 90vh; + } + + &-unknown-view { + height: 90vh; + text-align: center; + display: flex; + flex: 1; + flex-direction: column; + justify-content: center; + } + + &-image-view { + display: flex; + flex: 1; + text-align: center; + flex-direction: row; + justify-content: center; + height: 90vh; + img { + object-fit: contain; + } + } +} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.ts new file mode 100644 index 0000000000..1819efb5e6 --- /dev/null +++ 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, + @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); + } +} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.settings.ts b/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.settings.ts new file mode 100644 index 0000000000..04275dd7c3 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.settings.ts @@ -0,0 +1,23 @@ +/*! + * @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. + */ + +export interface ViewerDialogSettings { + fileUrl?: string; + fileMimeType?: string; + fileName?: string; + downloadUrl?: string; +} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.css b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.css deleted file mode 100644 index ddf475c6f8..0000000000 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.css +++ /dev/null @@ -1,63 +0,0 @@ -.button-container { - padding: 0 40px; -} - -.left { - float: left; -} - -#page-content { - display: flex; - flex-direction: row; - flex-wrap: wrap; - flex: 1; -} - -.mdl-grid { - width: 100vw; - padding: 0px !important; -} - -.viewer-name-file { - width: 100%; - height: 21px; - overflow: hidden !important; - text-overflow: ellipsis; - white-space: nowrap; - padding-right: 60px; - margin-right: -40px; -} - -.viewer-shadow-transparent { - z-index: 1000; - background-color: #3E3E3E; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - opacity: .90; -} - -.viewer-overlay-view { - position: fixed; - top: 0px; - left: 0px; - z-index: 1000; -} - -img-viewer { - height: 100%; -} - -.center-element { - display: flex; - align-items: center; - justify-content: center; -} - -.all-space{ - width: 100%; - height: 100%; - background-color: #515151; -} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html index 66a84c5072..6a59b0203e 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html @@ -1,59 +1,60 @@ -
-
-
-
+
-
+
+ + + + {{ displayName }} + + + + - -
+
+
+
+
-
-
+ + + + - - {{displayName}} + + + + - + + + + -
- - - - -
-
- -
- -
- -
- - -
- -
-
- -
-
- -
-
- -
+ + + -
- - +
+ +
-
-
-
+
-
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.scss b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.scss new file mode 100644 index 0000000000..ea3471a69c --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.scss @@ -0,0 +1,69 @@ +$adf-viewer-background-color: #515151; + +@mixin full-screen() { + width: 100%; + height: 100%; + background-color: $adf-viewer-background-color; +} + +.adf-viewer { + + &-container { + .adf-viewer-layout-content { + @include full-screen(); + position: relative; + overflow-y: auto; + overflow-x: hidden; + z-index: 1; + + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex: 1; + + & > div { + display: flex; + flex-flow: row wrap; + margin: 0 auto; + align-items: stretch; + } + } + + .adf-viewer-layout { + @include full-screen(); + + display: flex; + flex-direction: column; + overflow-y: auto; + overflow-x: hidden; + position: relative; + } + + .adf-viewer-content { + @include full-screen(); + } + } + + &-overlay-container { + .adf-viewer-content { + position: fixed; + top: 0px; + left: 0px; + z-index: 1000; + } + } + + &-inline-container { + @include full-screen(); + } + + &-content-container { + display: flex; + justify-content: center; + } + + &-unknown-content { + align-items: center; + display: flex; + } +} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts index b9f9a2bbb6..3a159eac6c 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts @@ -17,13 +17,10 @@ import { DebugElement } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { - AlfrescoApiService, - AlfrescoAuthenticationService, - AlfrescoSettingsService, - CoreModule, - RenditionsService -} from 'ng2-alfresco-core'; + +import { CoreModule } from 'ng2-alfresco-core'; +import { MaterialModule } from './../material.module'; + import { EventMock } from '../assets/event.mock'; import { RenderingQueueServices } from '../services/rendering-queue.services'; import { ImgViewerComponent } from './imgViewer.component'; @@ -35,7 +32,7 @@ import { ViewerComponent } from './viewer.component'; declare let jasmine: any; -describe('Test ng2-alfresco-viewer ViewerComponent', () => { +describe('ViewerComponent', () => { let component: ViewerComponent; let fixture: ComponentFixture; @@ -45,7 +42,8 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - CoreModule + CoreModule, + MaterialModule ], declarations: [ ViewerComponent, @@ -56,11 +54,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { ImgViewerComponent ], providers: [ - AlfrescoSettingsService, - AlfrescoAuthenticationService, - AlfrescoApiService, - RenderingQueueServices, - RenditionsService + RenderingQueueServices ] }).compileComponents(); })); @@ -94,40 +88,32 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { fixture.detectChanges(); }); - it('should shadow overlay be present if is overlay mode', () => { - expect(element.querySelector('#viewer-shadow-transparent')).not.toBeNull(); - }); - it('should header be present if is overlay mode', () => { - expect(element.querySelector('header')).not.toBeNull(); + expect(element.querySelector('.adf-viewer-toolbar')).not.toBeNull(); }); it('should Name File be present if is overlay mode ', () => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); - expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-test-file.pdf'); + expect(element.querySelector('.adf-viewer-filename').innerHTML).toEqual('fake-test-file.pdf'); }); }); it('should Close button be present if overlay mode', () => { - expect(element.querySelector('#viewer-close-button')).not.toBeNull(); + expect(element.querySelector('.adf-viewer-close-button')).not.toBeNull(); }); it('should Click on close button hide the viewer', () => { - let closebutton: any = element.querySelector('#viewer-close-button'); + let closebutton: any = element.querySelector('.adf-viewer-close-button'); closebutton.click(); fixture.detectChanges(); - expect(element.querySelector('#viewer-main-container')).toBeNull(); + expect(element.querySelector('.adf-viewer-content')).toBeNull(); }); it('should Esc button hide the viewer', () => { EventMock.keyDown(27); fixture.detectChanges(); - expect(element.querySelector('#viewer-main-container')).toBeNull(); - }); - - it('should all-space class not be present if is in overlay mode', () => { - expect(element.querySelector('#viewer').getAttribute('class')).toEqual(''); + expect(element.querySelector('.adf-viewer-content')).toBeNull(); }); }); @@ -143,17 +129,13 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { }); it('should Close button be not present if is not overlay mode', () => { - expect(element.querySelector('#viewer-close-button')).toBeNull(); + expect(element.querySelector('.adf-viewer-close-button')).toBeNull(); }); it('should Esc button not hide the viewer if is not overlay mode', () => { EventMock.keyDown(27); fixture.detectChanges(); - expect(element.querySelector('#viewer-main-container')).not.toBeNull(); - }); - - it('all-space class should be present if is not overlay mode', () => { - expect(element.querySelector('#viewer').getAttribute('class')).toEqual('all-space'); + expect(element.querySelector('.adf-viewer-content')).not.toBeNull(); }); }); }); @@ -196,7 +178,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { component.showViewer = false; fixture.detectChanges(); - expect(element.querySelector('#viewer-main-container')).toBeNull(); + expect(element.querySelector('.adf-viewer-content')).toBeNull(); }); }); @@ -206,7 +188,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); - expect(element.querySelector('pdf-viewer')).not.toBeNull(); + expect(element.querySelector('adf-pdf-viewer')).not.toBeNull(); done(); }); }); @@ -226,7 +208,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); - expect(element.querySelector('media-player')).not.toBeNull(); + expect(element.querySelector('adf-media-player')).not.toBeNull(); done(); }); }); @@ -236,7 +218,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); - expect(element.querySelector('media-player')).not.toBeNull(); + expect(element.querySelector('adf-media-player')).not.toBeNull(); done(); }); }); @@ -246,7 +228,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); - expect(element.querySelector('media-player')).not.toBeNull(); + expect(element.querySelector('adf-media-player')).not.toBeNull(); done(); }); }); @@ -256,7 +238,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); - expect(element.querySelector('txt-viewer')).not.toBeNull(); + expect(element.querySelector('adf-txt-viewer')).not.toBeNull(); done(); }); }); @@ -267,7 +249,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); - expect(element.querySelector('not-supported-format')).not.toBeNull(); + expect(element.querySelector('adf-not-supported-format')).not.toBeNull(); done(); }); }); @@ -280,7 +262,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); - expect(element.querySelector('pdf-viewer')).not.toBeNull(); + expect(element.querySelector('adf-pdf-viewer')).not.toBeNull(); done(); }); @@ -292,7 +274,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); - expect(element.querySelector('pdf-viewer')).not.toBeNull(); + expect(element.querySelector('adf-pdf-viewer')).not.toBeNull(); done(); }); }); @@ -325,7 +307,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); - expect(element.querySelector('media-player')).not.toBeNull(); + expect(element.querySelector('adf-media-player')).not.toBeNull(); done(); }); }); @@ -336,7 +318,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); - expect(element.querySelector('txt-viewer')).not.toBeNull(); + expect(element.querySelector('adf-txt-viewer')).not.toBeNull(); done(); }); }); @@ -347,7 +329,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); - expect(element.querySelector('media-player')).not.toBeNull(); + expect(element.querySelector('adf-media-player')).not.toBeNull(); done(); }); }); @@ -358,7 +340,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); - expect(element.querySelector('media-player')).toBeNull(); + expect(element.querySelector('adf-media-player')).toBeNull(); done(); }); }); diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts index 8a8650e2cc..4e087bd1c6 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts @@ -15,15 +15,16 @@ * limitations under the License. */ -import { Component, ElementRef, EventEmitter, HostListener, Inject, Input, OnChanges, OnDestroy, Output, TemplateRef } from '@angular/core'; -import { DOCUMENT } from '@angular/platform-browser'; +import { Component, EventEmitter, HostListener, Input, OnChanges, OnDestroy, Output, TemplateRef, ViewEncapsulation } from '@angular/core'; import { MinimalNodeEntryEntity } from 'alfresco-js-api'; import { AlfrescoApiService, LogService } from 'ng2-alfresco-core'; @Component({ selector: 'adf-viewer, alfresco-viewer', templateUrl: './viewer.component.html', - styleUrls: ['./viewer.component.css'] + styleUrls: ['./viewer.component.scss'], + host: { 'class': 'adf-viewer' }, + encapsulation: ViewEncapsulation.None }) export class ViewerComponent implements OnDestroy, OnChanges { @@ -65,17 +66,11 @@ export class ViewerComponent implements OnDestroy, OnChanges { loaded: boolean = false; constructor(private apiService: AlfrescoApiService, - private element: ElementRef, - @Inject(DOCUMENT) private document, private logService: LogService) { } ngOnChanges(changes) { if (this.showViewer) { - if (this.overlayMode) { - this.hideOtherHeaderBar(); - this.blockOtherScrollBar(); - } if (!this.urlFile && !this.blobFile && !this.fileNodeId) { throw new Error('Attribute urlFile or fileNodeId or blobFile is required'); } @@ -117,7 +112,6 @@ export class ViewerComponent implements OnDestroy, OnChanges { * close the viewer */ close() { - this.unblockOtherScrollBar(); if (this.otherMenu) { this.otherMenu.hidden = false; } @@ -284,68 +278,6 @@ export class ViewerComponent implements OnDestroy, OnChanges { } } - /** - * Check if in the document there are scrollable main area and disable it - */ - private blockOtherScrollBar() { - let mainElements: any = this.document.getElementsByTagName('main'); - - for (let i = 0; i < mainElements.length; i++) { - mainElements[i].style.overflow = 'hidden'; - } - } - - /** - * Check if in the document there are scrollable main area and re-enable it - */ - private unblockOtherScrollBar() { - let mainElements: any = this.document.getElementsByTagName('main'); - - for (let i = 0; i < mainElements.length; i++) { - mainElements[i].style.overflow = ''; - } - } - - /** - * Check if the viewer is used inside and header element - * - * @returns {boolean} - */ - private isParentElementHeaderBar(): boolean { - return !!this.closestElement(this.element.nativeElement, 'header'); - } - - /** - * Check if the viewer is used inside and header element - * @param {HTMLElement} elelemnt - * @param {string} nodeName - * @returns {HTMLElement} - */ - private closestElement(element: HTMLElement, nodeName: string): HTMLElement { - let parent = element.parentElement; - if (parent) { - if (parent.nodeName.toLowerCase() === nodeName) { - return parent; - } else { - return this.closestElement(parent, nodeName); - } - } else { - return null; - } - } - - /** - * Hide the other possible menu in the application - */ - private hideOtherHeaderBar() { - if (this.overlayMode && !this.isParentElementHeaderBar()) { - this.otherMenu = this.document.querySelector('header'); - if (this.otherMenu) { - this.otherMenu.hidden = true; - } - } - } - /** * return true if the data about the node in the ecm are loaded * diff --git a/ng2-components/ng2-alfresco-viewer/src/material.module.ts b/ng2-components/ng2-alfresco-viewer/src/material.module.ts new file mode 100644 index 0000000000..d3acc98a5e --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/material.module.ts @@ -0,0 +1,47 @@ +/*! + * @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 { NgModule } from '@angular/core'; +import { + MdButtonModule, + MdCardModule, + MdDialogModule, + MdIconModule, + MdMenuModule, + MdProgressBarModule, + MdProgressSpinnerModule, + MdTooltipModule +} from '@angular/material'; + +export function modules() { + return [ + MdButtonModule, + MdCardModule, + MdDialogModule, + MdIconModule, + MdMenuModule, + MdProgressBarModule, + MdProgressSpinnerModule, + MdTooltipModule + ]; +} + +@NgModule({ + imports: modules(), + exports: modules() +}) +export class MaterialModule {} diff --git a/ng2-components/ng2-alfresco-viewer/src/services/viewer.service.ts b/ng2-components/ng2-alfresco-viewer/src/services/viewer.service.ts new file mode 100644 index 0000000000..795918c93f --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/services/viewer.service.ts @@ -0,0 +1,56 @@ +/*! + * @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 { Injectable } from '@angular/core'; +import { MdDialog } from '@angular/material'; +import { MinimalNodeEntryEntity } from 'alfresco-js-api'; +import { AlfrescoApiService } from 'ng2-alfresco-core'; + +import { ViewerDialogComponent } from './../components/viewer-dialog.component'; +import { ViewerDialogSettings } from './../components/viewer-dialog.settings'; + +@Injectable() +export class ViewerService { + + constructor(private dialog: MdDialog, + private apiService: AlfrescoApiService) { + } + + private get contentApi() { + return this.apiService.getInstance().content; + } + + showViewerForNode(node: MinimalNodeEntryEntity): Promise { + return new Promise((resolve, reject) => { + const settings: ViewerDialogSettings = { + fileName: node.name, + fileMimeType: node.content.mimeType, + fileUrl: this.contentApi.getContentUrl(node.id, false), + downloadUrl: this.contentApi.getContentUrl(node.id, true) + }; + + const dialogRef = this.dialog.open(ViewerDialogComponent, { + panelClass: 'adf-viewer-dialog-panel', + data: settings + }); + + dialogRef.afterClosed().subscribe(result => { + resolve(result); + }); + }); + } +}