Merge pull request #242 from justindarc/master

Refactored toolbar buttons to use CSS

web/multi_page_viewer.css

@@ -16,6 +16,7 @@ canvas {
 
 span {
   font-size: 0.8em;
+  text-shadow: 0px 1px 0px #fff;
 }
 
 .control {
@@ -31,12 +32,12 @@ span {
   height: 20px;
   padding: 0px;
   margin: 0px 2px 0px 0px;
-  border-radius: 4px;
+  border-radius: 3px;
-  -moz-border-radius: 4px;
+  -moz-border-radius: 3px;
-  -webkit-border-radius: 4px;
+  -webkit-border-radius: 3px;
-  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
+  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3);
-  -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
+  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3);
 }
 
 .control > select {
@@ -45,12 +46,12 @@ span {
   height: 22px;
   padding: 2px 0px 0px;
   margin: 0px 0px 1px;
-  border-radius: 4px;
+  border-radius: 3px;
-  -moz-border-radius: 4px;
+  -moz-border-radius: 3px;
-  -webkit-border-radius: 4px;
+  -webkit-border-radius: 3px;
-  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
+  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3);
-  -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
+  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3);
 }
 
 .control > span {
@@ -96,6 +97,8 @@ span {
 
 #controls {
   background-color: #eee;
+  background: -moz-linear-gradient(center bottom, #ddd 0%, #fff 100%);
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #ddd), color-stop(1.0, #fff));
   border-bottom: 1px solid #666;
   padding: 4px 0px 0px 8px;
   position: fixed;
@@ -114,58 +117,121 @@ span {
   -webkit-user-select: text;
 }
 
-#previousPageButton {
+button {
-  background: url('images/buttons.png') no-repeat 0px -23px;
+  background-color: #ddd;
+  background: -moz-linear-gradient(center bottom, #c3c3c3 0%, #f3f3f3 100%);
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #c3c3c3), color-stop(1.0, #f3f3f3));
+  border: 1px solid #4d4d4d;
   cursor: default;
-  display: inline-block;
   float: left;
-  margin: 0px;
+  margin: 0px 0px 1px;
-  width: 28px;
+  width: 29px;
-  height: 23px;
+  height: 22px;
+	border-radius: 3px;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
 }
 
-#previousPageButton.down {
+button:disabled {
-  background: url('images/buttons.png') no-repeat 0px -46px;
+  background-color: #eee;
+  background: -moz-linear-gradient(center bottom, #ddd 0%, #fff 100%);
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #ddd), color-stop(1.0, #fff));
+}
+
+button:disabled > span {
+  opacity: 0.3;
+  -moz-opacity: 0.3;
+  -webkit-opacity: 0.3;
+}
+
+button.down {
+  background-color: #777;
+  background: -moz-linear-gradient(center bottom, #888 0%, #555 100%);
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #888), color-stop(1.0, #555));
+  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.8);
+  -moz-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.8);
+  -webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.8);
+}
+
+#previousPageButton {
+  width: 28px;
+  border-right: 0px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  -moz-border-radius-topright: 0px;
+  -moz-border-radius-bottomright: 0px;
+  -webkit-border-top-right-radius: 0px;
+  -webkit-border-bottom-right-radius: 0px;
 }
 
-#previousPageButton.disabled {
+#previousPageButton > span {
   background: url('images/buttons.png') no-repeat 0px 0px;
+  display: inline-block;
+  width: 19px;
+  height: 19px;
 }
 
 #nextPageButton {
-  background: url('images/buttons.png') no-repeat -28px -23px;
+  width: 28px;
-  cursor: default;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  -moz-border-radius-topleft: 0px;
+  -moz-border-radius-bottomleft: 0px;
+  -webkit-border-top-left-radius: 0px;
+  -webkit-border-bottom-left-radius: 0px;
+}
+
+#nextPageButton > span {
+  background: url('images/buttons.png') no-repeat -19px 0px;
   display: inline-block;
-  float: left;
+  width: 19px;
-  margin: 0px;
+  height: 19px;
+}
+
+#singleLayoutButton {
   width: 28px;
-  height: 23px;
+  border-right: 0px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  -moz-border-radius-topright: 0px;
+  -moz-border-radius-bottomright: 0px;
+  -webkit-border-top-right-radius: 0px;
+  -webkit-border-bottom-right-radius: 0px;
 }
 
-#nextPageButton.down {
+#singleLayoutButton > span {
-  background: url('images/buttons.png') no-repeat -28px -46px;
+  background: url('images/buttons.png') no-repeat -57px 0px;
+  display: inline-block;
+  width: 19px;
+  height: 19px;
 }
 
-#nextPageButton.disabled {
+#splitLayoutButton {
-  background: url('images/buttons.png') no-repeat -28px 0px;
+  width: 28px;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  -moz-border-radius-topleft: 0px;
+  -moz-border-radius-bottomleft: 0px;
+  -webkit-border-top-left-radius: 0px;
+  -webkit-border-bottom-left-radius: 0px;
 }
 
-#openFileButton {
+#splitLayoutButton > span {
-  background: url('images/buttons.png') no-repeat -56px -23px;
+  background: url('images/buttons.png') no-repeat -76px 0px;
-  cursor: default;
   display: inline-block;
-  float: left;
+  width: 19px;
-  margin: 0px 0px 0px 3px;
+  height: 19px;
-  width: 29px;
-  height: 23px;
 }
 
-#openFileButton.down {
+#openFileButton {
-  background: url('images/buttons.png') no-repeat -56px -46px;
+  margin-left: 3px;
 }
 
