viewer toolbar events (#2543)

docs/viewer.component.md

@@ -57,6 +57,15 @@ Using with file url:
 | allowInfoDrawer | boolean |false | Toogle info drawer feature |
 | showInfoDrawer | boolean | false | Toggles info drawer visibility. Requires `allowInfoDrawer` to be set to `true`. |
 
+## Events
+
+| Name | Argument Type | Cancellable | Description |
+| --- | --- | --- | --- |
+| goBack | any | Yes | Raised when user clicks the 'Back' button. |
+| download | any | Yes | Raised when user clicks the 'Download' button. |
+| print | any | Yes | Raised when user clicks the 'Print' button. |
+| share | any | Yes | Raised when user clicks the 'Share' button. |
+
 ## Details
 
 ### Supported file formats

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

@@ -32,15 +32,30 @@
 
                 <adf-toolbar-divider></adf-toolbar-divider>
 
-                <button *ngIf="allowDownload" mat-icon-button matTooltip="{{ 'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate }}" (click)="download()">
+                <button
+                    *ngIf="allowDownload"
+                    mat-icon-button
+                    matTooltip="{{ 'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate }}"
+                    data-automation-id="toolbar-download"
+                    (click)="downloadContent()">
                     <mat-icon>file_download</mat-icon>
                 </button>
 
-                <button *ngIf="allowPrint" mat-icon-button matTooltip="{{ 'ADF_VIEWER.ACTIONS.PRINT' | translate }}">
+                <button
+                    *ngIf="allowPrint"
+                    mat-icon-button
+                    matTooltip="{{ 'ADF_VIEWER.ACTIONS.PRINT' | translate }}"
+                    data-automation-id="toolbar-print"
+                    (click)="printContent()">
                     <mat-icon>print</mat-icon>
                 </button>
 
-                <button *ngIf="allowShare" mat-icon-button matTooltip="{{ 'ADF_VIEWER.ACTIONS.SHARE' | translate }}">
+                <button
+                    *ngIf="allowShare"
+                    mat-icon-button
+                    matTooltip="{{ 'ADF_VIEWER.ACTIONS.SHARE' | translate }}"
+                    data-automation-id="toolbar-share"
+                    (click)="shareContent()">
                     <mat-icon>share</mat-icon>
                 </button>
 

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

@@ -196,6 +196,127 @@ describe('ViewerComponent', () => {
         expect(customElement.querySelector('.adf-viewer-container-more-actions')).toBeDefined();
     });
 
+    describe('Toolbar', () => {
+
+        it('should render default download button', () => {
+            component.allowDownload = true;
+            fixture.detectChanges();
+
+            expect(element.querySelector('[data-automation-id="toolbar-download"]')).toBeDefined();
+        });
+
+        it('should not render default download button', () => {
+            component.allowDownload = false;
+            fixture.detectChanges();
+
+            expect(element.querySelector('[data-automation-id="toolbar-download"]')).toBeNull();
+        });
+
+        it('should invoke download action with the toolbar button', () => {
+            component.allowDownload = true;
+            fixture.detectChanges();
+
+            spyOn(component, 'downloadContent').and.stub();
+
+            const button: HTMLButtonElement = element.querySelector('[data-automation-id="toolbar-download"]') as HTMLButtonElement;
+            button.click();
+
+            expect(component.downloadContent).toHaveBeenCalled();
+        });
+
+        it('should raise download event with the toolbar button', (done) => {
+            component.allowDownload = true;
+            fixture.detectChanges();
+
+            component.download.subscribe(e => {
+                e.preventDefault();
+                done();
+            });
+
+            const button: HTMLButtonElement = element.querySelector('[data-automation-id="toolbar-download"]') as HTMLButtonElement;
+            button.click();
+        });
+
+        it('should render default print button', () => {
+            component.allowPrint = true;
+            fixture.detectChanges();
+
+            expect(element.querySelector('[data-automation-id="toolbar-print"]')).toBeDefined();
+        });
+
+        it('should not render default print button', () => {
+            component.allowPrint = false;
+            fixture.detectChanges();
+
+            expect(element.querySelector('[data-automation-id="toolbar-print"]')).toBeNull();
+        });
+
+        it('should invoke print action with the toolbar button', () => {
+            component.allowPrint = true;
+            fixture.detectChanges();
+
+            spyOn(component, 'printContent').and.stub();
+
+            const button: HTMLButtonElement = element.querySelector('[data-automation-id="toolbar-print"]') as HTMLButtonElement;
+            button.click();
+
+            expect(component.printContent).toHaveBeenCalled();
+        });
+
+        it('should raise the print event with the toolbar button', (done) => {
+            component.allowPrint = true;
+            fixture.detectChanges();
+
+            component.print.subscribe(e => {
+                e.preventDefault();
+                done();
+            });
+
+            const button: HTMLButtonElement = element.querySelector('[data-automation-id="toolbar-print"]') as HTMLButtonElement;
+            button.click();
+        });
+
+        it('should render default share button', () => {
+            component.allowShare = true;
+            fixture.detectChanges();
+
+            expect(element.querySelector('[data-automation-id="toolbar-share"]')).toBeDefined();
+        });
+
+        it('should not render default share button', () => {
+            component.allowShare = false;
+            fixture.detectChanges();
+
+            expect(element.querySelector('[data-automation-id="toolbar-share"]')).toBeNull();
+        });
+
+        it('should invoke share action with the toolbar button', () => {
+            component.allowShare = true;
+            fixture.detectChanges();
+
+            spyOn(component, 'shareContent').and.stub();
+
+            const button: HTMLButtonElement = element.querySelector('[data-automation-id="toolbar-share"]') as HTMLButtonElement;
+            button.click();
+
+            expect(component.shareContent).toHaveBeenCalled();
+        });
+
+        it('should raise share event iwth the toolbar button', (done) => {
+            component.allowShare = true;
+            fixture.detectChanges();
+
+            component.share.subscribe(e => {
+                e.preventDefault();
+                done();
+            });
+
+            const button: HTMLButtonElement = element.querySelector('[data-automation-id="toolbar-share"]') as HTMLButtonElement;
+            button.click();
+        });
+
+    });
+
     describe('View', () => {
 
         describe('Overlay mode true', () => {

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

@@ -91,6 +91,15 @@ export class ViewerComponent implements OnDestroy, OnChanges {
     @Output()
     goBack = new EventEmitter<BaseEvent<any>>();
 
+    @Output()
+    download = new EventEmitter<BaseEvent<any>>();
+
+    @Output()
+    print = new EventEmitter<BaseEvent<any>>();
+
+    @Output()
+    share = new EventEmitter<BaseEvent<any>>();
+
     @Output()
     showViewerChange = new EventEmitter<boolean>();
 
@@ -352,17 +361,36 @@ export class ViewerComponent implements OnDestroy, OnChanges {
         }
     }
 
-    download() {
+    downloadContent() {
         if (this.allowDownload && this.downloadUrl && this.fileName) {
-            const link = document.createElement('a');
+            const args = new BaseEvent();
+            this.download.next(args);
 
-            link.style.display = 'none';
+            if (!args.defaultPrevented) {
-            link.download = this.fileName;
+                const link = document.createElement('a');
-            link.href = this.downloadUrl;
 
-            document.body.appendChild(link);
+                link.style.display = 'none';
-            link.click();
+                link.download = this.fileName;
-            document.body.removeChild(link);
+                link.href = this.downloadUrl;
+
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }
+        }
+    }
+
+    printContent() {
+        if (this.allowPrint) {
+            const args = new BaseEvent();
+            this.print.next(args);
+        }
+    }
+
+    shareContent() {
+        if (this.allowShare) {
+            const args = new BaseEvent();
+            this.share.next(args);
         }
     }