[ADF-1744] content projection for toolbar and info drawer (#2476)

* content projection for toolbar and info drawer

* unit tests

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -220,10 +220,10 @@
 </mat-tab-group>
 
 <div *ngIf="fileShowed">
-    <alfresco-viewer
+    <adf-viewer
         [(showViewer)]="fileShowed"
         [blobFile]="content"
         [displayName]="contentName"
         [overlayMode]="true">
-    </alfresco-viewer>
+    </adf-viewer>
 </div>

docs/viewer.component.md

@@ -110,6 +110,35 @@ new CopyWebpackPlugin([
 
 The Viewer component now should be able displaying PDF files.
 
+### Custom toolbar
+
+You can replace standard viewer toolbar with your custom implementation.
+
+```html
+<adf-viewer>
+    <adf-viewer-toolbar>
+        <h1>toolbar</h1>
+    </adf-viewer-toolbar>
+</adf-viewer>
+```
+
+Everything you put inside the "adf-viewer-toolbar" tags is going to be rendered instead of the toolbar.
+
+### Custom info drawer
+
+The Viewer component also suports custom Info Drawer components and layouts.
+The `allowInfoDrawer` property should be set to `true` to enable Info Drawer feature.
+
+```html
+<adf-viewer [allowInfoDrawer]="true">
+    <adf-viewer-info-drawer>
+        <h1>My info</h1>
+    </adf-viewer-info-drawer>
+</adf-viewer>
+```
+
+Everything you put inside the "adf-viewer-info-drawer" tags is going to be rendered instead of the default info drawer.
+
 ### Custom extension handler
 
 If you want to handle other file formats that are not yet supported by the ng2-alfresco-viewer you can define your own custom handler.

ng2-components/ng2-alfresco-viewer/index.ts

@@ -19,16 +19,19 @@ import { NgModule } from '@angular/core';
 import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 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 { PdfViewerComponent } from './src/components/pdfViewer.component';
 import { TxtViewerComponent } from './src/components/txtViewer.component';
 import { UnknownFormatComponent } from './src/components/unknown-format/unknown-format.component';
+import { ViewerInfoDrawerComponent } from './src/components/viewer-info-drawer.component';
+import { ViewerToolbarComponent } from './src/components/viewer-toolbar.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 { ViewerComponent } from './src/components/viewer.component';
+
 export function declarations() {
     return [
         ViewerComponent,
@@ -37,7 +40,9 @@ export function declarations() {
         MediaPlayerComponent,
         PdfViewerComponent,
         ExtensionViewerDirective,
-        UnknownFormatComponent
+        UnknownFormatComponent,
+        ViewerToolbarComponent,
+        ViewerInfoDrawerComponent
     ];
 }
 

ng2-components/ng2-alfresco-viewer/src/components/viewer-info-drawer.component.ts

@@ -0,0 +1,28 @@
+/*!
+ * @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 { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'adf-viewer-info-drawer',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'adf-viewer-info-drawer' },
+    template: `<ng-content></ng-content>`
+})
+export class ViewerInfoDrawerComponent {
+}

ng2-components/ng2-alfresco-viewer/src/components/viewer-toolbar.component.ts

@@ -0,0 +1,28 @@
+/*!
+ * @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 { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'adf-viewer-toolbar',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'adf-viewer-toolbar' },
+    template: `<ng-content></ng-content>`
+})
+export class ViewerToolbarComponent {
+}

ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html

@@ -4,7 +4,8 @@
     [class.adf-viewer-inline-container]="!overlayMode">
 
     <div class="adf-viewer-content">
-        <ng-container *ngIf="showToolbar">
+        <ng-content select="adf-viewer-toolbar"></ng-content>
+        <ng-container *ngIf="showToolbar && !toolbar">
             <adf-toolbar color="default" class="adf-viewer-toolbar">
 
                 <adf-toolbar-title>
@@ -135,18 +136,21 @@
 
             <ng-container *ngIf="showInfoDrawer">
                 <div class="adf-viewer__info-drawer">
-                    <mat-tab-group md-stretch-tabs>
-                        <mat-tab label="Details">
-                            <mat-card>
-                                DETAILS
-                            </mat-card>
-                        </mat-tab>
-                        <mat-tab label="Activity">
-                            <mat-card>
-                                Activity
-                            </mat-card>
-                        </mat-tab>
-                    </mat-tab-group>
+                    <ng-content select="adf-viewer-info-drawer"></ng-content>
+                    <ng-container *ngIf="!infoDrawer">
+                        <mat-tab-group md-stretch-tabs>
+                            <mat-tab label="Details">
+                                <mat-card>
+                                    DETAILS
+                                </mat-card>
+                            </mat-tab>
+                            <mat-tab label="Activity">
+                                <mat-card>
+                                    Activity
+                                </mat-card>
+                            </mat-tab>
+                        </mat-tab-group>
+                    </ng-container>
                 </div>
             </ng-container>
         </div>

ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts

@@ -17,7 +17,7 @@
 
 import { Location } from '@angular/common';
 import { SpyLocation } from '@angular/common/testing';
-import { DebugElement } from '@angular/core';
+import { Component, DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CoreModule } from 'ng2-alfresco-core';
@@ -30,10 +30,36 @@ import { MediaPlayerComponent } from './mediaPlayer.component';
 import { PdfViewerComponent } from './pdfViewer.component';
 import { TxtViewerComponent } from './txtViewer.component';
 import { UnknownFormatComponent } from './unknown-format/unknown-format.component';
+import { ViewerInfoDrawerComponent } from './viewer-info-drawer.component';
+import { ViewerToolbarComponent } from './viewer-toolbar.component';
 import { ViewerComponent } from './viewer.component';
 
 declare let jasmine: any;
 
+@Component({
+    selector: 'adf-viewer-container-toolbar',
+    template: `
+        <adf-viewer>
+            <adf-viewer-toolbar>
+                <div class="custom-toolbar-element"></div>
+            </adf-viewer-toolbar>
+        </adf-viewer>
+    `
+})
+class ViewerWithCustomToolbarComponent {}
+
+@Component({
+    selector: 'adf-viewer-container-info-drawer',
+    template: `
+        <adf-viewer>
+            <adf-viewer-info-drawer>
+                <div class="custom-info-drawer-element"></div>
+            </adf-viewer-info-drawer>
+        </adf-viewer>
+    `
+})
+class ViewerWithCustomInfoDrawerComponent {}
+
 describe('ViewerComponent', () => {
 
     let component: ViewerComponent;
@@ -53,7 +79,11 @@ describe('ViewerComponent', () => {
                 TxtViewerComponent,
                 MediaPlayerComponent,
                 ImgViewerComponent,
-                UnknownFormatComponent
+                UnknownFormatComponent,
+                ViewerInfoDrawerComponent,
+                ViewerToolbarComponent,
+                ViewerWithCustomToolbarComponent,
+                ViewerWithCustomInfoDrawerComponent
             ],
             providers: [
                 RenderingQueueServices,
@@ -82,6 +112,22 @@ describe('ViewerComponent', () => {
         jasmine.Ajax.uninstall();
     });
 
+    it('should use custom toolbar', () => {
+        let customFixture = TestBed.createComponent(ViewerWithCustomToolbarComponent);
+        let customElement: HTMLElement = customFixture.nativeElement;
+
+        customFixture.detectChanges();
+        expect(customElement.querySelector('.custom-toolbar-element')).toBeDefined();
+    });
+
+    it('should use custom info drawer', () => {
+        let customFixture = TestBed.createComponent(ViewerWithCustomInfoDrawerComponent);
+        let customElement: HTMLElement = customFixture.nativeElement;
+
+        customFixture.detectChanges();
+        expect(customElement.querySelector('.custom-info-drawer-element')).toBeDefined();
+    });
+
     describe('View', () => {
 
         describe('Overlay mode true', () => {

ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts

@@ -16,12 +16,18 @@
  */
 
 import { Location } from '@angular/common';
-import { Component, EventEmitter, HostListener, Input, OnChanges, OnDestroy, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
+import {
+    Component, ContentChild, EventEmitter, HostListener,
+    Input, OnChanges, OnDestroy, Output, TemplateRef, ViewEncapsulation
+} from '@angular/core';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { AlfrescoApiService, BaseEvent, LogService, RenditionsService } from 'ng2-alfresco-core';
 
+import { ViewerInfoDrawerComponent } from './viewer-info-drawer.component';
+import { ViewerToolbarComponent  } from './viewer-toolbar.component';
+
 @Component({
-    selector: 'adf-viewer, alfresco-viewer',
+    selector: 'adf-viewer',
     templateUrl: './viewer.component.html',
     styleUrls: ['./viewer.component.scss'],
     host: { 'class': 'adf-viewer' },
@@ -29,6 +35,12 @@ import { AlfrescoApiService, BaseEvent, LogService, RenditionsService } from 'ng
 })
 export class ViewerComponent implements OnDestroy, OnChanges {
 
+    @ContentChild(ViewerToolbarComponent)
+    toolbar: ViewerToolbarComponent;
+
+    @ContentChild(ViewerInfoDrawerComponent)
+    infoDrawer: ViewerInfoDrawerComponent;
+
     @Input()
     urlFile: string = '';