From 69ac38713f28ad63534d8c12786b8aa0a5a4956b Mon Sep 17 00:00:00 2001 From: Cilibiu Bogdan Date: Tue, 6 Mar 2018 09:00:52 +0200 Subject: [PATCH] [ADF-2388, ADF-2375] PDF Viewer - show buffer thumbnail on pagechange (#3011) * disable thumbnails button until document is loaded * show buffer thumbnail on page change * correct value property * correct test --- .../pdfViewer-thumbnails.component.scss | 6 +-- .../pdfViewer-thumbnails.component.spec.ts | 37 ++++++++----- .../pdfViewer-thumbnails.component.ts | 9 +++- .../components/pdfViewer.component.html | 1 + .../components/pdfViewer.component.scss | 1 + .../components/pdfViewer.component.spec.ts | 52 +++++++++++++++++++ .../viewer/components/pdfViewer.component.ts | 13 +++++ .../viewer/components/viewer.component.scss | 2 +- 8 files changed, 99 insertions(+), 22 deletions(-) diff --git a/lib/core/viewer/components/pdfViewer-thumbnails.component.scss b/lib/core/viewer/components/pdfViewer-thumbnails.component.scss index 903fc56d03..30a1adb39a 100644 --- a/lib/core/viewer/components/pdfViewer-thumbnails.component.scss +++ b/lib/core/viewer/components/pdfViewer-thumbnails.component.scss @@ -9,16 +9,12 @@ position: relative; &__content { - top: 0; + top: 5px; left: 50%; height: 0; position: absolute; } - &__thumb:first-child { - margin-top: 15px; - } - &__thumb { cursor: pointer; display: block; diff --git a/lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts b/lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts index df68e9aa5d..05ca231f38 100644 --- a/lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts +++ b/lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts @@ -17,6 +17,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { PdfThumbListComponent } from './pdfViewer-thumbnails.component'; import { PdfThumbComponent } from './pdfViewer-thumb.component'; @@ -55,6 +56,9 @@ describe('PdfThumbListComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ + imports: [ + NoopAnimationsModule + ], declarations: [ PdfThumbListComponent, PdfThumbComponent @@ -81,7 +85,7 @@ describe('PdfThumbListComponent', () => { fixture.detectChanges(); const renderedIds = component.renderItems.map(item => item.id); - const rangeIds = viewerMock._pages.slice(0, 7).map(item => item.id); + const rangeIds = viewerMock._pages.slice(0, 6).map(item => item.id); expect(renderedIds).toEqual(rangeIds); }); @@ -91,24 +95,23 @@ describe('PdfThumbListComponent', () => { fixture.detectChanges(); const renderedIds = component.renderItems.map(item => item.id); - const rangeIds = viewerMock._pages.slice(6, 14).map(item => item.id); + const rangeIds = viewerMock._pages.slice(5, 12).map(item => item.id); expect(renderedIds).toEqual(rangeIds); }); it('should render items containing current document page', () => { - fixture.nativeElement.scrollTop = 1700; fixture.detectChanges(); const renderedIds = component.renderItems.map(item => item.id); - expect(renderedIds).not.toContain(3); + expect(renderedIds).not.toContain(10); - viewerMock.eventBus.dispatch('pagechange', { pageNumber: 3 }); + component.scrollInto(10); const newRenderedIds = component.renderItems.map(item => item.id); - expect(newRenderedIds).toContain(3); + expect(newRenderedIds).toContain(10); }); it('should not change items if range contains current document page', () => { @@ -126,6 +129,19 @@ describe('PdfThumbListComponent', () => { expect(newRenderedIds).toContain(12); }); + it('should scroll thumbnail height amount to buffer thumbnail onPageChange event', () => { + spyOn(component, 'scrollInto'); + fixture.detectChanges(); + + expect(component.renderItems[component.renderItems.length - 1].id).toBe(6); + expect(fixture.debugElement.nativeElement.scrollTop).toBe(0); + + viewerMock.currentPageNumber = 6; + + expect(component.scrollInto).not.toHaveBeenCalled(); + expect(fixture.debugElement.nativeElement.scrollTop).toBe(129); + }); + it('should return current viewed page as selected', () => { fixture.nativeElement.scrollTop = 0; fixture.detectChanges(); @@ -136,17 +152,10 @@ describe('PdfThumbListComponent', () => { }); it('should go to selected page', () => { - fixture.nativeElement.scrollTop = 0; fixture.detectChanges(); - const renderedIds = component.renderItems.map(item => item.id); - - expect(renderedIds).not.toContain(12); - component.goTo(12); - const newRenderedIds = component.renderItems.map(item => item.id); - - expect(newRenderedIds).toContain(12); + expect(viewerMock.currentPageNumber).toBe(12); }); }); diff --git a/lib/core/viewer/components/pdfViewer-thumbnails.component.ts b/lib/core/viewer/components/pdfViewer-thumbnails.component.ts index 09e281ffff..762bf55676 100644 --- a/lib/core/viewer/components/pdfViewer-thumbnails.component.ts +++ b/lib/core/viewer/components/pdfViewer-thumbnails.component.ts @@ -35,7 +35,8 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy { renderItems = []; private items = []; - private itemHeight: number = 114; + private margin: number = 15; + private itemHeight: number = 114 + this.margin; @ContentChild(TemplateRef) template: any; @@ -87,7 +88,7 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy { return; } - this.element.nativeElement.scrollTop = Math.floor(index - 1 ) * this.itemHeight; + this.element.nativeElement.scrollTop = index * this.itemHeight; this.calculateItems(); } @@ -133,5 +134,9 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy { if (index < 0) { this.scrollInto(event.pageNumber); } + + if (index >= this.renderItems.length - 1) { + this.element.nativeElement.scrollTop += this.itemHeight; + } } } diff --git a/lib/core/viewer/components/pdfViewer.component.html b/lib/core/viewer/components/pdfViewer.component.html index 35a5f5ac83..f4a0692a15 100644 --- a/lib/core/viewer/components/pdfViewer.component.html +++ b/lib/core/viewer/components/pdfViewer.component.html @@ -37,6 +37,7 @@ diff --git a/lib/core/viewer/components/pdfViewer.component.scss b/lib/core/viewer/components/pdfViewer.component.scss index 720b71195c..66c80ff469 100644 --- a/lib/core/viewer/components/pdfViewer.component.scss +++ b/lib/core/viewer/components/pdfViewer.component.scss @@ -40,6 +40,7 @@ justify-content: flex-end; align-items: flex-end; display: flex; + color: mat-color($foreground, text, 0.54); } } diff --git a/lib/core/viewer/components/pdfViewer.component.spec.ts b/lib/core/viewer/components/pdfViewer.component.spec.ts index 7f9ea4e66b..ede7454035 100644 --- a/lib/core/viewer/components/pdfViewer.component.spec.ts +++ b/lib/core/viewer/components/pdfViewer.component.spec.ts @@ -437,4 +437,56 @@ describe('Test PdfViewer component', () => { }); }); }); + + describe('Viewer events', () => { + beforeEach(() => { + component.urlFile = require('../assets/fake-test-file.pdf'); + fixture.detectChanges(); + }); + + it('should emit pagechange event', (done) => { + component.ngOnChanges(null).then(() => { + fixture.detectChanges(); + return fixture.whenStable().then(() => { + expect(component.displayPage).toBe(1); + + const args = { + pageNumber: 6, + source: { + container: component.documentContainer + } + }; + + component.pdfViewer.eventBus.dispatch('pagechange', args); + fixture.detectChanges(); + + expect(component.displayPage).toBe(6); + expect(component.page).toBe(6); + done(); + }); + }); + }); + + it('should emit pagesloaded event', (done) => { + component.ngOnChanges(null).then(() => { + fixture.detectChanges(); + return fixture.whenStable().then(() => { + expect(component.isPanelDisabled).toBe(true); + + const args = { + pagesCount: 10, + source: { + container: component.documentContainer + } + }; + + component.pdfViewer.eventBus.dispatch('pagesloaded', args); + fixture.detectChanges(); + + expect(component.isPanelDisabled).toBe(false); + done(); + }); + }); + }); + }); }); diff --git a/lib/core/viewer/components/pdfViewer.component.ts b/lib/core/viewer/components/pdfViewer.component.ts index f6ca061220..82cdd3d169 100644 --- a/lib/core/viewer/components/pdfViewer.component.ts +++ b/lib/core/viewer/components/pdfViewer.component.ts @@ -67,6 +67,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { MIN_SCALE: number = 0.25; MAX_SCALE: number = 10.0; + isPanelDisabled = true; showThumbnails: boolean = false; pdfThumbnailsContext: { viewer: any } = { viewer: null }; @@ -78,6 +79,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { private logService: LogService) { // needed to preserve "this" context this.onPageChange = this.onPageChange.bind(this); + this.onPagesLoaded = this.onPagesLoaded.bind(this); } ngOnChanges(changes) { @@ -142,6 +144,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { this.documentContainer = document.getElementById('viewer-pdf-viewer'); this.documentContainer.addEventListener('pagechange', this.onPageChange, true); + this.documentContainer.addEventListener('pagesloaded', this.onPagesLoaded, true); this.pdfViewer = new PDFJS.PDFViewer({ container: this.documentContainer, @@ -159,6 +162,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { ngOnDestroy() { if (this.documentContainer) { this.documentContainer.removeEventListener('pagechange', this.onPageChange, true); + this.documentContainer.removeEventListener('pagesloaded', this.onPagesLoaded, true); } } @@ -369,6 +373,15 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { this.displayPage = event.pageNumber; } + /** + * Pages Loaded Event + * + * @param event + */ + onPagesLoaded(event) { + this.isPanelDisabled = false; + } + /** * Litener Keyboard Event * @param KeyboardEvent event diff --git a/lib/core/viewer/components/viewer.component.scss b/lib/core/viewer/components/viewer.component.scss index 51048dc377..5211893307 100644 --- a/lib/core/viewer/components/viewer.component.scss +++ b/lib/core/viewer/components/viewer.component.scss @@ -11,7 +11,7 @@ .adf-viewer { - .mat-toolbar, .mat-icon { + .mat-toolbar { color: mat-color($foreground, text, 0.54); }