diff --git a/ng2-components/ng2-alfresco-viewer/src/assets/PDFJS.mock.ts b/ng2-components/ng2-alfresco-viewer/src/assets/PDFJS.mock.ts index 573cbc9571..5f27fe95ac 100644 --- a/ng2-components/ng2-alfresco-viewer/src/assets/PDFJS.mock.ts +++ b/ng2-components/ng2-alfresco-viewer/src/assets/PDFJS.mock.ts @@ -18,6 +18,8 @@ export class PDFJSmock { + currentPageNumber: number = 1; + getFilenameFromUrl(url: string) { return 'fake-name'; } diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css index 6a35a59d78..efe389eefb 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css @@ -33,7 +33,7 @@ text-overflow: ellipsis; } -.viewer-canvas-container { +.viewer-pdf-container { background: #3E3E3E; } @@ -63,3 +63,7 @@ background-clip: content-box; background-color: white; } + +:host .canvasWrapper { + box-shadow: 0px 0px 8px 2px #000; +} diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html index 60e6a17b65..358615f4c1 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html @@ -15,7 +15,7 @@
-
+
keyboard_arrow_left
@@ -23,7 +23,7 @@ (keyup.enter)="inputPage(page.value)" class="left" type="text" pattern="-?[0-9]*(\.[0-9]+)?" value="{{displayPage}}"> / {{totalPages}} -
+
keyboard_arrow_right
@@ -59,8 +59,8 @@ class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col"> -
-
+
+
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 ab1aceae93..5710f41008 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts @@ -33,8 +33,8 @@ describe('Ng2-alfresco-viewer', () => { fixture.detectChanges(); - expect(element.querySelector('#viewer-the-canvas')).not.toBeNull(); - expect(element.querySelector('#viewer-canvas-container')).not.toBeNull(); + expect(element.querySelector('#viewer-viewerPdf')).not.toBeNull(); + expect(element.querySelector('#viewer-pdf-container')).not.toBeNull(); }); })); @@ -92,9 +92,8 @@ describe('Ng2-alfresco-viewer', () => { component.urlFile = 'fake-url-file'; spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock()); - component.ngOnChanges().then((resolve) => { + component.ngOnChanges().then(() => { expect(element.querySelector('#viewer-total-pages').innerHTML).toEqual('/10'); - resolve(); }); }); })); @@ -105,14 +104,13 @@ 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'; + spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock()); - fixture.detectChanges(); - - component.ngOnChanges().then((resolve) => { + component.ngOnChanges().then(() => { + fixture.detectChanges(); expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-name'); - resolve(); }); }); })); @@ -131,22 +129,6 @@ describe('Ng2-alfresco-viewer', () => { expect(element.querySelector('#viewer-close-button')).not.toBeNull(); }); })); - - it('if showViewer is false the viewer should be hide', 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.showViewer = false; - - fixture.detectChanges(); - - expect(element.querySelector('#viewer-the-canvas')).toBeNull(); - expect(element.querySelector('#viewer-canvas-container')).toBeNull(); - }); - })); }); describe('Attribute', () => { @@ -179,17 +161,79 @@ 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-the-canvas')).toBeNull(); - expect(element.querySelector('#viewer-canvas-container')).toBeNull(); + expect(element.querySelector('#viewer-viewerPdf')).toBeNull(); + expect(element.querySelector('#viewer-pdf-container')).toBeNull(); }); })); }); describe('User interaction', () => { + it('Click on next page should move to the next 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.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(); + 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.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'); + }); + }); + })); + + /* 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) => { + 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'; + + 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'); + }); + }); + })); + it('Click on close button should hide the viewer', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { return tcb .createAsync(ViewerComponent) @@ -200,11 +244,10 @@ describe('Ng2-alfresco-viewer', () => { component.urlFile = 'fake-url-file'; fixture.detectChanges(); - expect(element.querySelector('#viewer-canvas-container')).not.toBeNull(); + expect(element.querySelector('#viewer-pdf-container')).not.toBeNull(); element.querySelector('#viewer-close-button').click(); fixture.detectChanges(); - expect(element.querySelector('#viewer-canvas-container')).toBeNull(); - + expect(element.querySelector('#viewer-pdf-container')).toBeNull(); }); })); }); diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts index c7b38bae52..7ab5be8261 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts @@ -53,8 +53,6 @@ export class ViewerComponent { }; ngOnChanges(changes) { - console.log(changes); - if (this.showViewer) { if (!this.urlFile) { throw new Error('Attribute urlFile is required'); @@ -65,12 +63,15 @@ export class ViewerComponent { let urlFileTicket = this.addAlfrescoTicket(this.urlFile); - return this.getPDFJS().getDocument(urlFileTicket, null, null).then((pdfDocument) => { - this.currentPdfDocument = pdfDocument; - this.totalPages = pdfDocument.numPages; - this.page = 1; - this.displayPage = 1; - this.loadPage(this.currentPdfDocument); + 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(); }); } } @@ -84,14 +85,15 @@ export class ViewerComponent { return PDFJS; } - loadPage(pdfDocument: any) { - + initPDFViewer(pdfDocument: any) { PDFJS.verbosity = 5; - let documentContainer: any = document.getElementById('viewer-canvas-container'); + let documentContainer: any = document.getElementById('viewer-pdf-container'); + let viewer: any = document.getElementById('viewer-viewerPdf'); this.pdfViewer = new PDFJS.PDFViewer({ - container: documentContainer + container: documentContainer, + viewer: viewer }); this.pdfViewer.setDocument(pdfDocument); @@ -105,9 +107,9 @@ export class ViewerComponent { this.page--; this.displayPage = this.page; - let currentPage = this.pdfViewer.getPageView(this.page - 1); + this.pdfViewer.currentPageNumber = this.page; - if (currentPage.renderingState === this.renderingStates.FINISHED) { + if (this.pdfViewer.currentPage.renderingState === this.renderingStates.FINISHED) { // remove loader } else { // add loader @@ -122,7 +124,8 @@ export class ViewerComponent { if (this.page < this.totalPages) { this.page++; this.displayPage = this.page; - this.pdfViewer.getPageView(this.page - 1); + + this.pdfViewer.currentPageNumber = this.page; } } @@ -136,7 +139,8 @@ export class ViewerComponent { if (!isNaN(pageInput) && pageInput > 0 && pageInput <= this.totalPages) { this.page = pageInput; - this.loadPage(this.currentPdfDocument); + + this.pdfViewer.currentPageNumber = this.page; } else { this.displayPage = this.page; }