inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* use viewer pagechange event over document scroll

* undo declaration component deletion

* safe ngOnDestroy

* preserve context
This commit is contained in:
Cilibiu Bogdan
2018-02-12 17:22:35 +02:00
committed by Eugenio Romano
parent 6072a987c9
commit 3368607aff
2 changed files with 19 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
lib/core/viewer/components/pdfViewer.component.spec.ts
View File

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

69
lib/core/viewer/components/pdfViewer.component.ts
View File

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