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 { .control {
display: inline-block;
float: left;
margin: 0px 20px 0px 0px; 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 { .page {
@ -31,23 +59,64 @@ span {
#controls { #controls {
background-color: #eee; background-color: #eee;
border-bottom: 1px solid #666; border-bottom: 1px solid #666;
padding: 4px 0px 0px 10px; padding: 4px 0px 0px 8px;
position:fixed; position:fixed;
left: 0px; left: 0px;
top: 0px; top: 0px;
height: 28px; height: 40px;
width: 100%; width: 100%;
box-shadow: 0px 2px 8px #000; box-shadow: 0px 2px 8px #000;
-moz-box-shadow: 0px 2px 8px #000; -moz-box-shadow: 0px 2px 8px #000;
-webkit-box-shadow: 0px 2px 8px #000; -webkit-box-shadow: 0px 2px 8px #000;
} }
#pageNumber { #controls input {
margin: 0px 0px 0px 10px; 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; text-align: right;
} }
#viewer { #viewer {
margin: 32px 0px 0px; margin: 44px 0px 0px;
padding: 8px 0px; padding: 8px 0px;
} }

7
multi-page-viewer.html
View File

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

77
multi-page-viewer.js
View File

@ -7,6 +7,10 @@ var PDFViewer = {
element: null, element: null,
pageNumberInput: null, pageNumberInput: null,
previousPageButton: null,
nextPageButton: null,
willJumpToPage: false,
pdf: null, pdf: null,
@ -155,28 +159,30 @@ var PDFViewer = {
}, },
goToPage: function(num) { goToPage: function(num) {
if (0 <= num && num <= PDFViewer.numberOfPages) { if (1 <= num && num <= PDFViewer.numberOfPages) {
PDFViewer.pageNumber = num; 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() { goToPreviousPage: function() {
if (PDFViewer.pageNumber > 1) { if (PDFViewer.pageNumber > 1) {
--PDFViewer.pageNumber; PDFViewer.goToPage(--PDFViewer.pageNumber);
} }
PDFViewer.goToPage(PDFViewer.pageNumber);
}, },
goToNextPage: function() { goToNextPage: function() {
if (PDFViewer.pageNumber < PDFViewer.numberOfPages) { if (PDFViewer.pageNumber < PDFViewer.numberOfPages) {
++PDFViewer.pageNumber; PDFViewer.goToPage(++PDFViewer.pageNumber);
} }
PDFViewer.goToPage(PDFViewer.pageNumber);
}, },
open: function(url) { open: function(url) {
@ -273,11 +279,41 @@ window.onload = function() {
this.focus(); this.focus();
}; };
var previousPageButton = document.getElementById('previousPageButton'); PDFViewer.previousPageButton = document.getElementById('previousPageButton');
previousPageButton.onclick = PDFViewer.goToPreviousPage; 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'); PDFViewer.nextPageButton = document.getElementById('nextPageButton');
nextPageButton.onclick = PDFViewer.goToNextPage; 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'); var scaleInput = document.getElementById('scale');
scaleInput.onchange = function(evt) { scaleInput.onchange = function(evt) {
@ -288,7 +324,7 @@ window.onload = function() {
PDFViewer.scale = parseInt(scaleInput.value) / 100 || 1.0; PDFViewer.scale = parseInt(scaleInput.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) {
var lastPagesDrawn = PDFViewer.lastPagesDrawn; var lastPagesDrawn = PDFViewer.lastPagesDrawn;
var visiblePages = PDFViewer.visiblePages(); var visiblePages = PDFViewer.visiblePages();
@ -317,5 +353,16 @@ window.onload = function() {
} }
PDFViewer.lastPagesDrawn = pagesToDraw.concat(pagesToKeep); 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;
}
}; };
}; };