]> git.parisson.com Git - pdf.js.git/commitdiff
Replaced zoom control with standard HTML <select/> control.
authorJustin D'Arcangelo <justindarc@gmail.com>
Tue, 21 Jun 2011 01:08:50 +0000 (21:08 -0400)
committerJustin D'Arcangelo <justindarc@gmail.com>
Tue, 21 Jun 2011 01:08:50 +0000 (21:08 -0400)
images/combobox.png [deleted file]
images/source/ComboBox.psd.zip [deleted file]
multi-page-viewer.css
multi-page-viewer.html
multi-page-viewer.js

diff --git a/images/combobox.png b/images/combobox.png
deleted file mode 100644 (file)
index f1527d6..0000000
Binary files a/images/combobox.png and /dev/null differ
diff --git a/images/source/ComboBox.psd.zip b/images/source/ComboBox.psd.zip
deleted file mode 100644 (file)
index 232604c..0000000
Binary files a/images/source/ComboBox.psd.zip and /dev/null differ
index c965674650e5f4ee5bb5132c6e1ab93ab93a4793..f9a7837b17adcfc354a48f01f9c50ac7454d7818 100644 (file)
@@ -27,7 +27,30 @@ span {
 
 .control > input {
     float: left;
+    border: 1px solid #4d4d4d;
+    height: 20px;
+    padding: 0px;
     margin: 0px 2px 0px 0px;
+    border-radius: 4px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
+    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
+    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
+}
+
+.control > select {
+    float: left;
+    border: 1px solid #4d4d4d;
+    height: 22px;
+    padding: 2px 0px 0px;
+    margin: 0px 0px 1px;
+    border-radius: 4px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
+    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
+    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
 }
 
 .control > span {
@@ -79,7 +102,7 @@ span {
 
 #previousPageButton {
     background: url('images/buttons.png') no-repeat 0px -23px;
-    cursor: pointer;
+    cursor: default;
     display: inline-block;
     float: left;
     margin: 0px;
@@ -97,7 +120,7 @@ span {
 
 #nextPageButton {
     background: url('images/buttons.png') no-repeat -28px -23px;
-    cursor: pointer;
+    cursor: default;
     display: inline-block;
     float: left;
     margin: 0px;
@@ -113,68 +136,7 @@ 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;
-    color: #fff;
-}
-
-#pageNumber, #scale {
+#pageNumber {
     text-align: right;
 }
 
index 692cfb1c4009a12f2afddd744128644bdc48441a..4e15cf4f87cc8e5897f31f239c1c8b9d48c8171b 100644 (file)
@@ -2,7 +2,8 @@
 <html>
 <head>
 <title>pdf.js Multi-Page Viewer</title>
-<link rel="stylesheet" href="multi-page-viewer.css" type="text/css" media="screen" charset="utf-8"/>
+<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
+<link rel="stylesheet" href="multi-page-viewer.css" type="text/css" media="screen"/>
 <script type="text/javascript" src="pdf.js"></script>
 <script type="text/javascript" src="fonts.js"></script>
 <script type="text/javascript" src="glyphlist.js"></script>
@@ -11,7 +12,8 @@
 <body>
     <div id="controls">
         <span class="control">
-            <span id="previousPageButton"></span><span id="nextPageButton"></span>
+            <span id="previousPageButton" class="disabled"></span>
+            <span id="nextPageButton" class="disabled"></span>
             <span class="label">Previous/Next</span>
         </span>
         <span class="control">
             <span class="label">Page Number</span>
         </span>
         <span class="control">
-            <span id="scaleComboBoxInput"><input type="text" id="scale" value="100%" size="2"/></span><span id="scaleComboBoxButton"></span>
+            <select id="scaleSelect">
+                <option value="50">50%</option>
+                <option value="75">75%</option>
+                <option value="100" selected="selected">100%</option>
+                <option value="125">125%</option>
+                <option value="150">150%</option>
+                <option value="200">200%</option>
+            </select>
             <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>
index 6cb46a08ae6e5185be82ef5f71e5e84b12dc66fd..9d9cec702a8096abd7087a5fe79bf90d0f1e6c03 100644 (file)
@@ -11,7 +11,7 @@ var PDFViewer = {
     previousPageButton: null,
     nextPageButton: null,
     pageNumberInput: null,
-    scaleInput: null,
+    scaleSelect: null,
     
     willJumpToPage: false,
 
@@ -66,92 +66,103 @@ var PDFViewer = {
     removePage: function(num) {
         var div = document.getElementById('pageContainer' + num);
         
-        if (div && div.hasChildNodes()) {
-            while (div.childNodes.length > 0) {
+        if (div) {
+            while (div.hasChildNodes()) {
                 div.removeChild(div.firstChild);
             }
         }
     },
 
     drawPage: function(num) {
-        if (PDFViewer.pdf) {
-            var page = PDFViewer.pdf.getPage(num);
-            var div = document.getElementById('pageContainer' + num);
-            
-            if (div && !div.hasChildNodes()) {
-                var canvas = document.createElement('canvas');
-                canvas.id = 'page' + num;
-                canvas.mozOpaque = true;
-
-                // 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 = PDFViewer.pageWidth();
-                canvas.height = PDFViewer.pageHeight();
-
-                var ctx = canvas.getContext('2d');
-                ctx.save();
-                ctx.fillStyle = 'rgb(255, 255, 255)';
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-                ctx.restore();
-
-                var gfx = new CanvasGraphics(ctx);
-                var fonts = [];
+        if (!PDFViewer.pdf) {
+            return;
+        }
         
-                // 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);
-                
-                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;
-                    }
+        var div = document.getElementById('pageContainer' + num);
+        var canvas = document.createElement('canvas');
+        
+        if (div && !div.hasChildNodes()) {
+            div.appendChild(canvas);
+            
+            var page = PDFViewer.pdf.getPage(num);
+
+            canvas.id = 'page' + num;
+            canvas.mozOpaque = true;
 
-                    new Font(font.name, font.file, font.properties);
-                    
-                    fontsReady = false;
+            // 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 = PDFViewer.pageWidth();
+            canvas.height = PDFViewer.pageHeight();
+
+            var ctx = canvas.getContext('2d');
+            ctx.save();
+            ctx.fillStyle = 'rgb(255, 255, 255)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.restore();
+
+            var gfx = new CanvasGraphics(ctx);
+            var fonts = [];
+        
+            // 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);
+        
+            var areFontsReady = 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]) {
+                    areFontsReady = areFontsReady && !Fonts[font.name].loading;
+                    continue;
                 }
 
-                var pageInterval;
-                var delayLoadFont = function() {
-                    for (var i = 0; i < fontCount; i++) {
-                        if (Fonts[font.name].loading) {
-                            return;
-                        }
-                    }
-                    
-                    clearInterval(pageInterval);
+                new Font(font.name, font.file, font.properties);
+            
+                areFontsReady = false;
+            }
 
-                    PDFViewer.drawPage(num);
+            var pageInterval;
+            
+            var delayLoadFont = function() {
+                for (var i = 0; i < fontCount; i++) {
+                    if (Fonts[font.name].loading) {
+                        return;
+                    }
                 }
 
-                if (!fontsReady) {
-                    pageInterval = setInterval(delayLoadFont, 10);
-                    return;
+                clearInterval(pageInterval);
+                
+                while (div.hasChildNodes()) {
+                    div.removeChild(div.firstChild);
                 }
+                
+                PDFViewer.drawPage(num);
+            }
 
-                page.display(gfx);
-                div.appendChild(canvas);
+            if (!areFontsReady) {
+                pageInterval = setInterval(delayLoadFont, 10);
+                return;
             }
+
+            page.display(gfx);
         }
     },
 
     changeScale: function(num) {
-        while (PDFViewer.element.childNodes.length > 0) {
+        while (PDFViewer.element.hasChildNodes()) {
             PDFViewer.element.removeChild(PDFViewer.element.firstChild);
         }
 
         PDFViewer.scale = num / 100;
 
+        var i;
+
         if (PDFViewer.pdf) {
-            for (var i = 1; i <= PDFViewer.numberOfPages; i++) {
+            for (i = 1; i <= PDFViewer.numberOfPages; i++) {
                 PDFViewer.createPage(i);
             }
 
@@ -160,7 +171,21 @@ var PDFViewer = {
             }
         }
 
-        PDFViewer.scaleInput.value = Math.floor(PDFViewer.scale * 100) + '%';
+        for (i = 0; i < PDFViewer.scaleSelect.childNodes; i++) {
+            var option = PDFViewer.scaleSelect.childNodes[i];
+            
+            if (option.value == num) {
+                if (!option.selected) {
+                    option.selected = 'selected';
+                }
+            } else {
+                if (option.selected) {
+                    option.removeAttribute('selected');
+                }
+            }
+        }
+        
+        PDFViewer.scaleSelect.value = Math.floor(PDFViewer.scale * 100) + '%';
     },
 
     goToPage: function(num) {
@@ -217,6 +242,11 @@ var PDFViewer = {
                 if (PDFViewer.numberOfPages > 0) {
                     PDFViewer.drawPage(1);
                 }
+                
+                PDFViewer.previousPageButton.className = (PDFViewer.pageNumber === 1) ?
+                     'disabled' : '';
+                 PDFViewer.nextPageButton.className = (PDFViewer.pageNumber === PDFViewer.numberOfPages) ?
+                     'disabled' : '';
             }
         };
     
@@ -320,40 +350,14 @@ window.onload = function() {
         this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
     };
 
-    PDFViewer.scaleInput = document.getElementById('scale');
-    PDFViewer.scaleInput.buttonElement = document.getElementById('scaleComboBoxButton');
-    PDFViewer.scaleInput.buttonElement.listElement = document.getElementById('scaleComboBoxList');
-    PDFViewer.scaleInput.onchange = function(evt) {
+    PDFViewer.scaleSelect = document.getElementById('scaleSelect');
+    PDFViewer.scaleSelect.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(PDFViewer.scaleInput.value) / 100 || 1.0;
+    PDFViewer.scale = parseInt(PDFViewer.scaleSelect.value) / 100 || 1.0;
+    
     PDFViewer.open(PDFViewer.queryParams.file || PDFViewer.url);
 
     window.onscroll = function(evt) {