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

Merge pull request #31 from justindarc/master

Browse Source 
Replaced zoom control with standard HTML <select/> control
This commit is contained in:
andreasgal 2011-06-20 20:30:50 -07:00
commit 85e55b4111
5 changed files with 139 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/combobox.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
images/source/ComboBox.psd.zip
View File

Binary file not shown.

90
multi-page-viewer.css
View File

@ -27,7 +27,30 @@ span {
.control > input { .control > input {
float: left; float: left;
border: 1px solid #4d4d4d;
height: 20px;
padding: 0px;
margin: 0px 2px 0px 0px; margin: 0px 2px 0px 0px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
}
.control > select {
float: left;
border: 1px solid #4d4d4d;
height: 22px;
padding: 2px 0px 0px;
margin: 0px 0px 1px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
} }
.control > span { .control > span {
@ -79,7 +102,7 @@ span {
#previousPageButton { #previousPageButton {
background: url('images/buttons.png') no-repeat 0px -23px; background: url('images/buttons.png') no-repeat 0px -23px;
cursor: pointer; cursor: default;
display: inline-block; display: inline-block;
float: left; float: left;
margin: 0px; margin: 0px;
@ -97,7 +120,7 @@ span {
#nextPageButton { #nextPageButton {
background: url('images/buttons.png') no-repeat -28px -23px; background: url('images/buttons.png') no-repeat -28px -23px;
cursor: pointer; cursor: default;
display: inline-block; display: inline-block;
float: left; float: left;
margin: 0px; margin: 0px;
@ -113,68 +136,7 @@ span {
background: url('images/buttons.png') no-repeat -28px 0px; background: url('images/buttons.png') no-repeat -28px 0px;
} }
#scaleComboBoxInput { #pageNumber {
background: url('images/combobox.png') no-repeat 0px -23px;
display: inline-block;
float: left;
margin: 0px;
width: 35px;
height: 23px;
}
#scaleComboBoxInput input {
background: none;
border: 0px;
margin: 3px 2px 0px;
width: 31px;
}
#scaleComboBoxButton {
background: url('images/combobox.png') no-repeat -41px -23px;
cursor: pointer;
display: inline-block;
float: left;
margin: 0px;
width: 21px;
height: 23px;
}
#scaleComboBoxButton.down {
background: url('images/combobox.png') no-repeat -41px -46px;
}
#scaleComboBoxButton.disabled {
background: url('images/combobox.png') no-repeat -41px 0px;
}
#scaleComboBoxList {
background-color: #fff;
border: 1px solid #666;
clear: both;
position: relative;
display: none;
top: -20px;
width: 48px;
}
#scaleComboBoxList > ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#scaleComboBoxList > ul > li {
display: inline-block;
cursor: pointer;
width: 100%;
}
#scaleComboBoxList > ul > li:hover {
background-color: #09f;
color: #fff;
}
#pageNumber, #scale {
text-align: right; text-align: right;
} }

25
multi-page-viewer.html
View File

@ -2,7 +2,8 @@
<html> <html>
<head> <head>
<title>pdf.js Multi-Page Viewer</title> <title>pdf.js Multi-Page Viewer</title>
<link rel="stylesheet" href="multi-page-viewer.css" type="text/css" media="screen" charset="utf-8"/> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="multi-page-viewer.css" type="text/css" media="screen"/>
<script type="text/javascript" src="pdf.js"></script> <script type="text/javascript" src="pdf.js"></script>
<script type="text/javascript" src="fonts.js"></script> <script type="text/javascript" src="fonts.js"></script>
<script type="text/javascript" src="glyphlist.js"></script> <script type="text/javascript" src="glyphlist.js"></script>
@ -11,7 +12,8 @@
<body> <body>
<div id="controls"> <div id="controls">
<span class="control"> <span class="control">
<span id="previousPageButton"></span><span id="nextPageButton"></span> <span id="previousPageButton" class="disabled"></span>
<span id="nextPageButton" class="disabled"></span>
<span class="label">Previous/Next</span> <span class="label">Previous/Next</span>
</span> </span>
<span class="control"> <span class="control">
@ -21,18 +23,15 @@
<span class="label">Page Number</span> <span class="label">Page Number</span>
</span> </span>
<span class="control"> <span class="control">
<span id="scaleComboBoxInput"><input type="text" id="scale" value="100%" size="2"/></span><span id="scaleComboBoxButton"></span> <select id="scaleSelect">
<option value="50">50%</option>
<option value="75">75%</option>
<option value="100" selected="selected">100%</option>
<option value="125">125%</option>
<option value="150">150%</option>
<option value="200">200%</option>
</select>
<span class="label">Zoom</span> <span class="label">Zoom</span>
<div id="scaleComboBoxList">
<ul>
<li>50%</li>
<li>75%</li>
<li>100%</li>
<li>125%</li>
<li>150%</li>
<li>200%</li>
</ul>
</div>
</span> </span>
</div> </div>
<div id="viewer"></div> <div id="viewer"></div>

