loading progress bar

css/styles.css

@@ -77,6 +77,16 @@
 	border-radius: 4px;
 }
 
+#cb-progress-bar {
+	width: 200px;
+	height: 3px;
+}
+
+#cb-progress-bar .ui-widget-header {
+	background: #86C441;
+	border-color: #3E7600;
+}
+
 #cb-toolbar #cb-comic-info {
 	float: right;
 	line-height: 24px;

lib/ComicBook.js

@@ -8,7 +8,6 @@
 		- trigger preload if requesting valid but not loaded images (can happen if network was interupted)
 		- check for html5 feature support where used: diveintohtml5.org/everything.html or www.modernizr.com
 		- when applying enhancements reading position gets lost
-		- loading bar
 		- full browser test - IE9 / FF3.6+ / Chrome / Safari / Opera
 		- don't inlcude the closure compiler, expect it (or similar) to be installed instead
 
@@ -184,9 +183,14 @@ function ComicBook(id, srcs, opts) {
 	 */
 	ComicBook.prototype.control = {
 
-		status: $(document.createElement("p"))
+		status: $(document.createElement("div"))
 			.attr("id", "cb-status")
-			.addClass("cb-control cb-always-on"),
+			.addClass("cb-control cb-always-on")
+			.append(
+				$(document.createElement("div"))
+					.attr("id", "cb-progress-bar")
+					.progressbar()
+			),
 
 		toolbar: $(document.createElement("div"))
 			.attr("id", "cb-toolbar")
@@ -466,7 +470,7 @@ function ComicBook(id, srcs, opts) {
 
 				var percentage_loaded = Math.floor((loaded.length / no_pages) * 100);
 
-				$("#cb-status").text("loading " + percentage_loaded + "%");
+				$("#cb-progress-bar").progressbar("value", percentage_loaded);
 
 				// double page mode needs an extra page added
 				var buffer = (options.displayMode === "double" && pointer < srcs.length-1) ? 1 : 0;

lib/ComicBook.min.js

@@ -18,8 +18,8 @@ Pixastic.Actions.sharpen={process:function(d){var b=0;typeof d.options.amount!="
 4,s=o+(c==d?c-1:c)*4,t=(-e[f]-e[r-4]-e[r+4]-e[s])*b+e[r]*q,v=(-e[f+1]-e[r-3]-e[r+5]-e[s+1])*b+e[r+1]*q,f=(-e[f+2]-e[r-2]-e[r+6]-e[s+2])*b+e[r+2]*q;t<0&&(t=0);v<0&&(v=0);f<0&&(f=0);t>255&&(t=255);v>255&&(v=255);f>255&&(f=255);k[r]=t;k[r+1]=v;k[r+2]=f}while(--c)}while(--l);return!0}},checkSupport:function(){return Pixastic.Client.hasCanvasImageData()}};function merge(d,b){var k;typeof b==="undefined"&&(b={});for(k in d)d.hasOwnProperty(k)&&!(k in b)&&(b[k]=d[k]);return b}
 var ComicBookException={INVALID_PAGE:"invalid page",INVALID_PAGE_TYPE:"invalid page type",UNDEFINED_CONTROL:"undefined control",INVALID_ZOOM_MODE:"invalid zoom mode",INVALID_NAVIGATION_EVENT:"invalid navigation event"};
 function ComicBook(d,b,k){function e(){var a=window.innerHeight+1;p===!1&&(p=$(document.createElement("div")).attr("id","cb-width-shiv").css({width:"100%",position:"absolute",top:0,zIndex:"-1000"}),$("body").append(p));p.height(a);return p.innerWidth()}function q(){var a=n();a!==m&&f.indexOf(a)>-1&&(m=a,ComicBook.prototype.draw())}function n(){var a=parseInt(location.hash.substring(1),10)-1||0;if(a<0)a=location.hash=0;return a}function h(){c=document.getElementById(l);r=c.getContext("2d");v===!1&&
-(ComicBook.prototype.renderControls(),v=!0);c.addEventListener("click",ComicBook.prototype.navigation,!1);window.addEventListener("keydown",ComicBook.prototype.navigation,!1);window.addEventListener("hashchange",q,!1)}var l=d;this.srcs=b;var a=merge({displayMode:"double",zoomMode:"fitWidth",manga:!1,enhance:{},keyboard:{next:78,previous:80,toolbar:84,toggleLayout:76}},k),g=b.length,o=[],c,r,f=[],s=1,t=!1,v=!1,w=!1,p=!1,d=n(),m=d<b.length?d:0;ComicBook.prototype.control={status:$(document.createElement("p")).attr("id",
+(ComicBook.prototype.renderControls(),v=!0);c.addEventListener("click",ComicBook.prototype.navigation,!1);window.addEventListener("keydown",ComicBook.prototype.navigation,!1);window.addEventListener("hashchange",q,!1)}var l=d;this.srcs=b;var a=merge({displayMode:"double",zoomMode:"fitWidth",manga:!1,enhance:{},keyboard:{next:78,previous:80,toolbar:84,toggleLayout:76}},k),g=b.length,o=[],c,r,f=[],s=1,t=!1,v=!1,w=!1,p=!1,d=n(),m=d<b.length?d:0;ComicBook.prototype.control={status:$(document.createElement("div")).attr("id",
-"cb-status").addClass("cb-control cb-always-on"),toolbar:$(document.createElement("div")).attr("id","cb-toolbar").addClass("cb-control").append($(document.createElement("button")).attr("title","close the toolbar").addClass("cb-close").click(function(){ComicBook.prototype.toggleToolbar()})).append($(document.createElement("button")).attr("title","switch between dual and single page modes").addClass("cb-layout "+a.displayMode).click(function(){ComicBook.prototype.toggleLayout()})).append($(document.createElement("button")).attr("title",
+"cb-status").addClass("cb-control cb-always-on").append($(document.createElement("div")).attr("id","cb-progress-bar").progressbar()),toolbar:$(document.createElement("div")).attr("id","cb-toolbar").addClass("cb-control").append($(document.createElement("button")).attr("title","close the toolbar").addClass("cb-close").click(function(){ComicBook.prototype.toggleToolbar()})).append($(document.createElement("button")).attr("title","switch between dual and single page modes").addClass("cb-layout "+a.displayMode).click(function(){ComicBook.prototype.toggleLayout()})).append($(document.createElement("button")).attr("title",
 "tweak the page colors").addClass("cb-color cb-menu-button").click(function(){ComicBook.prototype.toggleControl("color")})).append($(document.createElement("button")).attr("title","zoom out").addClass("cb-zoom-out").click(function(){ComicBook.prototype.zoom(s-0.1)})).append($(document.createElement("button")).attr("title","zoom in").addClass("cb-zoom-in").click(function(){ComicBook.prototype.zoom(s+0.1)})).append($(document.createElement("button")).attr("title","fit to page width").addClass("cb-fit-width").click(function(){a.zoomMode=
 "fitWidth";ComicBook.prototype.drawPage()})).append($(document.createElement("p")).attr("id","cb-comic-info").append("<span id='cb-current-page'></span> / "+b.length)),color:$(document.createElement("div")).attr("id","cb-color").addClass("cb-control").append("<label for='cb-sharpen'>Brightness</label>").append($("<div id='cb-brightness' class='cb-option'></div>").slider({value:0,step:10,min:-1E3,max:1E3,change:function(a,b){ComicBook.prototype.enhance.brightness({brightness:b.value})}})).append("<label for='cb-sharpen'>Contrast</label>").append($("<div id='cb-contrast' class='cb-option'></div>").slider({value:0,
 step:0.0010,min:0,max:1,change:function(a,b){ComicBook.prototype.enhance.brightness({contrast:b.value})}})).append("<label for='cb-sharpen'>Sharpen</label>").append($("<div id='cb-sharpen' class='cb-option'></div>").slider({value:0,step:0.0010,min:0,max:1,change:function(a,b){ComicBook.prototype.enhance.sharpen({amount:b.value})}})).append($(document.createElement("div")).addClass("cb-option").append("<input type='checkbox' id='cb-desaturate' /> <label for='cb-desaturate'>Desaturate</label>").append("<button id='cb-reset'>reset</button>")),
@@ -28,7 +28,7 @@ $(".cb-menu-button").click(function(){$(this).toggleClass("active")});$("#cb-des
 function(a){if(typeof this.control[a]==="undefined")throw ComicBookException.UNDEFINED_CONTROL+" "+a;return this.control[a]};ComicBook.prototype.showControl=function(a){this.getControl(a).show().addClass("open")};ComicBook.prototype.hideControl=function(a){this.getControl(a).removeClass("open").hide()};ComicBook.prototype.toggleControl=function(a){this.getControl(a).toggle().toggleClass("open")};ComicBook.prototype.toggleToolbar=function(){$("#cb-toolbar").is(":visible")?$(".cb-control").not(".cb-always-on").hide():
 $("#cb-toolbar, .cb-control.open").show()};ComicBook.prototype.toggleLayout=function(){a.displayMode==="double"?($("#cb-toolbar .cb-layout").removeClass("double"),a.displayMode="single"):($("#cb-toolbar .cb-layout").removeClass("single"),a.displayMode="double");$("#cb-toolbar .cb-layout").addClass(a.displayMode);ComicBook.prototype.drawPage()};ComicBook.prototype.getPage=function(a){if(a<0||a>b.length-1)throw ComicBookException.INVALID_PAGE+" "+a;if(typeof o[a]==="object")return o[a];else w=a,this.showControl("loadingOverlay")};
 ComicBook.prototype.draw=function(){h();$(".cb-control.cb-navigate").outerHeight(window.innerHeight);$("#cb-toolbar").outerWidth(e());$("#cb-loading-overlay").outerWidth(e()).height(window.innerHeight);o.length!==g?this.preload():this.drawPage()};ComicBook.prototype.zoom=function(b){a.zoomMode="manual";s=b;typeof this.getPage(m)==="object"&&this.drawPage()};ComicBook.prototype.preload=function(){function c(e){var u=new Image;u.src=b[e];u.onload=function(){o[e]=this;f.push(e);var c=Math.floor(f.length/
-g*100);$("#cb-status").text("loading "+c+"%");var u=a.displayMode==="double"&&m<b.length-1?1:0;if(d===!1&&$.inArray(m+u,f)!==-1||typeof w==="number"&&$.inArray(w,f)!==-1)typeof w==="number"&&(m=w-1,w=!1),ComicBook.prototype.drawPage(),ComicBook.prototype.hideControl("loadingOverlay"),d=!0;c===100&&$("#cb-status").delay(500).fadeOut()}}var e=m,d=!1;this.showControl("loadingOverlay");(function(a,b){for(var e=1,f=a,d=a-1;f<=b;)e>3&&d>-1?(c(d),d--,e=0):(c(f),f++),e++;for(;d>-1;)c(d),d--})(e,b.length-
+g*100);$("#cb-progress-bar").progressbar("value",c);var u=a.displayMode==="double"&&m<b.length-1?1:0;if(d===!1&&$.inArray(m+u,f)!==-1||typeof w==="number"&&$.inArray(w,f)!==-1)typeof w==="number"&&(m=w-1,w=!1),ComicBook.prototype.drawPage(),ComicBook.prototype.hideControl("loadingOverlay"),d=!0;c===100&&$("#cb-status").delay(500).fadeOut()}}var e=m,d=!1;this.showControl("loadingOverlay");(function(a,b){for(var e=1,f=a,d=a-1;f<=b;)e>3&&d>-1?(c(d),d--,e=0):(c(f),f++),e++;for(;d>-1;)c(d),d--})(e,b.length-
 1)};ComicBook.prototype.pageLoaded=function(a){return typeof f[a-1]!=="undefined"};ComicBook.prototype.drawPage=function(d){if(typeof d==="number"&&d<b.length&&d>0&&(m=d-1,!this.pageLoaded(d))){this.showControl("loadingOverlay");return}m<0&&(m=0);var f,g=0,k=0,h=ComicBook.prototype.getPage(m),d=!1;a.displayMode==="double"&&m<b.length-1&&(d=ComicBook.prototype.getPage(m+1));if(typeof h!=="object")throw ComicBookException.INVALID_PAGE_TYPE+" "+typeof h;var l=h.width;c.width=0;c.height=0;if(t=typeof d===
 "object"&&(h.width>h.height||d.width>d.height)&&a.displayMode==="double")a.displayMode="single";a.displayMode==="double"&&(l+=typeof d==="object"?d.width:l);switch(a.zoomMode){case "manual":document.body.style.overflowX="auto";f=a.displayMode==="double"?s*2:s;break;case "fitWidth":document.body.style.overflowX="hidden";s=f=e()>l?(e()-l)/e()+1:e()/l;break;default:throw ComicBookException.INVALID_ZOOM_MODE+" "+a.zoomMode;}var l=h.width*f,o=h.height*f;f=a.zoomMode==="manual"?h.width*s:l;var p=a.zoomMode===
 "manual"?h.height*s:o,o=p;c.width=l<e()?e():l;c.height=o<window.innerHeight?window.innerHeight:o;l<e()&&a.zoomMode==="manual"&&(g=(e()-f)/2,a.displayMode==="double"&&(g-=f/2));o<window.innerHeight&&a.zoomMode==="manual"&&(k=(window.innerHeight-p)/2);a.manga&&a.displayMode==="double"&&typeof d==="object"&&(l=h,h=d,d=l);r.drawImage(h,g,k,f,p);a.displayMode==="double"&&typeof d==="object"&&r.drawImage(d,f+g,k,f,p);$.each(a.enhance,function(a,b){ComicBook.prototype.enhance[a](b)});g=a.displayMode==="double"&&