akira
/
pdfjs-dist
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge pull request #854 from arturadib/thumb-smooth 

Smarter thumbnail scrolling
notmasteryet 14 years ago
parent
7ea770fd08 2040c35001
commit
efd82ab5bd
2 changed files with 72 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      web/viewer.html
  2. 96
      web/viewer.js

3
web/viewer.html
Unescape View File

@ -27,8 +27,8 @@ @@ -27,8 +27,8 @@
<script type="text/javascript" src="../src/worker.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
<script type="text/javascript" src="../external/jpgjs/jpg.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
<script type="text/javascript">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE -->
<script type="text/javascript" src="viewer.js"></script>
</head>
<body>
@ -139,4 +139,3 @@ @@ -139,4 +139,3 @@
<div id="viewer"></div>
</body>
</html>

96
web/viewer.js
Unescape View File

@ -359,6 +359,7 @@ var PDFView = { @@ -359,6 +359,7 @@ var PDFView = {
outlineScrollView.setAttribute('hidden', 'true');
thumbsSwitchButton.setAttribute('data-selected', true);
outlineSwitchButton.removeAttribute('data-selected');
updateThumbViewArea();
break;
case 'outline':
thumbsScrollView.setAttribute('hidden', 'true');
@ -393,6 +394,34 @@ var PDFView = { @@ -393,6 +394,34 @@ var PDFView = {
currentHeight += singlePage.height * singlePage.scale + kBottomMargin;
}
return visiblePages;
},
getVisibleThumbs: function pdfViewGetVisibleThumbs() {
var thumbs = this.thumbnails;
var kBottomMargin = 5;
var visibleThumbs = [];
var view = document.getElementById('sidebarScrollView');
var currentHeight = kBottomMargin;
var top = view.scrollTop;
for (var i = 1; i <= thumbs.length; ++i) {
var thumb = thumbs[i - 1];
var thumbHeight = thumb.height * thumb.scaleY + kBottomMargin;
if (currentHeight + thumbHeight > top)
break;
currentHeight += thumbHeight;
}
var bottom = top + view.clientHeight;
for (; i <= thumbs.length && currentHeight < bottom; ++i) {
var singleThumb = thumbs[i - 1];
visibleThumbs.push({ id: singleThumb.id, y: currentHeight,
view: singleThumb });
currentHeight += singleThumb.height * singleThumb.scaleY + kBottomMargin;
}
return visibleThumbs;
}
};
@ -591,6 +620,19 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) { @@ -591,6 +620,19 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) {
return false;
};
var view = page.view;
this.width = view.width;
this.height = view.height;
this.id = id;
var maxThumbSize = 134;
var canvasWidth = pageRatio >= 1 ? maxThumbSize :
maxThumbSize * pageRatio;
var canvasHeight = pageRatio <= 1 ? maxThumbSize :
maxThumbSize / pageRatio;
var scaleX = this.scaleX = (canvasWidth / this.width);
var scaleY = this.scaleY = (canvasHeight / this.height);
var div = document.createElement('div');
div.id = 'thumbnailContainer' + id;
div.className = 'thumbnail';
@ -605,11 +647,8 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) { @@ -605,11 +647,8 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) {
canvas.id = 'thumbnail' + id;
canvas.mozOpaque = true;
var maxThumbSize = 134;
canvas.width = pageRatio >= 1 ? maxThumbSize :
maxThumbSize * pageRatio;
canvas.height = pageRatio <= 1 ? maxThumbSize :
maxThumbSize / pageRatio;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
div.setAttribute('data-loaded', true);
div.appendChild(canvas);
@ -621,8 +660,6 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) { @@ -621,8 +660,6 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) {
ctx.restore();
var view = page.view;
var scaleX = (canvas.width / page.width);
var scaleY = (canvas.height / page.height);
ctx.translate(-view.x * scaleX, -view.y * scaleY);
div.style.width = (view.width * scaleX) + 'px';
div.style.height = (view.height * scaleY) + 'px';
@ -703,6 +740,9 @@ window.addEventListener('load', function webViewerLoad(evt) { @@ -703,6 +740,9 @@ window.addEventListener('load', function webViewerLoad(evt) {
document.getElementById('fileInput').setAttribute('hidden', 'true');
else
document.getElementById('fileInput').value = null;
var sidebarScrollView = document.getElementById('sidebarScrollView');
sidebarScrollView.addEventListener('scroll', updateThumbViewArea, true);
}, true);
window.addEventListener('unload', function webViewerUnload(evt) {
@ -741,6 +781,29 @@ window.addEventListener('scroll', function webViewerScroll(evt) { @@ -741,6 +781,29 @@ window.addEventListener('scroll', function webViewerScroll(evt) {
updateViewarea();
}, true);
var thumbnailTimer;
function updateThumbViewArea() {
// Only render thumbs after pausing scrolling for this amount of time
// (makes UI more responsive)
var delay = 50; // in ms
if (thumbnailTimer)
clearTimeout(thumbnailTimer);
thumbnailTimer = setTimeout(function() {
var visibleThumbs = PDFView.getVisibleThumbs();
for (var i = 0; i < visibleThumbs.length; i++) {
var thumb = visibleThumbs[i];
PDFView.thumbnails[thumb.id - 1].draw();
}
}, delay);
}
window.addEventListener('transitionend', updateThumbViewArea, true);
window.addEventListener('webkitTransitionEnd', updateThumbViewArea, true);
window.addEventListener('resize', function webViewerResize(evt) {
if (document.getElementById('pageWidthOption').selected ||
document.getElementById('pageFitOption').selected)
@ -781,25 +844,6 @@ window.addEventListener('change', function webViewerChange(evt) { @@ -781,25 +844,6 @@ window.addEventListener('change', function webViewerChange(evt) {
document.getElementById('download').setAttribute('hidden', 'true');
}, true);
window.addEventListener('transitionend', function webViewerTransitionend(evt) {
var pageIndex = 0;
var pagesCount = PDFView.pages.length;
var container = document.getElementById('sidebarView');
container._interval = window.setInterval(function interval() {
// skipping the thumbnails with set images
while (pageIndex < pagesCount && PDFView.thumbnails[pageIndex].hasImage)
pageIndex++;
if (pageIndex >= pagesCount) {
window.clearInterval(container._interval);
return;
}
PDFView.thumbnails[pageIndex++].draw();
}, 500);
}, true);
window.addEventListener('scalechange', function scalechange(evt) {
var customScaleOption = document.getElementById('customScaleOption');
customScaleOption.selected = false;

Write Preview
Loading…
Cancel
Save