]> git.parisson.com Git - pdf.js.git/commitdiff
projects / pdf.js.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 616b4a5)
Updated the toolbar graphics.
authorJustin D'Arcangelo <justindarc@gmail.com>
Sun, 19 Jun 2011 00:11:56 +0000 (20:11 -0400)
committerJustin D'Arcangelo <justindarc@gmail.com>
Sun, 19 Jun 2011 00:11:56 +0000 (20:11 -0400)
images/.DS_Store [new file with mode: 0644] patch | blob
images/buttons.png [new file with mode: 0644] patch | blob
images/source/.DS_Store [new file with mode: 0644] patch | blob
images/source/Buttons.psd.zip [new file with mode: 0644] patch | blob
multi-page-viewer.css patch | blob | history
multi-page-viewer.html patch | blob | history
multi-page-viewer.js patch | blob | history

diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644 (file)
index 0000000..a1933d1
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/images/buttons.png b/images/buttons.png
new file mode 100644 (file)
index 0000000..6822126
Binary files /dev/null and b/images/buttons.png differ
diff --git a/images/source/.DS_Store b/images/source/.DS_Store
new file mode 100644 (file)
index 0000000..5008ddf
Binary files /dev/null and b/images/source/.DS_Store differ
diff --git a/images/source/Buttons.psd.zip b/images/source/Buttons.psd.zip
new file mode 100644 (file)
index 0000000..528e6ee
Binary files /dev/null and b/images/source/Buttons.psd.zip differ
diff --git a/multi-page-viewer.css b/multi-page-viewer.css
index 013ca6aafd6d11a6fbec0d1d7ee13371727fc8fb..d81deb1fc28a58d41d92bf493b2f908902fb025a 100644 (file)
--- a/multi-page-viewer.css
+++ b/multi-page-viewer.css
@@ -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 {
 #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;
 }
diff --git a/multi-page-viewer.html b/multi-page-viewer.html
index 6afe645a10297f11c7c89cdefa6f69c2ddd7c910..aec84a42f3a2f2148a2d1b2ca306b9b0920599d5 100644 (file)
--- a/multi-page-viewer.html
+++ b/multi-page-viewer.html
@@ -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>
diff --git a/multi-page-viewer.js b/multi-page-viewer.js
index c6851e70e8de943ef09426efda533541f220ef12..cc4a286fff57f2937d5ed268872b251658af3a65 100644 (file)
--- a/multi-page-viewer.js
+++ b/multi-page-viewer.js
@@ -7,6 +7,10 @@ var PDFViewer = {
     element: null,
 
     pageNumberInput: null,
+    previousPageButton: null,
+    nextPageButton: null,
+    
+    willJumpToPage: false,
 
     pdf: null,
 
@@ -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.previousPageButton.className = (PDFViewer.pageNumber === 1) ?
+                'disabled' : '';
+            PDFViewer.nextPageButton.className = (PDFViewer.pageNumber === PDFViewer.numberOfPages) ?
+                'disabled' : '';
         }
-    
-        PDFViewer.pageNumberInput.value = PDFViewer.pageNumber;
-        document.location.hash = PDFViewer.pageNumber;
     },
   
     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() {
         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) {
@@ -288,7 +324,7 @@ window.onload = function() {
     PDFViewer.scale = parseInt(scaleInput.value) / 100 || 1.0;
     PDFViewer.open(PDFViewer.queryParams.file || PDFViewer.url);
 
-    window.onscroll = function(evt) {
+    window.onscroll = function(evt) {        
         var lastPagesDrawn = PDFViewer.lastPagesDrawn;
         var visiblePages = PDFViewer.visiblePages();
         
@@ -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;
+        }
     };
 };
Unnamed repository; edit this file 'description' to name the repository.