From 87fef70bbf7cb67aadf669576c9b7b97a3e3e217 Mon Sep 17 00:00:00 2001 From: Justin D'Arcangelo Date: Sat, 18 Jun 2011 05:52:24 -0400 Subject: [PATCH] Added font loading in the multi-page viewer. Added support for changing the zoom/scale factor. --- multi-page-viewer.css | 7 ++-- multi-page-viewer.html | 19 ++++++++--- multi-page-viewer.js | 74 ++++++++++++++++++++++++++++++++++++++---- 3 files changed, 86 insertions(+), 14 deletions(-) diff --git a/multi-page-viewer.css b/multi-page-viewer.css index 488b10bd9..013ca6aaf 100644 --- a/multi-page-viewer.css +++ b/multi-page-viewer.css @@ -2,6 +2,7 @@ /* vim: set shiftwidth=4 tabstop=8 autoindent cindent expandtab: */ body { + background-color: #929292; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; margin: 0px; padding: 0px; @@ -17,6 +18,10 @@ span { font-size: 0.8em; } +.control { + margin: 0px 20px 0px 0px; +} + .page { width: 816px; height: 1056px; @@ -43,8 +48,6 @@ span { } #viewer { - background-color: #929292; margin: 32px 0px 0px; padding: 8px 0px; - width: 100%; } diff --git a/multi-page-viewer.html b/multi-page-viewer.html index a166f7fd4..6afe645a1 100644 --- a/multi-page-viewer.html +++ b/multi-page-viewer.html @@ -10,11 +10,20 @@
- - - - / - -- + + + + + + + / + -- + + + Zoom + + % +
diff --git a/multi-page-viewer.js b/multi-page-viewer.js index 20d2e373e..c6851e70e 100644 --- a/multi-page-viewer.js +++ b/multi-page-viewer.js @@ -48,7 +48,9 @@ var PDFViewer = { var div = document.createElement('div'); div.id = 'pageContainer' + num; - div.className = 'page'; + div.className = 'page'; + div.style.width = PDFViewer.pageWidth() + 'px'; + div.style.height = PDFViewer.pageHeight() + 'px'; PDFViewer.element.appendChild(anchor); PDFViewer.element.appendChild(div); @@ -76,8 +78,8 @@ var PDFViewer = { // Canvas dimensions must be specified in CSS pixels. CSS pixels // are always 96 dpi. These dimensions are 8.5in x 11in at 96dpi. - canvas.width = 816; - canvas.height = 1056; + canvas.width = PDFViewer.pageWidth(); + canvas.height = PDFViewer.pageHeight(); var ctx = canvas.getContext('2d'); ctx.save(); @@ -91,15 +93,67 @@ var PDFViewer = { // page.compile will collect all fonts for us, once we have loaded them // we can trigger the actual page rendering with page.display page.compile(gfx, fonts); - - // This should be called when font loading is complete - page.display(gfx); + var fontsReady = true; + + // Inspect fonts and translate the missing one + var fontCount = fonts.length; + + for (var i = 0; i < fontCount; i++) { + var font = fonts[i]; + + if (Fonts[font.name]) { + fontsReady = fontsReady && !Fonts[font.name].loading; + continue; + } + + new Font(font.name, font.file, font.properties); + + fontsReady = false; + } + + var pageInterval; + var delayLoadFont = function() { + for (var i = 0; i < fontCount; i++) { + if (Fonts[font.name].loading) { + return; + } + } + + clearInterval(pageInterval); + + PDFViewer.drawPage(num); + } + + if (!fontsReady) { + pageInterval = setInterval(delayLoadFont, 10); + return; + } + + page.display(gfx); div.appendChild(canvas); } } }, - + + changeScale: function(num) { + while (PDFViewer.element.childNodes.length > 0) { + PDFViewer.element.removeChild(PDFViewer.element.firstChild); + } + + PDFViewer.scale = num / 100; + + if (PDFViewer.pdf) { + for (var i = 1; i <= PDFViewer.numberOfPages; i++) { + PDFViewer.createPage(i); + } + + if (PDFViewer.numberOfPages > 0) { + PDFViewer.drawPage(1); + } + } + }, + goToPage: function(num) { if (0 <= num && num <= PDFViewer.numberOfPages) { PDFViewer.pageNumber = num; @@ -225,7 +279,13 @@ window.onload = function() { var nextPageButton = document.getElementById('nextPageButton'); nextPageButton.onclick = PDFViewer.goToNextPage; + var scaleInput = document.getElementById('scale'); + scaleInput.onchange = function(evt) { + PDFViewer.changeScale(this.value); + }; + PDFViewer.pageNumber = parseInt(PDFViewer.queryParams.page) || PDFViewer.pageNumber; + PDFViewer.scale = parseInt(scaleInput.value) / 100 || 1.0; PDFViewer.open(PDFViewer.queryParams.file || PDFViewer.url); window.onscroll = function(evt) {