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

Merge pull request #1537 from mozilla/new-ui

Browse Source 
New UI - work in progress
This commit is contained in:
Yury Delendik 2012-04-30 14:59:53 -07:00
commit bd440ef564
16 changed files with 917 additions and 513 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/debugger.js
View File

@ -423,8 +423,9 @@ var PDFBug = (function PDFBugClosure() {
panels.setAttribute('class', 'panels'); panels.setAttribute('class', 'panels');
ui.appendChild(panels); ui.appendChild(panels);
document.body.appendChild(ui); var container = document.getElementById('viewerContainer');
document.body.style.paddingRight = panelWidth + 'px'; container.appendChild(ui);
container.style.right = panelWidth + 'px';
// Initialize all the debugging tools. // Initialize all the debugging tools.
var tools = this.tools; var tools = this.tools;

BIN
web/images/texture.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
web/images/toolbarButton-bookmark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 B

BIN
web/images/toolbarButton-download.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 512 B

BIN
web/images/toolbarButton-menuArrows.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 B

BIN
web/images/toolbarButton-pageDown.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 353 B

BIN
web/images/toolbarButton-pageUp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 344 B

BIN
web/images/toolbarButton-print.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 474 B

BIN
web/images/toolbarButton-sidebarToggle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 349 B

BIN
web/images/toolbarButton-viewOutline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 300 B

BIN
web/images/toolbarButton-viewThumbnail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 211 B

BIN
web/images/toolbarButton-zoomIn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 B

BIN
web/images/toolbarButton-zoomOut.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 143 B

934
web/viewer.css
View File

File diff suppressed because it is too large Load Diff

271
web/viewer.html
View File

@ -1,153 +1,144 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Simple pdf.js page viewer</title> <title>PDF.js viewer</title>
<!-- PDFJSSCRIPT_INCLUDE_FIREFOX_EXTENSION --> <!-- PDFJSSCRIPT_INCLUDE_FIREFOX_EXTENSION -->
<link rel="stylesheet" href="viewer.css"/> <link rel="stylesheet" href="viewer.css"/>
<script type="text/javascript" src="compatibility.js"></script> <!-- PDFJSSCRIPT_REMOVE_FIREFOX_EXTENSION --> <script type="text/javascript" src="compatibility.js"></script> <!-- PDFJSSCRIPT_REMOVE_FIREFOX_EXTENSION -->
<!-- PDFJSSCRIPT_INCLUDE_BUILD --> <!-- PDFJSSCRIPT_INCLUDE_BUILD -->
<script type="text/javascript" src="../src/core.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/core.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/util.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/util.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/api.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/api.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/metadata.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/metadata.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/canvas.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/canvas.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/obj.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/obj.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/function.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/function.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/charsets.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/charsets.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/cidmaps.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/cidmaps.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/colorspace.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/colorspace.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/crypto.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/crypto.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/evaluator.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/evaluator.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/fonts.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/fonts.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/glyphlist.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/glyphlist.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/image.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/image.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/metrics.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/metrics.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/parser.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/parser.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/pattern.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/pattern.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/stream.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/stream.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/worker.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/worker.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../external/jpgjs/jpg.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../external/jpgjs/jpg.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/jpx.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/jpx.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="../src/bidi.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript" src="../src/bidi.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE_CORE --> <script type="text/javascript">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
<script type="text/javascript" src="debugger.js"></script> <script type="text/javascript" src="debugger.js"></script>
<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="outerContainer">
<button id="previous" onclick="PDFView.page--;" oncontextmenu="return false;">
<img src="images/go-up.svg" align="top" height="16"/>
Previous
</button>
<button id="next" onclick="PDFView.page++;" oncontextmenu="return false;"> <div id="sidebarContainer">
<img src="images/go-down.svg" align="top" height="16"/> <div id="toolbarSidebar">
Next <div class="splitToolbarButton toggled">
</button> <button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')"></button>
<button id="viewOutline" class="toolbarButton" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')"></button>
<div class="separator"></div> </div>
<input type="number" id="pageNumber" onchange="PDFView.page = this.value;" value="1" size="4" min="1" />
<span>/</span>
<span id="numPages">--</span>
<div class="separator"></div>
<button id="zoomOut" title="Zoom Out" onclick="PDFView.zoomOut();" oncontextmenu="return false;">
<img src="images/zoom-out.svg" align="top" height="16"/>
</button>
<button id="zoomIn" title="Zoom In" onclick="PDFView.zoomIn();" oncontextmenu="return false;">
<img src="images/zoom-in.svg" align="top" height="16"/>
</button>
<div class="separator"></div>
<select id="scaleSelect" onchange="PDFView.parseScale(this.value);" oncontextmenu="return false;">
<option id="customScaleOption" value="custom"></option>
<option value="0.5">50%</option>
<option value="0.75">75%</option>
<option value="1">100%</option>
<option value="1.25">125%</option>
<option value="1.5">150%</option>
<option value="2">200%</option>
<option id="pageWidthOption" value="page-width">Page Width</option>
<option id="pageFitOption" value="page-fit">Page Fit</option>
<option id="pageAutoOption" value="auto" selected="selected">Auto</option>
</select>
<div class="separator"></div>
<button id="print" onclick="window.print();" oncontextmenu="return false;">
<img src="images/document-print.svg" align="top" height="16"/>
Print
</button>
<button id="download" title="Download" onclick="PDFView.download();" oncontextmenu="return false;">
<img src="images/download.svg" align="top" height="16"/>
Download
</button>
<div class="separator"></div>
<input id="fileInput" type="file" oncontextmenu="return false;"/>
<div id="fileInputSeperator" class="separator"></div>
<a href="#" id="viewBookmark" title="Bookmark (or copy) current location">
<img src="images/bookmark.svg" alt="Bookmark" align="top" height="16"/>
</a>
</div>
<div id="errorWrapper" hidden='true'>
<div id="errorMessageLeft">
<span id="errorMessage"></span>
<button id="errorShowMore" onclick="" oncontextmenu="return false;">
More Information
</button>
<button id="errorShowLess" onclick="" oncontextmenu="return false;" hidden='true'>
Less Information
</button>
</div>
<div id="errorMessageRight">
<button id="errorClose" oncontextmenu="return false;">
Close
</button>
</div>
<div class="clearBoth"></div>
<textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
</div>
<div id="sidebar">
<div id="sidebarBox">
<div id="pinIcon" onClick="PDFView.pinSidebar()"></div>
<div id="sidebarScrollView">
<div id="sidebarView"></div>
</div> </div>
<div id="outlineScrollView" hidden='true'> <div id="sidebarContent">
<div id="outlineView"></div> <div id="thumbnailView">
</div>
<div id="outlineView" class="hidden">
</div>
</div> </div>
<div id="sidebarControls"> </div> <!-- sidebarContainer -->
<button id="thumbsSwitch" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')" data-selected>
<img src="images/nav-thumbs.svg" align="top" height="16" alt="Thumbs" />
</button>
<button id="outlineSwitch" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" disabled>
<img src="images/nav-outline.svg" align="top" height="16" alt="Document Outline" />
</button>
</div>
</div>
</div>
<div id="loadingBox"> <div id="mainContainer">
<div id="loading">Loading... 0%</div> <div class="toolbar">
<div id="loadingBar"><div class="progress"></div></div> <div id="toolbarContainer">
</div>
<div id="viewer"></div> <div id="toolbarViewer">
<div id="toolbarViewerLeft">
<button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar"></button>
<div class="toolbarButtonSpacer"></div>
<div class="splitToolbarButton">
<button class="toolbarButton pageUp" title="Previous Page" onclick="PDFView.page--" id="previous"></button>
<div class="splitToolbarButtonSeparator"></div>
<button class="toolbarButton pageDown" title="Next Page" onclick="PDFView.page++" id="next"></button>
</div>
<div class="toolbarLabel">Page: </div>
<input type="number" id="pageNumber" class="toolbarField pageNumber" onchange="PDFView.page = this.value;" value="1" size="4" min="1">
</input>
<span id="numPages" class="toolbarLabel"></span>
</div>
<div id="toolbarViewerRight">
<input id="fileInput" class="fileInput" type="file" oncontextmenu="return false;"/>
<!-- <button id="print" class="toolbarButton print" title="Print" onclick="window.print()"></button> -->
<button id="download" class="toolbarButton download" title="Download" onclick="PDFView.download();"></button>
<!-- <div class="toolbarButtonSpacer"></div> -->
<a href="#" id="viewBookmark" class="toolbarButton bookmark" title="Bookmark (or copy) current location">
</a>
</div>
<div class="outerCenter">
<div class="innerCenter" id="toolbarViewerMiddle">
<div class="splitToolbarButton">
<button class="toolbarButton zoomOut" title="Zoom Out" onclick="PDFView.zoomOut();"></button>
<div class="splitToolbarButtonSeparator"></div>
<button class="toolbarButton zoomIn" title="Zoom In" onclick="PDFView.zoomIn();"></button>
</div>
<span class="dropdownToolbarButton">
<select id="scaleSelect" onchange="PDFView.parseScale(this.value);" oncontextmenu="return false;">
<option id="pageAutoOption" value="auto" selected="selected">Automatic Zoom</option>
<option value="page-actual">Actual Size</option>
<option id="pageFitOption" value="page-fit">Fit Page</option>
<option id="pageWidthOption" value="page-width">Full Width</option>
<option id="customScaleOption" value="custom"></option>
<option value="0.5">50%</option>
<option value="0.75">75%</option>
<option value="1">100%</option>
<option value="1.25">125%</option>
<option value="1.5">150%</option>
<option value="2">200%</option>
</select>
</span>
</div>
</div>
</div>
</div>
</div>
<div id="viewerContainer">
<div id="viewer"></div>
</div>
<div id="loadingBox">
<div id="loading">Loading... 0%</div>
<div id="loadingBar"><div class="progress"></div></div>
</div>
<div id="errorWrapper" hidden='true'>
<div id="errorMessageLeft">
<span id="errorMessage"></span>
<button id="errorShowMore" onclick="" oncontextmenu="return false;">
More Information
</button>
<button id="errorShowLess" onclick="" oncontextmenu="return false;" hidden='true'>
Less Information
</button>
</div>
<div id="errorMessageRight">
<button id="errorClose" oncontextmenu="return false;">
Close
</button>
</div>
<div class="clearBoth"></div>
<textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
</div>
</div> <!-- mainContainer -->
</div> <!-- outerContainer -->
</body> </body>
</html> </html>

220
web/viewer.js
View File

@ -62,6 +62,9 @@ var ProgressBar = (function ProgressBarClosure() {
updateBar: function ProgressBar_updateBar() { updateBar: function ProgressBar_updateBar() {
var progressSize = this.width * this._percent / 100; var progressSize = this.width * this._percent / 100;
if (this._percent > 95)
this.div.classList.add('full');
this.div.style.width = progressSize + this.units; this.div.style.width = progressSize + this.units;
}, },
@ -214,6 +217,13 @@ var PDFView = {
currentScale: kUnknownScale, currentScale: kUnknownScale,
currentScaleValue: null, currentScaleValue: null,
initialBookmark: document.location.hash.substring(1), initialBookmark: document.location.hash.substring(1),
container: null,
initialized: false,
// called once when the document is loaded
initialize: function pdfViewInitialize() {
this.container = document.getElementById('viewerContainer');
this.initialized = true;
},
setScale: function pdfViewSetScale(val, resetAutoSettings) { setScale: function pdfViewSetScale(val, resetAutoSettings) {
if (val == this.currentScale) if (val == this.currentScale)
@ -245,32 +255,43 @@ var PDFView = {
return; return;
} }
var container = this.container;
var currentPage = this.pages[this.page - 1]; var currentPage = this.pages[this.page - 1];
var pageWidthScale = (window.innerWidth - kScrollbarPadding) / var pageWidthScale = (container.clientWidth - kScrollbarPadding) /
currentPage.width * currentPage.scale / kCssUnits; currentPage.width * currentPage.scale / kCssUnits;
var pageHeightScale = (window.innerHeight - kScrollbarPadding) / var pageHeightScale = (container.clientHeight - kScrollbarPadding) /
currentPage.height * currentPage.scale / kCssUnits; currentPage.height * currentPage.scale / kCssUnits;
if ('page-width' == value) switch (value) {
this.setScale(pageWidthScale, resetAutoSettings); case 'page-actual':
if ('page-height' == value) this.setScale(1, resetAutoSettings);
this.setScale(pageHeightScale, resetAutoSettings); break;
if ('page-fit' == value) { case 'page-width':
this.setScale( this.setScale(pageWidthScale, resetAutoSettings);
Math.min(pageWidthScale, pageHeightScale), resetAutoSettings); break;
case 'page-height':
this.setScale(pageHeightScale, resetAutoSettings);
break;
case 'page-fit':
this.setScale(
Math.min(pageWidthScale, pageHeightScale), resetAutoSettings);
break;
case 'auto':
this.setScale(Math.min(1.0, pageWidthScale), resetAutoSettings);
break;
} }
if ('auto' == value)
this.setScale(Math.min(1.0, pageWidthScale), resetAutoSettings);
selectScaleOption(value); selectScaleOption(value);
}, },
zoomIn: function pdfViewZoomIn() { zoomIn: function pdfViewZoomIn() {
var newScale = Math.min(kMaxScale, this.currentScale * kDefaultScaleDelta); var newScale = (this.currentScale * kDefaultScaleDelta).toFixed(2);
newScale = Math.min(kMaxScale, newScale);
this.parseScale(newScale, true); this.parseScale(newScale, true);
}, },
zoomOut: function pdfViewZoomOut() { zoomOut: function pdfViewZoomOut() {
var newScale = Math.max(kMinScale, this.currentScale / kDefaultScaleDelta); var newScale = (this.currentScale / kDefaultScaleDelta).toFixed(2);
newScale = Math.max(kMinScale, newScale);
this.parseScale(newScale, true); this.parseScale(newScale, true);
}, },
@ -476,14 +497,14 @@ var PDFView = {
var loadingBox = document.getElementById('loadingBox'); var loadingBox = document.getElementById('loadingBox');
loadingBox.setAttribute('hidden', 'true'); loadingBox.setAttribute('hidden', 'true');
var sidebar = document.getElementById('sidebarView'); var thumbsView = document.getElementById('thumbnailView');
sidebar.parentNode.scrollTop = 0; thumbsView.parentNode.scrollTop = 0;
while (sidebar.hasChildNodes()) while (thumbsView.hasChildNodes())
sidebar.removeChild(sidebar.lastChild); thumbsView.removeChild(thumbsView.lastChild);
if ('_loadingInterval' in sidebar) if ('_loadingInterval' in thumbsView)
clearInterval(sidebar._loadingInterval); clearInterval(thumbsView._loadingInterval);
var container = document.getElementById('viewer'); var container = document.getElementById('viewer');
while (container.hasChildNodes()) while (container.hasChildNodes())
@ -492,7 +513,7 @@ var PDFView = {
var pagesCount = pdfDocument.numPages; var pagesCount = pdfDocument.numPages;
var id = pdfDocument.fingerprint; var id = pdfDocument.fingerprint;
var storedHash = null; var storedHash = null;
document.getElementById('numPages').textContent = pagesCount; document.getElementById('numPages').textContent = 'of ' + pagesCount;
document.getElementById('pageNumber').max = pagesCount; document.getElementById('pageNumber').max = pagesCount;
PDFView.documentFingerprint = id; PDFView.documentFingerprint = id;
var store = PDFView.store = new Settings(id); var store = PDFView.store = new Settings(id);
@ -518,7 +539,7 @@ var PDFView = {
var page = promisedPages[i - 1]; var page = promisedPages[i - 1];
var pageView = new PageView(container, page, i, scale, var pageView = new PageView(container, page, i, scale,
page.stats, self.navigateTo.bind(self)); page.stats, self.navigateTo.bind(self));
var thumbnailView = new ThumbnailView(sidebar, page, i); var thumbnailView = new ThumbnailView(thumbsView, page, i);
bindOnAfterDraw(pageView, thumbnailView); bindOnAfterDraw(pageView, thumbnailView);
pages.push(pageView); pages.push(pageView);
@ -538,13 +559,7 @@ var PDFView = {
// outline and initial view depends on destinations and pagesRefMap // outline and initial view depends on destinations and pagesRefMap
PDFJS.Promise.all([pagesPromise, destinationsPromise]).then(function() { PDFJS.Promise.all([pagesPromise, destinationsPromise]).then(function() {
pdfDocument.getOutline().then(function(outline) { pdfDocument.getOutline().then(function(outline) {
if (!outline)
return;
self.outline = new DocumentOutlineView(outline); self.outline = new DocumentOutlineView(outline);
var outlineSwitchButton = document.getElementById('outlineSwitch');
outlineSwitchButton.removeAttribute('disabled');
self.switchSidebarView('outline');
}); });
self.setInitialView(storedHash, scale); self.setInitialView(storedHash, scale);
@ -632,64 +647,67 @@ var PDFView = {
}, },
switchSidebarView: function pdfViewSwitchSidebarView(view) { switchSidebarView: function pdfViewSwitchSidebarView(view) {
var thumbsScrollView = document.getElementById('sidebarScrollView'); var thumbsView = document.getElementById('thumbnailView');
var outlineScrollView = document.getElementById('outlineScrollView'); var outlineView = document.getElementById('outlineView');
var thumbsSwitchButton = document.getElementById('thumbsSwitch'); var thumbsSwitchButton = document.getElementById('viewThumbnail');
var outlineSwitchButton = document.getElementById('outlineSwitch'); var outlineSwitchButton = document.getElementById('viewOutline');
if (outlineSwitchButton.getAttribute('disabled'))
return;
thumbsView.classList.toggle('hidden');
outlineView.classList.toggle('hidden');
document.getElementById('viewThumbnail').classList.toggle('toggled');
document.getElementById('viewOutline').classList.toggle('toggled');
switch (view) { switch (view) {
case 'thumbs': case 'thumbs':
thumbsScrollView.removeAttribute('hidden');
outlineScrollView.setAttribute('hidden', 'true');
thumbsSwitchButton.setAttribute('data-selected', true);
outlineSwitchButton.removeAttribute('data-selected');
updateThumbViewArea(); updateThumbViewArea();
break; break;
case 'outline': case 'outline':
thumbsScrollView.setAttribute('hidden', 'true');
outlineScrollView.removeAttribute('hidden');
thumbsSwitchButton.removeAttribute('data-selected');
outlineSwitchButton.setAttribute('data-selected', true);
break; break;
} }
}, },
pinSidebar: function pdfViewPinSidebar() {
document.getElementById('sidebar').classList.toggle('pinned');
},
getVisiblePages: function pdfViewGetVisiblePages() { getVisiblePages: function pdfViewGetVisiblePages() {
var pages = this.pages; var pages = this.pages;
var kBottomMargin = 10; var kBottomMargin = 10;
var kTopPadding = 30;
var visiblePages = []; var visiblePages = [];
var currentHeight = kBottomMargin; var currentHeight = kTopPadding + kBottomMargin;
var windowTop = window.pageYOffset; var container = this.container;
// Add 1px to the scrolltop to give a little wiggle room if the math is off,
// this won't be needed if we calc current page number based off the middle
// of the screen instead of the top.
var containerTop = container.scrollTop + 1;
for (var i = 1; i <= pages.length; ++i) { for (var i = 1; i <= pages.length; ++i) {
var page = pages[i - 1]; var page = pages[i - 1];
var pageHeight = page.height + kBottomMargin; var pageHeight = page.height + kBottomMargin;
if (currentHeight + pageHeight > windowTop) if (currentHeight + pageHeight > containerTop)
break; break;
currentHeight += pageHeight; currentHeight += pageHeight;
} }
var windowBottom = window.pageYOffset + window.innerHeight; var containerBottom = containerTop + container.clientHeight;
for (; i <= pages.length && currentHeight < windowBottom; ++i) { for (; i <= pages.length && currentHeight < containerBottom; ++i) {
var singlePage = pages[i - 1]; var singlePage = pages[i - 1];
visiblePages.push({ id: singlePage.id, y: currentHeight, visiblePages.push({ id: singlePage.id, y: currentHeight,
view: singlePage }); view: singlePage });
currentHeight += singlePage.height * singlePage.scale + kBottomMargin; currentHeight += page.height + kBottomMargin;
} }
return visiblePages; return visiblePages;
}, },
getVisibleThumbs: function pdfViewGetVisibleThumbs() { getVisibleThumbs: function pdfViewGetVisibleThumbs() {
var thumbs = this.thumbnails; var thumbs = this.thumbnails;
var kBottomMargin = 5; var kBottomMargin = 15;
var visibleThumbs = []; var visibleThumbs = [];
var view = document.getElementById('sidebarScrollView'); var view = document.getElementById('thumbnailView');
var currentHeight = kBottomMargin; var currentHeight = kBottomMargin;
var top = view.scrollTop; var top = view.scrollTop;
for (var i = 1; i <= thumbs.length; ++i) { for (var i = 1; i <= thumbs.length; ++i) {
var thumb = thumbs[i - 1]; var thumb = thumbs[i - 1];
@ -906,9 +924,9 @@ var PageView = function pageView(container, pdfPage, id, scale,
y = dest[3]; y = dest[3];
width = dest[4] - x; width = dest[4] - x;
height = dest[5] - y; height = dest[5] - y;
widthScale = (window.innerWidth - kScrollbarPadding) / widthScale = (this.container.clientWidth - kScrollbarPadding) /
width / kCssUnits; width / kCssUnits;
heightScale = (window.innerHeight - kScrollbarPadding) / heightScale = (this.container.clientHeight - kScrollbarPadding) /
height / kCssUnits; height / kCssUnits;
scale = Math.min(widthScale, heightScale); scale = Math.min(widthScale, heightScale);
break; break;
@ -916,16 +934,15 @@ var PageView = function pageView(container, pdfPage, id, scale,
return; return;
} }
var boundingRect = [
this.viewport.convertToViewportPoint(x, y),
this.viewport.convertToViewportPoint(x + width, y + height)
];
if (scale && scale !== PDFView.currentScale) if (scale && scale !== PDFView.currentScale)
PDFView.parseScale(scale, true); PDFView.parseScale(scale, true);
else if (PDFView.currentScale === kUnknownScale) else if (PDFView.currentScale === kUnknownScale)
PDFView.parseScale(kDefaultScale, true); PDFView.parseScale(kDefaultScale, true);
var boundingRect = [
this.viewport.convertToViewportPoint(x, y),
this.viewport.convertToViewportPoint(x + width, y + height)
];
setTimeout(function pageViewScrollIntoViewRelayout() { setTimeout(function pageViewScrollIntoViewRelayout() {
// letting page to re-layout before scrolling // letting page to re-layout before scrolling
var scale = PDFView.currentScale; var scale = PDFView.currentScale;
@ -1038,16 +1055,13 @@ var ThumbnailView = function thumbnailView(container, pdfPage, id) {
}; };
var viewport = pdfPage.getViewport(1); var viewport = pdfPage.getViewport(1);
var pageWidth = viewport.width; var pageWidth = this.width = viewport.width;
var pageHeight = viewport.height; var pageHeight = this.height = viewport.height;
var pageRatio = pageWidth / pageHeight; var pageRatio = pageWidth / pageHeight;
this.id = id; this.id = id;
var maxThumbSize = 134; var canvasWidth = 98;
var canvasWidth = this.width = pageRatio >= 1 ? maxThumbSize : var canvasHeight = canvasWidth / this.width * this.height;
maxThumbSize * pageRatio;
var canvasHeight = this.height = pageRatio <= 1 ? maxThumbSize :
maxThumbSize / pageRatio;
var scaleX = this.scaleX = (canvasWidth / pageWidth); var scaleX = this.scaleX = (canvasWidth / pageWidth);
var scaleY = this.scaleY = (canvasHeight / pageHeight); var scaleY = this.scaleY = (canvasHeight / pageHeight);
@ -1067,9 +1081,14 @@ var ThumbnailView = function thumbnailView(container, pdfPage, id) {
canvas.width = canvasWidth; canvas.width = canvasWidth;
canvas.height = canvasHeight; canvas.height = canvasHeight;
canvas.className = 'thumbnailImage';
div.setAttribute('data-loaded', true); div.setAttribute('data-loaded', true);
div.appendChild(canvas);
var ring = document.createElement('div');
ring.className = 'thumbnailSelectionRing';
ring.appendChild(canvas);
div.appendChild(ring);
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
ctx.save(); ctx.save();
@ -1120,6 +1139,8 @@ var ThumbnailView = function thumbnailView(container, pdfPage, id) {
var DocumentOutlineView = function documentOutlineView(outline) { var DocumentOutlineView = function documentOutlineView(outline) {
var outlineView = document.getElementById('outlineView'); var outlineView = document.getElementById('outlineView');
while (outlineView.firstChild)
outlineView.removeChild(outlineView.firstChild);
function bindItemLink(domObj, item) { function bindItemLink(domObj, item) {
domObj.href = PDFView.getDestinationHash(item.dest); domObj.href = PDFView.getDestinationHash(item.dest);
@ -1129,6 +1150,14 @@ var DocumentOutlineView = function documentOutlineView(outline) {
}; };
} }
if (!outline) {
var noOutline = document.createElement('div');
noOutline.classList.add('noOutline');
noOutline.textContent = 'No Outline Available';
outlineView.appendChild(noOutline);
return;
}
var queue = [{parent: outlineView, items: outline}]; var queue = [{parent: outlineView, items: outline}];
while (queue.length > 0) { while (queue.length > 0) {
var levelData = queue.shift(); var levelData = queue.shift();
@ -1288,6 +1317,7 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) {
}; };
window.addEventListener('load', function webViewerLoad(evt) { window.addEventListener('load', function webViewerLoad(evt) {
PDFView.initialize();
var params = PDFView.parseQueryString(document.location.search.substring(1)); var params = PDFView.parseQueryString(document.location.search.substring(1));
var file = PDFJS.isFirefoxExtension ? var file = PDFJS.isFirefoxExtension ?
@ -1296,8 +1326,6 @@ window.addEventListener('load', function webViewerLoad(evt) {
if (PDFJS.isFirefoxExtension || !window.File || !window.FileReader || if (PDFJS.isFirefoxExtension || !window.File || !window.FileReader ||
!window.FileList || !window.Blob) { !window.FileList || !window.Blob) {
document.getElementById('fileInput').setAttribute('hidden', 'true'); document.getElementById('fileInput').setAttribute('hidden', 'true');
document.getElementById('fileInputSeperator')
.setAttribute('hidden', 'true');
} else { } else {
document.getElementById('fileInput').value = null; document.getElementById('fileInput').value = null;
} }
@ -1321,8 +1349,25 @@ window.addEventListener('load', function webViewerLoad(evt) {
PDFBug.init(); PDFBug.init();
} }
var sidebarScrollView = document.getElementById('sidebarScrollView'); var thumbsView = document.getElementById('thumbnailView');
sidebarScrollView.addEventListener('scroll', updateThumbViewArea, true); thumbsView.addEventListener('scroll', updateThumbViewArea, true);
var mainContainer = document.getElementById('mainContainer');
mainContainer.addEventListener('transitionend', function(e) {
if (e.target == mainContainer) {
var event = document.createEvent('UIEvents');
event.initUIEvent('resize', false, false, window, 0);
window.dispatchEvent(event);
}
}, true);
document.getElementById('sidebarToggle').addEventListener('click',
function() {
this.classList.toggle('toggled');
document.getElementById('outerContainer').classList.toggle('sidebarOpen');
updateThumbViewArea();
});
PDFView.open(file, 0); PDFView.open(file, 0);
}, true); }, true);
@ -1350,6 +1395,8 @@ function preDraw() {
} }
function updateViewarea() { function updateViewarea() {
if (!PDFView.initialized)
return;
var visiblePages = PDFView.getVisiblePages(); var visiblePages = PDFView.getVisiblePages();
var pageToDraw; var pageToDraw;
for (var i = 0; i < visiblePages.length; i++) { for (var i = 0; i < visiblePages.length; i++) {
@ -1380,13 +1427,12 @@ function updateViewarea() {
var normalizedScaleValue = currentScaleValue == currentScale ? var normalizedScaleValue = currentScaleValue == currentScale ?
currentScale * 100 : currentScaleValue; currentScale * 100 : currentScaleValue;
var kViewerTopMargin = 52;
var pageNumber = firstPage.id; var pageNumber = firstPage.id;
var pdfOpenParams = '#page=' + pageNumber; var pdfOpenParams = '#page=' + pageNumber;
pdfOpenParams += '&zoom=' + normalizedScaleValue; pdfOpenParams += '&zoom=' + normalizedScaleValue;
var currentPage = PDFView.pages[pageNumber - 1]; var currentPage = PDFView.pages[pageNumber - 1];
var topLeft = currentPage.getPagePoint(window.pageXOffset, var topLeft = currentPage.getPagePoint(PDFView.container.scrollLeft,
window.pageYOffset - firstPage.y - kViewerTopMargin); (PDFView.container.scrollTop - firstPage.y));
pdfOpenParams += ',' + Math.round(topLeft[0]) + ',' + Math.round(topLeft[1]); pdfOpenParams += ',' + Math.round(topLeft[0]) + ',' + Math.round(topLeft[1]);
var store = PDFView.store; var store = PDFView.store;
@ -1422,13 +1468,11 @@ function updateThumbViewArea() {
}, delay); }, 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 (PDFView.initialized &&
(document.getElementById('pageWidthOption').selected ||
document.getElementById('pageFitOption').selected || document.getElementById('pageFitOption').selected ||
document.getElementById('pageAutoOption').selected) document.getElementById('pageAutoOption').selected))
PDFView.parseScale(document.getElementById('scaleSelect').value); PDFView.parseScale(document.getElementById('scaleSelect').value);
updateViewarea(); updateViewarea();
}); });
@ -1507,8 +1551,26 @@ window.addEventListener('scalechange', function scalechange(evt) {
window.addEventListener('pagechange', function pagechange(evt) { window.addEventListener('pagechange', function pagechange(evt) {
var page = evt.pageNumber; var page = evt.pageNumber;
if (document.getElementById('pageNumber').value != page) if (document.getElementById('pageNumber').value != page) {
document.getElementById('pageNumber').value = page; document.getElementById('pageNumber').value = page;
var selected = document.querySelector('.thumbnail.selected');
if (selected)
selected.classList.remove('selected');
var thumbnail = document.getElementById('thumbnailContainer' + page);
thumbnail.classList.add('selected');
var visibleThumbs = PDFView.getVisibleThumbs();
var numVisibleThumbs = visibleThumbs.length;
// If the thumbnail isn't currently visible scroll it into view.
if (numVisibleThumbs > 0) {
var first = visibleThumbs[0].id;
// Account for only one thumbnail being visible.
var last = numVisibleThumbs > 1 ?
visibleThumbs[numVisibleThumbs - 1].id : first;
if (page <= first || page >= last)
thumbnail.scrollIntoView();
}
}
document.getElementById('previous').disabled = (page <= 1); document.getElementById('previous').disabled = (page <= 1);
document.getElementById('next').disabled = (page >= PDFView.pages.length); document.getElementById('next').disabled = (page >= PDFView.pages.length);
}, true); }, true);