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

now only using the newer onhaschange event for back button, will re-enable setInterval method for older browsers later. also tweaked preloading to allow comics to be opened from any page and loaded from there.

Browse source
This commit is contained in:
Bala Clark 2010-12-25 11:19:19 +01:00
parent 92e2f47f18
commit e396f65748
1 changed files with 30 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

51
lib/ComicBook.js
View file

@ -59,23 +59,24 @@ function ComicBook(id, srcs, opts) {
var pages = []; // array of preloaded Image objects var pages = []; // array of preloaded Image objects
var canvas; // the HTML5 canvas object var canvas; // the HTML5 canvas object
var context; // the 2d drawing context var context; // the 2d drawing context
var buffer = 1; // image preload buffer level
var buffer = 4; // image preload buffer level var loaded = []; // the images that have been loaded so far
var loaded = 0; // the amount of images that have been loaded so far
var scale = 1; // page zoom scale, 1 = 100% var scale = 1; // page zoom scale, 1 = 100%
// the current page, can pass a default as a url hash // the current page, can pass a default as a url hash
var pointer = (parseInt(location.hash.substring(1),10) - 1) || 0; var pointer = (parseInt(location.hash.substring(1),10) - 1) || 0;
// enables the back button by tracking any url hash changes and loading the correct page. // enables the back button
setInterval(function() { function checkHash() {
var hash = parseInt(location.hash.substring(1),10) - 1; var hash = parseInt(location.hash.substring(1),10) - 1;
if (hash !== pointer) {
if (hash !== pointer && loaded.indexOf(hash) > -1) {
pointer = hash; pointer = hash;
ComicBook.prototype.draw(); ComicBook.prototype.draw();
} }
}, 300); }
/** /**
* Figure out the cursor position relative to the canvas. * Figure out the cursor position relative to the canvas.
* *
@ -111,7 +112,10 @@ function ComicBook(id, srcs, opts) {
context = canvas.getContext("2d"); context = canvas.getContext("2d");
// add page controls // add page controls
// TODO: add IE event listeners too.
canvas.addEventListener("click", ComicBook.prototype.navigation, false); canvas.addEventListener("click", ComicBook.prototype.navigation, false);
window.addEventListener("hashchange", checkHash, false);
//setInterval(function() { checkHash(); }, 300); // TODO: enable this when there is no onhashchange event
} }
/* /*
@ -148,8 +152,9 @@ function ComicBook(id, srcs, opts) {
if (no_pages < buffer) { buffer = no_pages; } // don't get stuck if the buffer level is higher than the number of pages if (no_pages < buffer) { buffer = no_pages; } // don't get stuck if the buffer level is higher than the number of pages
var i = 0; // 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
// show load status panel // show load status panel
if ($("#status").length === 0) { if ($("#status").length === 0) {
$(canvas).after('<div class="control" id="status"><p></p></div>'); $(canvas).after('<div class="control" id="status"><p></p></div>');
@ -167,25 +172,28 @@ function ComicBook(id, srcs, opts) {
page.onload = function () { page.onload = function () {
// console.info("loaded: " + srcs[i]);
pages[i] = this; pages[i] = this;
loaded++; loaded.push(i);
// start to load from the begining if loading started midway
if (i === no_pages-1 && loaded.length !== no_pages) {
i = -1;
}
// there are still more pages to load, do it // there are still more pages to load, do it
if (loaded < no_pages) { if (loaded.length < no_pages) {
i++; i++;
preload(i); preload(i);
} }
// start rendering the comic when the buffer level has been reached // 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 === buffer) { ComicBook.prototype.drawPage(); } if (loaded.length === pointer + buffer) { ComicBook.prototype.drawPage(); }
if (loaded === no_pages) { $("#status").fadeOut(150).remove(); } if (loaded.length === no_pages) { $("#status").fadeOut(150).remove(); }
}; };
} }
// manually trigger the first load // manually trigger the first load
if (i === 0) { preload(i); } preload(i);
}; };
/** /**
@ -336,11 +344,12 @@ function ComicBook(id, srcs, opts) {
/** /**
* Adjust brightness / contrast * Adjust brightness / contrast
* *
* options * params
* brightness (int) -150 to 150 * brightness (int) -150 to 150
* contrast: (float) -1 to infinity * contrast: (float) -1 to infinity
* *
* @param {Object} options * @param {Object} params Brightness & contrast levels
* @param {Boolean} reset Reset before applying more enhancements?
*/ */
brightness: function (params, reset) { brightness: function (params, reset) {