refactored a little after running through jslint
This commit is contained in:
Bala Clark
parent
b0c0016c0a
commit
2dbbca3539
1 changed files with 275 additions and 273 deletions
224
scripts.js
224
scripts.js
|
|
@ -1,3 +1,4 @@
|
|||
/*jslint on: true, eqeqeq: true */
|
||||
/*
|
||||
TODOs:
|
||||
|
||||
|
|
@ -19,83 +20,103 @@
|
|||
|
||||
*/
|
||||
|
||||
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 = [
|
||||
"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 (typeof b === "undefined") { b = {}; }
|
||||
|
||||
var options = {
|
||||
displayMode: "double",
|
||||
zoomMode: "fitWidth"
|
||||
for (prop in a) {
|
||||
if (a.hasOwnProperty(prop)) {
|
||||
if (prop in b) { continue; }
|
||||
b[prop] = a[prop];
|
||||
}
|
||||
}
|
||||
|
||||
book = new ComicBook("comic", pages, options);
|
||||
book.draw();
|
||||
}
|
||||
|
||||
window.onresize = function() {
|
||||
book.draw();
|
||||
return b;
|
||||
}
|
||||
|
||||
function ComicBook(id, srcs, opts) {
|
||||
|
||||
this.id = id;
|
||||
this.srcs = srcs;
|
||||
this.id = id; // canvas element id
|
||||
this.srcs = srcs; // array of image srcs for pages
|
||||
|
||||
var defaults = {
|
||||
displayMode: "double", // single / double
|
||||
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;
|
||||
}
|
||||
|
||||
// make the position relative to the canvas
|
||||
x -= canvas.offsetLeft;
|
||||
|
||||
// check if the user clicked on the left or right side
|
||||
return (x <= canvas.width / 2) ? 'left' : 'right';
|
||||
}
|
||||
var options = merge(defaults, opts);
|
||||
|
||||
var pages = [];
|
||||
var canvas;
|
||||
var context;
|
||||
|
||||
var buffer = 4;
|
||||
var pointer = 0;
|
||||
var loaded = 0;
|
||||
|
||||
var scale = 1;
|
||||
|
||||
/*
|
||||
* @param {String} id The canvas ID to draw the comic on.
|
||||
* @param {Object} srcs An array of all the comic page srcs, in order
|
||||
* @see #preload
|
||||
*/
|
||||
ComicBook.prototype.draw = function() {
|
||||
ComicBook.prototype.draw = function () {
|
||||
|
||||
// setup canvas
|
||||
canvas = document.getElementById(this.id);
|
||||
context = canvas.getContext("2d");
|
||||
|
||||
// preload images if needed
|
||||
if (pages.length != this.srcs.length) this.preload(this.srcs);
|
||||
else this.drawPage();
|
||||
if (pages.length != this.srcs.length) { this.preload(this.srcs); }
|
||||
else { this.drawPage(); }
|
||||
|
||||
// add page controls
|
||||
canvas.addEventListener("click", ComicBook.prototype.navigation, false);
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Zoom the canvas
|
||||
*
|
||||
* @param new_scale {Number} Scale the canvas to this ratio
|
||||
*/
|
||||
ComicBook.prototype.zoom = function(new_scale) {
|
||||
ComicBook.prototype.zoom = function (new_scale) {
|
||||
options.zoomMode = "manual";
|
||||
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.
|
||||
|
|
@ -103,9 +124,9 @@ function ComicBook(id, srcs, opts) {
|
|||
* @param srcs {Object} srcs
|
||||
* @see #drawPage
|
||||
*/
|
||||
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) {
|
||||
|
||||
|
|
@ -113,12 +134,12 @@ function ComicBook(id, srcs, opts) {
|
|||
|
||||
page.src = src;
|
||||
|
||||
page.onload = function() {
|
||||
page.onload = function () {
|
||||
pages[i] = this; loaded++;
|
||||
if (loaded == buffer) ComicBook.prototype.drawPage();
|
||||
}
|
||||
if (loaded == buffer) { ComicBook.prototype.drawPage(); }
|
||||
};
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Draw the current page in the canvas
|
||||
|
|
@ -126,7 +147,7 @@ function ComicBook(id, srcs, opts) {
|
|||
* TODO: break this down into drawSinglePage() & drawDoublePage()
|
||||
* TODO: if the current browser doesn't have canvas support, use img tags
|
||||
*/
|
||||
ComicBook.prototype.drawPage = function() {
|
||||
ComicBook.prototype.drawPage = function () {
|
||||
|
||||
var zoom_scale;
|
||||
var offsetW = 0, offsetH = 0;
|
||||
|
|
@ -134,17 +155,17 @@ function ComicBook(id, srcs, opts) {
|
|||
var page = pages[pointer];
|
||||
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;
|
||||
|
||||
if (options.displayMode == "double") {
|
||||
|
||||
// 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
|
||||
else width += width;
|
||||
else { width += width; }
|
||||
}
|
||||
|
||||
// update the page scale if a non manual mode has been chosen
|
||||
|
|
@ -155,8 +176,7 @@ function ComicBook(id, srcs, opts) {
|
|||
break;
|
||||
|
||||
case "fitWidth":
|
||||
zoom_scale = (window.innerWidth > width)
|
||||
? ((window.innerWidth - width) / window.innerWidth) + 1 // scale up if the window is wider than the page
|
||||
zoom_scale = (window.innerWidth > width) ? ((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
|
||||
break;
|
||||
|
||||
|
|
@ -178,8 +198,7 @@ function ComicBook(id, srcs, opts) {
|
|||
// work out a horizonal position that will keep the pages always centred
|
||||
if (canvas_width < window.innerWidth && options.zoomMode == "manual") {
|
||||
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
|
||||
|
|
@ -189,85 +208,68 @@ function ComicBook(id, srcs, opts) {
|
|||
|
||||
// draw the page(s)
|
||||
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
|
||||
*
|
||||
* @see #drawPage
|
||||
*/
|
||||
ComicBook.prototype.drawNextPage = function() {
|
||||
ComicBook.prototype.drawNextPage = function () {
|
||||
if (pointer + 1 < pages.length) {
|
||||
pointer++;
|
||||
this.drawPage();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Decrement the counter and draw the page in the canvas
|
||||
*
|
||||
* @see #drawPage
|
||||
*/
|
||||
ComicBook.prototype.drawPrevPage = function() {
|
||||
ComicBook.prototype.drawPrevPage = function () {
|
||||
if (pointer > 0) {
|
||||
pointer--;
|
||||
this.drawPage();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ComicBook.prototype.navigation = function(e) {
|
||||
ComicBook.prototype.navigation = function (e) {
|
||||
|
||||
switch (e.type) {
|
||||
|
||||
case "click":
|
||||
switch (getCursorPosition(e)) {
|
||||
case "left": ComicBook.prototype.drawPrevPage(); break;
|
||||
case "right": ComicBook.prototype.drawNextPage(); break;
|
||||
}
|
||||
break;
|
||||
if (e.type === "click") {
|
||||
switch (getCursorPosition(e)) {
|
||||
case "left": ComicBook.prototype.drawPrevPage(); break;
|
||||
case "right": ComicBook.prototype.drawNextPage(); break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Figure out the cursor position relative to the canvas.
|
||||
*
|
||||
* Thanks to: Mark Pilgrim & http://diveintohtml5.org/canvas.html
|
||||
*/
|
||||
function getCursorPosition(e) {
|
||||
|
||||
var x;
|
||||
|
||||
// check if page relative positions exist
|
||||
if (e.pageX) x = e.pageX;
|
||||
|
||||
// if not figure them out
|
||||
else x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
|
||||
|
||||
// make the position relative to the canvas
|
||||
x -= canvas.offsetLeft;
|
||||
|
||||
// check if the user clicked on the left or right side
|
||||
return (x <= canvas.width / 2) ? 'left' : 'right';
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var book;
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
var pages = [
|
||||
"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 = {
|
||||
displayMode: "double",
|
||||
zoomMode: "fitWidth"
|
||||
};
|
||||
|
||||
book = new ComicBook("comic", pages, options);
|
||||
book.draw();
|
||||
};
|
||||
|
||||
window.onresize = function() {
|
||||
book.draw();
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue