Convert the thumbnail viewer to ES6 syntax
This commit is contained in:
Tim van der Meij
parent
63b89c1100
commit
a682d77e71
@ -18,7 +18,7 @@ import {
|
||||
} from './ui_utils';
|
||||
import { PDFThumbnailView } from './pdf_thumbnail_view';
|
||||
|
||||
var THUMBNAIL_SCROLL_MARGIN = -19;
|
||||
const THUMBNAIL_SCROLL_MARGIN = -19;
|
||||
|
||||
/**
|
||||
* @typedef {Object} PDFThumbnailViewerOptions
|
||||
@ -30,201 +30,193 @@ var THUMBNAIL_SCROLL_MARGIN = -19;
|
||||
*/
|
||||
|
||||
/**
|
||||
* Simple viewer control to display thumbnails for pages.
|
||||
* @class
|
||||
* Viewer control to display thumbnails for pages in a PDF document.
|
||||
*
|
||||
* @implements {IRenderableView}
|
||||
*/
|
||||
var PDFThumbnailViewer = (function PDFThumbnailViewerClosure() {
|
||||
class PDFThumbnailViewer {
|
||||
/**
|
||||
* @constructs PDFThumbnailViewer
|
||||
* @param {PDFThumbnailViewerOptions} options
|
||||
*/
|
||||
function PDFThumbnailViewer(options) {
|
||||
this.container = options.container;
|
||||
this.renderingQueue = options.renderingQueue;
|
||||
this.linkService = options.linkService;
|
||||
this.l10n = options.l10n || NullL10n;
|
||||
constructor({ container, linkService, renderingQueue, l10n = NullL10n, }) {
|
||||
this.container = container;
|
||||
this.linkService = linkService;
|
||||
this.renderingQueue = renderingQueue;
|
||||
this.l10n = l10n;
|
||||
|
||||
this.scroll = watchScroll(this.container, this._scrollUpdated.bind(this));
|
||||
this._resetView();
|
||||
}
|
||||
|
||||
PDFThumbnailViewer.prototype = {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_scrollUpdated: function PDFThumbnailViewer_scrollUpdated() {
|
||||
this.renderingQueue.renderHighestPriority();
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_scrollUpdated() {
|
||||
this.renderingQueue.renderHighestPriority();
|
||||
}
|
||||
|
||||
getThumbnail: function PDFThumbnailViewer_getThumbnail(index) {
|
||||
return this.thumbnails[index];
|
||||
},
|
||||
getThumbnail(index) {
|
||||
return this._thumbnails[index];
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_getVisibleThumbs: function PDFThumbnailViewer_getVisibleThumbs() {
|
||||
return getVisibleElements(this.container, this.thumbnails);
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_getVisibleThumbs() {
|
||||
return getVisibleElements(this.container, this._thumbnails);
|
||||
}
|
||||
|
||||
scrollThumbnailIntoView:
|
||||
function PDFThumbnailViewer_scrollThumbnailIntoView(page) {
|
||||
var selected = document.querySelector('.thumbnail.selected');
|
||||
if (selected) {
|
||||
selected.classList.remove('selected');
|
||||
scrollThumbnailIntoView(page) {
|
||||
let selected = document.querySelector('.thumbnail.selected');
|
||||
if (selected) {
|
||||
selected.classList.remove('selected');
|
||||
}
|
||||
let thumbnail = document.querySelector(
|
||||
'div.thumbnail[data-page-number="' + page + '"]');
|
||||
if (thumbnail) {
|
||||
thumbnail.classList.add('selected');
|
||||
}
|
||||
let visibleThumbs = this._getVisibleThumbs();
|
||||
let numVisibleThumbs = visibleThumbs.views.length;
|
||||
|
||||
// If the thumbnail isn't currently visible, scroll it into view.
|
||||
if (numVisibleThumbs > 0) {
|
||||
let first = visibleThumbs.first.id;
|
||||
// Account for only one thumbnail being visible.
|
||||
let last = (numVisibleThumbs > 1 ? visibleThumbs.last.id : first);
|
||||
if (page <= first || page >= last) {
|
||||
scrollIntoView(thumbnail, { top: THUMBNAIL_SCROLL_MARGIN, });
|
||||
}
|
||||
var thumbnail = document.querySelector(
|
||||
'div.thumbnail[data-page-number="' + page + '"]');
|
||||
if (thumbnail) {
|
||||
thumbnail.classList.add('selected');
|
||||
}
|
||||
var visibleThumbs = this._getVisibleThumbs();
|
||||
var numVisibleThumbs = visibleThumbs.views.length;
|
||||
}
|
||||
}
|
||||
|
||||
// If the thumbnail isn't currently visible, scroll it into view.
|
||||
if (numVisibleThumbs > 0) {
|
||||
var first = visibleThumbs.first.id;
|
||||
// Account for only one thumbnail being visible.
|
||||
var last = (numVisibleThumbs > 1 ? visibleThumbs.last.id : first);
|
||||
if (page <= first || page >= last) {
|
||||
scrollIntoView(thumbnail, { top: THUMBNAIL_SCROLL_MARGIN, });
|
||||
}
|
||||
}
|
||||
},
|
||||
get pagesRotation() {
|
||||
return this._pagesRotation;
|
||||
}
|
||||
|
||||
get pagesRotation() {
|
||||
return this._pagesRotation;
|
||||
},
|
||||
set pagesRotation(rotation) {
|
||||
this._pagesRotation = rotation;
|
||||
for (let i = 0, l = this._thumbnails.length; i < l; i++) {
|
||||
this._thumbnails[i].update(rotation);
|
||||
}
|
||||
}
|
||||
|
||||
set pagesRotation(rotation) {
|
||||
this._pagesRotation = rotation;
|
||||
for (var i = 0, l = this.thumbnails.length; i < l; i++) {
|
||||
var thumb = this.thumbnails[i];
|
||||
thumb.update(rotation);
|
||||
}
|
||||
},
|
||||
cleanup() {
|
||||
PDFThumbnailView.cleanup();
|
||||
}
|
||||
|
||||
cleanup: function PDFThumbnailViewer_cleanup() {
|
||||
PDFThumbnailView.cleanup();
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_resetView() {
|
||||
this._thumbnails = [];
|
||||
this._pageLabels = null;
|
||||
this._pagesRotation = 0;
|
||||
this._pagesRequests = [];
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_resetView: function PDFThumbnailViewer_resetView() {
|
||||
this.thumbnails = [];
|
||||
this._pageLabels = null;
|
||||
this._pagesRotation = 0;
|
||||
this._pagesRequests = [];
|
||||
// Remove the thumbnails from the DOM.
|
||||
this.container.textContent = '';
|
||||
}
|
||||
|
||||
// Remove the thumbnails from the DOM.
|
||||
this.container.textContent = '';
|
||||
},
|
||||
setDocument(pdfDocument) {
|
||||
if (this.pdfDocument) {
|
||||
this._cancelRendering();
|
||||
this._resetView();
|
||||
}
|
||||
|
||||
setDocument: function PDFThumbnailViewer_setDocument(pdfDocument) {
|
||||
if (this.pdfDocument) {
|
||||
this._cancelRendering();
|
||||
this._resetView();
|
||||
}
|
||||
this.pdfDocument = pdfDocument;
|
||||
if (!pdfDocument) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
this.pdfDocument = pdfDocument;
|
||||
if (!pdfDocument) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
return pdfDocument.getPage(1).then((firstPage) => {
|
||||
var pagesCount = pdfDocument.numPages;
|
||||
var viewport = firstPage.getViewport(1.0);
|
||||
for (let pageNum = 1; pageNum <= pagesCount; ++pageNum) {
|
||||
var thumbnail = new PDFThumbnailView({
|
||||
container: this.container,
|
||||
id: pageNum,
|
||||
defaultViewport: viewport.clone(),
|
||||
linkService: this.linkService,
|
||||
renderingQueue: this.renderingQueue,
|
||||
disableCanvasToImageConversion: false,
|
||||
l10n: this.l10n,
|
||||
});
|
||||
this.thumbnails.push(thumbnail);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_cancelRendering: function PDFThumbnailViewer_cancelRendering() {
|
||||
for (var i = 0, ii = this.thumbnails.length; i < ii; i++) {
|
||||
if (this.thumbnails[i]) {
|
||||
this.thumbnails[i].cancelRendering();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {Array|null} labels
|
||||
*/
|
||||
setPageLabels: function PDFThumbnailViewer_setPageLabels(labels) {
|
||||
if (!this.pdfDocument) {
|
||||
return;
|
||||
}
|
||||
if (!labels) {
|
||||
this._pageLabels = null;
|
||||
} else if (!(labels instanceof Array &&
|
||||
this.pdfDocument.numPages === labels.length)) {
|
||||
this._pageLabels = null;
|
||||
console.error('PDFThumbnailViewer_setPageLabels: Invalid page labels.');
|
||||
} else {
|
||||
this._pageLabels = labels;
|
||||
}
|
||||
// Update all the `PDFThumbnailView` instances.
|
||||
for (var i = 0, ii = this.thumbnails.length; i < ii; i++) {
|
||||
var thumbnailView = this.thumbnails[i];
|
||||
var label = this._pageLabels && this._pageLabels[i];
|
||||
thumbnailView.setPageLabel(label);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {PDFThumbnailView} thumbView
|
||||
* @returns {PDFPage}
|
||||
* @private
|
||||
*/
|
||||
_ensurePdfPageLoaded(thumbView) {
|
||||
if (thumbView.pdfPage) {
|
||||
return Promise.resolve(thumbView.pdfPage);
|
||||
}
|
||||
var pageNumber = thumbView.id;
|
||||
if (this._pagesRequests[pageNumber]) {
|
||||
return this._pagesRequests[pageNumber];
|
||||
}
|
||||
var promise = this.pdfDocument.getPage(pageNumber).then((pdfPage) => {
|
||||
thumbView.setPdfPage(pdfPage);
|
||||
this._pagesRequests[pageNumber] = null;
|
||||
return pdfPage;
|
||||
});
|
||||
this._pagesRequests[pageNumber] = promise;
|
||||
return promise;
|
||||
},
|
||||
|
||||
forceRendering() {
|
||||
var visibleThumbs = this._getVisibleThumbs();
|
||||
var thumbView = this.renderingQueue.getHighestPriority(visibleThumbs,
|
||||
this.thumbnails,
|
||||
this.scroll.down);
|
||||
if (thumbView) {
|
||||
this._ensurePdfPageLoaded(thumbView).then(() => {
|
||||
this.renderingQueue.renderView(thumbView);
|
||||
return pdfDocument.getPage(1).then((firstPage) => {
|
||||
let pagesCount = pdfDocument.numPages;
|
||||
let viewport = firstPage.getViewport(1.0);
|
||||
for (let pageNum = 1; pageNum <= pagesCount; ++pageNum) {
|
||||
let thumbnail = new PDFThumbnailView({
|
||||
container: this.container,
|
||||
id: pageNum,
|
||||
defaultViewport: viewport.clone(),
|
||||
linkService: this.linkService,
|
||||
renderingQueue: this.renderingQueue,
|
||||
disableCanvasToImageConversion: false,
|
||||
l10n: this.l10n,
|
||||
});
|
||||
return true;
|
||||
this._thumbnails.push(thumbnail);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
return PDFThumbnailViewer;
|
||||
})();
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_cancelRendering() {
|
||||
for (let i = 0, ii = this._thumbnails.length; i < ii; i++) {
|
||||
if (this._thumbnails[i]) {
|
||||
this._thumbnails[i].cancelRendering();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array|null} labels
|
||||
*/
|
||||
setPageLabels(labels) {
|
||||
if (!this.pdfDocument) {
|
||||
return;
|
||||
}
|
||||
if (!labels) {
|
||||
this._pageLabels = null;
|
||||
} else if (!(labels instanceof Array &&
|
||||
this.pdfDocument.numPages === labels.length)) {
|
||||
this._pageLabels = null;
|
||||
console.error('PDFThumbnailViewer_setPageLabels: Invalid page labels.');
|
||||
} else {
|
||||
this._pageLabels = labels;
|
||||
}
|
||||
// Update all the `PDFThumbnailView` instances.
|
||||
for (let i = 0, ii = this._thumbnails.length; i < ii; i++) {
|
||||
let label = this._pageLabels && this._pageLabels[i];
|
||||
this._thumbnails[i].setPageLabel(label);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PDFThumbnailView} thumbView
|
||||
* @returns {PDFPage}
|
||||
* @private
|
||||
*/
|
||||
_ensurePdfPageLoaded(thumbView) {
|
||||
if (thumbView.pdfPage) {
|
||||
return Promise.resolve(thumbView.pdfPage);
|
||||
}
|
||||
let pageNumber = thumbView.id;
|
||||
if (this._pagesRequests[pageNumber]) {
|
||||
return this._pagesRequests[pageNumber];
|
||||
}
|
||||
let promise = this.pdfDocument.getPage(pageNumber).then((pdfPage) => {
|
||||
thumbView.setPdfPage(pdfPage);
|
||||
this._pagesRequests[pageNumber] = null;
|
||||
return pdfPage;
|
||||
});
|
||||
this._pagesRequests[pageNumber] = promise;
|
||||
return promise;
|
||||
}
|
||||
|
||||
forceRendering() {
|
||||
let visibleThumbs = this._getVisibleThumbs();
|
||||
let thumbView = this.renderingQueue.getHighestPriority(visibleThumbs,
|
||||
this._thumbnails,
|
||||
this.scroll.down);
|
||||
if (thumbView) {
|
||||
this._ensurePdfPageLoaded(thumbView).then(() => {
|
||||
this.renderingQueue.renderView(thumbView);
|
||||
});
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
PDFThumbnailViewer,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user