From 36ee8c8e3467cba53b2b02e99a7d43ec9afd465c Mon Sep 17 00:00:00 2001 From: eromano Date: Mon, 21 Nov 2022 18:01:04 +0100 Subject: [PATCH] split render from viewer move alfresco render in content pack --- .../file-view/file-view.component.html | 199 ++++++++--------- .../file-view/file-view.component.ts | 14 -- .../components/file-view/file-view.module.ts | 1 + .../overlay-viewer.component.html | 10 +- docs/core/components/viewer.component.md | 4 +- .../src/lib/content.module.ts | 7 +- .../src/lib/viewer/alfresco-viewer.module.ts | 51 +++++ .../components/alfresco-viewer.component.html | 191 ++++++++++++++++ .../components/alfresco-viewer.component.scss | 82 +++++++ .../components/alfresco-viewer.component.ts | 171 +++++++++++---- lib/content-services/src/lib/viewer/index.ts | 18 ++ .../src/lib/viewer/public-api.ts | 21 ++ .../services/rendition-viewer.service.ts | 11 +- lib/content-services/src/public-api.ts | 1 + .../file-viewer/file-viewer.widget.html | 2 +- .../components/alfresco-viewer.component.html | 149 ------------- .../components/alfresco-viewer.component.scss | 0 .../components/img-viewer.component.html | 2 +- .../components/img-viewer.component.scss | 15 ++ .../viewer/components/img-viewer.component.ts | 2 +- .../components/media-player.component.html | 2 +- .../components/media-player.component.ts | 8 +- .../components/pdf-viewer-host.component.scss | 2 - .../components/pdf-viewer.component.html | 2 +- .../components/pdf-viewer.component.scss | 53 ++++- .../viewer/components/pdf-viewer.component.ts | 5 - .../components/viewer-render.component.html | 95 ++++++++ .../components/viewer-render.component.scss | 72 ++++++ ...pec.ts => viewer-render.component.spec.ts} | 22 +- ...omponent.ts => viewer-render.component.ts} | 189 ++-------------- .../viewer/components/viewer.component.html | 142 ------------ .../viewer/components/viewer.component.scss | 205 ------------------ .../viewer-extension.directive.spec.ts | 4 +- .../directives/viewer-extension.directive.ts | 4 +- lib/core/src/lib/viewer/public-api.ts | 3 +- .../lib/viewer/services/view-util.service.ts | 2 +- lib/core/src/lib/viewer/viewer.module.ts | 9 +- .../viewer/preview-extension.component.ts | 6 - 38 files changed, 873 insertions(+), 903 deletions(-) create mode 100644 lib/content-services/src/lib/viewer/alfresco-viewer.module.ts create mode 100644 lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html create mode 100644 lib/content-services/src/lib/viewer/components/alfresco-viewer.component.scss rename lib/{core => content-services}/src/lib/viewer/components/alfresco-viewer.component.ts (76%) create mode 100644 lib/content-services/src/lib/viewer/index.ts create mode 100644 lib/content-services/src/lib/viewer/public-api.ts rename lib/{core => content-services}/src/lib/viewer/services/rendition-viewer.service.ts (96%) delete mode 100644 lib/core/src/lib/viewer/components/alfresco-viewer.component.html delete mode 100644 lib/core/src/lib/viewer/components/alfresco-viewer.component.scss create mode 100644 lib/core/src/lib/viewer/components/viewer-render.component.html create mode 100644 lib/core/src/lib/viewer/components/viewer-render.component.scss rename lib/core/src/lib/viewer/components/{viewer.component.spec.ts => viewer-render.component.spec.ts} (98%) rename lib/core/src/lib/viewer/components/{viewer.component.ts => viewer-render.component.ts} (51%) delete mode 100644 lib/core/src/lib/viewer/components/viewer.component.html delete mode 100644 lib/core/src/lib/viewer/components/viewer.component.scss diff --git a/demo-shell/src/app/components/file-view/file-view.component.html b/demo-shell/src/app/components/file-view/file-view.component.html index 9ccb7b6b58..667a6db885 100644 --- a/demo-shell/src/app/components/file-view/file-view.component.html +++ b/demo-shell/src/app/components/file-view/file-view.component.html @@ -1,4 +1,4 @@ - + @@ -126,26 +126,6 @@ -

- - Custom Name - -

- -

- - - - - -

+ [versionId]="versionId" + [showRightSidebar]="showRightSidebar" + [showLeftSidebar]="showLeftSidebar" + [allowGoBack]="allowGoBack" + [showToolbar]="showToolbar" + [allowPrint]="allowPrint" + [allowDownload]="allowDownload" + [allowRightSidebar]="allowRightSidebar" + [allowLeftSidebar]="allowLeftSidebar" + [sidebarLeftTemplate]="sidebarLeftTemplate" + [sidebarRightTemplate]="sidebarRightTemplate"> - - - - - - - - - - - - - - - - - + +

My custom toolbar

