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

Updated the toolbar graphics.

Browse Source
This commit is contained in:
Justin D'Arcangelo 2011-06-18 20:11:56 -04:00
parent 2d85ae2422
commit 9c04f4dbb6
7 changed files with 140 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
images/buttons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
images/source/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
images/source/Buttons.psd.zip Normal file
View File

Binary file not shown.

79
multi-page-viewer.css
View File

@ -19,7 +19,35 @@ span {
}
.control {
display: inline-block;
float: left;
margin: 0px 20px 0px 0px;
padding: 0px 4px 0px 0px;
}
.control > input {
float: left;
margin: 0px 2px 0px 0px;
}
.control > span {
float: left;
height: 18px;
margin: 5px 2px 0px;
padding: 0px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.control .label {
clear: both;
float: left;
font-size: 0.65em;
margin: 2px 0px 0px;
position: relative;
text-align: center;
width: 100%;
}
.page {
@ -31,23 +59,64 @@ span {
#controls {
background-color: #eee;
border-bottom: 1px solid #666;
padding: 4px 0px 0px 10px;
padding: 4px 0px 0px 8px;
position:fixed;
left: 0px;
top: 0px;
height: 28px;
height: 40px;
width: 100%;
box-shadow: 0px 2px 8px #000;
-moz-box-shadow: 0px 2px 8px #000;
-webkit-box-shadow: 0px 2px 8px #000;
}
#pageNumber {
margin: 0px 0px 0px 10px;
#controls input {
user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
}
#previousPageButton {
background: url('images/buttons.png') no-repeat 0px -23px;
cursor: pointer;
display: inline-block;
float: left;
margin: 0px;
width: 28px;
height: 23px;
}
#previousPageButton.down {
background: url('images/buttons.png') no-repeat 0px -46px;
}
#previousPageButton.disabled {
background: url('images/buttons.png') no-repeat 0px 0px;
}
#nextPageButton {
background: url('images/buttons.png') no-repeat -28px -23px;
cursor: pointer;
display: inline-block;
float: left;
margin: 0px;
width: 28px;
height: 23px;
}
#nextPageButton.down {
background: url('images/buttons.png') no-repeat -28px -46px;
}
#nextPageButton.disabled {
background: url('images/buttons.png') no-repeat -28px 0px;
}
#pageNumber, #scale {
text-align: right;
}
#viewer {
margin: 32px 0px 0px;
margin: 44px 0px 0px;
padding: 8px 0px;
}

7
multi-page-viewer.html
View File

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

77
multi-page-viewer.js
View File

@ -7,6 +7,10 @@ var PDFViewer = {
element: null,
pageNumberInput: null,
previousPageButton: null,
nextPageButton: null,
willJumpToPage: false,
pdf: null,
@ -155,28 +159,30 @@ var PDFViewer = {
},
goToPage: function(num) {
if (0 <= num && num <= PDFViewer.numberOfPages) {
if (1 <= num && num <= PDFViewer.numberOfPages) {
PDFViewer.pageNumber = num;
PDFViewer.pageNumberInput.value = PDFViewer.pageNumber;
PDFViewer.willJumpToPage = true;
document.location.hash = PDFViewer.pageNumber;
PDFViewer.previousPageButton.className = (PDFViewer.pageNumber === 1) ?
'disabled' : '';
PDFViewer.nextPageButton.className = (PDFViewer.pageNumber === PDFViewer.numberOfPages) ?
'disabled' : '';
}
PDFViewer.pageNumberInput.value = PDFViewer.pageNumber;
document.location.hash = PDFViewer.pageNumber;
},
goToPreviousPage: function() {
if (PDFViewer.pageNumber > 1) {
--PDFViewer.pageNumber;
PDFViewer.goToPage(--PDFViewer.pageNumber);
}
PDFViewer.goToPage(PDFViewer.pageNumber);
},
goToNextPage: function() {
if (PDFViewer.pageNumber < PDFViewer.numberOfPages) {
++PDFViewer.pageNumber;
PDFViewer.goToPage(++PDFViewer.pageNumber);
}
PDFViewer.goToPage(PDFViewer.pageNumber);
},
open: function(url) {
@ -273,11 +279,41 @@ window.onload = function() {
this.focus();
};
var previousPageButton = document.getElementById('previousPageButton');
previousPageButton.onclick = PDFViewer.goToPreviousPage;
PDFViewer.previousPageButton = document.getElementById('previousPageButton');
PDFViewer.previousPageButton.onclick = function(evt) {
if (this.className.indexOf('disabled') === -1) {
PDFViewer.goToPreviousPage();
}
};
PDFViewer.previousPageButton.onmousedown = function(evt) {
if (this.className.indexOf('disabled') === -1) {
this.className = 'down';
}
};
PDFViewer.previousPageButton.onmouseup = function(evt) {
this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
};
PDFViewer.previousPageButton.onmouseout = function(evt) {
this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
};
var nextPageButton = document.getElementById('nextPageButton');
nextPageButton.onclick = PDFViewer.goToNextPage;
PDFViewer.nextPageButton = document.getElementById('nextPageButton');
PDFViewer.nextPageButton.onclick = function(evt) {
if (this.className.indexOf('disabled') === -1) {
PDFViewer.goToNextPage();
}
};
PDFViewer.nextPageButton.onmousedown = function(evt) {
if (this.className.indexOf('disabled') === -1) {
this.className = 'down';
}
};
PDFViewer.nextPageButton.onmouseup = function(evt) {
this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
};
PDFViewer.nextPageButton.onmouseout = function(evt) {
this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
};
var scaleInput = document.getElementById('scale');
scaleInput.onchange = function(evt) {
@ -288,7 +324,7 @@ window.onload = function() {
PDFViewer.scale = parseInt(scaleInput.value) / 100 || 1.0;
PDFViewer.open(PDFViewer.queryParams.file || PDFViewer.url);
window.onscroll = function(evt) {
window.onscroll = function(evt) {
var lastPagesDrawn = PDFViewer.lastPagesDrawn;
var visiblePages = PDFViewer.visiblePages();
@ -317,5 +353,16 @@ window.onload = function() {
}
PDFViewer.lastPagesDrawn = pagesToDraw.concat(pagesToKeep);
// Update the page number input with the current page number.
if (!PDFViewer.willJumpToPage && visiblePages.length > 0) {
PDFViewer.pageNumber = PDFViewer.pageNumberInput.value = visiblePages[0];
PDFViewer.previousPageButton.className = (PDFViewer.pageNumber === 1) ?
'disabled' : '';
PDFViewer.nextPageButton.className = (PDFViewer.pageNumber === PDFViewer.numberOfPages) ?
'disabled' : '';
} else {
PDFViewer.willJumpToPage = false;
}
};
};