diff --git a/images/combobox.png b/images/combobox.png
new file mode 100644
index 000000000..f1527d6a2
Binary files /dev/null and b/images/combobox.png differ
diff --git a/images/source/ComboBox.psd.zip b/images/source/ComboBox.psd.zip
new file mode 100644
index 000000000..232604c75
Binary files /dev/null and b/images/source/ComboBox.psd.zip differ
diff --git a/multi-page-viewer.css b/multi-page-viewer.css
index 53a28f129..c96567465 100644
--- a/multi-page-viewer.css
+++ b/multi-page-viewer.css
@@ -113,6 +113,67 @@ 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 {
text-align: right;
}
diff --git a/multi-page-viewer.html b/multi-page-viewer.html
index aec84a42f..692cfb1c4 100644
--- a/multi-page-viewer.html
+++ b/multi-page-viewer.html
@@ -21,9 +21,18 @@
Page Number
-
- %
+
Zoom
+
+
+ - 50%
+ - 75%
+ - 100%
+ - 125%
+ - 150%
+ - 200%
+
+
diff --git a/multi-page-viewer.js b/multi-page-viewer.js
index 2410eb7bf..6cb46a08a 100644
--- a/multi-page-viewer.js
+++ b/multi-page-viewer.js
@@ -8,9 +8,10 @@ var PDFViewer = {
element: null,
- pageNumberInput: null,
previousPageButton: null,
nextPageButton: null,
+ pageNumberInput: null,
+ scaleInput: null,
willJumpToPage: false,
@@ -158,6 +159,8 @@ var PDFViewer = {
PDFViewer.drawPage(1);
}
}
+
+ PDFViewer.scaleInput.value = Math.floor(PDFViewer.scale * 100) + '%';
},
goToPage: function(num) {
@@ -317,13 +320,40 @@ window.onload = function() {
this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
};
- var scaleInput = document.getElementById('scale');
- scaleInput.onchange = function(evt) {
- PDFViewer.changeScale(this.value);
+ PDFViewer.scaleInput = document.getElementById('scale');
+ PDFViewer.scaleInput.buttonElement = document.getElementById('scaleComboBoxButton');
+ PDFViewer.scaleInput.buttonElement.listElement = document.getElementById('scaleComboBoxList');
+ PDFViewer.scaleInput.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(scaleInput.value) / 100 || 1.0;
+ PDFViewer.scale = parseInt(PDFViewer.scaleInput.value) / 100 || 1.0;
PDFViewer.open(PDFViewer.queryParams.file || PDFViewer.url);
window.onscroll = function(evt) {