Page Number doesn't change when user scroll the document #319

ng2-components/ng2-alfresco-viewer/src/assets/PDFViewer.mock.ts

@@ -28,15 +28,33 @@ export class PDFViewermock {
         [{
             width: 793,
             scale: 1,
-            update: this.update
+            update: this.update,
+            div: {
+                offsetTop: 400
+            },
+            viewport: {
+                height: 400
+            }
         }, {
             width: 793,
             scale: 1,
-            update: this.update
+            update: this.update,
+            div: {
+                offsetTop: 800
+            },
+            viewport: {
+                height: 400
+            }
         }, {
             width: 793,
             scale: 1,
-            update: this.update
+            update: this.update,
+            div: {
+                offsetTop: 1200
+            },
+            viewport: {
+                height: 400
+            }
         }];
 
     _currentPageNumber: number = 0;

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

@@ -1,6 +1,6 @@
 <!-- Start Pdf Canvas -->
 <div id="viewer-pdf-container" class="viewer-pdf-container" (keypress)=eventHandler() (window:resize)="onResize($event)">
-    <div id="viewer-viewerPdf" class="pdfViewer" >
+    <div id="viewer-viewerPdf" class="pdfViewer">
         <div id="loader-container" class="loader-container">
             <div class="loader-item">
                 <div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>

ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts

@@ -346,8 +346,7 @@ describe('PdfViewer', () => {
         }));
     });
 
-    describe('Rezize interaction', () => {
-
+    describe('Resize interaction', () => {
         it('resize event should trigger setScaleUpdatePages', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb
                 .createAsync(PdfViewerComponent)
@@ -370,4 +369,33 @@ describe('PdfViewer', () => {
         }));
     });
 
+    describe('scroll interaction', () => {
+        it('scroll page should return the current page', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(PdfViewerComponent)
+                .then((fixture) => {
+                    let component = fixture.componentInstance;
+
+                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
+                    spyOn(component, 'initPDFViewer').and.callFake(() => {
+                        component.pdfViewer = new PDFViewermock();
+                    });
+
+                    component.urlFile = 'fake-url-file';
+
+                    component.ngOnChanges().then(() => {
+                        fixture.detectChanges();
+                        expect(component.displayPage).toBe(1);
+                        component.inputPage('4');
+                        fixture.detectChanges();
+                        expect(component.displayPage).toBe(4);
+                        component.watchScroll({scrollTop: 10000});
+                        expect(component.displayPage).toBe(4);
+                    }).catch((error) => {
+                        expect(error).toBeUndefined();
+                    });
+                });
+        }));
+    });
+
 });

ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts

@@ -91,6 +91,10 @@ export class PdfViewerComponent {
         let documentContainer = document.getElementById('viewer-pdf-container');
         let viewer: any = document.getElementById('viewer-viewerPdf');
 
+        window.document.addEventListener('scroll', (event) => {
+            this.watchScroll(event.target);
+        }, true);
+
         this.pdfViewer = new PDFJS.PDFViewer({
             container: documentContainer,
             viewer: viewer
@@ -284,6 +288,50 @@ export class PdfViewerComponent {
         }
     }
 
+    /**
+     * Litener Scroll Event
+     *
+     * @param {any} target
+     */
+    watchScroll(target) {
+        let outputPage = this.getVisibleElement(target);
+        if (outputPage) {
+            this.page = outputPage.id;
+            this.displayPage = this.page;
+        }
+    }
+
+    /**
+     * find out what elements are visible within a scroll pane
+     *
+     * @param {any} target
+     *
+     * @returns {Object} page
+     */
+    getVisibleElement(target) {
+        return this.pdfViewer._pages.find((page) => {
+            return this.isOnScreen(page, target);
+        });
+    }
+
+    /**
+     * check if a page is visible
+     *
+     * @param {any} page
+     * @param {any} target
+     *
+     * @returns {boolean}
+     */
+    isOnScreen(page: any, target: any) {
+        let viewport: any = {};
+        viewport.top = target.scrollTop;
+        viewport.bottom = viewport.top + target.scrollHeight;
+        let bounds: any = {};
+        bounds.top = page.div.offsetTop;
+        bounds.bottom = bounds.top + page.viewport.height;
+        return ((bounds.top <= viewport.bottom) && (bounds.bottom >= viewport.top));
+    };
+
     /**
      * Litener Keyboard Event
      * @param {KeyboardEvent} event