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

refactored a little after running through jslint

Browse source
This commit is contained in:
Bala Clark 2010-07-09 16:22:16 +01:00
parent b0c0016c0a
commit 2dbbca3539
1 changed files with 275 additions and 273 deletions
Download patch file Download diff file Expand all files Collapse all files

184
scripts.js
View file

@ -1,3 +1,4 @@
/*jslint on: true, eqeqeq: true */
/* /*
TODOs: TODOs:
@ -19,53 +20,73 @@
*/ */
var book /**
* Merge two arrays. Any properties in b will replace the same properties in
* a. New properties from b will be added to a.
*
* @param a {Object}
* @param b {Object}
*/
function merge(a, b) {
window.onload = function() { var prop;
var pages = [ if (typeof b === "undefined") { b = {}; }
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/00.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/01.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/02.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/03.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/04.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/05.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/06.jpg"
];
var options = { for (prop in a) {
displayMode: "double", if (a.hasOwnProperty(prop)) {
zoomMode: "fitWidth" if (prop in b) { continue; }
b[prop] = a[prop];
}
} }
book = new ComicBook("comic", pages, options); return b;
book.draw();
}
window.onresize = function() {
book.draw();
} }
function ComicBook(id, srcs, opts) { function ComicBook(id, srcs, opts) {
this.id = id; this.id = id; // canvas element id
this.srcs = srcs; this.srcs = srcs; // array of image srcs for pages
var defaults = { var defaults = {
displayMode: "double", // single / double displayMode: "double", // single / double
zoomMode: "fitWidth" // manual / fitWidth zoomMode: "fitWidth" // manual / fitWidth
};
var options = merge(defaults, opts); // options array for internal use
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 pointer = 0; // the current page
var loaded = 0; // the amount of images that have been loaded so far
var scale = 1; // page zoom scale, 1 = 100%
/**
* Figure out the cursor position relative to the canvas.
*
* Thanks to: Mark Pilgrim & http://diveintohtml5.org/canvas.html
*/
function getCursorPosition(e) {
var x; // horizontal cursor position
// check if page relative positions exist, if not figure them out
if (e.pageX) {
x = e.pageX;
} else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
} }
var options = merge(defaults, opts);
var pages = []; // make the position relative to the canvas
var canvas; x -= canvas.offsetLeft;
var context;
var buffer = 4; // check if the user clicked on the left or right side
var pointer = 0; return (x <= canvas.width / 2) ? 'left' : 'right';
var loaded = 0; }
var scale = 1;
/* /*
* @param {String} id The canvas ID to draw the comic on. * @param {String} id The canvas ID to draw the comic on.
@ -79,12 +100,12 @@ function ComicBook(id, srcs, opts) {
context = canvas.getContext("2d"); context = canvas.getContext("2d");
// preload images if needed // preload images if needed
if (pages.length != this.srcs.length) this.preload(this.srcs); if (pages.length != this.srcs.length) { this.preload(this.srcs); }
else this.drawPage(); else { this.drawPage(); }
// add page controls // add page controls
canvas.addEventListener("click", ComicBook.prototype.navigation, false); canvas.addEventListener("click", ComicBook.prototype.navigation, false);
} };
/* /*
* Zoom the canvas * Zoom the canvas
@ -94,8 +115,8 @@ function ComicBook(id, srcs, opts) {
ComicBook.prototype.zoom = function (new_scale) { ComicBook.prototype.zoom = function (new_scale) {
options.zoomMode = "manual"; options.zoomMode = "manual";
scale = new_scale; scale = new_scale;
if (typeof pages[pointer] == "object") this.drawPage(); if (typeof pages[pointer] == "object") { this.drawPage(); }
} };
/** /**
* Preload all images, draw the page only after a given number have been loaded. * Preload all images, draw the page only after a given number have been loaded.
@ -105,7 +126,7 @@ function ComicBook(id, srcs, opts) {
*/ */
ComicBook.prototype.preload = function (srcs) { ComicBook.prototype.preload = function (srcs) {
if (srcs.length < buffer) buffer = srcs.length; // don't get stuck if the buffer level is higher than the number of pages if (srcs.length < buffer) { buffer = srcs.length; } // don't get stuck if the buffer level is higher than the number of pages
srcs.forEach(function(src, i) { srcs.forEach(function(src, i) {
@ -115,10 +136,10 @@ function ComicBook(id, srcs, opts) {
page.onload = function () { page.onload = function () {
pages[i] = this; loaded++; pages[i] = this; loaded++;
if (loaded == buffer) ComicBook.prototype.drawPage(); if (loaded == buffer) { ComicBook.prototype.drawPage(); }
} };
}); });
} };
/** /**
* Draw the current page in the canvas * Draw the current page in the canvas
@ -134,17 +155,17 @@ function ComicBook(id, srcs, opts) {
var page = pages[pointer]; var page = pages[pointer];
var page2 = pages[pointer + 1]; var page2 = pages[pointer + 1];
if (typeof page != "object") throw "invalid page type '"+ typeof page +"'"; if (typeof page != "object") { throw "invalid page type '"+ typeof page +"'"; }
var width = page.width; var width = page.width;
if (options.displayMode == "double") { if (options.displayMode == "double") {
// for double page spreads, factor in the width of both pages // for double page spreads, factor in the width of both pages
if (typeof page2 == "object") width += page2.width; if (typeof page2 == "object") { width += page2.width; }
// if this is the last page and there is no page2, still keep the canvas wide // if this is the last page and there is no page2, still keep the canvas wide
else width += width; else { width += width; }
} }
// update the page scale if a non manual mode has been chosen // update the page scale if a non manual mode has been chosen
@ -155,8 +176,7 @@ function ComicBook(id, srcs, opts) {
break; break;
case "fitWidth": case "fitWidth":
zoom_scale = (window.innerWidth > width) zoom_scale = (window.innerWidth > width) ? ((window.innerWidth - width) / window.innerWidth) + 1 // scale up if the window is wider than the page
? ((window.innerWidth - width) / window.innerWidth) + 1 // scale up if the window is wider than the page
: window.innerWidth / width; // scale down if the window is narrower than the page : window.innerWidth / width; // scale down if the window is narrower than the page
break; break;
@ -178,8 +198,7 @@ function ComicBook(id, srcs, opts) {
// work out a horizonal position that will keep the pages always centred // work out a horizonal position that will keep the pages always centred
if (canvas_width < window.innerWidth && options.zoomMode == "manual") { if (canvas_width < window.innerWidth && options.zoomMode == "manual") {
offsetW = (window.innerWidth - page_width) / 2; offsetW = (window.innerWidth - page_width) / 2;
if (options.displayMode == "double") offsetW = offsetW - page_width / 2; if (options.displayMode == "double") { offsetW = offsetW - page_width / 2; }
} }
// work out a vertical position that will keep the pages always centred // work out a vertical position that will keep the pages always centred
@ -189,9 +208,9 @@ function ComicBook(id, srcs, opts) {
// draw the page(s) // draw the page(s)
context.drawImage(page, offsetW, offsetH, page_width, page_height); context.drawImage(page, offsetW, offsetH, page_width, page_height);
if (options.displayMode == "double" && typeof page2 == "object") context.drawImage(page2, page_width + offsetW, offsetH, page_width, page_height); if (options.displayMode == "double" && typeof page2 == "object") { context.drawImage(page2, page_width + offsetW, offsetH, page_width, page_height); }
} };
/** /**
* Increment the counter and draw the page in the canvas * Increment the counter and draw the page in the canvas
@ -203,7 +222,7 @@ function ComicBook(id, srcs, opts) {
pointer++; pointer++;
this.drawPage(); this.drawPage();
} }
} };
/** /**
* Decrement the counter and draw the page in the canvas * Decrement the counter and draw the page in the canvas
@ -215,59 +234,42 @@ function ComicBook(id, srcs, opts) {
pointer--; pointer--;
this.drawPage(); this.drawPage();
} }
} };
ComicBook.prototype.navigation = function (e) { ComicBook.prototype.navigation = function (e) {
switch (e.type) { if (e.type === "click") {
case "click":
switch (getCursorPosition(e)) { switch (getCursorPosition(e)) {
case "left": ComicBook.prototype.drawPrevPage(); break; case "left": ComicBook.prototype.drawPrevPage(); break;
case "right": ComicBook.prototype.drawNextPage(); break; case "right": ComicBook.prototype.drawNextPage(); break;
} }
break;
} }
};
} }
/** var book;
* Figure out the cursor position relative to the canvas.
*
* Thanks to: Mark Pilgrim & http://diveintohtml5.org/canvas.html
*/
function getCursorPosition(e) {
var x; window.onload = function() {
// check if page relative positions exist var pages = [
if (e.pageX) x = e.pageX; "http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/00.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/01.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/02.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/03.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/04.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/05.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/06.jpg"
];
// if not figure them out var options = {
else x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; displayMode: "double",
zoomMode: "fitWidth"
};
// make the position relative to the canvas book = new ComicBook("comic", pages, options);
x -= canvas.offsetLeft; book.draw();
};
// check if the user clicked on the left or right side window.onresize = function() {
return (x <= canvas.width / 2) ? 'left' : 'right'; book.draw();
} };
/**
* Merge two arrays. Any properties in b will replace the same properties in
* a. New properties from b will be added to a.
*
* @param a {Object}
* @param b {Object}
*/
function merge(a, b) {
if (typeof b == "undefined") b = {};
for (prop in a) {
if (prop in b) continue;
b[prop] = a[prop];
}
return b;
}
}