198
multi-page-viewer.js
View File

@ -11,7 +11,7 @@ var PDFViewer = {
previousPageButton: null, previousPageButton: null,
nextPageButton: null, nextPageButton: null,
pageNumberInput: null, pageNumberInput: null,
scaleInput: null, scaleSelect: null,
willJumpToPage: false, willJumpToPage: false,
@ -66,92 +66,103 @@ var PDFViewer = {
removePage: function(num) { removePage: function(num) {
var div = document.getElementById('pageContainer' + num); var div = document.getElementById('pageContainer' + num);
if (div && div.hasChildNodes()) { if (div) {
while (div.childNodes.length > 0) { while (div.hasChildNodes()) {
div.removeChild(div.firstChild); div.removeChild(div.firstChild);
} }
} }
}, },
drawPage: function(num) { drawPage: function(num) {
if (PDFViewer.pdf) { if (!PDFViewer.pdf) {
var page = PDFViewer.pdf.getPage(num); return;
var div = document.getElementById('pageContainer' + num); }
if (div && !div.hasChildNodes()) {
var canvas = document.createElement('canvas');
canvas.id = 'page' + num;
canvas.mozOpaque = true;
// 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 = PDFViewer.pageWidth();
canvas.height = PDFViewer.pageHeight();
var ctx = canvas.getContext('2d');
ctx.save();
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();
var gfx = new CanvasGraphics(ctx);
var fonts = [];
// page.compile will collect all fonts for us, once we have loaded them var div = document.getElementById('pageContainer' + num);
// we can trigger the actual page rendering with page.display var canvas = document.createElement('canvas');
page.compile(gfx, fonts);
if (div && !div.hasChildNodes()) {
var fontsReady = true; div.appendChild(canvas);
// Inspect fonts and translate the missing one var page = PDFViewer.pdf.getPage(num);
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); canvas.id = 'page' + num;
canvas.mozOpaque = true;
fontsReady = false;
// 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 = PDFViewer.pageWidth();
canvas.height = PDFViewer.pageHeight();
var ctx = canvas.getContext('2d');
ctx.save();
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();
var gfx = new CanvasGraphics(ctx);
var fonts = [];
// 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);
var areFontsReady = 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]) {
areFontsReady = areFontsReady && !Fonts[font.name].loading;
continue;
} }
var pageInterval; new Font(font.name, font.file, font.properties);
var delayLoadFont = function() {
for (var i = 0; i < fontCount; i++) { areFontsReady = false;
if (Fonts[font.name].loading) {
return;
}
}
clearInterval(pageInterval);
PDFViewer.drawPage(num);
}
if (!fontsReady) {
pageInterval = setInterval(delayLoadFont, 10);
return;
}
page.display(gfx);
div.appendChild(canvas);
} }
var pageInterval;
var delayLoadFont = function() {
for (var i = 0; i < fontCount; i++) {
if (Fonts[font.name].loading) {
return;
}
}
clearInterval(pageInterval);
while (div.hasChildNodes()) {
div.removeChild(div.firstChild);
}
PDFViewer.drawPage(num);
}
if (!areFontsReady) {
pageInterval = setInterval(delayLoadFont, 10);
return;
}
page.display(gfx);
} }
}, },
changeScale: function(num) { changeScale: function(num) {
while (PDFViewer.element.childNodes.length > 0) { while (PDFViewer.element.hasChildNodes()) {
PDFViewer.element.removeChild(PDFViewer.element.firstChild); PDFViewer.element.removeChild(PDFViewer.element.firstChild);
} }
PDFViewer.scale = num / 100; PDFViewer.scale = num / 100;
var i;
if (PDFViewer.pdf) { if (PDFViewer.pdf) {
for (var i = 1; i <= PDFViewer.numberOfPages; i++) { for (i = 1; i <= PDFViewer.numberOfPages; i++) {
PDFViewer.createPage(i); PDFViewer.createPage(i);
} }
@ -160,7 +171,21 @@ var PDFViewer = {
} }
} }
PDFViewer.scaleInput.value = Math.floor(PDFViewer.scale * 100) + '%'; for (i = 0; i < PDFViewer.scaleSelect.childNodes; i++) {
var option = PDFViewer.scaleSelect.childNodes[i];
if (option.value == num) {
if (!option.selected) {
option.selected = 'selected';
}
} else {
if (option.selected) {
option.removeAttribute('selected');
}
}
}
PDFViewer.scaleSelect.value = Math.floor(PDFViewer.scale * 100) + '%';
}, },
goToPage: function(num) { goToPage: function(num) {
@ -217,6 +242,11 @@ var PDFViewer = {
if (PDFViewer.numberOfPages > 0) { if (PDFViewer.numberOfPages > 0) {
PDFViewer.drawPage(1); PDFViewer.drawPage(1);
} }
PDFViewer.previousPageButton.className = (PDFViewer.pageNumber === 1) ?
'disabled' : '';
PDFViewer.nextPageButton.className = (PDFViewer.pageNumber === PDFViewer.numberOfPages) ?
'disabled' : '';
} }
}; };
@ -320,40 +350,14 @@ window.onload = function() {
this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : ''; this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
}; };
PDFViewer.scaleInput = document.getElementById('scale'); PDFViewer.scaleSelect = document.getElementById('scaleSelect');
PDFViewer.scaleInput.buttonElement = document.getElementById('scaleComboBoxButton'); PDFViewer.scaleSelect.onchange = function(evt) {
PDFViewer.scaleInput.buttonElement.listElement = document.getElementById('scaleComboBoxList');
PDFViewer.scaleInput.onchange = function(evt) {
PDFViewer.changeScale(parseInt(this.value)); PDFViewer.changeScale(parseInt(this.value));
}; };
PDFViewer.scaleInput.buttonElement.onclick = function(evt) {
this.listElement.style.display = (this.listElement.style.display === 'block') ? 'none' : 'block';
};
PDFViewer.scaleInput.buttonElement.onmousedown = function(evt) {
if (this.className.indexOf('disabled') === -1) {
this.className = 'down';
}
};
PDFViewer.scaleInput.buttonElement.onmouseup = function(evt) {
this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
};
PDFViewer.scaleInput.buttonElement.onmouseout = function(evt) {
this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
};
var listItems = PDFViewer.scaleInput.buttonElement.listElement.getElementsByTagName('LI');
for (var i = 0; i < listItems.length; i++) {
var listItem = listItems[i];
listItem.onclick = function(evt) {
PDFViewer.changeScale(parseInt(this.innerHTML));
PDFViewer.scaleInput.buttonElement.listElement.style.display = 'none';
};
}
PDFViewer.pageNumber = parseInt(PDFViewer.queryParams.page) || PDFViewer.pageNumber; PDFViewer.pageNumber = parseInt(PDFViewer.queryParams.page) || PDFViewer.pageNumber;
PDFViewer.scale = parseInt(PDFViewer.scaleInput.value) / 100 || 1.0; PDFViewer.scale = parseInt(PDFViewer.scaleSelect.value) / 100 || 1.0;
PDFViewer.open(PDFViewer.queryParams.file || PDFViewer.url); PDFViewer.open(PDFViewer.queryParams.file || PDFViewer.url);
window.onscroll = function(evt) { window.onscroll = function(evt) {