Added font loading in the multi-page viewer. Added support for changing the zoom/scale factor.

14 years ago · 87fef70bbf
3 changed files with 86 additions and 14 deletions
--- a/multi-page-viewer.css
+++ b/multi-page-viewer.css
@ -2,6 +2,7 @@
				@@ -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 {
				@@ -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 {
				@@ -43,8 +48,6 @@ span {
 }

 #viewer {
-    background-color: #929292;
    margin: 32px 0px 0px;
    padding: 8px 0px;
-    width: 100%;
 }
--- a/multi-page-viewer.html
+++ b/multi-page-viewer.html
@ -10,11 +10,20 @@
				@@ -10,11 +10,20 @@
 </head>
 <body>
    <div id="controls">
+        <span class="control">
            <button id="previousPageButton">Previous</button>
            <button id="nextPageButton">Next</button>
+        </span>
+        <span class="control">
            <input type="text" id="pageNumber" value="1" size="2"/>
            <span>/</span>
            <span id="numPages">--</span>
+        </span>
+        <span class="control">
+            <span>Zoom</span>
+            <input type="text" id="scale" value="100" size="2"/>
+            <span>%</span>
+        </span>
    </div>
    <div id="viewer"></div>
 </body>
--- a/multi-page-viewer.js
+++ b/multi-page-viewer.js
@ -49,6 +49,8 @@ var PDFViewer = {
				@@ -49,6 +49,8 @@ var PDFViewer = {
        var div = document.createElement('div');
        div.id = 'pageContainer' + num;
        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 = {
				@@ -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();
@ -92,14 +94,66 @@ var PDFViewer = {
				@@ -92,14 +94,66 @@ var PDFViewer = {
                // 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() {
				@@ -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) {