inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

viewer toolbar events (#2543)

Browse Source
This commit is contained in:
Denys Vuika
2017-10-25 12:33:56 +01:00
committed by Eugenio Romano
parent 52bba291de
commit bb4c6365b1
4 changed files with 184 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/viewer.component.md
View File

@@ -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

21
ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html
View File

@@ -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>

121
ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts
View File

@@ -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', () => {

44
ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts
View File

@@ -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';
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);
}
}