[ADF-1750] content projection for viewer menus (#2524)

* content projection for viewer menus

* unit tests

* remove old file

docs/viewer.component.md

@@ -51,13 +51,11 @@ Using with file url:
 | showToolbar | boolean | true | Hide or show the toolbars |
 | displayName | string | | You can specify the name of the file |
 | allowGoBack | boolean | true | Allow `back` navigation |
-| allowOpenWith | boolean | false | Toggle `Open With` options |
 | allowDownload | boolean | true | Toggle download feature |
 | allowPrint | boolean | false | Toggle printing feature |
 | allowShare | boolean | false | Toggle sharing feature |
 | allowInfoDrawer | boolean |false | Toogle info drawer feature |
 | showInfoDrawer | boolean | false | Toggles info drawer visibility. Requires `allowInfoDrawer` to be set to `true`. |
-| allowMoreActions | boolean | false | Toggles `More actions` feature |
 
 ## Details
 
@@ -139,6 +137,60 @@ The `allowInfoDrawer` property should be set to `true` to enable Info Drawer fea
 
 Everything you put inside the "adf-viewer-info-drawer" tags is going to be rendered instead of the default info drawer.
 
+### Custom "Open With" menu
+
+You can enable custom "Open With" menu by providing at least one action inside the "adf-viewer-open-with" tag:
+
+```html
+<adf-viewer [fileNodeId]="nodeId">
+
+    <adf-viewer-open-with>
+        <button mat-menu-item>
+            <mat-icon>dialpad</mat-icon>
+            <span>Option 1</span>
+        </button>
+        <button mat-menu-item disabled>
+            <mat-icon>voicemail</mat-icon>
+            <span>Option 2</span>
+        </button>
+        <button mat-menu-item>
+            <mat-icon>notifications_off</mat-icon>
+            <span>Option 3</span>
+        </button>
+    </adf-viewer-open-with>
+
+</adv-viewer>
+```
+
+![Open with](docassets/images/viewer-open-with.png)
+
+### Custom "More actions" menu
+
+You can enable custom "More actions" menu by providing at least one action indide the "adf-viewer-more-actions" tag:
+
+```html
+<adf-viewer [fileNodeId]="nodeId">
+
+    <adf-viewer-more-actions>
+        <button mat-menu-item>
+            <mat-icon>dialpad</mat-icon>
+            <span>Action One</span>
+        </button>
+        <button mat-menu-item disabled>
+            <mat-icon>voicemail</mat-icon>
+            <span>Action Two</span>
+        </button>
+        <button mat-menu-item>
+            <mat-icon>notifications_off</mat-icon>
+            <span>Action Three</span>
+        </button>
+    </adf-viewer-more-actions>
+
+</adv-viewer>
+```
+
+![More actions](docassets/images/viewer-more-actions.png)
+
 ### 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

@@ -25,6 +25,8 @@ 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 { ViewerMoreActionsComponent } from './src/components/viewer-more-actions.component';
+import { ViewerOpenWithComponent } from './src/components/viewer-open-with.component';
 import { ViewerToolbarComponent } from './src/components/viewer-toolbar.component';
 import { ViewerComponent } from './src/components/viewer.component';
 import { ExtensionViewerDirective } from './src/directives/extension-viewer.directive';
@@ -42,7 +44,9 @@ export function declarations() {
         ExtensionViewerDirective,
         UnknownFormatComponent,
         ViewerToolbarComponent,
-        ViewerInfoDrawerComponent
+        ViewerInfoDrawerComponent,
+        ViewerOpenWithComponent,
+        ViewerMoreActionsComponent
     ];
 }
 

ng2-components/ng2-alfresco-viewer/src/components/viewer-more-actions.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-more-actions',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'adf-viewer-more-actions' },
+    template: `<ng-content></ng-content>`
+})
+export class ViewerMoreActionsComponent {
+}

ng2-components/ng2-alfresco-viewer/src/components/viewer-open-with.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-open-with',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'adf-viewer-open-with' },
+    template: `<ng-content></ng-content>`
+})
+export class ViewerOpenWithComponent {
+}

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

@@ -20,24 +20,13 @@
                     <span>{{ displayName }}</span>
                 </adf-toolbar-title>
 
