diff --git a/lib/ComicBook.js b/lib/ComicBook.js index acab38a..772ab18 100644 --- a/lib/ComicBook.js +++ b/lib/ComicBook.js @@ -39,7 +39,7 @@ function merge(a, b) { function ComicBook(id, srcs, opts) { - this.id = id; // canvas element id + var canvas_id = id; // canvas element id this.srcs = srcs; // array of image srcs for pages var defaults = { @@ -84,24 +84,35 @@ function ComicBook(id, srcs, opts) { // check if the user clicked on the left or right side return (x <= canvas.width / 2) ? 'left' : 'right'; } + + /** + * Setup the canvas element for use throughout the class. + * + * @see #ComicBook.prototype.draw + * @see #ComicBook.prototype.enhance + */ + function init() { + + // setup canvas + canvas = document.getElementById(canvas_id); + context = canvas.getContext("2d"); + // add page controls + canvas.addEventListener("click", ComicBook.prototype.navigation, false); + }; + /* * @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 () { - - // setup canvas - canvas = document.getElementById(this.id); - context = canvas.getContext("2d"); - + + init(); + // preload images if needed if (pages.length !== no_pages) { this.preload(this.srcs); } else { this.drawPage(); } - - // add page controls - canvas.addEventListener("click", ComicBook.prototype.navigation, false); }; /* @@ -229,7 +240,7 @@ function ComicBook(id, srcs, opts) { document.body.style.overflowX = (canvas_width < window.innerWidth) ? "hidden" : "auto"; document.body.style.overflowY = (canvas_height < window.innerHeight) ? "hidden" : "auto"; - // work out a horizonal position that will keep the pages always centred + // work out a horizontal 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; } @@ -287,16 +298,28 @@ function ComicBook(id, srcs, opts) { * * Powered by the awesome Pixastic: http://www.pixastic.com/ * - * FIXME: page navigation breaks after enhancements are applied - * TODO: reset() - * TODO: allow multiple effects at once - * + * TODO: reset & apply all image enhancements each time before applying new one * TODO: abstract this into an "Enhance" object, separate from ComicBook? */ ComicBook.prototype.enhance = { - reset: function () {}, + /** + * Render the page with no enhancements + */ + reset: function () { + enhancements = {}; + ComicBook.prototype.drawPage(); + }, + /** + * Adjust brightness / contrast + * + * options + * brightness (int) -150 to 150 + * contrast: (float) -1 to infinity + * + * @param {Object} options + */ brightness: function (options) { // merge user options with defaults @@ -311,13 +334,27 @@ function ComicBook(id, srcs, opts) { contrast: options.contrast, legacy: true }); + + init(); }, + /** + * Force black and white + */ desaturate: function () { enhancements.desaturate = {}; Pixastic.process(canvas, "desaturate", { average : false }); + init(); }, + /** + * Sharpen + * + * options: + * amount: number (-1 to infinity) + * + * @param {Object} options + */ sharpen: function (options) { var options = merge({ amount: 0 }, options); @@ -325,6 +362,8 @@ function ComicBook(id, srcs, opts) { Pixastic.process(canvas, "sharpen", { amount: options.amount }); + + init(); } };