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

Rename ThumbnailView to PDFThumbnailView and refactor it to be more class-like

Browse Source
This commit is contained in:
Jonas Jenwald 2015-01-24 16:27:31 +01:00
parent 64ba38008f
commit 7f8f404536
2 changed files with 234 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
web/pdf_thumbnail_view.js
View File

@ -21,17 +21,50 @@
var THUMBNAIL_CANVAS_BORDER_WIDTH = 1;
/**
* @constructor
* @param container
* @param id
* @param defaultViewport
* @param linkService
* @param renderingQueue
*
* @typedef {Object} PDFThumbnailViewOptions
* @property {HTMLDivElement} container - The viewer element.
* @property {number} id - The thumbnail's unique ID (normally its number).
* @property {PageViewport} defaultViewport - The page viewport.
* @property {IPDFLinkService} linkService - The navigation/linking service.
* @property {PDFRenderingQueue} renderingQueue - The rendering queue object.
*/
/**
* @class
* @implements {IRenderableView}
*/
var ThumbnailView = function thumbnailView(container, id, defaultViewport,
linkService, renderingQueue) {
var PDFThumbnailView = (function PDFThumbnailViewClosure() {
function getTempCanvas(width, height) {
var tempCanvas = PDFThumbnailView.tempImageCache;
if (!tempCanvas) {
tempCanvas = document.createElement('canvas');
PDFThumbnailView.tempImageCache = tempCanvas;
}
tempCanvas.width = width;
tempCanvas.height = height;
// Since this is a temporary canvas, we need to fill
// the canvas with a white background ourselves.
// |getPageDrawContext| uses CSS rules for this.
var ctx = tempCanvas.getContext('2d');
ctx.save();
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, width, height);
ctx.restore();
return tempCanvas;
}
/**
* @constructs PDFThumbnailView
* @param {PDFThumbnailViewOptions} options
*/
function PDFThumbnailView(options) {
var container = options.container;
var id = options.id;
var defaultViewport = options.defaultViewport;
var linkService = options.linkService;
var renderingQueue = options.renderingQueue;
var anchor = document.createElement('a');
anchor.href = linkService.getAnchorUrl('#page=' + id);
anchor.title = mozL10n.get('thumb_page_title', {page: id}, 'Page {{page}}');
@ -58,6 +91,7 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
var div = this.el = document.createElement('div');
div.id = 'thumbnailContainer' + id;
div.className = 'thumbnail';
this.div = div;
if (id === 1) {
// Highlight the thumbnail of the first page when no page number is
@ -67,10 +101,11 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
var ring = document.createElement('div');
ring.className = 'thumbnailSelectionRing';
ring.style.width = this.canvasWidth + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH +
'px';
ring.style.height = this.canvasHeight + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH +
'px';
ring.style.width =
this.canvasWidth + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH + 'px';
ring.style.height =
this.canvasHeight + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH + 'px';
this.ring = ring;
div.appendChild(ring);
anchor.appendChild(div);
@ -79,16 +114,18 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
this.hasImage = false;
this.renderingState = RenderingStates.INITIAL;
this.renderingQueue = renderingQueue;
}
this.setPdfPage = function thumbnailViewSetPdfPage(pdfPage) {
PDFThumbnailView.prototype = {
setPdfPage: function PDFThumbnailView_setPdfPage(pdfPage) {
this.pdfPage = pdfPage;
this.pdfPageRotate = pdfPage.rotate;
var totalRotation = (this.rotation + this.pdfPageRotate) % 360;
this.viewport = pdfPage.getViewport(1, totalRotation);
this.update();
};
},
this.update = function thumbnailViewUpdate(rotation) {
update: function PDFThumbnailView_update(rotation) {
if (rotation !== undefined) {
this.rotation = rotation;
}
@ -104,40 +141,40 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
this.canvasHeight = (this.canvasWidth / this.pageRatio) | 0;
this.scale = (this.canvasWidth / this.pageWidth);
div.removeAttribute('data-loaded');
ring.textContent = '';
ring.style.width = this.canvasWidth + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH +
'px';
ring.style.height = this.canvasHeight + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH +
'px';
this.div.removeAttribute('data-loaded');
this.ring.textContent = '';
this.ring.style.width =
this.canvasWidth + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH + 'px';
this.ring.style.height =
this.canvasHeight + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH + 'px';
this.hasImage = false;
this.renderingState = RenderingStates.INITIAL;
this.resume = null;
};
},
this.getPageDrawContext = function thumbnailViewGetPageDrawContext() {
getPageDrawContext: function PDFThumbnailView_getPageDrawContext() {
var canvas = document.createElement('canvas');
canvas.id = 'thumbnail' + id;
canvas.id = 'thumbnail' + this.id;
canvas.width = this.canvasWidth;
canvas.height = this.canvasHeight;
canvas.className = 'thumbnailImage';
canvas.setAttribute('aria-label', mozL10n.get('thumb_page_canvas',
{page: id}, 'Thumbnail of Page {{page}}'));
{page: this.id}, 'Thumbnail of Page {{page}}'));
div.setAttribute('data-loaded', true);
this.div.setAttribute('data-loaded', true);
ring.appendChild(canvas);
this.ring.appendChild(canvas);
return canvas.getContext('2d');
};
},
this.drawingRequired = function thumbnailViewDrawingRequired() {
drawingRequired: function PDFThumbnailView_drawingRequired() {
return !this.hasImage;
};
},
this.draw = function thumbnailViewDraw() {
draw: function PDFThumbnailView_draw() {
if (this.renderingState !== RenderingStates.INITIAL) {
console.error('Must be in new state before drawing');
}
@ -183,29 +220,9 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
);
this.hasImage = true;
return promise;
};
},
function getTempCanvas(width, height) {
var tempCanvas = ThumbnailView.tempImageCache;
if (!tempCanvas) {
tempCanvas = document.createElement('canvas');
ThumbnailView.tempImageCache = tempCanvas;
}
tempCanvas.width = width;
tempCanvas.height = height;
// Since this is a temporary canvas, we need to fill
// the canvas with a white background ourselves.
// |getPageDrawContext| uses CSS rules for this.
var ctx = tempCanvas.getContext('2d');
ctx.save();
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, width, height);
ctx.restore();
return tempCanvas;
}
this.setImage = function thumbnailViewSetImage(pageView) {
setImage: function PDFThumbnailView_setImage(pageView) {
var img = pageView.canvas;
if (this.hasImage || !img) {
return;
@ -221,7 +238,8 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
ctx.drawImage(img, 0, 0, img.width, img.height,
0, 0, canvas.width, canvas.height);
} else {
// drawImage does an awful job of rescaling the image, doing it gradually
// drawImage does an awful job of rescaling the image,
// doing it gradually.
var MAX_NUM_SCALING_STEPS = 3;
var reducedWidth = canvas.width << MAX_NUM_SCALING_STEPS;
var reducedHeight = canvas.height << MAX_NUM_SCALING_STEPS;
@ -237,7 +255,8 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
while (reducedWidth > 2 * canvas.width) {
reducedImageCtx.drawImage(reducedImage,
0, 0, reducedWidth, reducedHeight,
0, 0, reducedWidth >> 1, reducedHeight >> 1);
0, 0,
reducedWidth >> 1, reducedHeight >> 1);
reducedWidth >>= 1;
reducedHeight >>= 1;
}
@ -246,7 +265,10 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
}
this.hasImage = true;
}
};
};
ThumbnailView.tempImageCache = null;
return PDFThumbnailView;
})();
PDFThumbnailView.tempImageCache = null;

14
web/pdf_thumbnail_viewer.js
View File

@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* globals watchScroll, getVisibleElements, scrollIntoView, ThumbnailView,
/* globals watchScroll, getVisibleElements, scrollIntoView, PDFThumbnailView,
Promise */
'use strict';
@ -104,7 +104,7 @@ var PDFThumbnailViewer = (function PDFThumbnailViewerClosure() {
},
cleanup: function PDFThumbnailViewer_cleanup() {
ThumbnailView.tempImageCache = null;
PDFThumbnailView.tempImageCache = null;
},
/**
@ -135,9 +135,13 @@ var PDFThumbnailViewer = (function PDFThumbnailViewerClosure() {
var pagesCount = pdfDocument.numPages;
var viewport = firstPage.getViewport(1.0);
for (var pageNum = 1; pageNum <= pagesCount; ++pageNum) {
var thumbnail = new ThumbnailView(this.container, pageNum,
viewport.clone(), this.linkService,
this.renderingQueue);
var thumbnail = new PDFThumbnailView({
container: this.container,
id: pageNum,
defaultViewport: viewport.clone(),
linkService: this.linkService,
renderingQueue: this.renderingQueue
});
this.thumbnails.push(thumbnail);
}
}.bind(this));