Zooming control

web/viewer.css

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

web/viewer.html

@@ -33,13 +33,16 @@
 
       <div class="separator"></div>
 
-      <select id="scaleSelect" onchange="PDFView.scale = parseInt(this.value);">
+      <select id="scaleSelect" onchange="PDFView.parseScale(this.value);">
-        <option value="50">50%</option>
+        <option id="customScaleOption" value="custom"></option>
-        <option value="75">75%</option>
+        <option value="0.5">50%</option>
-        <option value="100">100%</option>
+        <option value="0.75">75%</option>
-        <option value="125">125%</option>
+        <option value="1">100%</option>
-        <option value="150" selected="selected">150%</option>
+        <option value="1.25">125%</option>
-        <option value="200">200%</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>

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;
+  }
+});