diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 000000000..a1933d1a9
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/images/buttons.png b/images/buttons.png
new file mode 100644
index 000000000..682212660
Binary files /dev/null and b/images/buttons.png differ
diff --git a/images/source/.DS_Store b/images/source/.DS_Store
new file mode 100644
index 000000000..5008ddfcf
Binary files /dev/null and b/images/source/.DS_Store differ
diff --git a/images/source/Buttons.psd.zip b/images/source/Buttons.psd.zip
new file mode 100644
index 000000000..528e6ee3c
Binary files /dev/null and b/images/source/Buttons.psd.zip differ
diff --git a/multi-page-viewer.css b/multi-page-viewer.css
index 013ca6aaf..d81deb1fc 100644
--- a/multi-page-viewer.css
+++ b/multi-page-viewer.css
@@ -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;
}
diff --git a/multi-page-viewer.html b/multi-page-viewer.html
index 6afe645a1..aec84a42f 100644
--- a/multi-page-viewer.html
+++ b/multi-page-viewer.html
@@ -11,18 +11,19 @@
-
-
+
+ Previous/Next
/
--
+ Page Number
- Zoom
%
+ Zoom
diff --git a/multi-page-viewer.js b/multi-page-viewer.js
index c6851e70e..cc4a286ff 100644
--- a/multi-page-viewer.js
+++ b/multi-page-viewer.js
@@ -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;
+ }
};
};