Updated the toolbar graphics.

14 years ago · 17574e2d1c
7 changed files with 140 additions and 23 deletions
--- a/images/.DS_Store
+++ b/images/.DS_Store
--- a/images/buttons.png
+++ b/images/buttons.png
--- a/images/source/.DS_Store
+++ b/images/source/.DS_Store
--- a/images/source/Buttons.psd.zip
+++ b/images/source/Buttons.psd.zip
--- a/multi-page-viewer.css
+++ b/multi-page-viewer.css
@ -19,7 +19,35 @@ span {
				@@ -19,7 +19,35 @@ span {
 }

 .control {
+    display: inline-block;
+    float: left;
    margin: 0px 20px 0px 0px;
+    padding: 0px 4px 0px 0px;
+}
+
+.control > input {
+    float: left;
+    margin: 0px 2px 0px 0px;
+}
+
+.control > span {
+    float: left;
+    height: 18px;
+    margin: 5px 2px 0px;
+    padding: 0px;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+}
+
+.control .label {
+    clear: both;
+    float: left;
+    font-size: 0.65em;
+    margin: 2px 0px 0px;
+    position: relative;
+    text-align: center;
+    width: 100%;
 }

 .page {
@ -31,23 +59,64 @@ span {
				@@ -31,23 +59,64 @@ span {
 #controls {
    background-color: #eee;
    border-bottom: 1px solid #666;
-    padding: 4px 0px 0px 10px;
+    padding: 4px 0px 0px 8px;
    position:fixed;
    left: 0px;
    top: 0px;
-    height: 28px;
+    height: 40px;
    width: 100%;
    box-shadow: 0px 2px 8px #000;
    -moz-box-shadow: 0px 2px 8px #000;
    -webkit-box-shadow: 0px 2px 8px #000;
 }

-#pageNumber {
-    margin: 0px 0px 0px 10px;
+#controls input {
+    user-select: text;
+    -moz-user-select: text;
+    -webkit-user-select: text;
+}
+
+#previousPageButton {
+    background: url('images/buttons.png') no-repeat 0px -23px;
+    cursor: pointer;
+    display: inline-block;
+    float: left;
+    margin: 0px;
+    width: 28px;
+    height: 23px;
+}
+
+#previousPageButton.down {
+    background: url('images/buttons.png') no-repeat 0px -46px;
+}
+
+#previousPageButton.disabled {
+    background: url('images/buttons.png') no-repeat 0px 0px;
+}
+
+#nextPageButton {
+    background: url('images/buttons.png') no-repeat -28px -23px;
+    cursor: pointer;
+    display: inline-block;
+    float: left;
+    margin: 0px;
+    width: 28px;
+    height: 23px;
+}
+
+#nextPageButton.down {
+    background: url('images/buttons.png') no-repeat -28px -46px;
+}
+
+#nextPageButton.disabled {
+    background: url('images/buttons.png') no-repeat -28px 0px;
+}
+
+#pageNumber, #scale {
    text-align: right;
 }

 #viewer {
-    margin: 32px 0px 0px;
+    margin: 44px 0px 0px;
    padding: 8px 0px;
 }
--- a/multi-page-viewer.html
+++ b/multi-page-viewer.html
@ -11,18 +11,19 @@
				@@ -11,18 +11,19 @@
 <body>
    <div id="controls">
        <span class="control">
-            <button id="previousPageButton">Previous</button>
-            <button id="nextPageButton">Next</button>
+            <span id="previousPageButton"></span><span id="nextPageButton"></span>
+            <span class="label">Previous/Next</span>
        </span>
        <span class="control">
            <input type="text" id="pageNumber" value="1" size="2"/>
            <span>/</span>
            <span id="numPages">--</span>
+            <span class="label">Page Number</span>
        </span>
        <span class="control">
-            <span>Zoom</span>
            <input type="text" id="scale" value="100" size="2"/>
            <span>%</span>
+            <span class="label">Zoom</span>
        </span>
    </div>
    <div id="viewer"></div>
