Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Smarter thumbnail scrolling #854

Merged
merged 7 commits into from
Dec 9, 2011
Merged

Smarter thumbnail scrolling #854

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e316d78
Smoother thumbnail scrolling via lazy rendering
arturadib Nov 30, 2011
a523d80
bringing Cache() back
arturadib Nov 30, 2011
4369a1a
make it work in WebKit
arturadib Nov 30, 2011
5aad7cb
Merge branch 'master' of git://github.com/mozilla/pdf.js into thumb-s…
arturadib Nov 30, 2011
8dc4677
bug fix
arturadib Nov 30, 2011
7d8240f
Addressing comments, linting
arturadib Dec 6, 2011
2040c35
Moved event binding to 'load' event
arturadib Dec 7, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions web/viewer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@
<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>
Expand Down Expand Up @@ -119,6 +118,7 @@

<div id="loading">Loading... 0%</div>
<div id="viewer"></div>

<script type="text/javascript" src="viewer.js"></script>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it's a good practice to move the "global" page scripts here.

You can move the initialization sidebarScrollView.addEventListener('scroll', updateThumbViewArea, true); into some event when page loaded, e.g. https://developer.mozilla.org/en/Gecko-Specific_DOM_Events#DOMContentLoaded

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there is also https://github.com/mozilla/pdf.js/blob/master/web/viewer.js#L630

or

or you can provide the comment why the script load moved here, to avoid other developer moving it back in the header

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it's a good practice to move the "global" page scripts here.

AFAIK there are more pros than cons in keeping scripts at the bottom (progressive rendering, parallel downloads, etc http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/). In our case the additional advantage is that we don't have to bind to DOC-ready or -load.

So I moved the whole thing down.

</body>
</html>

95 changes: 69 additions & 26 deletions web/viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,6 +305,7 @@ var PDFView = {
outlineScrollView.setAttribute('hidden', 'true');
thumbsSwitchButton.setAttribute('data-selected', true);
outlineSwitchButton.removeAttribute('data-selected');
updateThumbViewArea();
break;
case 'outline':
thumbsScrollView.setAttribute('hidden', 'true');
Expand Down Expand Up @@ -339,6 +340,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;
}
};

Expand Down Expand Up @@ -528,6 +557,19 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) {
PDFView.page = id;
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;
Expand All @@ -543,11 +585,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);
Expand All @@ -559,8 +598,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';
Expand Down Expand Up @@ -679,6 +716,31 @@ window.addEventListener('scroll', function webViewerScroll(evt) {
updateViewarea();
}, true);


var sidebarScrollView = document.getElementById('sidebarScrollView');
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);
}

sidebarScrollView.addEventListener('scroll', updateThumbViewArea, true);
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)
Expand Down Expand Up @@ -719,25 +781,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;
Expand Down