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

Changed the zoom input to utilize a pre-populated combo box.

Browse Source
This commit is contained in:
Justin D'Arcangelo 2011-06-19 14:54:13 -04:00
parent 8c802e5025
commit 8935715d96
5 changed files with 106 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/combobox.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

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

Binary file not shown.

60
multi-page-viewer.css
View File

@ -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;
}

13
multi-page-viewer.html
View File

@ -21,9 +21,18 @@
<span class="label">Page Number</span>
</span>
<span class="control">
<input type="text" id="scale" value="100" size="2"/>
<span>%</span>
<span id="scaleComboBoxInput"><input type="text" id="scale" value="100%" size="2"/></span><span id="scaleComboBoxButton"></span>
<span class="label">Zoom</span>
<div id="scaleComboBoxList">
<ul>
<li>50%</li>
<li>75%</li>
<li>100%</li>
<li>125%</li>
<li>150%</li>
<li>200%</li>
</ul>
</div>
</span>
</div>
<div id="viewer"></div>

40
multi-page-viewer.js
View File

@ -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) {