--- a/multi-page-viewer.js
+++ b/multi-page-viewer.js
@ -7,6 +7,10 @@ var PDFViewer = {
				@@ -7,6 +7,10 @@ var PDFViewer = {
    element: null,

    pageNumberInput: null,
+    previousPageButton: null,
+    nextPageButton: null,
+    
+    willJumpToPage: false,

    pdf: null,

@ -155,28 +159,30 @@ var PDFViewer = {
				@@ -155,28 +159,30 @@ var PDFViewer = {
    },

    goToPage: function(num) {
-        if (0 <= num && num <= PDFViewer.numberOfPages) {
+        if (1 <= num && num <= PDFViewer.numberOfPages) {
            PDFViewer.pageNumber = num;
-        }
+            PDFViewer.pageNumberInput.value = PDFViewer.pageNumber;
+            PDFViewer.willJumpToPage = true;
+
+            document.location.hash = PDFViewer.pageNumber;

-        PDFViewer.pageNumberInput.value = PDFViewer.pageNumber;
-        document.location.hash = PDFViewer.pageNumber;
+            PDFViewer.previousPageButton.className = (PDFViewer.pageNumber === 1) ?
+                'disabled' : '';
+            PDFViewer.nextPageButton.className = (PDFViewer.pageNumber === PDFViewer.numberOfPages) ?
+                'disabled' : '';
+        }
    },
  
    goToPreviousPage: function() {
        if (PDFViewer.pageNumber > 1) {
-            --PDFViewer.pageNumber;
+            PDFViewer.goToPage(--PDFViewer.pageNumber);
        }
-    
-        PDFViewer.goToPage(PDFViewer.pageNumber);
    },
  
    goToNextPage: function() {
        if (PDFViewer.pageNumber < PDFViewer.numberOfPages) {
-            ++PDFViewer.pageNumber;
+            PDFViewer.goToPage(++PDFViewer.pageNumber);
        }
-    
-        PDFViewer.goToPage(PDFViewer.pageNumber);
    },
  
    open: function(url) {
@ -273,11 +279,41 @@ window.onload = function() {
				@@ -273,11 +279,41 @@ window.onload = function() {
        this.focus();
    };

-    var previousPageButton = document.getElementById('previousPageButton');
-    previousPageButton.onclick = PDFViewer.goToPreviousPage;
+    PDFViewer.previousPageButton = document.getElementById('previousPageButton');
+    PDFViewer.previousPageButton.onclick = function(evt) {
+        if (this.className.indexOf('disabled') === -1) {
+            PDFViewer.goToPreviousPage();
+        }
+    };
+    PDFViewer.previousPageButton.onmousedown = function(evt) {
+        if (this.className.indexOf('disabled') === -1) {
+             this.className = 'down';
+        }
+    };
+    PDFViewer.previousPageButton.onmouseup = function(evt) {
+        this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
+    };
+    PDFViewer.previousPageButton.onmouseout = function(evt) {
+        this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
+    };
    
-    var nextPageButton = document.getElementById('nextPageButton');
-    nextPageButton.onclick = PDFViewer.goToNextPage;
+    PDFViewer.nextPageButton = document.getElementById('nextPageButton');
+    PDFViewer.nextPageButton.onclick = function(evt) {
+        if (this.className.indexOf('disabled') === -1) {
+            PDFViewer.goToNextPage();
+        }
+    };
+    PDFViewer.nextPageButton.onmousedown = function(evt) {
+        if (this.className.indexOf('disabled') === -1) {
+            this.className = 'down';
+        }
+    };
+    PDFViewer.nextPageButton.onmouseup = function(evt) {
+        this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
+    };
+    PDFViewer.nextPageButton.onmouseout = function(evt) {
+        this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
+    };

    var scaleInput = document.getElementById('scale');
    scaleInput.onchange = function(evt) {
@ -317,5 +353,16 @@ window.onload = function() {
				@@ -317,5 +353,16 @@ window.onload = function() {
        }
        
        PDFViewer.lastPagesDrawn = pagesToDraw.concat(pagesToKeep);
+        
+        // Update the page number input with the current page number.
+        if (!PDFViewer.willJumpToPage && visiblePages.length > 0) {
+            PDFViewer.pageNumber = PDFViewer.pageNumberInput.value = visiblePages[0];
+            PDFViewer.previousPageButton.className = (PDFViewer.pageNumber === 1) ?
+                'disabled' : '';
+            PDFViewer.nextPageButton.className = (PDFViewer.pageNumber === PDFViewer.numberOfPages) ?
+                'disabled' : '';
+        } else {
+            PDFViewer.willJumpToPage = false;
+        }
    };
 };