From bb4c6365b16b3ee208267e3a447d40a0cecc98ca Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Wed, 25 Oct 2017 12:33:56 +0100 Subject: [PATCH] viewer toolbar events (#2543) --- docs/viewer.component.md | 9 ++ .../src/components/viewer.component.html | 21 ++- .../src/components/viewer.component.spec.ts | 121 ++++++++++++++++++ .../src/components/viewer.component.ts | 44 +++++-- 4 files changed, 184 insertions(+), 11 deletions(-) diff --git a/docs/viewer.component.md b/docs/viewer.component.md index 52201abc3b..a3b6a7157b 100644 --- a/docs/viewer.component.md +++ b/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 diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html index 113336074f..4d9f25ea5d 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html @@ -32,15 +32,30 @@ - - - diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts index 7a2efc33ad..40e7c90938 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts +++ b/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', () => { diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts index 612a408b71..612853c1b7 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts @@ -91,6 +91,15 @@ export class ViewerComponent implements OnDestroy, OnChanges { @Output() goBack = new EventEmitter>(); + @Output() + download = new EventEmitter>(); + + @Output() + print = new EventEmitter>(); + + @Output() + share = new EventEmitter>(); + @Output() showViewerChange = new EventEmitter(); @@ -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'; - link.download = this.fileName; - link.href = this.downloadUrl; + if (!args.defaultPrevented) { + const link = document.createElement('a'); - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); + link.style.display = 'none'; + link.download = this.fileName; + 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); } }