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

@ -148,7 +148,7 @@
[multipleFiles]="true"
(onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
<alfresco-viewer [(showViewer)]="fileShowed" [urlFile]="urlFile" [mimeType]="mimeType" [overlayMode]="true">
<alfresco-viewer [(showViewer)]="fileShowed" [urlFile]="urlFile" [fileName]="fileName" [mimeType]="mimeType" [overlayMode]="true">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>
<file-uploading-dialog></file-uploading-dialog>

View File

@ -46,6 +46,7 @@ export class FilesComponent {
relativePath: string = '';
urlFile: string;
fileName: string;
mimeType: string;
fileShowed: boolean = false;
@ -75,6 +76,7 @@ export class FilesComponent {
showFile(event) {
if (event.value.entry.isFile) {
this.fileName = event.value.entry.name;
this.mimeType = event.value.entry.content.mimeType;
this.urlFile = this.contentService.getContentUrl(event.value);
this.fileShowed = true;

View File

@ -37,6 +37,7 @@ declare let __moduleName: string;
export class SearchBarComponent {
urlFile: string;
fileName: string;
mimeType: string;
fileShowed: boolean = false;
@ -65,6 +66,7 @@ export class SearchBarComponent {
onFileClicked(event) {
if (event.value.entry.isFile) {
this.fileName = event.value.entry.name;
this.mimeType = event.value.entry.content.mimeType;
this.urlFile = this.contentService.getContentUrl(event.value);
this.fileShowed = true;

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();
});