yetangitu/canvas-based-HTML5-Comic-Book-Reader
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

moved loading indicator to toolbar

Browse source
This commit is contained in:
Bala Clark 2011-09-01 00:25:00 +02:00
parent d6ca6736ca
commit 690ce20537
2 changed files with 17 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

9
css/styles.css
View file

@ -52,6 +52,10 @@
opacity: 0; opacity: 0;
} }
#cb-toolbar #cb-status {
float: right;
}
#cb-toolbar:hover { #cb-toolbar:hover {
opacity: 1; opacity: 1;
} }
@ -60,8 +64,3 @@
width: 200px; width: 200px;
height: 150px; height: 150px;
} }
#cb-status {
top: 0;
right: 0;
}

27
lib/ComicBook.js
View file

@ -152,17 +152,18 @@ function ComicBook(id, srcs, opts) {
canvas = document.getElementById(canvas_id); canvas = document.getElementById(canvas_id);
context = canvas.getContext("2d"); context = canvas.getContext("2d");
// render user controls
if (controlsRendered === false) {
ComicBook.prototype.renderControls();
controlsRendered = true;
}
// add page controls // add page controls
// TODO: add IE event listeners too. // TODO: add IE event listeners too.
canvas.addEventListener("click", ComicBook.prototype.navigation, false); canvas.addEventListener("click", ComicBook.prototype.navigation, false);
window.addEventListener("keydown", ComicBook.prototype.navigation, false); window.addEventListener("keydown", ComicBook.prototype.navigation, false);
window.addEventListener("hashchange", checkHash, false); window.addEventListener("hashchange", checkHash, false);
//setInterval(function() { checkHash(); }, 300); // TODO: enable this when there is no onhashchange event //setInterval(function() { checkHash(); }, 300); // TODO: enable this when there is no onhashchange event
if (controlsRendered === false) {
ComicBook.prototype.renderControls();
controlsRendered = true;
}
} }
/** /**
@ -208,7 +209,8 @@ function ComicBook(id, srcs, opts) {
.click(function(){ .click(function(){
ComicBook.prototype.zoom(scale + 0.1); ComicBook.prototype.zoom(scale + 0.1);
}) })
), )
.append("<p id='cb-status'></p>"),
/** /**
* Image enhancements * Image enhancements
@ -286,7 +288,7 @@ function ComicBook(id, srcs, opts) {
.after(this.getControl("navigation").right) .after(this.getControl("navigation").right)
.after(this.getControl("color").hide()); .after(this.getControl("color").hide());
$("#desaturate").click(function(e){ $("#desaturate").click(function(){
if ($(this).is(":checked")) { if ($(this).is(":checked")) {
ComicBook.prototype.enhance.desaturate(); ComicBook.prototype.enhance.desaturate();
} else { } else {
@ -294,7 +296,7 @@ function ComicBook(id, srcs, opts) {
} }
}); });
$("#reset").click(function(e){ $("#reset").click(function() {
// TODO: improve performance here. // TODO: improve performance here.
$("#cb-brightness").slider("value", 0) $("#cb-brightness").slider("value", 0)
$("#cb-saturation").slider("value", 0); $("#cb-saturation").slider("value", 0);
@ -390,18 +392,13 @@ function ComicBook(id, srcs, opts) {
var i = pointer; // the current page counter for this method var i = pointer; // the current page counter for this method
//if (i - buffer >= 0) { i = i - buffer; } // start loading from the first requested page - buffer //if (i - buffer >= 0) { i = i - buffer; } // start loading from the first requested page - buffer
// show load status panel
if ($("#cb-status").length === 0) {
$(canvas).after('<div class="floating cb-control" id="cb-status"><p></p></div>');
}
// I am using recursion instead of a forEach loop so that the next image is // I am using recursion instead of a forEach loop so that the next image is
// only loaded when the previous one has completely finished // only loaded when the previous one has completely finished
function preload(i) { function preload(i) {
var page = new Image(); var page = new Image();
$("#cb-status p").text("loading page " + (i + 1) + " of " + no_pages); $("#cb-status").text("loading page " + (i + 1) + " of " + no_pages);
page.src = srcs[i]; page.src = srcs[i];
@ -425,7 +422,7 @@ function ComicBook(id, srcs, opts) {
// start rendering the comic when the buffer level has been reached (FIXME: buggy, fails if trying to load the last couple of pages) // start rendering the comic when the buffer level has been reached (FIXME: buggy, fails if trying to load the last couple of pages)
if (loaded[loaded.length-1] === pointer + buffer) { ComicBook.prototype.drawPage(); } if (loaded[loaded.length-1] === pointer + buffer) { ComicBook.prototype.drawPage(); }
if (loaded.length === no_pages) { $("#cb-status").fadeOut(150).remove(); } if (loaded.length === no_pages) { $("#cb-status").remove(); }
}; };
} }