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

Added font loading in the multi-page viewer. Added support for changing the zoom/scale factor.

Browse Source
This commit is contained in:
Justin D'Arcangelo 2011-06-18 05:52:24 -04:00
parent a9451a309f
commit 87fef70bbf
3 changed files with 86 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
multi-page-viewer.css
View File

@ -2,6 +2,7 @@
/* vim: set shiftwidth=4 tabstop=8 autoindent cindent expandtab: */
body {
background-color: #929292;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
margin: 0px;
padding: 0px;
@ -17,6 +18,10 @@ span {
font-size: 0.8em;
}
.control {
margin: 0px 20px 0px 0px;
}
.page {
width: 816px;
height: 1056px;
@ -43,8 +48,6 @@ span {
}
#viewer {
background-color: #929292;
margin: 32px 0px 0px;
padding: 8px 0px;
width: 100%;
}

19
multi-page-viewer.html
View File

@ -10,11 +10,20 @@
</head>
<body>
<div id="controls">
<button id="previousPageButton">Previous</button>
<button id="nextPageButton">Next</button>
<input type="text" id="pageNumber" value="1" size="2"/>
<span>/</span>
<span id="numPages">--</span>
<span class="control">
<button id="previousPageButton">Previous</button>
<button id="nextPageButton">Next</button>
</span>
<span class="control">
<input type="text" id="pageNumber" value="1" size="2"/>
<span>/</span>
<span id="numPages">--</span>
</span>
<span class="control">
<span>Zoom</span>
<input type="text" id="scale" value="100" size="2"/>
<span>%</span>
</span>
</div>
<div id="viewer"></div>
</body>

74
multi-page-viewer.js
View File

@ -48,7 +48,9 @@ var PDFViewer = {
var div = document.createElement('div');
div.id = 'pageContainer' + num;
div.className = 'page';
div.className = 'page';
div.style.width = PDFViewer.pageWidth() + 'px';
div.style.height = PDFViewer.pageHeight() + 'px';
PDFViewer.element.appendChild(anchor);
PDFViewer.element.appendChild(div);
@ -76,8 +78,8 @@ var PDFViewer = {
// Canvas dimensions must be specified in CSS pixels. CSS pixels
// are always 96 dpi. These dimensions are 8.5in x 11in at 96dpi.
canvas.width = 816;
canvas.height = 1056;
canvas.width = PDFViewer.pageWidth();
canvas.height = PDFViewer.pageHeight();
var ctx = canvas.getContext('2d');
ctx.save();
@ -91,15 +93,67 @@ var PDFViewer = {
// page.compile will collect all fonts for us, once we have loaded them
// we can trigger the actual page rendering with page.display
page.compile(gfx, fonts);
// This should be called when font loading is complete
page.display(gfx);
var fontsReady = true;
// Inspect fonts and translate the missing one
var fontCount = fonts.length;
for (var i = 0; i < fontCount; i++) {
var font = fonts[i];
if (Fonts[font.name]) {
fontsReady = fontsReady && !Fonts[font.name].loading;
continue;
}
new Font(font.name, font.file, font.properties);
fontsReady = false;
}
var pageInterval;
var delayLoadFont = function() {
for (var i = 0; i < fontCount; i++) {
if (Fonts[font.name].loading) {
return;
}
}
clearInterval(pageInterval);
PDFViewer.drawPage(num);
}
if (!fontsReady) {
pageInterval = setInterval(delayLoadFont, 10);
return;
}
page.display(gfx);
div.appendChild(canvas);
}
}
},
changeScale: function(num) {
while (PDFViewer.element.childNodes.length > 0) {
PDFViewer.element.removeChild(PDFViewer.element.firstChild);
}
PDFViewer.scale = num / 100;
if (PDFViewer.pdf) {
for (var i = 1; i <= PDFViewer.numberOfPages; i++) {
PDFViewer.createPage(i);
}
if (PDFViewer.numberOfPages > 0) {
PDFViewer.drawPage(1);
}
}
},
goToPage: function(num) {
if (0 <= num && num <= PDFViewer.numberOfPages) {
PDFViewer.pageNumber = num;
@ -225,7 +279,13 @@ window.onload = function() {
var nextPageButton = document.getElementById('nextPageButton');
nextPageButton.onclick = PDFViewer.goToNextPage;
var scaleInput = document.getElementById('scale');
scaleInput.onchange = function(evt) {
PDFViewer.changeScale(this.value);
};
PDFViewer.pageNumber = parseInt(PDFViewer.queryParams.page) || PDFViewer.pageNumber;
PDFViewer.scale = parseInt(scaleInput.value) / 100 || 1.0;
PDFViewer.open(PDFViewer.queryParams.file || PDFViewer.url);
window.onscroll = function(evt) {