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..293b32241 100644 --- a/multi-page-viewer.css +++ b/multi-page-viewer.css @@ -113,6 +113,66 @@ 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; +} + #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 +
+ +
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) {