@@ -58,47 +58,32 @@
= new EventEmitter();
@@ -46,124 +48,22 @@ export class ViewerComponent {
displayPage: number;
totalPages: number;
- pdfViewer: any;
-
- renderingStates = {
- FINISHED: 3 as number
- };
+ extension: string;
ngOnChanges(changes) {
if (this.showViewer) {
if (!this.urlFile) {
throw new Error('Attribute urlFile is required');
}
-
- if (this.urlFile) {
- this.nameFile = this.getPDFJS().getFilenameFromUrl(this.urlFile);
-
- let urlFileTicket = this.addAlfrescoTicket(this.urlFile);
-
- return new Promise((resolve) => {
- this.getPDFJS().getDocument(urlFileTicket, null, null).then((pdfDocument) => {
- this.currentPdfDocument = pdfDocument;
- this.totalPages = pdfDocument.numPages;
- this.page = 1;
- this.displayPage = 1;
- this.initPDFViewer(this.currentPdfDocument);
- });
- resolve();
- });
- }
+ return new Promise((resolve) => {
+ if (this.urlFile) {
+ this.nameFile = this.getFilenameFromUrl(this.urlFile);
+ this.extension = this.getFileExtension(this.nameFile);
+ }
+ resolve();
+ });
}
- }
- /**
- * return the PDFJS global object (exist to facilitate the mock of PDFJS in the test)
- * @returns {PDFJS}
- */
- getPDFJS() {
- return PDFJS;
- }
-
- initPDFViewer(pdfDocument: any) {
- PDFJS.verbosity = 5;
-
- let documentContainer: any = document.getElementById('viewer-pdf-container');
- let viewer: any = document.getElementById('viewer-viewerPdf');
-
- this.pdfViewer = new PDFJS.PDFViewer({
- container: documentContainer,
- viewer: viewer
- });
-
- this.pdfViewer.setDocument(pdfDocument);
- }
-
- /**
- * load the previous page
- */
- previousPage() {
- if (this.pdfViewer && this.page > 1) {
- this.page--;
- this.displayPage = this.page;
-
- this.pdfViewer.currentPageNumber = this.page;
-
- if (this.pdfViewer.currentPage.renderingState === this.renderingStates.FINISHED) {
- // remove loader
- } else {
- // add loader
- }
- }
- }
-
- /**
- * load the next page
- */
- nextPage() {
- if (this.pdfViewer && this.page < this.totalPages) {
- this.page++;
- this.displayPage = this.page;
-
- this.pdfViewer.currentPageNumber = this.page;
- }
- }
-
- /**
- * load the page in input
- *
- * @param {string} page - page to load
- */
- inputPage(page: string) {
- let pageInput = parseInt(page, 10);
-
- if (!isNaN(pageInput) && pageInput > 0 && pageInput <= this.totalPages) {
- this.page = pageInput;
-
- this.pdfViewer.currentPageNumber = this.page;
- } else {
- this.displayPage = this.page;
- }
- }
-
- @HostListener('document:keydown', ['$event'])
- handleKeyboardEvent(event: KeyboardEvent) {
- let key = event.keyCode;
- if (key === 27) { //esc
- this.close();
- } else if (key === 39) { //right arrow
- this.nextPage();
- } else if (key === 37) {//left arrow
- this.previousPage();
- }
- }
-
- /**
- * Add Ticket to the file request
- * @returns {string}
- */
- private addAlfrescoTicket(url: string) {
- return url + '?alf_ticket=' + this.getAlfrescoTicket();
}
/**
@@ -175,10 +75,62 @@ export class ViewerComponent {
}
/**
- * Get the token from the local storage
- * @returns {string}
+ * get File name from url
*/
- private getAlfrescoTicket(): string {
- return localStorage.getItem('token');
+ getFilenameFromUrl(url: string) {
+ let anchor = url.indexOf('#');
+ let query = url.indexOf('?');
+ let end = Math.min(
+ anchor > 0 ? anchor : url.length,
+ query > 0 ? query : url.length);
+ return url.substring(url.lastIndexOf('/', end) + 1, end);
+ }
+
+ /**
+ * Get the token from the local storage
+ *
+ * @param {string} fileName - file name
+ * @returns {string} file name extension
+ */
+ private getFileExtension(fileName: string) {
+ return fileName.split('.').pop().toLowerCase();
+ }
+
+ /**
+ * check if the current file is a suppoerted image extension
+ */
+ private isImage() {
+ return this.extension === 'png' || this.extension === 'jpg' ||
+ this.extension === 'jpeg' || this.extension === 'gif' || this.extension === 'bmp';
+ }
+
+ /**
+ * check if the current file is a suppoerted pdf extension
+ */
+ private isPdf() {
+ return this.extension === 'pdf';
+ }
+
+ /**
+ * check if the current file is not a supported extension
+ */
+ private notSupportedExtension() {
+ return !this.isImage() && !this.isPdf();
+ }
+
+ /**
+ * Litener Keyboard Event
+ * @param {KeyboardEvent} event
+ */
+ @HostListener('document:keydown', ['$event'])
+ handleKeyboardEvent(event: KeyboardEvent) {
+ let key = event.keyCode;
+ if (key === 27) { //esc
+ this.close();
+ } else if (key === 39) { //right arrow
+ //this.nextPage();
+ } else if (key === 37) {//left arrow
+ //this.previousPage();
+ }
}
}
-
-
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts
index 9471a10592..1b66254a86 100644
--- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts
@@ -15,30 +15,12 @@
* limitations under the License.
*/
-import { describe, expect, it, injectAsync, TestComponentBuilder, setBaseTestProviders } from 'angular2/testing';
-import { TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS } from 'angular2/platform/testing/browser';
+import { describe, expect, it, injectAsync, TestComponentBuilder } from 'angular2/testing';
import { ViewerComponent } from './viewer.component';
-import { PDFJSmock } from './assets/PDFJS.mock';
-import { PDFViewermock } from './assets/PDFViewer.mock';
-describe('Ng2-alfresco-viewer', () => {
- setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
+describe('ViewerComponent', () => {
describe('View', () => {
-
- it('Canvas should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
- return tcb
- .createAsync(ViewerComponent)
- .then((fixture) => {
- let element = fixture.nativeElement;
-
- fixture.detectChanges();
-
- expect(element.querySelector('#viewer-viewerPdf')).not.toBeNull();
- expect(element.querySelector('#viewer-pdf-container')).not.toBeNull();
- });
- }));
-
it('shadow overlay should be present if overlay is true', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(ViewerComponent)
@@ -83,35 +65,17 @@ describe('Ng2-alfresco-viewer', () => {
});
}));
- it('Total number of pages should be showed', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
- return tcb
- .createAsync(ViewerComponent)
- .then((fixture) => {
- let element = fixture.nativeElement;
- let component = fixture.componentInstance;
-
- component.urlFile = 'fake-url-file';
- spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
-
- component.ngOnChanges().then(() => {
- expect(element.querySelector('#viewer-total-pages').innerHTML).toEqual('/10');
- });
- });
- }));
-
it('Name File should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(ViewerComponent)
.then((fixture) => {
let element = fixture.nativeElement;
let component = fixture.componentInstance;
-
- component.urlFile = 'fake-url-file';
- spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
+ component.urlFile = 'http://localhost:9876/fake-url-file.pdf';
component.ngOnChanges().then(() => {
fixture.detectChanges();
- expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-name');
+ expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-url-file.pdf');
});
});
}));
@@ -122,7 +86,6 @@ describe('Ng2-alfresco-viewer', () => {
.then((fixture) => {
let element = fixture.nativeElement;
let component = fixture.componentInstance;
- spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
component.urlFile = 'fake-url-file';
fixture.detectChanges();
@@ -130,6 +93,21 @@ describe('Ng2-alfresco-viewer', () => {
expect(element.querySelector('#viewer-close-button')).not.toBeNull();
});
}));
+
+ it('Click on close button should hide the viewer', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+ return tcb
+ .createAsync(ViewerComponent)
+ .then((fixture) => {
+ let element = fixture.nativeElement;
+ let component = fixture.componentInstance;
+ component.urlFile = 'fake-url-file';
+
+ fixture.detectChanges();
+ element.querySelector('#viewer-close-button').click();
+ fixture.detectChanges();
+ expect(element.querySelector('#viewer-main-container')).toBeNull();
+ });
+ }));
});
describe('Attribute', () => {
@@ -162,96 +140,61 @@ describe('Ng2-alfresco-viewer', () => {
.then((fixture) => {
let component = fixture.componentInstance;
let element = fixture.nativeElement;
- spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
-
component.urlFile = 'fake-url-file';
component.showViewer = false;
fixture.detectChanges();
- expect(element.querySelector('#viewer-viewerPdf')).toBeNull();
- expect(element.querySelector('#viewer-pdf-container')).toBeNull();
+ expect(element.querySelector('#viewer-main-container')).toBeNull();
});
}));
});
- describe('User interaction', () => {
- it('Click on next page should move to the next page', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+ /* tslint:disable:max-line-length */
+ describe('Extension Type Test', () => {
+ it('if extension file is a pdf the pdf viewer should be loaded', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(ViewerComponent)
.then((fixture) => {
- let element = fixture.nativeElement;
let component = fixture.componentInstance;
- spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
- component.pdfViewer = new PDFViewermock();
- component.urlFile = 'fake-url-file';
+ let element = fixture.nativeElement;
+ component.urlFile = 'fake-url-file.pdf';
component.ngOnChanges().then(() => {
fixture.detectChanges();
- expect(element.querySelector('#viewer-pagenumber-input').value).toBe('1');
- element.querySelector('#viewer-next-page-button').click();
- fixture.detectChanges();
- expect(element.querySelector('#viewer-pagenumber-input').value).toBe('2');
- });
- });
- }));
-
- it('Click on previous page should move to the previous page', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
- return tcb
- .createAsync(ViewerComponent)
- .then((fixture) => {
- let element = fixture.nativeElement;
- let component = fixture.componentInstance;
- spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
- component.pdfViewer = new PDFViewermock();
- component.urlFile = 'fake-url-file';
-
- component.ngOnChanges().then(() => {
- fixture.detectChanges();
- expect(element.querySelector('#viewer-pagenumber-input').value).toBe('1');
- element.querySelector('#viewer-next-page-button').click();
- element.querySelector('#viewer-next-page-button').click();
- element.querySelector('#viewer-previous-page-button').click();
- fixture.detectChanges();
- expect(element.querySelector('#viewer-pagenumber-input').value).toBe('2');
+ expect(element.querySelector('pdf-viewer')).not.toBeNull();
});
});
}));
/* tslint:disable:max-line-length */
- it('Click on previous page should not move to the previous page if is page 1', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+ it('if extension file is a image the img viewer should be loaded', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(ViewerComponent)
.then((fixture) => {
- let element = fixture.nativeElement;
let component = fixture.componentInstance;
- spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
- component.pdfViewer = new PDFViewermock();
- component.urlFile = 'fake-url-file';
+ let element = fixture.nativeElement;
+ component.urlFile = 'fake-url-file.png';
component.ngOnChanges().then(() => {
fixture.detectChanges();
- expect(element.querySelector('#viewer-pagenumber-input').value).toBe('1');
- element.querySelector('#viewer-previous-page-button').click();
- fixture.detectChanges();
- expect(element.querySelector('#viewer-pagenumber-input').value).toBe('1');
+ expect(element.querySelector('#viewer-image')).not.toBeNull();
});
});
}));
- it('Click on close button should hide the viewer', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+ /* tslint:disable:max-line-length */
+ it('if extension file is a not supported the not supported div should be loaded', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(ViewerComponent)
.then((fixture) => {
- let element = fixture.nativeElement;
let component = fixture.componentInstance;
- spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
- component.urlFile = 'fake-url-file';
+ let element = fixture.nativeElement;
+ component.urlFile = 'fake-url-file.unsupported';
- fixture.detectChanges();
- expect(element.querySelector('#viewer-pdf-container')).not.toBeNull();
- element.querySelector('#viewer-close-button').click();
- fixture.detectChanges();
- expect(element.querySelector('#viewer-pdf-container')).toBeNull();
+ component.ngOnChanges().then(() => {
+ fixture.detectChanges();
+ expect(element.querySelector('#viewer-unsupported')).not.toBeNull();
+ });
});
}));
});
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
index ef0cf4de1b..1bc3ea4c01 100644
--- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
@@ -17,13 +17,14 @@
import { Component, Input, Output, HostListener } from 'angular2/core';
import { EventEmitter } from 'angular2/src/facade/async';
+import { PdfViewerComponent } from './pdfViewer.component';
-declare let PDFJS: any;
declare let __moduleName: string;
@Component({
moduleId: __moduleName,
selector: 'alfresco-viewer',
+ directives: [PdfViewerComponent],
templateUrl: './viewer.component.html',
styleUrls: ['./viewer.component.css']
})
@@ -37,6 +38,7 @@ export class ViewerComponent {
@Input()
showViewer: boolean = true;
+
@Output()
showViewerChange: EventEmitter
-
-
+
-
-
-
-
- Loading...
-
+
+ 
+
+
-
-
-
-
Not Supported Download