fix memory leaks for pdf viewers (#2316)

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, HostListener, Input, OnChanges, ViewEncapsulation } from '@angular/core';
+import { Component, HostListener, Input, OnChanges, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { LogService } from 'ng2-alfresco-core';
 import { RenderingQueueServices } from '../services/rendering-queue.services';
 
@@ -32,7 +32,7 @@ declare let PDFJS: any;
     host: { 'class': 'adf-pdf-viewer' },
     encapsulation: ViewEncapsulation.None
 })
-export class PdfViewerComponent implements OnChanges {
+export class PdfViewerComponent implements OnChanges, OnDestroy {
 
     @Input()
     urlFile: string;
@@ -62,6 +62,8 @@ export class PdfViewerComponent implements OnChanges {
 
     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);
     }
 
     ngOnChanges(changes) {
@@ -127,9 +129,7 @@ export class PdfViewerComponent implements OnChanges {
         let documentContainer = document.getElementById('viewer-pdf-container');
         let viewer: any = document.getElementById('viewer-viewerPdf');
 
-        window.document.addEventListener('scroll', (event) => {
+        window.document.addEventListener('scroll', this.onDocumentScroll, true);
-            this.watchScroll(event.target);
-        }, true);
 
         this.pdfViewer = new PDFJS.PDFViewer({
             container: documentContainer,
@@ -142,6 +142,10 @@ export class PdfViewerComponent implements OnChanges {
         this.pdfViewer.setDocument(pdfDocument);
     }
 
+    ngOnDestroy() {
+        window.document.removeEventListener('scroll', this.onDocumentScroll, true);
+    }
+
     /**
      * Method to scale the page current support implementation
      *
@@ -397,4 +401,10 @@ export class PdfViewerComponent implements OnChanges {
         }
     }
 
+    onDocumentScroll(event: Event) {
+        if (event && event.target) {
+            this.watchScroll(event.target);
+        }
+    }
+
 }

ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog/pdf-view/pdf-view.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, HostListener, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, HostListener, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { LogService } from 'ng2-alfresco-core';
 import { RenderingQueueServices } from '../../../services/rendering-queue.services';
 
@@ -29,7 +29,7 @@ declare let PDFJS: any;
     host: { 'class': 'adf-pdf-view' },
     encapsulation: ViewEncapsulation.None
 })
-export class PdfViewComponent implements OnInit {
+export class PdfViewComponent implements OnInit, OnDestroy {
 
     @Input()
     fileUrl: string;
@@ -53,6 +53,8 @@ export class PdfViewComponent implements OnInit {
 
     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);
     }
 
     ngOnInit() {
@@ -61,6 +63,10 @@ export class PdfViewComponent implements OnInit {
         }
     }
 
+    ngOnDestroy() {
+        window.document.removeEventListener('scroll', this.onDocumentScroll, true);
+    }
+
     private render(src) {
         return new Promise((resolve, reject) => {
             this.isLoading = true;
@@ -113,9 +119,7 @@ export class PdfViewComponent implements OnInit {
         let documentContainer = document.getElementById('viewer-pdf-container');
         let viewer: any = document.getElementById('viewer-viewerPdf');
 
-        window.document.addEventListener('scroll', (event) => {
+        window.document.addEventListener('scroll', this.onDocumentScroll, true);
-            this.watchScroll(event.target);
-        }, true);
 
         this.pdfViewer = new PDFJS.PDFViewer({
             container: documentContainer,
@@ -128,6 +132,17 @@ export class PdfViewComponent implements OnInit {
         this.pdfViewer.setDocument(pdfDocument);
     }
 
+    private onDocumentScroll(event: Event) {
+        if (event && event.target) {
+            const outputPage = this.getVisibleElement(event.target);
+
+            if (outputPage) {
+                this.page = outputPage.id;
+                this.displayPage = this.page;
+            }
+        }
+    }
+
     /**
      * Method to scale the page current support implementation
      *
@@ -324,20 +339,6 @@ export class PdfViewComponent implements OnInit {
         }
     }
 
-    /**
-     * 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
      *