[ADF-2290] PDF Viewer - scroll event dispatch outside view container (#2922)

* use viewer pagechange event over document scroll

* undo declaration component deletion

* safe ngOnDestroy

* preserve context

lib/core/viewer/components/pdfViewer.component.spec.ts

@@ -368,14 +368,15 @@ describe('Test PdfViewer component', () => {
                 fixture.whenStable().then(() => {
 
                     expect(component.displayPage).toBe(1);
+
                     component.inputPage('2');
                     fixture.detectChanges();
                     expect(component.displayPage).toBe(2);
-                    let documentContainer = element.querySelector('.viewer-pdf-container');
-                    documentContainer.scrollTop = 100000;
-                    component.watchScroll(documentContainer);
+
+                    component.pdfViewer.currentPageNumber = 6;
                     fixture.detectChanges();
                     expect(component.displayPage).toBe(6);
+                    expect(component.page).toBe(6);
                     done();
                 });
             });

lib/core/viewer/components/pdfViewer.component.ts

@@ -55,6 +55,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
     totalPages: number;
     loadingPercent: number;
     pdfViewer: any;
+    documentContainer: any;
     currentScaleMode: string = 'auto';
     currentScale: number = 1;
 
@@ -69,8 +70,8 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
 
     constructor(private renderingQueueServices: RenderingQueueServices,
                 private logService: LogService) {
-        // needed to preserve "this" context when setting as a global document event listener
-        this.onDocumentScroll = this.onDocumentScroll.bind(this);
+        // needed to preserve "this" context
+        this.onPageChange = this.onPageChange.bind(this);
     }
 
     ngOnChanges(changes) {
@@ -133,13 +134,13 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
         PDFJS.verbosity = 1;
         PDFJS.disableWorker = false;
 
-        let documentContainer = document.getElementById('viewer-pdf-container');
-        let viewer: any = document.getElementById('viewer-viewerPdf');
+        const viewer: any = document.getElementById('viewer-viewerPdf');
 
-        window.document.addEventListener('scroll', this.onDocumentScroll, true);
+        this.documentContainer = document.getElementById('viewer-pdf-container');
+        this.documentContainer.addEventListener('pagechange', this.onPageChange, true);
 
         this.pdfViewer = new PDFJS.PDFViewer({
-            container: documentContainer,
+            container: this.documentContainer,
             viewer: viewer,
             renderingQueue: this.renderingQueueServices
         });
@@ -150,7 +151,9 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
     }
 
     ngOnDestroy() {
-        window.document.removeEventListener('scroll', this.onDocumentScroll, true);
+        if(this.documentContainer) {
+            this.documentContainer.removeEventListener('pagechange', this.onPageChange, true);
+        }
     }
 
     /**
@@ -350,48 +353,13 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
     }
 
     /**
-     * Litener Scroll Event
+     * Page Change Event
      *
-     * @param {any} target
+     * @param {Event} event
      */
-    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));
+    onPageChange(event) {
+        this.page = event.pageNumber;
+        this.displayPage = event.pageNumber;
     }
 
     /**
@@ -407,11 +375,4 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
             this.previousPage();
         }
     }
-
-    onDocumentScroll(event: Event) {
-        if (event && event.target) {
-            this.watchScroll(event.target);
-        }
-    }
-
 }