-                <ng-container *ngIf="allowOpenWith">
+                <ng-container *ngIf="mnuOpenWith">
                     <button mat-button [matMenuTriggerFor]="mnuOpenWith">
                         <span>{{ 'ADF_VIEWER.ACTIONS.OPEN_WITH' | translate }}</span>
                         <mat-icon>arrow_drop_down</mat-icon>
                     </button>
                     <mat-menu #mnuOpenWith="matMenu" [overlapTrigger]="false">
-                        <button mat-menu-item>
-                            <mat-icon>dialpad</mat-icon>
-                            <span>Option 1</span>
-                        </button>
-                        <button mat-menu-item disabled>
-                            <mat-icon>voicemail</mat-icon>
-                            <span>Option 2</span>
-                        </button>
-                        <button mat-menu-item>
-                            <mat-icon>notifications_off</mat-icon>
-                            <span>Option 3</span>
-                        </button>
+                        <ng-content select="adf-viewer-open-with"></ng-content>
                     </mat-menu>
                 </ng-container>
 
@@ -55,23 +44,12 @@
                     <mat-icon>share</mat-icon>
                 </button>
 
-                <ng-container *ngIf="allowMoreActions">
+                <ng-container *ngIf="mnuMoreActions">
                     <button mat-icon-button [matMenuTriggerFor]="mnuMoreActions" matTooltip="{{ 'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate }}">
                         <mat-icon>more_vert</mat-icon>
                     </button>
-                    <mat-menu #mnuMoreActions="matMenu">
-                        <button mat-menu-item>
-                            <mat-icon>dialpad</mat-icon>
-                            <span>Action One</span>
-                        </button>
-                        <button mat-menu-item disabled>
-                            <mat-icon>voicemail</mat-icon>
-                            <span>Action Two</span>
-                        </button>
-                        <button mat-menu-item>
-                            <mat-icon>notifications_off</mat-icon>
-                            <span>Action Three</span>
-                        </button>
+                    <mat-menu #mnuMoreActions="matMenu" [overlapTrigger]="false">
+                        <ng-content select="adf-viewer-more-actions"></ng-content>
                     </mat-menu>
                 </ng-container>
 

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

@@ -31,6 +31,8 @@ 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 { ViewerMoreActionsComponent } from './viewer-more-actions.component';
+import { ViewerOpenWithComponent } from './viewer-open-with.component';
 import { ViewerToolbarComponent } from './viewer-toolbar.component';
 import { ViewerComponent } from './viewer.component';
 
@@ -60,6 +62,52 @@ class ViewerWithCustomToolbarComponent {}
 })
 class ViewerWithCustomInfoDrawerComponent {}
 
