Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplified the ProgressBar a bit: made the div fixed-size, removed the unnecessary '.remaining' div, used percent size for the '.progress' div.

Browse Source
This commit is contained in:
gigaherz 2012-03-27 09:13:32 +02:00
parent ddf3d114d0
commit a094dd4746
3 changed files with 15 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/viewer.css
View File

@ -397,18 +397,22 @@ canvas {
} }
#loadingBar { #loadingBar {
background-color: #333;
display: inline-block; display: inline-block;
border: 1px solid black; border: 1px solid black;
clear: both; clear: both;
margin:0px; margin:0px;
line-height: 0; line-height: 0;
border-radius: 4px; border-radius: 4px;
width: 15em;
height: 1.5em;
} }
#loadingBar .progress { #loadingBar .progress {
background-color: green; background-color: green;
display: inline-block; display: inline-block;
float: left;
background: #b4e391; background: #b4e391;
background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%); 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-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391));
@ -419,13 +423,9 @@ canvas {
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
}
#loadingBar .remaining { width: 0%;
background-color: #333; height: 100%;
display: inline-block;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
} }
#PDFBug { #PDFBug {

2
web/viewer.html
View File

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

21
web/viewer.js
View File

@ -36,29 +36,24 @@ var ProgressBar = (function ProgressBarClosure() {
function ProgressBar(id, opts) { function ProgressBar(id, opts) {
// Fetch the sub-elements for later // Fetch the sub-elements for later
this.progressDiv = document.querySelector(id + ' .progress'); this.div = document.querySelector(id + ' .progress');
this.remainingDiv = document.querySelector(id + ' .remaining');
// Get options, with sensible defaults // Get options, with sensible defaults
this.height = opts.height || 1; this.height = opts.height || 100;
this.width = opts.width || 15; this.width = opts.width || 100;
this.units = opts.units || 'em'; this.units = opts.units || '%';
this.percent = opts.percent || 0; this.percent = opts.percent || 0;
// Initialize heights // Initialize heights
this.progressDiv.style.height = this.height + this.units; this.div.style.height = this.height + this.units;
this.remainingDiv.style.height = this.height + this.units;
} }
ProgressBar.prototype = { ProgressBar.prototype = {
constructor: ProgressBar,
updateBar: function ProgressBar_updateBar() { updateBar: function ProgressBar_updateBar() {
var progressSize = this.width * this._percent / 100; var progressSize = this.width * this._percent / 100;
var remainingSize = (this.width - progressSize);
this.progressDiv.style.width = progressSize + this.units; this.div.style.width = progressSize + this.units;
this.remainingDiv.style.width = remainingSize + this.units;
}, },
get percent() { get percent() {
@ -307,10 +302,8 @@ var PDFView = {
open: function pdfViewOpen(url, scale) { open: function pdfViewOpen(url, scale) {
document.title = this.url = url; document.title = this.url = url;
// FIXME: Probably needs a better place to get initialized
if (!PDFView.loadingBar) { if (!PDFView.loadingBar) {
PDFView.loadingBar = new ProgressBar('#loadingBar', { PDFView.loadingBar = new ProgressBar('#loadingBar', {});
width: 15, height: 1.5, units: 'em'});
} }
var self = this; var self = this;