-#openFileButton.disabled {
+#openFileButton > span {
-  background: url('images/buttons.png') no-repeat -56px 0px;
+  background: url('images/buttons.png') no-repeat -38px 0px;
+  display: inline-block;
+  width: 19px;
+  height: 19px;
 }
 
 #fileInput {

web/multi_page_viewer.html

@@ -14,8 +14,8 @@
 <body>
   <div id="controls">
     <span class="control">
-      <span id="previousPageButton" class="disabled"></span>
+      <button id="previousPageButton" disabled="disabled"><span></span></button>
-      <span id="nextPageButton" class="disabled"></span>
+      <button id="nextPageButton" disabled="disabled"><span></span></button>
       <span class="label">Previous/Next</span>
     </span>
     <span class="control">
@@ -35,8 +35,18 @@
       </select>
       <span class="label">Zoom</span>
     </span>
+    
+    <!-- WIP: Leave commented out until implemented -->
+    <!--
+    <span class="control">
+      <button id="singleLayoutButton" class="selected"><span></span></button>
+      <button id="splitLayoutButton"><span></span></button>
+      <span class="label">Page Layout</span>
+    </span>
+    -->
+    
     <span class="control" id="fileWrapper">
-      <span id="openFileButton"></span>
+      <button id="openFileButton"><span></span></button>
       <input type="file" id="fileInput"/>
       <span class="label">Open File</span>
     </span>

web/multi_page_viewer.js

@@ -243,10 +243,8 @@ var PDFViewer = {
         setTimeout(window.onscroll, 0);
       document.location.hash = PDFViewer.pageNumber;
 
-      PDFViewer.previousPageButton.className =
+      PDFViewer.previousPageButton.disabled = (PDFViewer.pageNumber === 1);
-        (PDFViewer.pageNumber === 1) ? 'disabled' : '';
+      PDFViewer.nextPageButton.disabled = (PDFViewer.pageNumber === PDFViewer.numberOfPages);
-      PDFViewer.nextPageButton.className =
-        (PDFViewer.pageNumber === PDFViewer.numberOfPages) ? 'disabled' : '';
     }
   },
 
@@ -333,10 +331,8 @@ var PDFViewer = {
       }).bind(this), 500);
     }
 
-    PDFViewer.previousPageButton.className =
+    PDFViewer.previousPageButton.disabled = (PDFViewer.pageNumber === 1);
-      (PDFViewer.pageNumber === 1) ? 'disabled' : '';
+    PDFViewer.nextPageButton.disabled = (PDFViewer.pageNumber === PDFViewer.numberOfPages);
-    PDFViewer.nextPageButton.className =
-      (PDFViewer.pageNumber === PDFViewer.numberOfPages) ? 'disabled' : '';
   }
 };
 
@@ -404,42 +400,30 @@ window.onload = function() {
 
   PDFViewer.previousPageButton = document.getElementById('previousPageButton');
   PDFViewer.previousPageButton.onclick = function(evt) {
-    if (this.className.indexOf('disabled') === -1) {
+    PDFViewer.goToPreviousPage();
-      PDFViewer.goToPreviousPage();
-    }
   };
   PDFViewer.previousPageButton.onmousedown = function(evt) {
-    if (this.className.indexOf('disabled') === -1) {
+    this.className = 'down';
-      this.className = 'down';
-    }
   };
   PDFViewer.previousPageButton.onmouseup = function(evt) {
-    this.className =
+    this.className = '';
-      (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
   };
   PDFViewer.previousPageButton.onmouseout = function(evt) {
-    this.className =
+    this.className = '';
-      (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
   };
 
   PDFViewer.nextPageButton = document.getElementById('nextPageButton');
   PDFViewer.nextPageButton.onclick = function(evt) {
-    if (this.className.indexOf('disabled') === -1) {
+    PDFViewer.goToNextPage();
-      PDFViewer.goToNextPage();
-    }
   };
   PDFViewer.nextPageButton.onmousedown = function(evt) {
-    if (this.className.indexOf('disabled') === -1) {
+    this.className = 'down';
-      this.className = 'down';
-    }
   };
   PDFViewer.nextPageButton.onmouseup = function(evt) {
-    this.className =
+    this.className = '';
-      (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
   };
   PDFViewer.nextPageButton.onmouseout = function(evt) {
-    this.className =
+    this.className = '';
-      (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
   };
 
   PDFViewer.scaleSelect = document.getElementById('scaleSelect');
@@ -450,22 +434,16 @@ window.onload = function() {
   if (window.File && window.FileReader && window.FileList && window.Blob) {
     var openFileButton = document.getElementById('openFileButton');
     openFileButton.onclick = function(evt) {
-      if (this.className.indexOf('disabled') === -1) {
+      PDFViewer.fileInput.click();
-        PDFViewer.fileInput.click();
-      }
     };
     openFileButton.onmousedown = function(evt) {
-      if (this.className.indexOf('disabled') === -1) {
+      this.className = 'down';
-        this.className = 'down';
-      }
     };
     openFileButton.onmouseup = function(evt) {
-      this.className =
+      this.className = '';
-        (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
     };
     openFileButton.onmouseout = function(evt) {
-      this.className =
+      this.className = '';
-        (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
     };
 
     PDFViewer.fileInput = document.getElementById('fileInput');
@@ -540,10 +518,8 @@ window.onload = function() {
     // 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.previousPageButton.disabled = (PDFViewer.pageNumber === 1);
-        (PDFViewer.pageNumber === 1) ? 'disabled' : '';
+      PDFViewer.nextPageButton.disabled = (PDFViewer.pageNumber === PDFViewer.numberOfPages);
-      PDFViewer.nextPageButton.className =
-        (PDFViewer.pageNumber === PDFViewer.numberOfPages) ? 'disabled' : '';
     } else {
       PDFViewer.willJumpToPage = false;
     }