Simplified ProgressBar class. Visual tweaks.

web/viewer.css

@@ -400,22 +400,32 @@ canvas {
   display: inline-block;
   border: 1px solid black;
   clear: both;
+  margin:0px;
   line-height: 0;
+  border-radius: 4px;
 }
 
-#loadingBar #progress {
+#loadingBar .progress {
+  background-color: green;
   display: inline-block;
+  
+  background: #b4e391;
   background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391));
   background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
   background: -o-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
   background: -ms-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
-  background: linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);  
+  background: linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);    
+
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
 }
 
-#loadingBar #remaining {
+#loadingBar .remaining {
   background-color: #333;
   display: inline-block;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
 }
 
 #PDFBug {

web/viewer.html

@@ -144,7 +144,7 @@
 
     <div id="loadingBox">
         <div id="loading">Loading... 0%</div>
-        <div id="loadingBar"><div id="progress"></div><div id="remaining"></div></div>
+        <div id="loadingBar"><div class="progress"></div><div class="remaining"></div></div>
     </div>
     <div id="viewer"></div>
   </body>

web/viewer.js

@@ -29,45 +29,49 @@ var Cache = function cacheCache(size) {
 
 var ProgressBar = (function ProgressBarClosure() {
 
-    function clamp(v, min, max) {
+  function clamp(v, min, max) {
-        return Math.min(Math.max(v, min), max);
+    return Math.min(Math.max(v, min), max);
+  }
+
+  function ProgressBar(id, opts) {
+
+    // Fetch the sub-elements for later
+    this.progressDiv = document.querySelector(id + ' .progress');
+    this.remainingDiv = document.querySelector(id + ' .remaining');
+
+    // Get options, with sensible defaults
+    this.height = opts.height || 1;
+    this.width = opts.width || 15;
+    this.units = opts.units || 'em';
+    this.percent = opts.progress || 0;
+
+    // Initialize heights
+    this.progressDiv.style.height = this.height + this.units;
+    this.remainingDiv.style.height = this.height + this.units;
+  }
+
+  ProgressBar.prototype = {
+    constructor: ProgressBar,
+
+    updateBar: function ProgressBar_updateBar() {
+      var progressSize = this.width * this._percent / 100;
+      var remainingSize = (this.width - progressSize);
+
+      this.progressDiv.style.width = progressSize + this.units;
+      this.remainingDiv.style.width = remainingSize + this.units;
+    },
+
+    get percent() {
+      return this._percent;
+    },
+
+    set percent(val) {
+      this._percent = clamp(val, 0, 100);
+      this.updateBar();
     }
+  };
 
-    function sizeBar(bar, num, width, height, units) {
+  return ProgressBar;
-        var progress = bar.querySelector('#progress');
-        var remaining = bar.querySelector('#remaining');
-        progress.style.height = height + units;
-        remaining.style.height = height + units;
-        progress.style.width = num + units;
-        remaining.style.width = (width - num) + units;
-    }
-
-    function ProgressBar(element, min, max, width, height, units) {
-        this.element = element;
-        this.min = min;
-        this.max = max;
-        this.width = width;
-        this.height = height;
-        this.units = units;
-        this.value = min;
-        sizeBar(element, 0, this.width, this.height, this.units);
-    }
-
-    ProgressBar.prototype = {
-        constructor: ProgressBar,
-
-        get value() {
-            return this._value;
-        },
-
-        set value(val) {
-            this._value = clamp(val, this.min, this.max);
-            var num = this.width * (val - this.min) / (this.max - this.min);
-            sizeBar(this.element, num, this.width, this.height, this.units);
-        }
-    };
-
-    return ProgressBar;
 })();
 
 var RenderingQueue = (function RenderingQueueClosure() {
@@ -304,10 +308,9 @@ var PDFView = {
     document.title = this.url = url;
 
     // FIXME: Probably needs a better place to get initialized
-    if (!PDFView.loadingProgress) {
+    if (!PDFView.loadingBar) {
-      PDFView.loadingProgress = new ProgressBar(
+      PDFView.loadingBar = new ProgressBar('#loadingBar', {
-            document.getElementById('loadingBar'),
+        width: 15, height: 1.5, units: 'em'});
-            0, 100, 15, 1.5, 'em');
     }
 
     var self = this;
@@ -451,7 +454,7 @@ var PDFView = {
     var loadingIndicator = document.getElementById('loading');
     loadingIndicator.textContent = 'Loading... ' + percent + '%';
 
-    PDFView.loadingProgress.value = percent;
+    PDFView.loadingBar.percent = percent;
   },
 
   load: function pdfViewLoad(data, scale) {