#68 fix page navigation

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

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;
+}

ng2-components/ng2-alfresco-viewer/src/viewer.component.html

@@ -15,7 +15,7 @@
 
                     <!-- Pagination toolbar start -->
                     <div id="viewer-toolbar-pagination">
-                        <div id="viewer-previous-page-button-input" class="left" (click)="previousPage()">
+                        <div id="viewer-previous-page-button" class="left" (click)="previousPage()">
                             <i class="icon material-icons">keyboard_arrow_left</i>
                         </div>
 
@@ -23,7 +23,7 @@
                                (keyup.enter)="inputPage(page.value)" class="left" type="text" pattern="-?[0-9]*(\.[0-9]+)?" value="{{displayPage}}">
                         <span id="viewer-total-pages"  class="left">/ {{totalPages}}</span>
 
-                        <div id="viewer-next-page-button-button-input" (click)="nextPage()"  class="left">
+                        <div id="viewer-next-page-button" (click)="nextPage()"  class="left">
                             <i class="icon material-icons" >keyboard_arrow_right</i>
                         </div>
                     </div>
@@ -59,8 +59,8 @@
                             class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
 
                             <!-- Start Pdf Canvas -->
-                            <div id="viewer-canvas-container" class="viewer-canvas-container">
+                            <div id="viewer-pdf-container" class="viewer-pdf-container">
-                                <div id="viewer-the-canvas" style="border:1px solid black;"></div>
+                                <div id="viewer-viewerPdf" style="border:1px solid black;"></div>
                             </div>
                             <!-- End Pdf Canvas -->
 

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-viewerPdf')).not.toBeNull();
-                    expect(element.querySelector('#viewer-canvas-container')).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(() => {
-
+                        fixture.detectChanges();
-                    component.ngOnChanges().then((resolve) => {
                         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-viewerPdf')).toBeNull();
-                    expect(element.querySelector('#viewer-canvas-container')).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();
-
                 });
         }));
     });

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) => {
+                return new Promise((resolve) => {
-                    this.currentPdfDocument = pdfDocument;
+                    this.getPDFJS().getDocument(urlFileTicket, null, null).then((pdfDocument) => {
-                    this.totalPages = pdfDocument.numPages;
+                        this.currentPdfDocument = pdfDocument;
-                    this.page = 1;
+                        this.totalPages = pdfDocument.numPages;
-                    this.displayPage = 1;
+                        this.page = 1;
-                    this.loadPage(this.currentPdfDocument);
+                        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;
         }