+ - - - + + + + + - - - - - - - - - - - + + + + + - - - - - - - - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - + - - - - - - - + - - - - - - - + - - - - - - - - - - - - - - - - + + diff --git a/demo-shell/src/app/components/file-view/file-view.component.ts b/demo-shell/src/app/components/file-view/file-view.component.ts index e8e4d75523..8afd5e2e9c 100644 --- a/demo-shell/src/app/components/file-view/file-view.component.ts +++ b/demo-shell/src/app/components/file-view/file-view.component.ts @@ -45,7 +45,6 @@ export class FileViewComponent implements OnInit { customPreset: string = null; displayDefaultProperties = true; showToolbar = true; - displayName = null; urlFile = null; allowGoBack = true; openWith = false; @@ -55,7 +54,6 @@ export class FileViewComponent implements OnInit { allowLeftSidebar = true; moreActions = true; moreActionsMenu = false; - customName = false; fileUrlSwitch = false; showLeftSidebar = null; showRightSidebar = false; @@ -65,7 +63,6 @@ export class FileViewComponent implements OnInit { showTabWithIconAndLabel = false; desiredAspect: string = null; showAspect: string = null; - content: Blob; name: string; constructor(private router: Router, @@ -93,9 +90,6 @@ export class FileViewComponent implements OnInit { }, () => this.router.navigate(['/files', id]) ); - } else if (this.preview.content) { - this.content = this.preview.content; - this.displayName = this.preview.name; } }); } @@ -182,14 +176,6 @@ export class FileViewComponent implements OnInit { this.showTabWithIconAndLabel = !this.showTabWithIconAndLabel; } - toggleCustomName() { - this.customName = !this.customName; - - if (!this.customName) { - this.displayName = null; - } - } - toggleFileUrl() { this.fileUrlSwitch = !this.fileUrlSwitch; diff --git a/demo-shell/src/app/components/file-view/file-view.module.ts b/demo-shell/src/app/components/file-view/file-view.module.ts index ce324a2756..ef3110df1d 100644 --- a/demo-shell/src/app/components/file-view/file-view.module.ts +++ b/demo-shell/src/app/components/file-view/file-view.module.ts @@ -34,6 +34,7 @@ const routes: Routes = [ CommonModule, RouterModule.forChild(routes), CoreModule, + ContentModule, InfoDrawerModule, ContentModule, ContentDirectiveModule, diff --git a/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.html b/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.html index 397d6af63a..62e252a820 100644 --- a/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.html +++ b/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.html @@ -15,8 +15,8 @@ (preview)="showPreview($event)"> - - - - - + + diff --git a/docs/core/components/viewer.component.md b/docs/core/components/viewer.component.md index 392a6acbea..94028e0ecf 100644 --- a/docs/core/components/viewer.component.md +++ b/docs/core/components/viewer.component.md @@ -1,11 +1,11 @@ --- -Title: Viewer component +Title: Render Viewer component Added: v2.0.0 Status: Active Last reviewed: 2019-03-25 --- -# [Viewer component](lib/core/src/lib/viewer/components/viewer.component.ts "Defined in viewer.component.ts") +# [Viewer component](lib/core/src/lib/viewer/components/viewer-render.component.ts "Defined in viewer-render.component.ts") Displays content from an ACS repository. diff --git a/lib/content-services/src/lib/content.module.ts b/lib/content-services/src/lib/content.module.ts index 31dc2e2c2b..68f2921fa9 100644 --- a/lib/content-services/src/lib/content.module.ts +++ b/lib/content-services/src/lib/content.module.ts @@ -46,6 +46,7 @@ import { versionCompatibilityFactory } from './version-compatibility/version-com import { VersionCompatibilityService } from './version-compatibility/version-compatibility.service'; import { ContentPipeModule } from './pipes/content-pipe.module'; import { NodeCommentsModule } from './node-comments/node-comments.module'; +import { AlfrescoViewerModule } from "./viewer"; @NgModule({ imports: [ @@ -75,7 +76,8 @@ import { NodeCommentsModule } from './node-comments/node-comments.module'; ContentTypeModule, AspectListModule, VersionCompatibilityModule, - NodeCommentsModule + NodeCommentsModule, + AlfrescoViewerModule ], providers: [ { @@ -109,7 +111,8 @@ import { NodeCommentsModule } from './node-comments/node-comments.module'; AspectListModule, ContentTypeModule, VersionCompatibilityModule, - NodeCommentsModule + NodeCommentsModule, + AlfrescoViewerModule ] }) export class ContentModule { diff --git a/lib/content-services/src/lib/viewer/alfresco-viewer.module.ts b/lib/content-services/src/lib/viewer/alfresco-viewer.module.ts new file mode 100644 index 0000000000..57fb975f6a --- /dev/null +++ b/lib/content-services/src/lib/viewer/alfresco-viewer.module.ts @@ -0,0 +1,51 @@ +/*! + * @license + * Copyright 2019 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 { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { TranslateModule } from '@ngx-translate/core'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; + +import { ExtensionsModule } from '@alfresco/adf-extensions'; + +import { MaterialModule } from '../material.module'; +import { A11yModule } from '@angular/cdk/a11y'; +import { AlfrescoViewerComponent } from "./components/alfresco-viewer.component"; +import { CoreModule } from "@alfresco/adf-core"; + +@NgModule({ + imports: [ + CoreModule, + CommonModule, + MaterialModule, + TranslateModule, + FormsModule, + ReactiveFormsModule, + FlexLayoutModule, + A11yModule, + ExtensionsModule + ], + declarations: [ + AlfrescoViewerComponent, + ], + exports: [ + AlfrescoViewerComponent, + ] +}) +export class AlfrescoViewerModule { +} diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html new file mode 100644 index 0000000000..2ae5e2a851 --- /dev/null +++ b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html @@ -0,0 +1,191 @@ +
+ +
+ + + + + + + + + + + + +
+ + + {{ fileName }} + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + +
+ + + +
+ + + + + +
+ + + + +
+
+
diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.scss b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.scss new file mode 100644 index 0000000000..963c5500c5 --- /dev/null +++ b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.scss @@ -0,0 +1,82 @@ +/* stylelint-disable scss/at-extend-no-missing-placeholder */ +.adf-full-screen { + width: 100%; + height: 100%; + background-color: var(--theme-card-bg-color); +} + +.adf-alfresco-viewer { + position: absolute; + width: 100%; + height: 100%; + + .mat-toolbar { + color: var(--theme-text-color); + + .adf-toolbar-title { + width: auto; + } + } + + &-main { + width: 0; + } + + &__mimeicon { + vertical-align: middle; + height: 18px; + width: 18px; + } + + &-toolbar { + .mat-toolbar { + background-color: var(--theme-card-bg-bold-color); + } + } + + &__file-title { + text-align: center; + } + + &__display-name { + font-size: var(--theme-subheading-2-font-size); + opacity: 0.87; + line-height: 1.5; + letter-spacing: -0.4px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + max-width: 400px; + text-overflow: ellipsis; + overflow: hidden; + display: inline-block; + vertical-align: middle; + color: var(--theme-text-fg-color); + } + + &-inline-container { + @extend .adf-full-screen; + } + + &-custom-content { + width: 100vw; + } + + &__sidebar { + width: 350px; + display: block; + padding: 0; + background-color: var(--theme-background-color); + box-shadow: 0 2px 4px 0 var(--theme-text-fg-shadow-color); + overflow: auto; + + &__right { + border-left: 1px solid var(--theme-border-color); + } + + &__left { + border-right: 1px solid var(--theme-border-color); + } + } + +} diff --git a/lib/core/src/lib/viewer/components/alfresco-viewer.component.ts b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts similarity index 76% rename from lib/core/src/lib/viewer/components/alfresco-viewer.component.ts rename to lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts index 4f2f50f2cb..34a3e3b089 100644 --- a/lib/core/src/lib/viewer/components/alfresco-viewer.component.ts +++ b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts @@ -1,12 +1,14 @@ import { ChangeDetectorRef, - Component, + Component, ContentChild, EventEmitter, HostListener, Input, Output, - ViewEncapsulation + ViewEncapsulation, + ElementRef, + TemplateRef } from "@angular/core"; -import { ViewUtilService } from "../services/view-util.service"; +import { ViewUtilService } from "../../../../../core/src/lib/viewer/services/view-util.service"; import { ContentApi, Node, NodeEntry, @@ -16,24 +18,36 @@ import { VersionEntry, VersionsApi } from "@alfresco/js-api"; -import { AlfrescoApiService, LogService, UploadService } from "../../services"; +import { AlfrescoApiService, LogService, UploadService } from "../../../../../core/src/lib/services"; import { MatDialog } from "@angular/material/dialog"; -import { filter, takeUntil } from "rxjs/operators"; -import { FileModel } from "../../models"; -import { Subject } from "rxjs"; +import { filter, skipWhile, takeUntil } from "rxjs/operators"; +import { FileModel } from "../../../../../core/src/lib/models"; +import { fromEvent, Subject } from "rxjs"; import { RenditionViewerService } from "../services/rendition-viewer.service"; -import { BaseEvent } from '../../events'; +import { ViewerToolbarComponent,ViewerSidebarComponent, ViewerOpenWithComponent,ViewerMoreActionsComponent } from "@alfresco/adf-core"; @Component({ selector: 'adf-alfresco-viewer', templateUrl: './alfresco-viewer.component.html', styleUrls: ['./alfresco-viewer.component.scss'], - host: {class: 'adf-viewer'}, + host: {class: 'adf-alfresco-viewer'}, encapsulation: ViewEncapsulation.None, providers: [ViewUtilService] }) export class AlfrescoViewerComponent { + @ContentChild(ViewerToolbarComponent) + toolbar: ViewerToolbarComponent; + + @ContentChild(ViewerSidebarComponent) + sidebar: ViewerSidebarComponent; + + @ContentChild(ViewerOpenWithComponent) + mnuOpenWith: ViewerOpenWithComponent; + + @ContentChild(ViewerMoreActionsComponent) + mnuMoreActions: ViewerMoreActionsComponent; + /** Node Id of the file to load. */ @Input() nodeId: string = null; @@ -92,6 +106,30 @@ export class AlfrescoViewerComponent { @Input() allowRightSidebar = false; + /** Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. */ + @Input() + showRightSidebar = false; + + /** Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. */ + @Input() + showLeftSidebar = false; + + /** Toggles downloading. */ + @Input() + allowDownload = true; + + /** Toggles printing. */ + @Input() + allowPrint = false; + + /** The template for the right sidebar. The template context contains the loaded node data. */ + @Input() + sidebarRightTemplate: TemplateRef = null; + + /** The template for the left sidebar. The template context contains the loaded node data. */ + @Input() + sidebarLeftTemplate: TemplateRef = null; + /** Emitted when the shared link used is not valid. */ @Output() invalidSharedLink = new EventEmitter(); @@ -104,30 +142,28 @@ export class AlfrescoViewerComponent { @Output() navigateNext = new EventEmitter(); - /** Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. */ - @Input() - showRightSidebar = false; - - /** Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. */ - @Input() - showLeftSidebar = false; + /** Emitted when the viewer close */ + @Output() + close = new EventEmitter(); private onDestroy$ = new Subject(); + private keyDown$ = fromEvent(document, 'keydown'); private cacheBusterNumber: number; - private nodeEntry: NodeEntry; - versionEntry: VersionEntry; - isLoading: boolean; + private closeViewer: any; + versionEntry: VersionEntry; + isLoading: boolean; urlFileContent: string; + viewerType: any; + fileName: string; + mimeType: string; + nodeEntry: NodeEntry; + + sidebarRightTemplateContext: { node: Node } = {node: null}; + sidebarLeftTemplateContext: { node: Node } = {node: null}; _sharedLinksApi: SharedlinksApi; - - viewerType: any; - fileName: string; - fileExtension: any; - mimeType: string; - get sharedLinksApi(): SharedlinksApi { this._sharedLinksApi = this._sharedLinksApi ?? new SharedlinksApi(this.apiService.getInstance()); return this._sharedLinksApi; @@ -155,7 +191,7 @@ export class AlfrescoViewerComponent { private renditionViewerService: RenditionViewerService, private viewUtilService: ViewUtilService, private logService: LogService, - // private contentService: ContentService, + private el: ElementRef, private uploadService: UploadService, public dialog: MatDialog, private cdr: ChangeDetectorRef) { @@ -178,6 +214,39 @@ export class AlfrescoViewerComponent { this.getNodeVersionProperty(this.nodeEntry.entry) !== this.getNodeVersionProperty(node))), takeUntil(this.onDestroy$) ).subscribe((node) => this.onNodeUpdated(node)); + this.closeOverlayManager(); + } + + private closeOverlayManager() { + this.dialog.afterOpened.pipe( + skipWhile(() => !this.overlayMode), + takeUntil(this.onDestroy$) + ).subscribe(() => this.closeViewer = false); + + this.dialog.afterAllClosed.pipe( + skipWhile(() => !this.overlayMode), + takeUntil(this.onDestroy$) + ).subscribe(() => this.closeViewer = true); + + this.keyDown$.pipe( + skipWhile(() => !this.overlayMode), + filter((e: KeyboardEvent) => e.keyCode === 27), + takeUntil(this.onDestroy$) + ).subscribe((event: KeyboardEvent) => { + event.preventDefault(); + + if (this.closeViewer) { + this.onClose(); + } + }); + } + + /** + * close the viewer + */ + onClose() { + this.showViewer = false; + this.close.emit(this.showViewer); } private onNodeUpdated(node: Node) { @@ -275,8 +344,8 @@ export class AlfrescoViewerComponent { } this.isLoading = false; - // this.sidebarRightTemplateContext.node = nodeData; - // this.sidebarLeftTemplateContext.node = nodeData; + this.sidebarRightTemplateContext.node = nodeData; + this.sidebarLeftTemplateContext.node = nodeData; } private async setUpSharedLinkFile(details: any) { @@ -294,9 +363,11 @@ export class AlfrescoViewerComponent { } } - onPrintContent(event: BaseEvent) { - if (!event.defaultPrevented) { - this.viewUtilService.printFileGeneric(this.nodeId, this.mimeType); + onPrintContent(event: MouseEvent) { + if (this.allowPrint) { + if (!event.defaultPrevented) { + this.viewUtilService.printFileGeneric(this.nodeId, this.mimeType); + } } } @@ -365,24 +436,12 @@ export class AlfrescoViewerComponent { } } - toggleSidebar() { + toggleRightSidebar() { this.showRightSidebar = !this.showRightSidebar; - if (this.showRightSidebar && this.nodeId) { - this.nodesApi.getNode(this.nodeId, { include: ['allowableOperations'] }); - // .then((nodeEntry: NodeEntry) => { - // // this.sidebarRightTemplateContext.node = nodeEntry.entry; - // }); - } } toggleLeftSidebar() { this.showLeftSidebar = !this.showLeftSidebar; - if (this.showRightSidebar && this.nodeId) { - this.nodesApi.getNode(this.nodeId, { include: ['allowableOperations'] }); - // .then((nodeEntry: NodeEntry) => { - // // this.sidebarLeftTemplateContext.node = nodeEntry.entry; - // }); - } } @HostListener('document:keyup', ['$event']) @@ -404,6 +463,30 @@ export class AlfrescoViewerComponent { event.preventDefault(); this.onNavigateNextClick(event); } + + // Ctrl+F + if (key === 70 && event.ctrlKey) { + event.preventDefault(); + this.enterFullScreen(); + } + } + + /** + * Triggers full screen mode with a main content area displayed. + */ + enterFullScreen(): void { + 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(); + } + } } } diff --git a/lib/content-services/src/lib/viewer/index.ts b/lib/content-services/src/lib/viewer/index.ts new file mode 100644 index 0000000000..a7e30cc675 --- /dev/null +++ b/lib/content-services/src/lib/viewer/index.ts @@ -0,0 +1,18 @@ +/*! + * @license + * Copyright 2019 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 * from './public-api'; diff --git a/lib/content-services/src/lib/viewer/public-api.ts b/lib/content-services/src/lib/viewer/public-api.ts new file mode 100644 index 0000000000..da745e3b45 --- /dev/null +++ b/lib/content-services/src/lib/viewer/public-api.ts @@ -0,0 +1,21 @@ +/*! + * @license + * Copyright 2019 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 * from './services/rendition-viewer.service'; +export * from './components/alfresco-viewer.component'; + +export * from './alfresco-viewer.module'; diff --git a/lib/core/src/lib/viewer/services/rendition-viewer.service.ts b/lib/content-services/src/lib/viewer/services/rendition-viewer.service.ts similarity index 96% rename from lib/core/src/lib/viewer/services/rendition-viewer.service.ts rename to lib/content-services/src/lib/viewer/services/rendition-viewer.service.ts index 22144afc92..c4360f492f 100644 --- a/lib/core/src/lib/viewer/services/rendition-viewer.service.ts +++ b/lib/content-services/src/lib/viewer/services/rendition-viewer.service.ts @@ -17,10 +17,7 @@ import { Injectable } from '@angular/core'; import { ContentApi, RenditionEntry, RenditionPaging, RenditionsApi, VersionsApi } from '@alfresco/js-api'; -import { AlfrescoApiService } from '../../services/alfresco-api.service'; -import { LogService } from '../../services/log.service'; -import { Track } from '../models/viewer.model'; -import { TranslationService } from '../../services/translation.service'; +import { AlfrescoApiService , LogService, Track,TranslationService } from '@alfresco/adf-core'; @Injectable({ providedIn: 'root' @@ -29,7 +26,7 @@ export class RenditionViewerService { /** * Content groups based on categorization of files that can be viewed in the web browser. This - * implementation or grouping is tied to the definition the ng component: ViewerComponent + * implementation or grouping is tied to the definition the ng component: ViewerRenderComponent */ static ContentGroup = { IMAGE: 'image', @@ -44,13 +41,13 @@ export class RenditionViewerService { static SUBTITLES_RENDITION_NAME = 'webvtt'; /** - * Based on ViewerComponent Implementation, this value is used to determine how many times we try + * Based on ViewerRenderComponent Implementation, this value is used to determine how many times we try * to get the rendition of a file for preview, or printing. */ maxRetries = 5; /** - * Mime-type grouping based on the ViewerComponent. + * Mime-type grouping based on the ViewerRenderComponent. */ private mimeTypes = { text: ['text/plain', 'text/csv', 'text/xml', 'text/html', 'application/x-javascript'], diff --git a/lib/content-services/src/public-api.ts b/lib/content-services/src/public-api.ts index 2d280d6942..25dcbb35b9 100644 --- a/lib/content-services/src/public-api.ts +++ b/lib/content-services/src/public-api.ts @@ -41,5 +41,6 @@ export * from './lib/interfaces/index'; export * from './lib/version-compatibility/index'; export * from './lib/pipes/index'; export * from './lib/services/index'; +export * from './lib/viewer'; export * from './lib/content.module'; diff --git a/lib/core/src/lib/form/components/widgets/file-viewer/file-viewer.widget.html b/lib/core/src/lib/form/components/widgets/file-viewer/file-viewer.widget.html index a9e52b2af4..5204029ba2 100644 --- a/lib/core/src/lib/form/components/widgets/file-viewer/file-viewer.widget.html +++ b/lib/core/src/lib/form/components/widgets/file-viewer/file-viewer.widget.html @@ -2,6 +2,6 @@ [class.adf-readonly]="field.readOnly"> - + diff --git a/lib/core/src/lib/viewer/components/alfresco-viewer.component.html b/lib/core/src/lib/viewer/components/alfresco-viewer.component.html deleted file mode 100644 index 42643bda0e..0000000000 --- a/lib/core/src/lib/viewer/components/alfresco-viewer.component.html +++ /dev/null @@ -1,149 +0,0 @@ - - - - - - - - - - - -
- - - {{ fileName }} - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/lib/core/src/lib/viewer/components/alfresco-viewer.component.scss b/lib/core/src/lib/viewer/components/alfresco-viewer.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/lib/core/src/lib/viewer/components/img-viewer.component.html b/lib/core/src/lib/viewer/components/img-viewer.component.html index eb1a9e1e79..42248d27de 100644 --- a/lib/core/src/lib/viewer/components/img-viewer.component.html +++ b/lib/core/src/lib/viewer/components/img-viewer.component.html @@ -13,7 +13,7 @@ zoom_out -
+
{{ currentScaleText }}
diff --git a/lib/core/src/lib/viewer/components/img-viewer.component.scss b/lib/core/src/lib/viewer/components/img-viewer.component.scss index d5a3284eff..b29484149d 100644 --- a/lib/core/src/lib/viewer/components/img-viewer.component.scss +++ b/lib/core/src/lib/viewer/components/img-viewer.component.scss @@ -48,5 +48,20 @@ display: inline-block; margin-left: 10px; } + + } + + &__toolbar { + &-page-scale { + cursor: default; + width: 79px; + height: 24px; + font-size: var(--theme-body-1-font-size); + border: 1px solid var(--theme-border-color); + text-align: center; + line-height: 24px; + margin-left: 4px; + margin-right: 4px; + } } } diff --git a/lib/core/src/lib/viewer/components/img-viewer.component.ts b/lib/core/src/lib/viewer/components/img-viewer.component.ts index 1ecbf059a4..5ff91b18d1 100644 --- a/lib/core/src/lib/viewer/components/img-viewer.component.ts +++ b/lib/core/src/lib/viewer/components/img-viewer.component.ts @@ -79,7 +79,7 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy { } initializeScaling() { - const scaling = this.appConfigService.get('adf-viewer.image-viewer-scaling', undefined) / 100; + const scaling = this.appConfigService.get('adf-viewer-render.image-viewer-scaling', undefined) / 100; if (scaling) { this.scale = scaling; } diff --git a/lib/core/src/lib/viewer/components/media-player.component.html b/lib/core/src/lib/viewer/components/media-player.component.html index 7205d76db7..601905245f 100644 --- a/lib/core/src/lib/viewer/components/media-player.component.html +++ b/lib/core/src/lib/viewer/components/media-player.component.html @@ -1,4 +1,4 @@ diff --git a/lib/core/src/lib/viewer/components/media-player.component.ts b/lib/core/src/lib/viewer/components/media-player.component.ts index 4a67ae19f5..59f757111d 100644 --- a/lib/core/src/lib/viewer/components/media-player.component.ts +++ b/lib/core/src/lib/viewer/components/media-player.component.ts @@ -23,7 +23,7 @@ import { Track } from '../models/viewer.model'; selector: 'adf-media-player', templateUrl: './media-player.component.html', styleUrls: ['./media-player.component.scss'], - host: { class: 'adf-media-player' }, + host: {class: 'adf-media-player'}, encapsulation: ViewEncapsulation.None }) export class MediaPlayerComponent implements OnChanges { @@ -54,7 +54,7 @@ export class MediaPlayerComponent implements OnChanges { ngOnChanges(changes: SimpleChanges) { const blobFile = changes['blobFile']; - // const nodeId = changes['nodeId']; + // const nodeId = changes['nodeId']; if (blobFile && blobFile.currentValue) { this.urlFile = this.contentService.createTrustedUrl(this.blobFile); @@ -70,7 +70,7 @@ export class MediaPlayerComponent implements OnChanges { } } - onMediaPlayerError() { - this.error.emit(); + onMediaPlayerError(event: any) { + this.error.emit(event); } } diff --git a/lib/core/src/lib/viewer/components/pdf-viewer-host.component.scss b/lib/core/src/lib/viewer/components/pdf-viewer-host.component.scss index 6a75087c76..50861ec7bb 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer-host.component.scss +++ b/lib/core/src/lib/viewer/components/pdf-viewer-host.component.scss @@ -593,8 +593,6 @@ } } - - .adf-hidden, [hidden] { display: none !important; } diff --git a/lib/core/src/lib/viewer/components/pdf-viewer.component.html b/lib/core/src/lib/viewer/components/pdf-viewer.component.html index 1c73fe4cfc..9cf446c67a 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer.component.html +++ b/lib/core/src/lib/viewer/components/pdf-viewer.component.html @@ -82,7 +82,7 @@ {{ 'ADF_VIEWER.PAGE_LABEL.OF' | translate }} {{ totalPages }}
-
+
{{ currentScaleText }}
diff --git a/lib/core/src/lib/viewer/components/pdf-viewer.component.scss b/lib/core/src/lib/viewer/components/pdf-viewer.component.scss index b745fedc89..994d10c184 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer.component.scss +++ b/lib/core/src/lib/viewer/components/pdf-viewer.component.scss @@ -1,8 +1,3 @@ -.adf-viewer-content-container { - width: 100%; - height: 100%; -} - .adf-pdf-viewer { width: 100%; height: 100%; @@ -21,6 +16,54 @@ background-color: rgba(0, 0, 0, 0.12); } + &__thumbnails { + width: 180px; + display: flex; + flex-direction: column; + padding: 0; + background: #e6e6e6; + + .adf-info-drawer-layout { + display: flex; + flex-direction: column; + flex: 1; + background: #e6e6e6; + } + + .adf-info-drawer-layout-header { + margin-bottom: 0; + } + + .adf-info-drawer-layout-content { + padding: 0; + height: 100%; + overflow: hidden; + } + + .adf-info-drawer-content { + height: 100%; + } + + .adf-info-drawer-layout-content > *:last-child { + height: 100%; + overflow: hidden; + } + } + + &__toolbar { + &-page-scale { + cursor: default; + width: 79px; + height: 24px; + font-size: var(--theme-body-1-font-size); + border: 1px solid var(--theme-border-color); + text-align: center; + line-height: 24px; + margin-left: 4px; + margin-right: 4px; + } + } + .adf-thumbnails-template { &__container { display: flex; diff --git a/lib/core/src/lib/viewer/components/pdf-viewer.component.ts b/lib/core/src/lib/viewer/components/pdf-viewer.component.ts index 0a30ac33b5..a8392d2849 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer.component.ts +++ b/lib/core/src/lib/viewer/components/pdf-viewer.component.ts @@ -80,9 +80,6 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { @Output() error = new EventEmitter(); - @Output() - close = new EventEmitter(); - page: number; displayPage: number; totalPages: number; @@ -514,8 +511,6 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { .afterClosed().subscribe((password) => { if (password) { callback(password); - } else { - this.close.emit(); } }); } diff --git a/lib/core/src/lib/viewer/components/viewer-render.component.html b/lib/core/src/lib/viewer/components/viewer-render.component.html new file mode 100644 index 0000000000..0885137321 --- /dev/null +++ b/lib/core/src/lib/viewer/components/viewer-render.component.html @@ -0,0 +1,95 @@ +
+
+
+ +
+

{{ 'ADF_VIEWER.LOADING' | translate }}

+
+ +
+
+ + +
+
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
diff --git a/lib/core/src/lib/viewer/components/viewer-render.component.scss b/lib/core/src/lib/viewer/components/viewer-render.component.scss new file mode 100644 index 0000000000..6e158f1216 --- /dev/null +++ b/lib/core/src/lib/viewer/components/viewer-render.component.scss @@ -0,0 +1,72 @@ +/* stylelint-disable scss/at-extend-no-missing-placeholder */ +.adf-full-screen { + width: 100%; + height: 100%; + background-color: var(--theme-card-bg-color); +} + +.adf-viewer-render { + + &-main { + width: 0; + } + + &-content-container { + display: flex; + justify-content: center; + } + + .adf-viewer-render-layout-content { + @extend .adf-full-screen; + + position: relative; + overflow-y: hidden; + overflow-x: hidden; + z-index: 1; + background-color: var(--theme-background-color); + + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex: 1; + + & > div { + display: flex; + flex-flow: row wrap; + margin: 0 auto; + align-items: stretch; + height: 93vh; + width: 100%; + } + } + + &-overlay-container { + .adf-viewer-render-content { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + } + } + + &__loading-screen { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 85vh; + + .mat-spinner { + margin: 0 auto; + } + } + + &-custom-content { + width: 100vw; + } + + &-unknown-content { + align-items: center; + display: flex; + } +} diff --git a/lib/core/src/lib/viewer/components/viewer.component.spec.ts b/lib/core/src/lib/viewer/components/viewer-render.component.spec.ts similarity index 98% rename from lib/core/src/lib/viewer/components/viewer.component.spec.ts rename to lib/core/src/lib/viewer/components/viewer-render.component.spec.ts index 1a390f6a0c..0672196fb7 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.spec.ts +++ b/lib/core/src/lib/viewer/components/viewer-render.component.spec.ts @@ -24,7 +24,7 @@ import { AlfrescoApiService, RenditionsService } from '../../services'; import { throwError } from 'rxjs'; import { EventMock } from '../../mock/event.mock'; import { RenderingQueueServices } from '../services/rendering-queue.services'; -import { ViewerComponent } from './viewer.component'; +import { ViewerRenderComponent } from './viewer-render.component.ts'; import { setupTestBed } from '../../testing/setup-test-bed'; import { NodeEntry, VersionEntry } from '@alfresco/js-api'; import { CoreTestingModule } from '../../testing/core.testing.module'; @@ -142,17 +142,17 @@ class ViewerWithCustomMoreActionsComponent { }) class DoubleViewerComponent { @ViewChild('viewer1') - viewer1: ViewerComponent; + viewer1: ViewerRenderComponent; @ViewChild('viewer2') - viewer2: ViewerComponent; + viewer2: ViewerRenderComponent; } describe('ViewerComponent', () => { - let component: ViewerComponent; - let fixture: ComponentFixture; + let component: ViewerRenderComponent; + let fixture: ComponentFixture; let alfrescoApiService: AlfrescoApiService; let element: HTMLElement; let dialog: MatDialog; @@ -188,7 +188,7 @@ describe('ViewerComponent', () => { }); beforeEach(() => { - fixture = TestBed.createComponent(ViewerComponent); + fixture = TestBed.createComponent(ViewerRenderComponent); element = fixture.nativeElement; component = fixture.componentInstance; @@ -241,7 +241,7 @@ describe('ViewerComponent', () => { }; spyOn(extensionService, 'getViewerExtensions').and.returnValue([extension]); - fixture = TestBed.createComponent(ViewerComponent); + fixture = TestBed.createComponent(ViewerRenderComponent); element = fixture.nativeElement; component = fixture.componentInstance; @@ -272,7 +272,7 @@ describe('ViewerComponent', () => { ]; spyOn(extensionService, 'getViewerExtensions').and.returnValue(extensions); - fixture = TestBed.createComponent(ViewerComponent); + fixture = TestBed.createComponent(ViewerRenderComponent); element = fixture.nativeElement; component = fixture.componentInstance; @@ -294,7 +294,7 @@ describe('ViewerComponent', () => { }; spyOn(extensionService, 'getViewerExtensions').and.returnValue([extension]); - fixture = TestBed.createComponent(ViewerComponent); + fixture = TestBed.createComponent(ViewerRenderComponent); element = fixture.nativeElement; component = fixture.componentInstance; @@ -318,7 +318,7 @@ describe('ViewerComponent', () => { }; spyOn(extensionService, 'getViewerExtensions').and.returnValue([extension]); - fixture = TestBed.createComponent(ViewerComponent); + fixture = TestBed.createComponent(ViewerRenderComponent); element = fixture.nativeElement; component = fixture.componentInstance; @@ -1350,7 +1350,7 @@ describe('ViewerComponent', () => { describe('Viewer component - Full Screen Mode - Mocking fixture element', () => { beforeEach(() => { - fixture = TestBed.createComponent(ViewerComponent); + fixture = TestBed.createComponent(ViewerRenderComponent); element = fixture.nativeElement; component = fixture.componentInstance; diff --git a/lib/core/src/lib/viewer/components/viewer.component.ts b/lib/core/src/lib/viewer/components/viewer-render.component.ts similarity index 51% rename from lib/core/src/lib/viewer/components/viewer.component.ts rename to lib/core/src/lib/viewer/components/viewer-render.component.ts index 4d63aa4cf2..6b7f31f4b5 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.ts +++ b/lib/core/src/lib/viewer/components/viewer-render.component.ts @@ -20,47 +20,33 @@ //TODO TO UNDERSTAND THE LEFT AND RIGHT SIDEBAR //TODO uncomment media load subtitle //TODO rename allowGoBack allow close button -//TODO prevent momentanus unkown format +//TODO prevent momentous unknown format //TODO null propagation //TODO viewer widget specialization in process service cloud +//TODO Test close dialog password scenario +//TODO Remove unused CSS +//TODO FIX documentation +//TODO Fix core viewer widget import { - Component, ContentChild, EventEmitter, HostListener, ElementRef, + Component, EventEmitter, Input, OnChanges, Output, TemplateRef, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core'; -import { BaseEvent } from '../../events'; -import { ViewerMoreActionsComponent } from './viewer-more-actions.component'; -import { ViewerOpenWithComponent } from './viewer-open-with.component'; -import { ViewerSidebarComponent } from './viewer-sidebar.component'; -import { ViewerToolbarComponent } from './viewer-toolbar.component'; -import { fromEvent, Subject } from 'rxjs'; +import { Subject } from 'rxjs'; import { ViewUtilService } from '../services/view-util.service'; import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions'; -import { filter, skipWhile, takeUntil } from 'rxjs/operators'; import { MatDialog } from '@angular/material/dialog'; @Component({ - selector: 'adf-viewer', - templateUrl: './viewer.component.html', - styleUrls: ['./viewer.component.scss'], - host: {class: 'adf-viewer'}, + selector: 'adf-viewer-render', + templateUrl: './viewer-render.component.html', + styleUrls: ['./viewer-render.component.scss'], + host: {class: 'adf-viewer-render'}, encapsulation: ViewEncapsulation.None, providers: [ViewUtilService] }) -export class ViewerComponent implements OnChanges, OnInit, OnDestroy { - - @ContentChild(ViewerToolbarComponent) - toolbar: ViewerToolbarComponent; - - @ContentChild(ViewerSidebarComponent) - sidebar: ViewerSidebarComponent; - - @ContentChild(ViewerOpenWithComponent) - mnuOpenWith: ViewerOpenWithComponent; - - @ContentChild(ViewerMoreActionsComponent) - mnuMoreActions: ViewerMoreActionsComponent; +export class ViewerRenderComponent implements OnChanges, OnInit, OnDestroy { /** If you want to load an external file that does not come from ACS you * can use this URL to specify where to load the file from. @@ -72,24 +58,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy { @Input() blobFile: Blob; - /** If `true` then show the Viewer as a full page over the current content. - * Otherwise fit inside the parent div. - */ - @Input() - overlayMode = false; - - /** Hide or show the viewer */ - @Input() - showViewer = true; - - /** Toggles downloading. */ - @Input() - allowDownload = true; - - /** Toggles printing. */ - @Input() - allowPrint = false; - /** Toggles the 'Full Screen' feature. */ @Input() allowFullScreen = true; @@ -131,18 +99,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy { @Input() isLoading = false; - /** Emitted when user clicks the 'Back' button. */ - @Output() - goBack = new EventEmitter>(); - - /** Emitted when user clicks the 'Print' button. */ - @Output() - print = new EventEmitter>(); - - /** Emitted when the viewer is shown or hidden. */ - @Output() - showViewerChange = new EventEmitter(); - /** Emitted when the filename extension changes. */ @Output() extensionChange = new EventEmitter(); @@ -152,12 +108,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy { submitFile = new EventEmitter(); extensionTemplates: { template: TemplateRef; isVisible: boolean }[] = []; - urlFileContent: string; - otherMenu: any; extension: string; - // sidebarRightTemplateContext: { node: Node } = { node: null }; - // sidebarLeftTemplateContext: { node: Node } = { node: null }; - fileTitle: string; /** * Returns a list of the active Viewer content extensions. @@ -182,22 +133,16 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy { return this._externalViewer; } - // readOnly = true; - cacheTypeForContent = ''; private onDestroy$ = new Subject(); - private shouldCloseViewer = true; - private keyDown$ = fromEvent(document, 'keydown'); constructor(private viewUtilService: ViewUtilService, private extensionService: AppExtensionService, - private el: ElementRef, public dialog: MatDialog) { } ngOnInit() { - this.closeOverlayManager(); this.cacheTypeForContent = ''; } @@ -207,16 +152,14 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy { } ngOnChanges() { - if (this.showViewer) { - this.isLoading = true; + this.isLoading = true; - if (this.blobFile) { - this.setUpBlobData(); - this.isLoading = false; - } else if (this.urlFile) { - this.setUpUrlFile(); - this.isLoading = false; - } + if (this.blobFile) { + this.setUpBlobData(); + this.isLoading = false; + } else if (this.urlFile) { + this.setUpUrlFile(); + this.isLoading = false; } } @@ -224,91 +167,23 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy { this.mimeType = this.blobFile.type; this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.mimeType); - this.allowDownload = false; - // TODO: wrap blob into the data url and allow downloading - this.extensionChange.emit(this.mimeType); this.scrollTop(); } private setUpUrlFile() { this.fileName = this.fileName ? this.fileName : this.viewUtilService.getFilenameFromUrl(this.urlFile); - this.extension = this.viewUtilService.getFileExtension(this.fileTitle); - this.urlFileContent = this.urlFile; + this.extension = this.viewUtilService.getFileExtension(this.fileName); this.viewerType = this.viewerType === 'unknown' ? this.viewUtilService.getViewerType(this.extension, this.mimeType) : this.viewerType; this.extensionChange.emit(this.extension); this.scrollTop(); } - scrollTop() { window.scrollTo(0, 1); } - onBackButtonClick() { - this.close(); - } - - - /** - * close the viewer - */ - close() { - if (this.otherMenu) { - this.otherMenu.hidden = false; - } - this.showViewer = false; - this.showViewerChange.emit(this.showViewer); - } - - - /** - * Keyboard event listener - * - * @param event - */ - @HostListener('document:keyup', ['$event']) - handleKeyboardEvent(event: KeyboardEvent) { - if (event && event.defaultPrevented) { - return; - } - - const key = event.keyCode; - - // Ctrl+F - if (key === 70 && event.ctrlKey) { - event.preventDefault(); - this.enterFullScreen(); - } - } - - printContent() { - if (this.allowPrint) { - this.print.next(new BaseEvent()); - } - } - - /** - * 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(); - } - } - } - } - checkExtensions(extensionAllowed) { if (typeof extensionAllowed === 'string') { return this.extension.toLowerCase() === extensionAllowed.toLowerCase(); @@ -325,28 +200,4 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy { this.viewerType = 'unknown'; } - private closeOverlayManager() { - this.dialog.afterOpened.pipe( - skipWhile(() => !this.overlayMode), - takeUntil(this.onDestroy$) - ).subscribe(() => this.shouldCloseViewer = false); - - this.dialog.afterAllClosed.pipe( - skipWhile(() => !this.overlayMode), - takeUntil(this.onDestroy$) - ).subscribe(() => this.shouldCloseViewer = true); - - this.keyDown$.pipe( - skipWhile(() => !this.overlayMode), - filter((e: KeyboardEvent) => e.keyCode === 27), - takeUntil(this.onDestroy$) - ).subscribe((event: KeyboardEvent) => { - event.preventDefault(); - - if (this.shouldCloseViewer) { - this.close(); - } - }); - } - } diff --git a/lib/core/src/lib/viewer/components/viewer.component.html b/lib/core/src/lib/viewer/components/viewer.component.html deleted file mode 100644 index 851c6270e3..0000000000 --- a/lib/core/src/lib/viewer/components/viewer.component.html +++ /dev/null @@ -1,142 +0,0 @@ -
- -
- - -
- -
- - - - - -
- - - -
- - - - - -
- - -
-
-
- -
-

{{ 'ADF_VIEWER.LOADING' | translate }}

-
- -
-
- - -
-
-
- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- -
-
-
diff --git a/lib/core/src/lib/viewer/components/viewer.component.scss b/lib/core/src/lib/viewer/components/viewer.component.scss deleted file mode 100644 index c9ebd54c5d..0000000000 --- a/lib/core/src/lib/viewer/components/viewer.component.scss +++ /dev/null @@ -1,205 +0,0 @@ -/* stylelint-disable scss/at-extend-no-missing-placeholder */ -.adf-full-screen { - width: 100%; - height: 100%; - background-color: var(--theme-card-bg-color); -} - -.adf-viewer { - position: absolute; - width: 100%; - height: 100%; - - .mat-toolbar { - color: var(--theme-text-color); - - .adf-toolbar-title { - width: auto; - } - } - - &-main { - width: 0; - } - - &__mimeicon { - vertical-align: middle; - height: 18px; - width: 18px; - } - - &-toolbar { - .mat-toolbar { - background-color: var(--theme-card-bg-bold-color); - } - } - - &__file-title { - text-align: center; - } - - &__display-name { - font-size: var(--theme-subheading-2-font-size); - opacity: 0.87; - line-height: 1.5; - letter-spacing: -0.4px; - font-weight: normal; - font-style: normal; - font-stretch: normal; - max-width: 400px; - text-overflow: ellipsis; - overflow: hidden; - display: inline-block; - vertical-align: middle; - color: var(--theme-text-fg-color); - } - - &-container { - .adf-viewer-layout-content { - @extend .adf-full-screen; - - position: relative; - overflow-y: hidden; - overflow-x: hidden; - z-index: 1; - background-color: var(--theme-background-color); - display: flex; - flex-direction: row; - /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */ - flex-wrap: wrap; - flex: 1; - - & > div { - display: flex; - flex-flow: row wrap; - margin: 0 auto; - align-items: stretch; - height: 100%; - } - } - - .adf-viewer-layout { - @extend .adf-full-screen; - - display: flex; - flex-direction: row; - overflow-y: auto; - overflow-x: hidden; - position: relative; - } - - .adf-viewer-content { - @extend .adf-full-screen; - - flex: 1; - - & > div { - height: 0; // Firefox - } - } - } - - &-overlay-container { - .adf-viewer-content { - position: fixed; - top: 0; - left: 0; - z-index: 1000; - } - } - - &-inline-container { - @extend .adf-full-screen; - } - - &-content-container { - display: flex; - justify-content: center; - } - - &-custom-content { - width: 100vw; - } - - &-unknown-content { - align-items: center; - display: flex; - } - - &__loading-screen { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - height: 85vh; - - .mat-spinner { - margin: 0 auto; - } - } - - &__sidebar { - width: 350px; - display: block; - padding: 0; - background-color: var(--theme-background-color); - box-shadow: 0 2px 4px 0 var(--theme-text-fg-shadow-color); - overflow: auto; - - &__right { - border-left: 1px solid var(--theme-border-color); - } - - &__left { - border-right: 1px solid var(--theme-border-color); - } - } - - &__thumbnails { - width: 180px; - display: flex; - flex-direction: column; - padding: 0; - background: #e6e6e6; - - .adf-info-drawer-layout { - display: flex; - flex-direction: column; - flex: 1; - background: #e6e6e6; - } - - .adf-info-drawer-layout-header { - margin-bottom: 0; - } - - .adf-info-drawer-layout-content { - padding: 0; - height: 100%; - overflow: hidden; - } - - .adf-info-drawer-content { - height: 100%; - } - - .adf-info-drawer-layout-content > *:last-child { - height: 100%; - overflow: hidden; - } - } - - &__toolbar { - &-page-scale { - cursor: default; - width: 79px; - height: 24px; - font-size: var(--theme-body-1-font-size); - border: 1px solid var(--theme-border-color); - text-align: center; - line-height: 24px; - margin-left: 4px; - margin-right: 4px; - } - } -} diff --git a/lib/core/src/lib/viewer/directives/viewer-extension.directive.spec.ts b/lib/core/src/lib/viewer/directives/viewer-extension.directive.spec.ts index 8a15607a7d..4af5122677 100644 --- a/lib/core/src/lib/viewer/directives/viewer-extension.directive.spec.ts +++ b/lib/core/src/lib/viewer/directives/viewer-extension.directive.spec.ts @@ -19,7 +19,7 @@ import { Location } from '@angular/common'; import { SpyLocation } from '@angular/common/testing'; import { ChangeDetectorRef, ElementRef } from '@angular/core'; import { TestBed } from '@angular/core/testing'; -import { ViewerComponent } from '../components/viewer.component'; +import { ViewerRenderComponent } from '../components/viewer-render.component.ts'; import { ViewerExtensionDirective } from './viewer-extension.directive'; import { setupTestBed } from '../../testing/setup-test-bed'; import { CoreTestingModule } from '../../testing/core.testing.module'; @@ -43,7 +43,7 @@ describe('ExtensionViewerDirective', () => { { provide: Location, useClass: SpyLocation }, ViewerExtensionDirective, {provide: ElementRef, useClass: MockElementRef}, - ViewerComponent, + ViewerRenderComponent, { provide: ChangeDetectorRef, useValue: { detectChanges: () => {} } } ] }); diff --git a/lib/core/src/lib/viewer/directives/viewer-extension.directive.ts b/lib/core/src/lib/viewer/directives/viewer-extension.directive.ts index 2f9f7fbadb..41ea6da8f7 100644 --- a/lib/core/src/lib/viewer/directives/viewer-extension.directive.ts +++ b/lib/core/src/lib/viewer/directives/viewer-extension.directive.ts @@ -16,7 +16,7 @@ */ import { AfterContentInit, ContentChild, Directive, Input, TemplateRef, OnDestroy } from '@angular/core'; -import { ViewerComponent } from '../components/viewer.component'; +import { ViewerRenderComponent } from '../components/viewer-render.component'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -41,7 +41,7 @@ export class ViewerExtensionDirective implements AfterContentInit, OnDestroy { private onDestroy$ = new Subject(); - constructor(private viewerComponent: ViewerComponent) { + constructor(private viewerComponent: ViewerRenderComponent) { } ngAfterContentInit() { diff --git a/lib/core/src/lib/viewer/public-api.ts b/lib/core/src/lib/viewer/public-api.ts index af1c1cc812..a32a35ea9d 100644 --- a/lib/core/src/lib/viewer/public-api.ts +++ b/lib/core/src/lib/viewer/public-api.ts @@ -16,7 +16,6 @@ */ export * from './services/view-util.service'; -export * from './components/viewer.component'; export * from './components/img-viewer.component'; export * from './components/media-player.component'; export * from './components/pdf-viewer-password-dialog'; @@ -31,7 +30,7 @@ export * from './components/viewer-open-with.component'; export * from './components/viewer-sidebar.component'; export * from './components/viewer-toolbar.component'; export * from './components/viewer-toolbar-actions.component'; -export * from './components/viewer.component'; +export * from './components/viewer-render.component'; export * from './directives/viewer-extension.directive'; diff --git a/lib/core/src/lib/viewer/services/view-util.service.ts b/lib/core/src/lib/viewer/services/view-util.service.ts index 4867885fe1..6c8b208642 100644 --- a/lib/core/src/lib/viewer/services/view-util.service.ts +++ b/lib/core/src/lib/viewer/services/view-util.service.ts @@ -17,7 +17,7 @@ import { Injectable } from '@angular/core'; import { LogService } from '../../services/log.service'; -import { RenditionViewerService } from "./rendition-viewer.service"; +import { RenditionViewerService } from "../../../../../content-services/src/lib/viewer/services/rendition-viewer.service"; import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions'; @Injectable({ diff --git a/lib/core/src/lib/viewer/viewer.module.ts b/lib/core/src/lib/viewer/viewer.module.ts index 6b3c9cee9e..01d8dbe2d1 100644 --- a/lib/core/src/lib/viewer/viewer.module.ts +++ b/lib/core/src/lib/viewer/viewer.module.ts @@ -38,12 +38,11 @@ import { ViewerMoreActionsComponent } from './components/viewer-more-actions.com import { ViewerOpenWithComponent } from './components/viewer-open-with.component'; import { ViewerSidebarComponent } from './components/viewer-sidebar.component'; import { ViewerToolbarComponent } from './components/viewer-toolbar.component'; -import { ViewerComponent } from './components/viewer.component'; +import { ViewerRenderComponent } from './components/viewer-render.component'; import { ViewerExtensionDirective } from './directives/viewer-extension.directive'; import { ViewerToolbarActionsComponent } from './components/viewer-toolbar-actions.component'; import { DirectiveModule } from '../directives/directive.module'; import { A11yModule } from '@angular/cdk/a11y'; -import { AlfrescoViewerComponent } from "./components/alfresco-viewer.component"; @NgModule({ imports: [ @@ -61,8 +60,7 @@ import { AlfrescoViewerComponent } from "./components/alfresco-viewer.component" ], declarations: [ PdfPasswordDialogComponent, - ViewerComponent, - AlfrescoViewerComponent, + ViewerRenderComponent, ImgViewerComponent, TxtViewerComponent, MediaPlayerComponent, @@ -78,8 +76,7 @@ import { AlfrescoViewerComponent } from "./components/alfresco-viewer.component" ViewerToolbarActionsComponent ], exports: [ - ViewerComponent, - AlfrescoViewerComponent, + ViewerRenderComponent, ImgViewerComponent, TxtViewerComponent, MediaPlayerComponent, diff --git a/lib/extensions/src/lib/components/viewer/preview-extension.component.ts b/lib/extensions/src/lib/components/viewer/preview-extension.component.ts index 15c1fb5436..87beff739b 100644 --- a/lib/extensions/src/lib/components/viewer/preview-extension.component.ts +++ b/lib/extensions/src/lib/components/viewer/preview-extension.component.ts @@ -27,7 +27,6 @@ import { OnChanges } from '@angular/core'; import { ExtensionService } from '../../services/extension.service'; -import { Node } from '@alfresco/js-api'; @Component({ selector: 'adf-preview-extension', @@ -51,10 +50,6 @@ export class PreviewExtensionComponent implements OnInit, OnChanges, OnDestroy { @Input() extension: string; - /** Node containing the content to display. */ - @Input() - node: Node; - private componentRef: ComponentRef; constructor( @@ -95,7 +90,6 @@ export class PreviewExtensionComponent implements OnInit, OnChanges, OnDestroy { if (this.componentRef && this.componentRef.instance) { const instance = this.componentRef.instance; - instance.node = this.node; instance.url = this.url; instance.extension = this.extension; }