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 canvas; // the HTML5 canvas object
var context; // the 2d drawing context
var buffer = 4; // image preload buffer level
var loaded = 0; // the amount of images that have been loaded so far
var buffer = 1; // image preload buffer level
var loaded = []; // the images that have been loaded so far
var scale = 1; // page zoom scale, 1 = 100%
// the current page, can pass a default as a url hash
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.
setInterval(function() {
// enables the back button
function checkHash() {
var hash = parseInt(location.hash.substring(1),10) - 1;
if (hash !== pointer) {
if (hash !== pointer && loaded.indexOf(hash) > -1) {
pointer = hash;
ComicBook.prototype.draw();
}
}, 300);
}
/**
* Figure out the cursor position relative to the canvas.
*
@ -111,7 +112,10 @@ function ComicBook(id, srcs, opts) {
context = canvas.getContext("2d");
// add page controls
// TODO: add IE event listeners too.
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
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
if ($("#status").length === 0) {
$(canvas).after('<div class="control" id="status"><p></p></div>');
@ -167,25 +172,28 @@ function ComicBook(id, srcs, opts) {
page.onload = function () {
// console.info("loaded: " + srcs[i]);
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
if (loaded < no_pages) {
if (loaded.length < no_pages) {
i++;
preload(i);
}
// start rendering the comic when the buffer level has been reached
if (loaded === buffer) { ComicBook.prototype.drawPage(); }
if (loaded === no_pages) { $("#status").fadeOut(150).remove(); }
// 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.length === pointer + buffer) { ComicBook.prototype.drawPage(); }
if (loaded.length === no_pages) { $("#status").fadeOut(150).remove(); }
};
}
// manually trigger the first load
if (i === 0) { preload(i); }
preload(i);
};
/**
@ -336,11 +344,12 @@ function ComicBook(id, srcs, opts) {
/**
* Adjust brightness / contrast
*
* options
* params
* brightness (int) -150 to 150
* 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) {