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

2
web/viewer.html
View File

@ -144,7 +144,7 @@
<div id="loadingBox">
<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 id="viewer"></div>
</body>

21
web/viewer.js
View File

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