Fix filename shown in title area of viewer component

This commit is contained in:
Will Abson
2016-06-10 12:20:59 +01:00
parent de80f3bca9
commit f0e00e39c3
7 changed files with 32 additions and 6 deletions

View File

@@ -107,6 +107,7 @@ bootstrap(MyDemoApp, [
Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | ---
`urlFile` | *string* | | Url where to load the file | mandatory
`fileName` | *string* | Parsed from `urlFile` | Name of the file to display in the title bar. If not specified will take the last part of the URL |
`overlayMode` | *boolean* | `false` | if true Show the Viewer full page over the present content |
`showViewer` | *boolean* | `true` | Hide o show the viewer |

View File

@@ -11,7 +11,7 @@
<div class="mdl-layout__header-row">
<!-- File Title -->
<span id="viewer-name-file" class="mdl-layout-title viewer-name-file">{{nameFile}}</span>
<span id="viewer-name-file" class="mdl-layout-title viewer-name-file">{{displayName}}</span>
<!-- Pagination toolbar start -->
<div id="viewer-toolbar-pagination">
@@ -70,7 +70,7 @@
</div>
<div *ngIf="isImage()" ><img src="{{urlFile}}" id="viewer-image" class="center-element viewer-image"/></div>
<div *ngIf="notSupportedExtension()">
<not-supported-format [urlFile]="urlFile" [nameFile]="nameFile" ></not-supported-format>
<not-supported-format [urlFile]="urlFile" [displayName]="displayName" ></not-supported-format>
</div>
<!-- End View Switch -->
</div>

View File

@@ -80,6 +80,23 @@ describe('ViewerComponent', () => {
});
}));
/* tslint:disable:max-line-length */
it('should pick up filename from the fileName property when specified', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(ViewerComponent)
.then((fixture) => {
let element = fixture.nativeElement;
let component = fixture.componentInstance;
component.urlFile = 'http://localhost:9876/fake-url-file.pdf';
component.fileName = 'My Example.pdf';
component.ngOnChanges().then(() => {
fixture.detectChanges();
expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('My Example.pdf');
});
});
}));
it('Close button should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(ViewerComponent)

View File

@@ -34,6 +34,9 @@ export class ViewerComponent {
@Input()
urlFile: string;
@Input()
fileName: string = null;
@Input()
mimeType: string = null;
@@ -48,7 +51,7 @@ export class ViewerComponent {
otherMenu: any;
nameFile: string;
displayName: string;
currentPdfDocument: any;
page: number;
displayPage: number;
@@ -64,8 +67,9 @@ export class ViewerComponent {
}
return new Promise((resolve) => {
if (this.urlFile) {
this.nameFile = this.getFilenameFromUrl(this.urlFile);
this.extension = this.getFileExtension(this.nameFile);
let filenameFromUrl = this.getFilenameFromUrl(this.urlFile);
this.displayName = this.fileName !== null ? this.fileName : filenameFromUrl;
this.extension = this.getFileExtension(filenameFromUrl);
}
resolve();
});