From d2f463bf7c1a912c9616a3c90c135d622c5da626 Mon Sep 17 00:00:00 2001 From: gigaherz Date: Wed, 21 Mar 2012 23:36:10 +0100 Subject: [PATCH 1/6] Add a progressbar to the loading indicator, below the text. --- web/viewer.css | 20 +++++++++++++++++- web/viewer.html | 5 ++++- web/viewer.js | 54 +++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 75 insertions(+), 4 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index fdce0288a..536073c34 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -391,11 +391,29 @@ canvas { } } -#loading { +#loadingBox { margin: 100px 0; text-align: center; } +#loadingBar { + display: inline-block; + border: 1px solid black; + clear: both; + padding: 1px; + margin:0px; +} + +#loadingBar #progress { + background-color: green; + display: inline-block; +} + +#loadingBar #remaining { + background-color: #333; + display: inline-block; +} + #PDFBug { font-size: 10px; position: fixed; diff --git a/web/viewer.html b/web/viewer.html index 34b2e77cb..b30b52db9 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -142,7 +142,10 @@ -
Loading... 0%
+
+
Loading... 0%
+
+
diff --git a/web/viewer.js b/web/viewer.js index 67ef67e97..b8d7b44f0 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -27,6 +27,49 @@ var Cache = function cacheCache(size) { }; }; +var ProgressBar = (function ProgressBarClosure() { + + function clamp(v, min, max) { + return Math.min(Math.max(v, min), max); + } + + 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; +})(); + var RenderingQueue = (function RenderingQueueClosure() { function RenderingQueue() { this.items = []; @@ -260,6 +303,11 @@ var PDFView = { open: function pdfViewOpen(url, scale) { 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'); + } + var self = this; PDFJS.getPdf( { @@ -400,6 +448,8 @@ var PDFView = { var percent = Math.round(level * 100); var loadingIndicator = document.getElementById('loading'); loadingIndicator.textContent = 'Loading... ' + percent + '%'; + + PDFView.loadingProgress.value = percent; }, load: function pdfViewLoad(data, scale) { @@ -414,8 +464,8 @@ var PDFView = { var errorWrapper = document.getElementById('errorWrapper'); errorWrapper.setAttribute('hidden', 'true'); - var loadingIndicator = document.getElementById('loading'); - loadingIndicator.setAttribute('hidden', 'true'); + var loadingBox = document.getElementById('loadingBox'); + loadingBox.setAttribute('hidden', 'true'); var sidebar = document.getElementById('sidebarView'); sidebar.parentNode.scrollTop = 0; From ce8b0625b18302e1a29a0d7e256e18d6f80d99db Mon Sep 17 00:00:00 2001 From: gigaherz Date: Wed, 21 Mar 2012 23:56:20 +0100 Subject: [PATCH 2/6] Cosmetic changes --- web/viewer.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index 536073c34..eac80da84 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -401,12 +401,17 @@ canvas { border: 1px solid black; clear: both; padding: 1px; - margin:0px; + line-height: 0; } #loadingBar #progress { - background-color: green; display: inline-block; + 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%); } #loadingBar #remaining { From ecaf467a1396c9e91732eba5f16ff36c702607ae Mon Sep 17 00:00:00 2001 From: gigaherz Date: Thu, 22 Mar 2012 00:05:24 +0100 Subject: [PATCH 3/6] One more cosmetic tweak and fix 'make lint' complaints. --- web/viewer.css | 1 - web/viewer.js | 16 +++++++++------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index eac80da84..b316ddcb5 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -400,7 +400,6 @@ canvas { display: inline-block; border: 1px solid black; clear: both; - padding: 1px; line-height: 0; } diff --git a/web/viewer.js b/web/viewer.js index b8d7b44f0..246577a52 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -32,14 +32,14 @@ var ProgressBar = (function ProgressBarClosure() { function clamp(v, min, max) { return Math.min(Math.max(v, min), max); } - + 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; + 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) { @@ -304,8 +304,10 @@ 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.loadingProgress) { + PDFView.loadingProgress = new ProgressBar( + document.getElementById('loadingBar'), + 0, 100, 15, 1.5, 'em'); } var self = this; From 114d2c9ebd806f1aaab2029211bcf159cef5266a Mon Sep 17 00:00:00 2001 From: gigaherz Date: Thu, 22 Mar 2012 22:51:10 +0100 Subject: [PATCH 4/6] Simplified ProgressBar class. Visual tweaks. --- web/viewer.css | 16 +++++++-- web/viewer.html | 2 +- web/viewer.js | 87 +++++++++++++++++++++++++------------------------ 3 files changed, 59 insertions(+), 46 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index b316ddcb5..e8e986804 100644 --- a/web/viewer.css +++ b/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 { diff --git a/web/viewer.html b/web/viewer.html index b30b52db9..6528d484f 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -144,7 +144,7 @@
Loading... 0%
-
+
diff --git a/web/viewer.js b/web/viewer.js index 246577a52..ad24bc0a7 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -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) { From ddf3d114d09a921af3ed626301e2da50574bbc6d Mon Sep 17 00:00:00 2001 From: gigaherz Date: Thu, 22 Mar 2012 22:57:42 +0100 Subject: [PATCH 5/6] Wrong word. --- web/viewer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/viewer.js b/web/viewer.js index ad24bc0a7..3f6fef957 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -43,7 +43,7 @@ var ProgressBar = (function ProgressBarClosure() { this.height = opts.height || 1; this.width = opts.width || 15; this.units = opts.units || 'em'; - this.percent = opts.progress || 0; + this.percent = opts.percent || 0; // Initialize heights this.progressDiv.style.height = this.height + this.units; From a094dd4746ad4572d5c0aa321cdf290066bcadc0 Mon Sep 17 00:00:00 2001 From: gigaherz Date: Tue, 27 Mar 2012 09:13:32 +0200 Subject: [PATCH 6/6] Simplified the ProgressBar a bit: made the div fixed-size, removed the unnecessary '.remaining' div, used percent size for the '.progress' div. --- web/viewer.css | 14 +++++++------- web/viewer.html | 2 +- web/viewer.js | 21 +++++++-------------- 3 files changed, 15 insertions(+), 22 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index e8e986804..9a0cf388c 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -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 { diff --git a/web/viewer.html b/web/viewer.html index 6528d484f..8b59e4ebf 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -144,7 +144,7 @@
Loading... 0%
-
+
diff --git a/web/viewer.js b/web/viewer.js index 3f6fef957..49a6cd4a3 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -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;