+@Component({
+    selector: 'adf-viewer-container-open-with',
+    template: `
+        <adf-viewer>
+            <adf-viewer-open-with>
+                <button mat-menu-item>
+                    <mat-icon>dialpad</mat-icon>
+                    <span>Option 1</span>
+                </button>
+                <button mat-menu-item disabled>
+                    <mat-icon>voicemail</mat-icon>
+                    <span>Option 2</span>
+                </button>
+                <button mat-menu-item>
+                    <mat-icon>notifications_off</mat-icon>
+                    <span>Option 3</span>
+                </button>
+            </adf-viewer-open-with>
+        </adf-viewer>
+    `
+})
+class ViewerWithCustomOpenWithComponent {}
+
+@Component({
+    selector: 'adf-viewer-container-more-actions',
+    template: `
+        <adf-viewer>
+            <adf-viewer-more-actions>
+                <button mat-menu-item>
+                    <mat-icon>dialpad</mat-icon>
+                    <span>Action One</span>
+                </button>
+                <button mat-menu-item disabled>
+                    <mat-icon>voicemail</mat-icon>
+                    <span>Action Two</span>
+                </button>
+                <button mat-menu-item>
+                    <mat-icon>notifications_off</mat-icon>
+                    <span>Action Three</span>
+                </button>
+            </adf-viewer-more-actions>
+        </adf-viewer>
+    `
+})
+class ViewerWithCustomMoreActionsComponent {}
+
 describe('ViewerComponent', () => {
 
     let component: ViewerComponent;
@@ -82,8 +130,12 @@ describe('ViewerComponent', () => {
                 UnknownFormatComponent,
                 ViewerInfoDrawerComponent,
                 ViewerToolbarComponent,
+                ViewerOpenWithComponent,
+                ViewerMoreActionsComponent,
                 ViewerWithCustomToolbarComponent,
-                ViewerWithCustomInfoDrawerComponent
+                ViewerWithCustomInfoDrawerComponent,
+                ViewerWithCustomOpenWithComponent,
+                ViewerWithCustomMoreActionsComponent
             ],
             providers: [
                 RenderingQueueServices,
@@ -128,6 +180,22 @@ describe('ViewerComponent', () => {
         expect(customElement.querySelector('.custom-info-drawer-element')).toBeDefined();
     });
 
+    it('should use custom open with menu', () => {
+        let customFixture = TestBed.createComponent(ViewerWithCustomOpenWithComponent);
+        let customElement: HTMLElement = customFixture.nativeElement;
+
+        customFixture.detectChanges();
+        expect(customElement.querySelector('.adf-viewer-container-open-with')).toBeDefined();
+    });
+
+    it('should use custom more actions menu', () => {
+        let customFixture = TestBed.createComponent(ViewerWithCustomMoreActionsComponent);
+        let customElement: HTMLElement = customFixture.nativeElement;
+
+        customFixture.detectChanges();
+        expect(customElement.querySelector('.adf-viewer-container-more-actions')).toBeDefined();
+    });
+
     describe('View', () => {
 
         describe('Overlay mode true', () => {

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

@@ -24,6 +24,8 @@ import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { AlfrescoApiService, BaseEvent, LogService, RenditionsService } from 'ng2-alfresco-core';
 
 import { ViewerInfoDrawerComponent } from './viewer-info-drawer.component';
+import { ViewerMoreActionsComponent } from './viewer-more-actions.component';
+import { ViewerOpenWithComponent } from './viewer-open-with.component';
 import { ViewerToolbarComponent  } from './viewer-toolbar.component';
 
 @Component({
@@ -41,8 +43,14 @@ export class ViewerComponent implements OnDestroy, OnChanges {
     @ContentChild(ViewerInfoDrawerComponent)
     infoDrawer: ViewerInfoDrawerComponent;
 
+    @ContentChild(ViewerOpenWithComponent)
+    mnuOpenWith: ViewerOpenWithComponent;
+
+    @ContentChild(ViewerMoreActionsComponent)
+    mnuMoreActions: ViewerMoreActionsComponent;
+
     @Input()
-    urlFile: string = '';
+    urlFile = '';
 
     @Input()
     blobFile: Blob;
@@ -51,23 +59,20 @@ export class ViewerComponent implements OnDestroy, OnChanges {
     fileNodeId: string = null;
 
     @Input()
-    overlayMode: boolean = false;
+    overlayMode = false;
 
     @Input()
-    showViewer: boolean = true;
+    showViewer = true;
 
     @Input()
     showToolbar = true;
 
     @Input()
-    displayName: string = 'Unknown';
+    displayName = 'Unknown';
 
     @Input()
     allowGoBack = true;
 
-    @Input()
-    allowOpenWith = false;
-
     @Input()
     allowDownload = true;
 
@@ -83,9 +88,6 @@ export class ViewerComponent implements OnDestroy, OnChanges {
     @Input()
     showInfoDrawer = false;
 
-    @Input()
-    allowMoreActions = false;
-
     @Output()
     goBack = new EventEmitter<BaseEvent<any>>();
 
@@ -95,10 +97,10 @@ export class ViewerComponent implements OnDestroy, OnChanges {
     @Output()
     extensionChange = new EventEmitter<string>();
 
-    viewerType: string = 'unknown';
+    viewerType = 'unknown';
     downloadUrl: string = null;
-    fileName: string = 'document';
-    isLoading: boolean = false;
+    fileName = 'document';
+    isLoading = false;
 
     extensionTemplates: { template: TemplateRef<any>, isVisible: boolean }[] = [];
     externalExtensions: string[] = [];