From e316d787556d2e6e8c04a314904e6e60e67a8218 Mon Sep 17 00:00:00 2001
From: Artur Adib <arturadib@gmail.com>
Date: Wed, 30 Nov 2011 14:19:07 -0500
Subject: [PATCH 1/6] Smoother thumbnail scrolling via lazy rendering
---
web/viewer.html | 4 +-
web/viewer.js | 113 ++++++++++++++++++++++++++++++++----------------
2 files changed, 78 insertions(+), 39 deletions(-)
diff --git a/web/viewer.html b/web/viewer.html
index a72503eee..ebc0bcb06 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -28,7 +28,6 @@
<script type="text/javascript">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="viewer.js"></script>
</head>
<body>
@@ -119,6 +118,7 @@
<div id="loading">Loading... 0%</div>
<div id="viewer"></div>
+
+ <script type="text/javascript" src="viewer.js"></script>
</body>
</html>
-
diff --git a/web/viewer.js b/web/viewer.js
index bfb3a4303..e945dc434 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -13,19 +13,6 @@ var kMinScale = 0.25;
var kMaxScale = 4.0;
-var Cache = function cacheCache(size) {
- var data = [];
- this.push = function cachePush(view) {
- var i = data.indexOf(view);
- if (i >= 0)
- data.splice(i);
- data.push(view);
- if (data.length > size)
- data.shift().update();
- };
-};
-
-var cache = new Cache(kCacheSize);
var currentPageNumber = 1;
var PDFView = {
@@ -294,6 +281,7 @@ var PDFView = {
outlineScrollView.setAttribute('hidden', 'true');
thumbsSwitchButton.setAttribute('data-selected', true);
outlineSwitchButton.removeAttribute('data-selected');
+ updateThumbViewArea();
break;
case 'outline':
thumbsScrollView.setAttribute('hidden', 'true');
@@ -328,6 +316,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;
}
};
@@ -510,6 +526,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;
+ this.scaleX = (canvasWidth / this.width);
+ this.scaleY = (canvasHeight / this.height);
var div = document.createElement('div');
div.id = 'thumbnailContainer' + id;
@@ -526,11 +555,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);
@@ -542,8 +568,8 @@ 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);
+ var scaleX = this.scaleX;
+ var scaleY = this.scaleY;
ctx.translate(-view.x * scaleX, -view.y * scaleY);
div.style.width = (view.width * scaleX) + 'px';
div.style.height = (view.height * scaleY) + 'px';
@@ -613,8 +639,7 @@ function updateViewarea() {
var visiblePages = PDFView.getVisiblePages();
for (var i = 0; i < visiblePages.length; i++) {
var page = visiblePages[i];
- if (PDFView.pages[page.id - 1].draw())
- cache.push(page.view);
+ PDFView.pages[page.id - 1].draw();
}
if (!visiblePages.length)
@@ -641,6 +666,35 @@ 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', function thumbViewScroll(evt) {
+ updateThumbViewArea();
+}, true);
+
+window.addEventListener('transitionend', function webViewerTransitionend(evt) {
+ updateThumbViewArea();
+}, true);
+
window.addEventListener('resize', function webViewerResize(evt) {
if (document.getElementById('pageWidthOption').selected ||
document.getElementById('pageFitOption').selected)
@@ -681,21 +735,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() {
- 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;
From a523d807534e0493147963b453c837345fa58e9e Mon Sep 17 00:00:00 2001
From: Artur Adib <arturadib@gmail.com>
Date: Wed, 30 Nov 2011 15:10:27 -0500
Subject: [PATCH 2/6] bringing Cache() back
---
web/viewer.js | 16 +++++++++++++++-
1 file changed, 15 insertions(+), 1 deletion(-)
diff --git a/web/viewer.js b/web/viewer.js
index e945dc434..dd49d75b7 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -13,6 +13,19 @@ var kMinScale = 0.25;
var kMaxScale = 4.0;
+var Cache = function cacheCache(size) {
+ var data = [];
+ this.push = function cachePush(view) {
+ var i = data.indexOf(view);
+ if (i >= 0)
+ data.splice(i);
+ data.push(view);
+ if (data.length > size)
+ data.shift().update();
+ };
+};
+
+var cache = new Cache(kCacheSize);
var currentPageNumber = 1;
var PDFView = {
@@ -639,7 +652,8 @@ function updateViewarea() {
var visiblePages = PDFView.getVisiblePages();
for (var i = 0; i < visiblePages.length; i++) {
var page = visiblePages[i];
- PDFView.pages[page.id - 1].draw();
+ if (PDFView.pages[page.id - 1].draw())
+ cache.push(page.view);
}
if (!visiblePages.length)
From 4369a1a84a8a18bbbcea4e180f8b9eb7fdb99b98 Mon Sep 17 00:00:00 2001
From: Artur Adib <arturadib@gmail.com>
Date: Wed, 30 Nov 2011 15:20:14 -0500
Subject: [PATCH 3/6] make it work in WebKit
---
web/viewer.js | 10 +++-------
1 file changed, 3 insertions(+), 7 deletions(-)
diff --git a/web/viewer.js b/web/viewer.js
index dd49d75b7..2114ad3af 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -701,13 +701,9 @@ function updateThumbViewArea() {
}, delay);
}
-sidebarScrollView.addEventListener('scroll', function thumbViewScroll(evt) {
- updateThumbViewArea();
-}, true);
-
-window.addEventListener('transitionend', function webViewerTransitionend(evt) {
- updateThumbViewArea();
-}, true);
+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 ||
From 8dc467709d834fcf1674c47eb9a84835feb76d51 Mon Sep 17 00:00:00 2001
From: Artur Adib <arturadib@gmail.com>
Date: Wed, 30 Nov 2011 16:14:22 -0500
Subject: [PATCH 4/6] bug fix
---
web/viewer.js | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
diff --git a/web/viewer.js b/web/viewer.js
index b7c654ebf..6b82be6a1 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -568,8 +568,8 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) {
maxThumbSize * pageRatio;
var canvasHeight = pageRatio <= 1 ? maxThumbSize :
maxThumbSize / pageRatio;
- this.scaleX = (canvasWidth / this.width);
- this.scaleY = (canvasHeight / this.height);
+ var scaleX = this.scaleX = (canvasWidth / this.width);
+ var scaleY = this.scaleY = (canvasHeight / this.height);
var div = document.createElement('div');
div.id = 'thumbnailContainer' + id;
@@ -598,8 +598,6 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) {
ctx.restore();
var view = page.view;
- var scaleX = this.scaleX;
- var scaleY = this.scaleY;
ctx.translate(-view.x * scaleX, -view.y * scaleY);
div.style.width = (view.width * scaleX) + 'px';
div.style.height = (view.height * scaleY) + 'px';
From 7d8240f15cb0315f5df1876197d5a5ce946d8f68 Mon Sep 17 00:00:00 2001
From: Artur Adib <arturadib@gmail.com>
Date: Tue, 6 Dec 2011 16:52:29 -0500
Subject: [PATCH 5/6] Addressing comments, linting
---
web/viewer.html | 51 ++++++++++++++++++++++++-------------------------
web/viewer.js | 4 ++--
2 files changed, 27 insertions(+), 28 deletions(-)
diff --git a/web/viewer.html b/web/viewer.html
index 5164d0b19..08b75468f 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -3,32 +3,7 @@
<head>
<title>Simple pdf.js page viewer</title>
<link rel="stylesheet" href="viewer.css"/>
-
- <script type="text/javascript" src="compatibility.js"></script>
-
- <!-- PDFJSSCRIPT_INCLUDE_BUILD -->
- <script type="text/javascript" src="../src/core.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/util.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/canvas.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/obj.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/function.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/charsets.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/cidmaps.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/colorspace.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/crypto.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/evaluator.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/fonts.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/glyphlist.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/image.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/metrics.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/parser.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/pattern.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/stream.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">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE -->
-
- </head>
+ </head>
<body>
<div id="controls">
@@ -119,6 +94,30 @@
<div id="loading">Loading... 0%</div>
<div id="viewer"></div>
+ <script type="text/javascript" src="compatibility.js"></script>
+
+ <!-- PDFJSSCRIPT_INCLUDE_BUILD -->
+ <script type="text/javascript" src="../src/core.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/util.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/canvas.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/obj.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/function.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/charsets.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/cidmaps.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/colorspace.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/crypto.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/evaluator.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/fonts.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/glyphlist.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/image.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/metrics.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/parser.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/pattern.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/stream.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">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE -->
<script type="text/javascript" src="viewer.js"></script>
+
</body>
</html>
diff --git a/web/viewer.js b/web/viewer.js
index 6b82be6a1..f4088ec40 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -557,7 +557,7 @@ 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;
@@ -728,7 +728,7 @@ function updateThumbViewArea() {
if (thumbnailTimer)
clearTimeout(thumbnailTimer);
- thumbnailTimer = setTimeout(function(){
+ thumbnailTimer = setTimeout(function() {
var visibleThumbs = PDFView.getVisibleThumbs();
for (var i = 0; i < visibleThumbs.length; i++) {
var thumb = visibleThumbs[i];
From 2040c35001591a049aea53eb6fb14289eb26fac2 Mon Sep 17 00:00:00 2001
From: Artur Adib <arturadib@gmail.com>
Date: Wed, 7 Dec 2011 08:52:13 -0500
Subject: [PATCH 6/6] Moved event binding to 'load' event
---
web/viewer.html | 52 ++++++++++++++++++++++++-------------------------
web/viewer.js | 5 +++--
2 files changed, 29 insertions(+), 28 deletions(-)
diff --git a/web/viewer.html b/web/viewer.html
index 08b75468f..be758dbb9 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -3,6 +3,32 @@
<head>
<title>Simple pdf.js page viewer</title>
<link rel="stylesheet" href="viewer.css"/>
+
+ <script type="text/javascript" src="compatibility.js"></script>
+
+ <!-- PDFJSSCRIPT_INCLUDE_BUILD -->
+ <script type="text/javascript" src="../src/core.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/util.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/canvas.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/obj.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/function.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/charsets.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/cidmaps.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/colorspace.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/crypto.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/evaluator.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/fonts.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/glyphlist.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/image.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/metrics.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/parser.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/pattern.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="../src/stream.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">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE -->
+ <script type="text/javascript" src="viewer.js"></script>
+
</head>
<body>
@@ -93,31 +119,5 @@
<div id="loading">Loading... 0%</div>
<div id="viewer"></div>
-
- <script type="text/javascript" src="compatibility.js"></script>
-
- <!-- PDFJSSCRIPT_INCLUDE_BUILD -->
- <script type="text/javascript" src="../src/core.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/util.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/canvas.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/obj.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/function.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/charsets.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/cidmaps.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/colorspace.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/crypto.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/evaluator.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/fonts.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/glyphlist.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/image.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/metrics.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/parser.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/pattern.js"></script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="../src/stream.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">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE -->
- <script type="text/javascript" src="viewer.js"></script>
-
</body>
</html>
diff --git a/web/viewer.js b/web/viewer.js
index f4088ec40..7408182d8 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -678,6 +678,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) {
@@ -717,7 +720,6 @@ window.addEventListener('scroll', function webViewerScroll(evt) {
}, true);
-var sidebarScrollView = document.getElementById('sidebarScrollView');
var thumbnailTimer;
function updateThumbViewArea() {
@@ -737,7 +739,6 @@ function updateThumbViewArea() {
}, delay);
}
-sidebarScrollView.addEventListener('scroll', updateThumbViewArea, true);
window.addEventListener('transitionend', updateThumbViewArea, true);
window.addEventListener('webkitTransitionEnd', updateThumbViewArea, true);