Merge pull request #9466 from Snuffleupagus/refactor-PDFThumbnailViewer-scrollThumbnailIntoView

Refactor `PDFThumbnailViewer.scrollThumbnailIntoView` to avoid unnecessary DOM look-ups
This commit is contained in:
Tim van der Meij 2018-02-09 22:17:25 +01:00 committed by GitHub
commit f1413a9096
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 17 deletions

View File

@ -130,12 +130,6 @@ class PDFThumbnailView {
div.setAttribute('data-page-number', this.id);
this.div = div;
if (id === 1) {
// Highlight the thumbnail of the first page when no page number is
// specified (or exists in cache) when the document is loaded.
div.classList.add('selected');
}
let ring = document.createElement('div');
ring.className = 'thumbnailSelectionRing';
let borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH;

View File

@ -19,6 +19,7 @@ import {
import { PDFThumbnailView } from './pdf_thumbnail_view';
const THUMBNAIL_SCROLL_MARGIN = -19;
const THUMBNAIL_SELECTED_CLASS = 'selected';
/**
* @typedef {Object} PDFThumbnailViewerOptions
@ -66,15 +67,23 @@ class PDFThumbnailViewer {
return getVisibleElements(this.container, this._thumbnails);
}
scrollThumbnailIntoView(page) {
let selected = document.querySelector('.thumbnail.selected');
if (selected) {
selected.classList.remove('selected');
scrollThumbnailIntoView(pageNumber) {
if (!this.pdfDocument) {
return;
}
let thumbnail = document.querySelector(
'div.thumbnail[data-page-number="' + page + '"]');
if (thumbnail) {
thumbnail.classList.add('selected');
const thumbnailView = this._thumbnails[pageNumber - 1];
if (!thumbnailView) {
console.error('scrollThumbnailIntoView: Invalid "pageNumber" parameter.');
return;
}
if (pageNumber !== this._currentPageNumber) {
const prevThumbnailView = this._thumbnails[this._currentPageNumber - 1];
// Remove the highlight from the previous thumbnail...
prevThumbnailView.div.classList.remove(THUMBNAIL_SELECTED_CLASS);
// ... and add the highlight to the new thumbnail.
thumbnailView.div.classList.add(THUMBNAIL_SELECTED_CLASS);
}
let visibleThumbs = this._getVisibleThumbs();
let numVisibleThumbs = visibleThumbs.views.length;
@ -86,11 +95,11 @@ class PDFThumbnailViewer {
let last = (numVisibleThumbs > 1 ? visibleThumbs.last.id : first);
let shouldScroll = false;
if (page <= first || page >= last) {
if (pageNumber <= first || pageNumber >= last) {
shouldScroll = true;
} else {
visibleThumbs.views.some(function(view) {
if (view.id !== page) {
if (view.id !== pageNumber) {
return false;
}
shouldScroll = view.percent < 100;
@ -98,9 +107,11 @@ class PDFThumbnailViewer {
});
}
if (shouldScroll) {
scrollIntoView(thumbnail, { top: THUMBNAIL_SCROLL_MARGIN, });
scrollIntoView(thumbnailView.div, { top: THUMBNAIL_SCROLL_MARGIN, });
}
}
this._currentPageNumber = pageNumber;
}
get pagesRotation() {
@ -133,6 +144,7 @@ class PDFThumbnailViewer {
*/
_resetView() {
this._thumbnails = [];
this._currentPageNumber = 1;
this._pageLabels = null;
this._pagesRotation = 0;
this._pagesRequests = [];
@ -167,6 +179,10 @@ class PDFThumbnailViewer {
});
this._thumbnails.push(thumbnail);
}
// Ensure that the current thumbnail is always highlighted on load.
const thumbnailView = this._thumbnails[this._currentPageNumber - 1];
thumbnailView.div.classList.add(THUMBNAIL_SELECTED_CLASS);
}).catch((reason) => {
console.error('Unable to initialize thumbnail viewer', reason);
});