Replaced zoom control with standard HTML <select/> control.
This commit is contained in:
Justin D'Arcangelo
parent
a6c48e3bc2
commit
d37af0a800
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
@ -27,7 +27,30 @@ span {
|
||||
|
||||
.control > input {
|
||||
float: left;
|
||||
border: 1px solid #4d4d4d;
|
||||
height: 20px;
|
||||
padding: 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 {
|
||||
@ -79,7 +102,7 @@ span {
|
||||
|
||||
#previousPageButton {
|
||||
background: url('images/buttons.png') no-repeat 0px -23px;
|
||||
cursor: pointer;
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin: 0px;
|
||||
@ -97,7 +120,7 @@ span {
|
||||
|
||||
#nextPageButton {
|
||||
background: url('images/buttons.png') no-repeat -28px -23px;
|
||||
cursor: pointer;
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin: 0px;
|
||||
@ -113,68 +136,7 @@ span {
|
||||
background: url('images/buttons.png') no-repeat -28px 0px;
|
||||
}
|
||||
|
||||
#scaleComboBoxInput {
|
||||
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 {
|
||||
#pageNumber {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
<html>
|
||||
<head>
|
||||
<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="fonts.js"></script>
|
||||
<script type="text/javascript" src="glyphlist.js"></script>
|
||||
@ -11,7 +12,8 @@
|
||||
<body>
|
||||
<div id="controls">
|
||||
<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>
|
||||
<span class="control">
|
||||
@ -21,18 +23,15 @@
|
||||
<span class="label">Page Number</span>
|
||||
</span>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div id="viewer"></div>
|
||||
|
||||
@ -11,7 +11,7 @@ var PDFViewer = {
|
||||
previousPageButton: null,
|
||||
nextPageButton: null,
|
||||
pageNumberInput: null,
|
||||
scaleInput: null,
|
||||
scaleSelect: null,
|
||||
|
||||
willJumpToPage: false,
|
||||
|
||||
@ -66,92 +66,103 @@ var PDFViewer = {
|
||||
removePage: function(num) {
|
||||
var div = document.getElementById('pageContainer' + num);
|
||||
|
||||
if (div && div.hasChildNodes()) {
|
||||
while (div.childNodes.length > 0) {
|
||||
if (div) {
|
||||
while (div.hasChildNodes()) {
|
||||
div.removeChild(div.firstChild);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
drawPage: function(num) {
|
||||
if (PDFViewer.pdf) {
|
||||
var page = PDFViewer.pdf.getPage(num);
|
||||
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 = [];
|
||||
if (!PDFViewer.pdf) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 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 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;
|
||||
}
|
||||
var div = document.getElementById('pageContainer' + num);
|
||||
var canvas = document.createElement('canvas');
|
||||
|
||||
if (div && !div.hasChildNodes()) {
|
||||
div.appendChild(canvas);
|
||||
|
||||
var page = PDFViewer.pdf.getPage(num);
|
||||
|
||||
new Font(font.name, font.file, font.properties);
|
||||
|
||||
fontsReady = false;
|
||||
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
|
||||
// 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;
|
||||
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);
|
||||
new Font(font.name, font.file, font.properties);
|
||||
|
||||
areFontsReady = false;
|
||||
}
|
||||
|
||||
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) {
|
||||
while (PDFViewer.element.childNodes.length > 0) {
|
||||
while (PDFViewer.element.hasChildNodes()) {
|
||||
PDFViewer.element.removeChild(PDFViewer.element.firstChild);
|
||||
}
|
||||
|
||||
PDFViewer.scale = num / 100;
|
||||
|
||||
var i;
|
||||
|
||||
if (PDFViewer.pdf) {
|
||||
for (var i = 1; i <= PDFViewer.numberOfPages; i++) {
|
||||
for (i = 1; i <= PDFViewer.numberOfPages; 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) {
|
||||
@ -217,6 +242,11 @@ var PDFViewer = {
|
||||
if (PDFViewer.numberOfPages > 0) {
|
||||
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' : '';
|
||||
};
|
||||
|
||||
PDFViewer.scaleInput = document.getElementById('scale');
|
||||
PDFViewer.scaleInput.buttonElement = document.getElementById('scaleComboBoxButton');
|
||||
PDFViewer.scaleInput.buttonElement.listElement = document.getElementById('scaleComboBoxList');
|
||||
PDFViewer.scaleInput.onchange = function(evt) {
|
||||
PDFViewer.scaleSelect = document.getElementById('scaleSelect');
|
||||
PDFViewer.scaleSelect.onchange = function(evt) {
|
||||
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.scale = parseInt(PDFViewer.scaleInput.value) / 100 || 1.0;
|
||||
PDFViewer.scale = parseInt(PDFViewer.scaleSelect.value) / 100 || 1.0;
|
||||
|
||||
PDFViewer.open(PDFViewer.queryParams.file || PDFViewer.url);
|
||||
|
||||
window.onscroll = function(evt) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user