Overlay viewer outlet (#1054)

* separate outlet for the Viewer

* separate node viewer route

* update docs

src/app/app.routes.ts

@@ -52,6 +52,22 @@ export const APP_ROUTES: Routes = [
     loadChildren:
       './components/shared-link-view/shared-link-view.module#AppSharedLinkViewModule'
   },
+  {
+    path: 'view',
+    component: AppLayoutComponent,
+    children: [
+      {
+        path: ':nodeId',
+        outlet: 'viewer',
+        children: [
+          {
+            path: '',
+            loadChildren: './components/viewer/viewer.module#AppViewerModule'
+          }
+        ]
+      }
+    ]
+  },
   {
     path: '',
     component: AppLayoutComponent,
@@ -149,6 +165,18 @@ export const APP_ROUTES: Routes = [
               navigateSource: 'personal-files'
             }
           }
+          // Do not remove, will be enabled in future iterations
+          // {
+          //   path: 'view/:nodeId',
+          //   outlet: 'viewer',
+          //   children: [
+          //     {
+          //       path: '',
+          //       loadChildren:
+          //         './components/viewer/viewer.module#AppViewerModule'
+          //     }
+          //   ]
+          // }
         ]
       },
       {

src/app/components/layout/app-layout/app-layout.component.html

@@ -39,3 +39,5 @@
 
   <app-file-uploading-dialog position="left"></app-file-uploading-dialog>
 </adf-upload-drag-area>
+
+<router-outlet name="viewer"></router-outlet>

src/app/components/layout/app-layout/app-layout.theme.scss

@@ -1,6 +1,16 @@
 @mixin app-layout-theme($theme) {
   .app-layout {
     @include flex-column;
+
+    router-outlet[name='viewer'] + * {
+      width: 100%;
+      height: 100%;
+      z-index: 999;
+      position: absolute;
+      top: 0;
+      right: 0;
+      background-color: white;
+    }
   }
 
   @media screen and (max-width: 599px) {

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

@@ -1,107 +0,0 @@
-/*!
- * @license
- * Alfresco Example Content Application
- *
- * Copyright (C) 2005 - 2019 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 { AppExtensionService } 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: AppExtensionService,
-    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.module.ts

@@ -32,7 +32,6 @@ import { CoreExtensionsModule } from '../../extensions/core.extensions.module';
 import { DirectivesModule } from '../../directives/directives.module';
 import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
 import { PreviewComponent } from './preview.component';
-import { PreviewExtensionComponent } from './preview-extension.component';
 import { AppToolbarModule } from '../toolbar/toolbar.module';
 
 const routes: Routes = [
@@ -57,7 +56,7 @@ const routes: Routes = [
     CoreExtensionsModule.forChild(),
     AppToolbarModule
   ],
-  declarations: [PreviewComponent, PreviewExtensionComponent],
+  declarations: [PreviewComponent],
   exports: [PreviewComponent]
 })
 export class PreviewModule {}

src/app/components/viewer/viewer.component.html

@@ -0,0 +1,27 @@
+<ng-container *ngIf="nodeId">
+  <adf-viewer
+    [nodeId]="nodeId"
+    [allowNavigate]="false"
+    [allowPrint]="false"
+    [allowDownload]="false"
+    [allowFullScreen]="false"
+    [allowRightSidebar]="showRightSide"
+    [showRightSidebar]="showRightSide"
+  >
+    <adf-viewer-sidebar *ngIf="(infoDrawerOpened$ | async)">
+      <aca-info-drawer [node]="selection.file"></aca-info-drawer>
+    </adf-viewer-sidebar>
+
+    <adf-viewer-open-with *ngIf="openWith.length">
+      <ng-container *ngFor="let action of openWith; trackBy: trackById">
+        <app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
+      </ng-container>
+    </adf-viewer-open-with>
+
+    <adf-viewer-toolbar-actions>
+      <ng-container *ngFor="let action of toolbarActions; trackBy: trackById">
+        <aca-toolbar-action [actionRef]="action"></aca-toolbar-action>
+      </ng-container>
+    </adf-viewer-toolbar-actions>
+  </adf-viewer>
+</ng-container>

src/app/components/viewer/viewer.component.scss

@@ -0,0 +1,23 @@
+.app-viewer {
+  width: 100%;
+  height: 100%;
+
+  .adf-viewer-toolbar .adf-toolbar-divider {
+    display: none;
+  }
+
+  .adf-viewer-toolbar-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .adf-toolbar-divider {
+      display: inline;
+    }
+  }
+
+  // todo: remove this when viewer supports extensions
+  .adf-viewer-toolbar .mat-toolbar > button:last-child {
+    display: none;
+  }
+}

src/app/components/viewer/viewer.component.ts

@@ -0,0 +1,121 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2019 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, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ContentActionRef, SelectionState } from '@alfresco/adf-extensions';
+import { Store } from '@ngrx/store';
+import { AppStore } from '../../store/states';
+import {
+  appSelection,
+  infoDrawerOpened
+} from '../../store/selectors/app.selectors';
+import { takeUntil } from 'rxjs/operators';
+import { Subject, Observable, from } from 'rxjs';
+import { AppExtensionService } from '../../extensions/extension.service';
+import { MinimalNodeEntryEntity } from '@alfresco/js-api';
+import { ContentApiService } from '../../services/content-api.service';
+import { SetSelectedNodesAction } from '../../store/actions';
+
+@Component({
+  selector: 'app-viewer',
+  templateUrl: './viewer.component.html',
+  styleUrls: ['./viewer.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-viewer' }
+})
+export class AppViewerComponent implements OnInit, OnDestroy {
+  onDestroy$ = new Subject<boolean>();
+
+  nodeId: string = null;
+  node: MinimalNodeEntryEntity;
+  selection: SelectionState;
+  infoDrawerOpened$: Observable<boolean>;
+
+  showRightSide = false;
+  openWith: ContentActionRef[] = [];
+  toolbarActions: ContentActionRef[] = [];
+
+  constructor(
+    private route: ActivatedRoute,
+    private store: Store<AppStore>,
+    protected extensions: AppExtensionService,
+    private contentApi: ContentApiService
+  ) {}
+
+  ngOnInit() {
+    this.infoDrawerOpened$ = this.store.select(infoDrawerOpened);
+
+    from(this.infoDrawerOpened$)
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe(val => {
+        this.showRightSide = val;
+      });
+
+    this.store
+      .select(appSelection)
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe(selection => {
+        this.selection = selection;
+
+        this.toolbarActions = this.extensions.getViewerToolbarActions();
+        this.openWith = this.extensions.openWithActions;
+      });
+
+    this.route.params.subscribe(params => {
+      const { nodeId } = params;
+      if (nodeId) {
+        this.displayNode(nodeId);
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
+  trackById(_: number, obj: { id: string }) {
+    return obj.id;
+  }
+
+  async displayNode(id: string) {
+    if (id) {
+      try {
+        this.node = await this.contentApi.getNodeInfo(id).toPromise();
+        this.store.dispatch(new SetSelectedNodesAction([{ entry: this.node }]));
+
+        if (this.node && this.node.isFile) {
+          this.nodeId = this.node.id;
+          return;
+        }
+      } catch (err) {
+        if (!err || err.status !== 401) {
+          // this.router.navigate([this.previewLocation, id]);
+        }
+      }
+    }
+  }
+}

src/app/components/viewer/viewer.module.ts

@@ -23,10 +23,36 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { PreviewExtensionComponent } from './preview-extension.component';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentDirectiveModule } from '@alfresco/adf-content-services';
+import { DirectivesModule } from '../../directives/directives.module';
+import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
+import { CoreExtensionsModule } from '../../extensions/core.extensions.module';
+import { AppToolbarModule } from '../toolbar/toolbar.module';
+import { AppViewerComponent } from './viewer.component';
 
-describe('PreviewExtensionComponent', () => {
-  it('should be defined', () => {
-    expect(PreviewExtensionComponent).toBeDefined();
-  });
-});
+const routes: Routes = [
+  {
+    path: '',
+    component: AppViewerComponent
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    CoreModule.forChild(),
+    ContentDirectiveModule,
+    DirectivesModule,
+    AppInfoDrawerModule,
+    CoreExtensionsModule.forChild(),
+    AppToolbarModule
+  ],
+  declarations: [AppViewerComponent],
+  exports: [AppViewerComponent]
+})
+export class AppViewerModule {}

src/app/extensions/evaluators/navigation.evaluators.ts

@@ -31,7 +31,7 @@ import { RuleContext } from '@alfresco/adf-extensions';
  */
 export function isPreview(context: RuleContext): boolean {
   const { url } = context.navigation;
-  return url && url.includes('/preview/');
+  return url && (url.includes('/preview/') || url.includes('/view/'));
 }
 
 /**

src/app/store/actions/viewer.actions.ts

@@ -27,8 +27,14 @@ import { Action } from '@ngrx/store';
 import { MinimalNodeEntity } from '@alfresco/js-api';
 
 export const VIEW_FILE = 'VIEW_FILE';
+export const VIEW_NODE = 'VIEW_NODE';
 
 export class ViewFileAction implements Action {
   readonly type = VIEW_FILE;
   constructor(public payload: MinimalNodeEntity, public parentId?: string) {}
 }
+
+export class ViewNodeAction implements Action {
+  readonly type = VIEW_NODE;
+  constructor(public nodeId: string, public location?: string) {}
+}

src/app/store/effects/viewer.effects.ts

@@ -31,6 +31,7 @@ import { Router } from '@angular/router';
 import { Store, createSelector } from '@ngrx/store';
 import { AppStore } from '../states';
 import { appSelection, currentFolder } from '../selectors/app.selectors';
+import { ViewNodeAction, VIEW_NODE } from '../actions/viewer.actions';
 
 export const fileToPreview = createSelector(
   appSelection,
@@ -51,6 +52,28 @@ export class ViewerEffects {
     private router: Router
   ) {}
 
+  @Effect({ dispatch: false })
+  viewNode$ = this.actions$.pipe(
+    ofType<ViewNodeAction>(VIEW_NODE),
+    map(action => {
+      if (action.location) {
+        this.router.navigate(
+          [action.location, { outlets: { viewer: ['view', action.nodeId] } }],
+          {
+            queryParams: {
+              source: action.location
+            }
+          }
+        );
+      } else {
+        this.router.navigate([
+          'view',
+          { outlets: { viewer: [action.nodeId] } }
+        ]);
+      }
+    })
+  );
+
   @Effect({ dispatch: false })
   viewFile$ = this.actions$.pipe(
     ofType<ViewFileAction>(VIEW_FILE),