mirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-20 15:18:08 +02:00
Code Activity

Simplified ProgressBar class. Visual tweaks.

Browse source
This commit is contained in:
gigaherz 2012-03-22 22:51:10 +01:00
parent cb06c98319
commit 114d2c9ebd
3 changed files with 59 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

16
web/viewer.css
View file

@ -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 {

2
web/viewer.html
View file

@ -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>

87
web/viewer.js
View file

@ -29,45 +29,49 @@ var Cache = function cacheCache(size) {
var ProgressBar = (function ProgressBarClosure() {
function clamp(v, min, max) {
return Math.min(Math.max(v, min), max);
function clamp(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) {
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;
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) {
PDFView.loadingProgress = new ProgressBar(
document.getElementById('loadingBar'),
0, 100, 15, 1.5, 'em');
if (!PDFView.loadingBar) {
PDFView.loadingBar = new ProgressBar('#loadingBar', {
width: 15, height: 1.5, units: '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) {