Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/pdf_thumbnail_view.js
View File

@ -130,12 +130,6 @@ class PDFThumbnailView {
div.setAttribute('data-page-number', this.id); div.setAttribute('data-page-number', this.id);
this.div = div; 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'); let ring = document.createElement('div');
ring.className = 'thumbnailSelectionRing'; ring.className = 'thumbnailSelectionRing';
let borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH; let borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH;

38
web/pdf_thumbnail_viewer.js
View File

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