Convert the thumbnail viewer to ES6 syntax
This commit is contained in:
parent
63b89c1100
commit
a682d77e71
@ -18,7 +18,7 @@ import {
|
|||||||
} from './ui_utils';
|
} from './ui_utils';
|
||||||
import { PDFThumbnailView } from './pdf_thumbnail_view';
|
import { PDFThumbnailView } from './pdf_thumbnail_view';
|
||||||
|
|
||||||
var THUMBNAIL_SCROLL_MARGIN = -19;
|
const THUMBNAIL_SCROLL_MARGIN = -19;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @typedef {Object} PDFThumbnailViewerOptions
|
* @typedef {Object} PDFThumbnailViewerOptions
|
||||||
@ -30,201 +30,193 @@ var THUMBNAIL_SCROLL_MARGIN = -19;
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Simple viewer control to display thumbnails for pages.
|
* Viewer control to display thumbnails for pages in a PDF document.
|
||||||
* @class
|
*
|
||||||
* @implements {IRenderableView}
|
* @implements {IRenderableView}
|
||||||
*/
|
*/
|
||||||
var PDFThumbnailViewer = (function PDFThumbnailViewerClosure() {
|
class PDFThumbnailViewer {
|
||||||
/**
|
/**
|
||||||
* @constructs PDFThumbnailViewer
|
|
||||||
* @param {PDFThumbnailViewerOptions} options
|
* @param {PDFThumbnailViewerOptions} options
|
||||||
*/
|
*/
|
||||||
function PDFThumbnailViewer(options) {
|
constructor({ container, linkService, renderingQueue, l10n = NullL10n, }) {
|
||||||
this.container = options.container;
|
this.container = container;
|
||||||
this.renderingQueue = options.renderingQueue;
|
this.linkService = linkService;
|
||||||
this.linkService = options.linkService;
|
this.renderingQueue = renderingQueue;
|
||||||
this.l10n = options.l10n || NullL10n;
|
this.l10n = l10n;
|
||||||
|
|
||||||
this.scroll = watchScroll(this.container, this._scrollUpdated.bind(this));
|
this.scroll = watchScroll(this.container, this._scrollUpdated.bind(this));
|
||||||
this._resetView();
|
this._resetView();
|
||||||
}
|
}
|
||||||
|
|
||||||
PDFThumbnailViewer.prototype = {
|
/**
|
||||||
/**
|
* @private
|
||||||
* @private
|
*/
|
||||||
*/
|
_scrollUpdated() {
|
||||||
_scrollUpdated: function PDFThumbnailViewer_scrollUpdated() {
|
this.renderingQueue.renderHighestPriority();
|
||||||
this.renderingQueue.renderHighestPriority();
|
}
|
||||||
},
|
|
||||||
|
|
||||||
getThumbnail: function PDFThumbnailViewer_getThumbnail(index) {
|
getThumbnail(index) {
|
||||||
return this.thumbnails[index];
|
return this._thumbnails[index];
|
||||||
},
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_getVisibleThumbs: function PDFThumbnailViewer_getVisibleThumbs() {
|
_getVisibleThumbs() {
|
||||||
return getVisibleElements(this.container, this.thumbnails);
|
return getVisibleElements(this.container, this._thumbnails);
|
||||||
},
|
}
|
||||||
|
|
||||||
scrollThumbnailIntoView:
|
scrollThumbnailIntoView(page) {
|
||||||
function PDFThumbnailViewer_scrollThumbnailIntoView(page) {
|
let selected = document.querySelector('.thumbnail.selected');
|
||||||
var selected = document.querySelector('.thumbnail.selected');
|
if (selected) {
|
||||||
if (selected) {
|
selected.classList.remove('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.
|
get pagesRotation() {
|
||||||
if (numVisibleThumbs > 0) {
|
return this._pagesRotation;
|
||||||
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() {
|
set pagesRotation(rotation) {
|
||||||
return this._pagesRotation;
|
this._pagesRotation = rotation;
|
||||||
},
|
for (let i = 0, l = this._thumbnails.length; i < l; i++) {
|
||||||
|
this._thumbnails[i].update(rotation);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
set pagesRotation(rotation) {
|
cleanup() {
|
||||||
this._pagesRotation = rotation;
|
PDFThumbnailView.cleanup();
|
||||||
for (var i = 0, l = this.thumbnails.length; i < l; i++) {
|
}
|
||||||
var thumb = this.thumbnails[i];
|
|
||||||
thumb.update(rotation);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
cleanup: function PDFThumbnailViewer_cleanup() {
|
/**
|
||||||
PDFThumbnailView.cleanup();
|
* @private
|
||||||
},
|
*/
|
||||||
|
_resetView() {
|
||||||
|
this._thumbnails = [];
|
||||||
|
this._pageLabels = null;
|
||||||
|
this._pagesRotation = 0;
|
||||||
|
this._pagesRequests = [];
|
||||||
|
|
||||||
/**
|
// Remove the thumbnails from the DOM.
|
||||||
* @private
|
this.container.textContent = '';
|
||||||
*/
|
}
|
||||||
_resetView: function PDFThumbnailViewer_resetView() {
|
|
||||||
this.thumbnails = [];
|
|
||||||
this._pageLabels = null;
|
|
||||||
this._pagesRotation = 0;
|
|
||||||
this._pagesRequests = [];
|
|
||||||
|
|
||||||
// Remove the thumbnails from the DOM.
|
setDocument(pdfDocument) {
|
||||||
this.container.textContent = '';
|
if (this.pdfDocument) {
|
||||||
},
|
this._cancelRendering();
|
||||||
|
this._resetView();
|
||||||
|
}
|
||||||
|
|
||||||
setDocument: function PDFThumbnailViewer_setDocument(pdfDocument) {
|
this.pdfDocument = pdfDocument;
|
||||||
if (this.pdfDocument) {
|
if (!pdfDocument) {
|
||||||
this._cancelRendering();
|
return Promise.resolve();
|
||||||
this._resetView();
|
}
|
||||||
}
|
|
||||||
|
|
||||||
this.pdfDocument = pdfDocument;
|
return pdfDocument.getPage(1).then((firstPage) => {
|
||||||
if (!pdfDocument) {
|
let pagesCount = pdfDocument.numPages;
|
||||||
return Promise.resolve();
|
let viewport = firstPage.getViewport(1.0);
|
||||||
}
|
for (let pageNum = 1; pageNum <= pagesCount; ++pageNum) {
|
||||||
|
let thumbnail = new PDFThumbnailView({
|
||||||
return pdfDocument.getPage(1).then((firstPage) => {
|
container: this.container,
|
||||||
var pagesCount = pdfDocument.numPages;
|
id: pageNum,
|
||||||
var viewport = firstPage.getViewport(1.0);
|
defaultViewport: viewport.clone(),
|
||||||
for (let pageNum = 1; pageNum <= pagesCount; ++pageNum) {
|
linkService: this.linkService,
|
||||||
var thumbnail = new PDFThumbnailView({
|
renderingQueue: this.renderingQueue,
|
||||||
container: this.container,
|
disableCanvasToImageConversion: false,
|
||||||
id: pageNum,
|
l10n: this.l10n,
|
||||||
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 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 {
|
export {
|
||||||
PDFThumbnailViewer,
|
PDFThumbnailViewer,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user