Zooming control
This commit is contained in:
notmasteryet
parent
ae2297aa99
commit
a56f36e350
@ -230,6 +230,14 @@ canvas {
|
||||
-webkit-box-shadow: 0px 2px 10px #ff0;
|
||||
}
|
||||
|
||||
#pageWidthOption {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
#customScaleOption:not([data-scale]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* === Printed media overrides === */
|
||||
@media print {
|
||||
#sidebar {
|
||||
|
||||
@ -33,13 +33,16 @@
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<select id="scaleSelect" onchange="PDFView.scale = parseInt(this.value);">
|
||||
<option value="50">50%</option>
|
||||
<option value="75">75%</option>
|
||||
<option value="100">100%</option>
|
||||
<option value="125">125%</option>
|
||||
<option value="150" selected="selected">150%</option>
|
||||
<option value="200">200%</option>
|
||||
<select id="scaleSelect" onchange="PDFView.parseScale(this.value);">
|
||||
<option id="customScaleOption" value="custom"></option>
|
||||
<option value="0.5">50%</option>
|
||||
<option value="0.75">75%</option>
|
||||
<option value="1">100%</option>
|
||||
<option value="1.25">125%</option>
|
||||
<option value="1.5" selected="selected">150%</option>
|
||||
<option value="2">200%</option>
|
||||
<option id="pageWidthOption" value="page-width">Page Width</option>
|
||||
<option id="pageFitOption" value="page-fit">Page Fit</option>
|
||||
</select>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
102
web/viewer.js
102
web/viewer.js
@ -4,8 +4,10 @@
|
||||
'use strict';
|
||||
|
||||
var kDefaultURL = 'compressed.tracemonkey-pldi-09.pdf';
|
||||
var kDefaultScale = 150;
|
||||
var kDefaultScale = 1.5;
|
||||
var kDefaultScaleDelta = 1.1;
|
||||
var kCacheSize = 20;
|
||||
var kCssUnits = 96.0 / 72.0;
|
||||
|
||||
var Cache = function(size) {
|
||||
var data = [];
|
||||
@ -21,12 +23,13 @@ var cache = new Cache(kCacheSize);
|
||||
var PDFView = {
|
||||
pages: [],
|
||||
thumbnails: [],
|
||||
currentScale: kDefaultScale,
|
||||
|
||||
set scale(val) {
|
||||
setScale: function(val, resetAutoSettings) {
|
||||
var pages = this.pages;
|
||||
var cssUnits = 96.0 / 72.0;
|
||||
for (var i = 0; i < pages.length; i++)
|
||||
pages[i].update(val / 100 * cssUnits);
|
||||
pages[i].update(val * kCssUnits);
|
||||
this.currentScale = val;
|
||||
|
||||
if (document.location.hash == '#' + this.page)
|
||||
this.pages[this.page - 1].draw();
|
||||
@ -35,10 +38,41 @@ var PDFView = {
|
||||
document.location.hash = this.page;
|
||||
|
||||
var event = document.createEvent('UIEvents');
|
||||
event.initUIEvent('scalechange', false, false, window, val);
|
||||
event.initUIEvent('scalechange', false, false, window, 0);
|
||||
event.scale = val;
|
||||
event.resetAutoSettings = resetAutoSettings;
|
||||
window.dispatchEvent(event);
|
||||
},
|
||||
|
||||
parseScale: function(value) {
|
||||
var scale = parseFloat(value);
|
||||
if (scale) {
|
||||
this.setScale(scale, true);
|
||||
return;
|
||||
}
|
||||
if ('custom' == value)
|
||||
return;
|
||||
|
||||
var currentPage = this.pages[this.page - 1];
|
||||
var scrollbarPadding = 40;
|
||||
var pageWidthScale = (window.innerWidth - scrollbarPadding) /
|
||||
currentPage.width / kCssUnits;
|
||||
var pageHeightScale = (window.innerHeight - scrollbarPadding) /
|
||||
currentPage.height / kCssUnits;
|
||||
if ('page-width' == value)
|
||||
this.setScale(pageWidthScale);
|
||||
else if ('page-fit' == value)
|
||||
this.setScale(Math.min(pageWidthScale, pageHeightScale));
|
||||
},
|
||||
|
||||
zoomIn: function() {
|
||||
this.setScale(this.currentScale * kDefaultScaleDelta, true);
|
||||
},
|
||||
|
||||
zoomOut: function() {
|
||||
this.setScale(this.currentScale / kDefaultScaleDelta, true);
|
||||
},
|
||||
|
||||
set page(val) {
|
||||
var pages = this.pages;
|
||||
var input = document.getElementById('pageNumber');
|
||||
@ -129,7 +163,7 @@ var PDFView = {
|
||||
pagesRefMap[pageRef.num + ' ' + pageRef.gen + ' R'] = i;
|
||||
}
|
||||
|
||||
this.scale = (scale || kDefaultScale);
|
||||
this.setScale(scale || kDefaultScale, true);
|
||||
this.page = parseInt(document.location.hash.substring(1)) || 1;
|
||||
this.pagesRefMap = pagesRefMap;
|
||||
this.destinations = pdf.catalog.destinations;
|
||||
@ -355,7 +389,7 @@ window.addEventListener('load', function(evt) {
|
||||
params[unescape(param[0])] = unescape(param[1]);
|
||||
}
|
||||
|
||||
PDFView.open(params.file || kDefaultURL, parseInt(params.scale));
|
||||
PDFView.open(params.file || kDefaultURL, parseFloat(params.scale));
|
||||
|
||||
if (!window.File || !window.FileReader || !window.FileList || !window.Blob)
|
||||
document.getElementById('fileInput').style.display = 'none';
|
||||
@ -367,7 +401,7 @@ window.addEventListener('pdfloaded', function(evt) {
|
||||
PDFView.load(evt.detail);
|
||||
}, true);
|
||||
|
||||
window.addEventListener('scroll', function onscroll(evt) {
|
||||
function updateViewarea() {
|
||||
var visiblePages = PDFView.getVisiblePages();
|
||||
for (var i = 0; i < visiblePages.length; i++) {
|
||||
var page = visiblePages[i];
|
||||
@ -385,8 +419,19 @@ window.addEventListener('scroll', function onscroll(evt) {
|
||||
PDFView.page = lastPage.id;
|
||||
else if (currentId < firstPage.id)
|
||||
PDFView.page = firstPage.id;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', function onscroll(evt) {
|
||||
updateViewarea();
|
||||
}, true);
|
||||
|
||||
window.addEventListener('resize', function onscroll(evt) {
|
||||
if (document.getElementById('pageWidthOption').selected ||
|
||||
document.getElementById('pageFitOption').selected)
|
||||
PDFView.parseScale(document.getElementById('scaleSelect').value);
|
||||
updateViewarea();
|
||||
});
|
||||
|
||||
window.addEventListener('hashchange', function(evt) {
|
||||
PDFView.page = PDFView.page;
|
||||
});
|
||||
@ -432,13 +477,38 @@ window.addEventListener('transitionend', function(evt) {
|
||||
}, 500);
|
||||
}, true);
|
||||
|
||||
|
||||
window.addEventListener('scalechange', function scalechange(evt) {
|
||||
var customScaleOption = document.getElementById('customScaleOption');
|
||||
customScaleOption.selected = false;
|
||||
customScaleOption.removeAttribute('data-scale');
|
||||
|
||||
if (!evt.resetAutoSettings &&
|
||||
(document.getElementById('pageWidthOption').selected ||
|
||||
document.getElementById('pageFitOption').selected)) {
|
||||
updateViewarea();
|
||||
return;
|
||||
}
|
||||
|
||||
var options = document.getElementById('scaleSelect').options;
|
||||
var predefinedValueFound = false;
|
||||
var value = '' + evt.scale;
|
||||
for (var i = 0; i < options.length; i++) {
|
||||
var option = options[i];
|
||||
option.selected = (option.value == evt.detail);
|
||||
if (option.value != evt.scale) {
|
||||
option.selected = false;
|
||||
continue;
|
||||
}
|
||||
option.selected = true;
|
||||
predefinedValueFound = true;
|
||||
}
|
||||
|
||||
if (!predefinedValueFound) {
|
||||
customScaleOption.setAttribute('data-scale', evt.scale);
|
||||
customScaleOption.textContent = Math.round(evt.scale * 10000) / 100 + '%';
|
||||
customScaleOption.selected = true;
|
||||
}
|
||||
|
||||
updateViewarea();
|
||||
}, true);
|
||||
|
||||
window.addEventListener('pagechange', function pagechange(evt) {
|
||||
@ -448,3 +518,15 @@ window.addEventListener('pagechange', function pagechange(evt) {
|
||||
document.getElementById('previous').disabled = (page == 1);
|
||||
document.getElementById('next').disabled = (page == PDFView.pages.length);
|
||||
}, true);
|
||||
|
||||
window.addEventListener('keydown', function (evt) {
|
||||
switch(evt.keyCode) {
|
||||
case 61:
|
||||
case 107:
|
||||
PDFView.zoomIn();
|
||||
break;
|
||||
case 109:
|
||||
PDFView.zoomOut();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user