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

Merge pull request #854 from arturadib/thumb-smooth

Browse Source 
Smarter thumbnail scrolling
This commit is contained in:
notmasteryet 2011-12-08 16:55:46 -08:00
commit efd82ab5bd
2 changed files with 72 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/viewer.html
View File

@ -27,9 +27,9 @@
<script type="text/javascript" src="../src/worker.js"></script> <!-- PDFJSSCRIPT_REMOVE --> <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" 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">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE -->
<script type="text/javascript" src="viewer.js"></script> <script type="text/javascript" src="viewer.js"></script>
</head>
</head>
<body> <body>
<div id="controls"> <div id="controls">
@ -139,4 +139,3 @@
<div id="viewer"></div> <div id="viewer"></div>
</body> </body>
</html> </html>

96
web/viewer.js
View File

@ -359,6 +359,7 @@ var PDFView = {
outlineScrollView.setAttribute('hidden', 'true'); outlineScrollView.setAttribute('hidden', 'true');
thumbsSwitchButton.setAttribute('data-selected', true); thumbsSwitchButton.setAttribute('data-selected', true);
outlineSwitchButton.removeAttribute('data-selected'); outlineSwitchButton.removeAttribute('data-selected');
updateThumbViewArea();
break; break;
case 'outline': case 'outline':
thumbsScrollView.setAttribute('hidden', 'true'); thumbsScrollView.setAttribute('hidden', 'true');
@ -393,6 +394,34 @@ var PDFView = {
currentHeight += singlePage.height * singlePage.scale + kBottomMargin; currentHeight += singlePage.height * singlePage.scale + kBottomMargin;
} }
return visiblePages; 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) {
return false; 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'); var div = document.createElement('div');
div.id = 'thumbnailContainer' + id; div.id = 'thumbnailContainer' + id;
div.className = 'thumbnail'; div.className = 'thumbnail';
@ -605,11 +647,8 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) {
canvas.id = 'thumbnail' + id; canvas.id = 'thumbnail' + id;
canvas.mozOpaque = true; canvas.mozOpaque = true;
var maxThumbSize = 134; canvas.width = canvasWidth;
canvas.width = pageRatio >= 1 ? maxThumbSize : canvas.height = canvasHeight;
maxThumbSize * pageRatio;
canvas.height = pageRatio <= 1 ? maxThumbSize :
maxThumbSize / pageRatio;
div.setAttribute('data-loaded', true); div.setAttribute('data-loaded', true);
div.appendChild(canvas); div.appendChild(canvas);
@ -621,8 +660,6 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) {
ctx.restore(); ctx.restore();
var view = page.view; var view = page.view;
var scaleX = (canvas.width / page.width);
var scaleY = (canvas.height / page.height);
ctx.translate(-view.x * scaleX, -view.y * scaleY); ctx.translate(-view.x * scaleX, -view.y * scaleY);
div.style.width = (view.width * scaleX) + 'px'; div.style.width = (view.width * scaleX) + 'px';
div.style.height = (view.height * scaleY) + 'px'; div.style.height = (view.height * scaleY) + 'px';
@ -703,6 +740,9 @@ window.addEventListener('load', function webViewerLoad(evt) {
document.getElementById('fileInput').setAttribute('hidden', 'true'); document.getElementById('fileInput').setAttribute('hidden', 'true');
else else
document.getElementById('fileInput').value = null; document.getElementById('fileInput').value = null;
var sidebarScrollView = document.getElementById('sidebarScrollView');
sidebarScrollView.addEventListener('scroll', updateThumbViewArea, true);
}, true); }, true);
window.addEventListener('unload', function webViewerUnload(evt) { window.addEventListener('unload', function webViewerUnload(evt) {
@ -741,6 +781,29 @@ window.addEventListener('scroll', function webViewerScroll(evt) {
updateViewarea(); updateViewarea();
}, true); }, 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) { window.addEventListener('resize', function webViewerResize(evt) {
if (document.getElementById('pageWidthOption').selected || if (document.getElementById('pageWidthOption').selected ||
document.getElementById('pageFitOption').selected) document.getElementById('pageFitOption').selected)
@ -781,25 +844,6 @@ window.addEventListener('change', function webViewerChange(evt) {
document.getElementById('download').setAttribute('hidden', 'true'); document.getElementById('download').setAttribute('hidden', 'true');
}, 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) { window.addEventListener('scalechange', function scalechange(evt) {
var customScaleOption = document.getElementById('customScaleOption'); var customScaleOption = document.getElementById('customScaleOption');
customScaleOption.selected = false; customScaleOption.selected = false;