diff --git a/css/styles.css b/css/styles.css index bffaf6c..ead1d80 100644 --- a/css/styles.css +++ b/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; diff --git a/lib/ComicBook.js b/lib/ComicBook.js index 38b4cd3..4942107 100755 --- a/lib/ComicBook.js +++ b/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; diff --git a/lib/ComicBook.min.js b/lib/ComicBook.min.js index 820581e..a686b3e 100644 --- a/lib/ComicBook.min.js +++ b/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)),color:$(document.createElement("div")).attr("id","cb-color").addClass("cb-control").append("").append($("
").slider({value:0,step:10,min:-1E3,max:1E3,change:function(a,b){ComicBook.prototype.enhance.brightness({brightness:b.value})}})).append("").append($("
").slider({value:0, step:0.0010,min:0,max:1,change:function(a,b){ComicBook.prototype.enhance.brightness({contrast:b.value})}})).append("").append($("
").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(" ").append("")), @@ -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"&&m3&&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"&&m3&&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"&&d0&&(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"&&mh.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