[ACA-1695] viewer extensions (#576)

[ACA-1695] viewer extensions

src/app/components/preview/preview-extension.component.ts

@@ -0,0 +1,105 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+    Component,
+    Input,
+    ComponentRef,
+    OnInit,
+    ComponentFactoryResolver,
+    ViewChild,
+    ViewContainerRef,
+    OnDestroy,
+    OnChanges
+} from '@angular/core';
+import { ExtensionService } from '../../extensions/extension.service';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+
+@Component({
+    selector: 'app-preview-extension',
+    template: `<div #content></div>`
+})
+export class PreviewExtensionComponent implements OnInit, OnChanges, OnDestroy {
+    @ViewChild('content', { read: ViewContainerRef })
+    content: ViewContainerRef;
+
+    @Input()
+    id: string;
+
+    @Input()
+    url: string;
+
+    @Input()
+    extension: string;
+
+    @Input()
+    node: MinimalNodeEntryEntity;
+
+    private componentRef: ComponentRef<any>;
+
+    constructor(
+        private extensions: ExtensionService,
+        private componentFactoryResolver: ComponentFactoryResolver
+    ) {}
+
+    ngOnInit() {
+        if (!this.id) {
+            return;
+        }
+
+        const componentType = this.extensions.getComponentById(this.id);
+        if (componentType) {
+            const factory = this.componentFactoryResolver.resolveComponentFactory(
+                componentType
+            );
+            if (factory) {
+                this.content.clear();
+                this.componentRef = this.content.createComponent(factory, 0);
+                this.updateInstance();
+            }
+        }
+    }
+
+    ngOnChanges() {
+        this.updateInstance();
+    }
+
+    ngOnDestroy() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+
+    private updateInstance() {
+        if (this.componentRef && this.componentRef.instance) {
+            const instance = this.componentRef.instance;
+
+            instance.node = this.node;
+            instance.url = this.url;
+            instance.extension = this.extension;
+        }
+    }
+}

src/app/components/preview/preview.component.html

@@ -28,5 +28,19 @@
                 <aca-toolbar-action type="menu-item" [entry]="action"></aca-toolbar-action>
             </ng-container>
         </adf-viewer-more-actions>
+
+        <ng-container *ngFor="let ext of contentExtensions">
+            <adf-viewer-extension [supportedExtensions]="[ext.fileExtension]">
+                <ng-template let-url="urlFileContent" let-extension="extension">
+                    <app-preview-extension
+                        [id]="ext.component"
+                        [node]="selection.file?.entry"
+                        [url]="url"
+                        [extension]="extension">
+                    </app-preview-extension>
+                </ng-template>
+            </adf-viewer-extension>
+        </ng-container>
+
     </adf-viewer>
 </ng-container>

src/app/components/preview/preview.component.ts

@@ -35,6 +35,7 @@ import { ExtensionService } from '../../extensions/extension.service';
 import { ContentManagementService } from '../../services/content-management.service';
 import { ContentActionRef } from '../../extensions/action.extensions';
 import { ViewUtilService } from './view-util.service';
+import { ViewerExtensionRef } from '../../extensions/viewer.extensions';
 
 @Component({
     selector: 'app-preview',
@@ -55,6 +56,7 @@ export class PreviewComponent extends PageComponent implements OnInit {
     nextNodeId: string;
     navigateMultiple = false;
     openWith: Array<ContentActionRef> = [];
+    contentExtensions: Array<ViewerExtensionRef> = [];
 
     constructor(
         private contentApi: ContentApiService,
@@ -97,6 +99,7 @@ export class PreviewComponent extends PageComponent implements OnInit {
         });
 
         this.openWith = this.extensions.openWithActions;
+        this.contentExtensions = this.extensions.viewerContentExtensions;
     }
 
     /**

src/app/components/preview/preview.module.ts

@@ -35,6 +35,7 @@ import { PreviewComponent } from './preview.component';
 import { ViewUtilService } from './view-util.service';
 
 import * as pdfjsLib from 'pdfjs-dist';
+import { PreviewExtensionComponent } from './preview-extension.component';
 pdfjsLib.PDFJS.workerSrc = 'pdf.worker.js';
 pdfjsLib.PDFJS.disableFontFace = true;
 
@@ -57,6 +58,7 @@ const routes: Routes = [
     ],
     declarations: [
         PreviewComponent,
+        PreviewExtensionComponent
     ],
     providers: [
         ViewUtilService

src/app/extensions/extension.config.ts

@@ -28,6 +28,7 @@ import { RouteRef } from './routing.extensions';
 import { RuleRef } from './rule.extensions';
 import { ActionRef, ContentActionRef } from './action.extensions';
 import { SidebarTabRef } from './sidebar.extensions';
+import { ViewerExtensionRef } from './viewer.extensions';
 
 export interface ExtensionConfig {
     $name: string;
@@ -43,6 +44,7 @@ export interface ExtensionConfig {
         viewer?: {
             openWith?: Array<ContentActionRef>;
             toolbar?: Array<ContentActionRef>;
+            content?: Array<ViewerExtensionRef>;
         };
         navbar?: Array<NavBarGroupRef>;
         sidebar?: Array<SidebarTabRef>;

src/app/extensions/extension.service.ts

@@ -39,6 +39,7 @@ import * as core from './evaluators/core.evaluators';
 import { NodePermissionService } from '../services/node-permission.service';
 import { SidebarTabRef } from './sidebar.extensions';
 import { ProfileResolver } from '../services/profile.resolver';
+import { ViewerExtensionRef } from './viewer.extensions';
 
 @Injectable()
 export class ExtensionService implements RuleContext {
@@ -56,6 +57,7 @@ export class ExtensionService implements RuleContext {
 
     toolbarActions: Array<ContentActionRef> = [];
     viewerToolbarActions: Array<ContentActionRef> = [];
+    viewerContentExtensions: Array<ViewerExtensionRef> = [];
     contextMenuActions: Array<ContentActionRef> = [];
     openWithActions: Array<ContentActionRef> = [];
     createActions: Array<ContentActionRef> = [];
@@ -136,6 +138,7 @@ export class ExtensionService implements RuleContext {
         this.routes = this.loadRoutes(config);
         this.toolbarActions = this.loadToolbarActions(config);
         this.viewerToolbarActions = this.loadViewerToolbarActions(config);
+        this.viewerContentExtensions = this.loadViewerContentExtensions(config);
         this.contextMenuActions = this.loadContextMenuActions(config);
         this.openWithActions = this.loadViewerOpenWith(config);
         this.createActions = this.loadCreateActions(config);
@@ -187,6 +190,15 @@ export class ExtensionService implements RuleContext {
         return [];
     }
 
+    protected loadViewerContentExtensions(config: ExtensionConfig): Array<ViewerExtensionRef> {
+        if (config && config.features && config.features.viewer) {
+            return (config.features.viewer.content || [])
+                .filter(entry => !entry.disabled)
+                .sort(this.sortByOrder);
+        }
+        return [];
+    }
+
     protected loadContextMenuActions(config: ExtensionConfig): Array<ContentActionRef> {
         if (config && config.features && config.features.contextMenu) {
             return (config.features.contextMenu || [])

src/app/extensions/viewer.extensions.ts

@@ -0,0 +1,33 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export interface ViewerExtensionRef {
+    id: string;
+    fileExtension: string;
+    component: string;
+
+    disabled?: boolean;
+    order?: number;
+}