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

single quotes instead of double

Browse source
This commit is contained in:
Bala Clark 2013-05-06 21:52:27 +02:00
parent 49a87895f8
commit 89120918a4
2 changed files with 106 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/.jshintrc
View file

@ -15,7 +15,7 @@
"curly": true, "curly": true,
"browser": true, "browser": true,
"maxerr": 50, "maxerr": 50,
"quotmark": "double", "quotmark": "single",
"trailing": false, "trailing": false,
"indent": 2 "indent": 2
} }

210
lib/ComicBook.js
View file

@ -20,14 +20,14 @@
- thumbnail browser - thumbnail browser
- refactor so we are not using all these loose shared variables and other nastyness - refactor so we are not using all these loose shared variables and other nastyness
- use custom event emitters instead of hacky code - use custom event emitters instead of hacky code
- properly bind "this" so we don't have to keep using "self" - properly bind 'this' so we don't have to keep using 'self'
- allow toolbar to be sticky - allow toolbar to be sticky
- unit test / integrate with travis CI - unit test / integrate with travis CI
*/ */
var ComicBook = (function ($) { var ComicBook = (function ($) {
"use strict"; 'use strict';
/** /**
* Merge two arrays. Any properties in b will replace the same properties in * Merge two arrays. Any properties in b will replace the same properties in
@ -40,7 +40,7 @@ var ComicBook = (function ($) {
var prop; var prop;
if (typeof b === "undefined") { b = {}; } if (typeof b === 'undefined') { b = {}; }
for (prop in a) { for (prop in a) {
if (a.hasOwnProperty(prop)) { if (a.hasOwnProperty(prop)) {
@ -60,12 +60,12 @@ var ComicBook = (function ($) {
* @returns {ComicBookException} * @returns {ComicBookException}
*/ */
var ComicBookException = { var ComicBookException = {
INVALID_ACTION: "invalid action", INVALID_ACTION: 'invalid action',
INVALID_PAGE: "invalid page", INVALID_PAGE: 'invalid page',
INVALID_PAGE_TYPE: "invalid page type", INVALID_PAGE_TYPE: 'invalid page type',
UNDEFINED_CONTROL: "undefined control", UNDEFINED_CONTROL: 'undefined control',
INVALID_ZOOM_MODE: "invalid zoom mode", INVALID_ZOOM_MODE: 'invalid zoom mode',
INVALID_NAVIGATION_EVENT: "invalid navigation event" INVALID_NAVIGATION_EVENT: 'invalid navigation event'
}; };
function ComicBook(id, srcs, opts) { function ComicBook(id, srcs, opts) {
@ -75,8 +75,8 @@ var ComicBook = (function ($) {
this.srcs = srcs; // array of image srcs for pages 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
manga: false, // true / false manga: false, // true / false
enhance: {}, enhance: {},
keyboard: { keyboard: {
@ -85,7 +85,7 @@ var ComicBook = (function ($) {
toolbar: 84, toolbar: 84,
toggleLayout: 76 toggleLayout: 76
}, },
libPath: "/lib/" libPath: '/lib/'
}; };
var options = merge(defaults, opts); // options array for internal use var options = merge(defaults, opts); // options array for internal use
@ -109,16 +109,16 @@ var ComicBook = (function ($) {
var height = window.innerHeight + 1; var height = window.innerHeight + 1;
if (shiv === false) { if (shiv === false) {
shiv = $(document.createElement("div")) shiv = $(document.createElement('div'))
.attr("id", "cb-width-shiv") .attr('id', 'cb-width-shiv')
.css({ .css({
width: "100%", width: '100%',
position: "absolute", position: 'absolute',
top: 0, top: 0,
zIndex: "-1000" zIndex: '-1000'
}); });
$("body").append(shiv); $('body').append(shiv);
} }
shiv.height(height); shiv.height(height);
@ -168,7 +168,7 @@ var ComicBook = (function ($) {
// setup canvas // setup canvas
canvas = document.getElementById(canvas_id); canvas = document.getElementById(canvas_id);
context = canvas.getContext("2d"); context = canvas.getContext('2d');
// render user controls // render user controls
if (controlsRendered === false) { if (controlsRendered === false) {
@ -177,8 +177,8 @@ var ComicBook = (function ($) {
} }
// add page controls // add page controls
window.addEventListener("keydown", self.navigation, false); window.addEventListener('keydown', self.navigation, false);
window.addEventListener("hashchange", checkHash, false); window.addEventListener('hashchange', checkHash, false);
} }
/** /**
@ -195,14 +195,14 @@ var ComicBook = (function ($) {
controls[name] = $template; controls[name] = $template;
// add event listeners to controls that specify callbacks // add event listeners to controls that specify callbacks
$template.find("*").andSelf().filter("[data-action][data-trigger]").each(function () { $template.find('*').andSelf().filter('[data-action][data-trigger]').each(function () {
var $this = $(this); var $this = $(this);
var trigger = $this.data("trigger"); var trigger = $this.data('trigger');
var action = $this.data("action"); var action = $this.data('action');
// trigger a direct method if exists // trigger a direct method if exists
if (typeof self[$this.data("action")] === "function") { if (typeof self[$this.data('action')] === 'function') {
$this.on(trigger, self[action]); $this.on(trigger, self[action]);
} }
@ -219,28 +219,28 @@ var ComicBook = (function ($) {
}; };
ComicBook.prototype.getControl = function(control) { ComicBook.prototype.getControl = function(control) {
if (typeof this.controls[control] !== "object") { if (typeof this.controls[control] !== 'object') {
throw ComicBookException.UNDEFINED_CONTROL + " " + control; throw ComicBookException.UNDEFINED_CONTROL + ' ' + control;
} }
return this.controls[control]; return this.controls[control];
}; };
ComicBook.prototype.showControl = function(control) { ComicBook.prototype.showControl = function(control) {
this.getControl(control).show().addClass("open"); this.getControl(control).show().addClass('open');
}; };
ComicBook.prototype.hideControl = function(control) { ComicBook.prototype.hideControl = function(control) {
this.getControl(control).removeClass("open").hide(); this.getControl(control).removeClass('open').hide();
}; };
ComicBook.prototype.toggleControl = function(control) { ComicBook.prototype.toggleControl = function(control) {
this.getControl(control).toggle().toggleClass("open"); this.getControl(control).toggle().toggleClass('open');
}; };
ComicBook.prototype.toggleLayout = function() { ComicBook.prototype.toggleLayout = function() {
var $control = self.getControl("toolbar").find("[data-action=toggleLayout]"); var $control = self.getControl('toolbar').find('[data-action=toggleLayout]');
var displayMode = (options.displayMode === "single") ? "double" : "single"; var displayMode = (options.displayMode === 'single') ? 'double' : 'single';
$control.removeClass(options.displayMode); $control.removeClass(options.displayMode);
$control.addClass(displayMode); $control.addClass(displayMode);
@ -258,14 +258,14 @@ var ComicBook = (function ($) {
ComicBook.prototype.getPage = function(i) { ComicBook.prototype.getPage = function(i) {
if (i < 0 || i > srcs.length-1) { if (i < 0 || i > srcs.length-1) {
throw ComicBookException.INVALID_PAGE + " " + i; throw ComicBookException.INVALID_PAGE + ' ' + i;
} }
if (typeof pages[i] === "object") { if (typeof pages[i] === 'object') {
return pages[i]; return pages[i];
} else { } else {
page_requested = i; page_requested = i;
this.showControl("loadingOverlay"); this.showControl('loadingOverlay');
} }
}; };
@ -277,8 +277,8 @@ var ComicBook = (function ($) {
init(); init();
// resize navigation controls // resize navigation controls
$(".navigate").outerHeight(window.innerHeight); $('.navigate').outerHeight(window.innerHeight);
$("#cb-loading-overlay").outerWidth(windowWidth()).height(window.innerHeight); $('#cb-loading-overlay').outerWidth(windowWidth()).height(window.innerHeight);
// preload images if needed // preload images if needed
if (pages.length !== no_pages) { if (pages.length !== no_pages) {
@ -294,9 +294,9 @@ var ComicBook = (function ($) {
* @param new_scale {Number} Scale the canvas to this ratio * @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"; options.zoomMode = 'manual';
scale = new_scale; scale = new_scale;
if (typeof this.getPage(pointer) === "object") { this.drawPage(); } if (typeof this.getPage(pointer) === 'object') { this.drawPage(); }
}; };
ComicBook.prototype.zoomIn = function () { ComicBook.prototype.zoomIn = function () {
@ -308,7 +308,7 @@ var ComicBook = (function ($) {
}; };
ComicBook.prototype.fitWidth = function () { ComicBook.prototype.fitWidth = function () {
options.zoomMode = "fitWidth"; options.zoomMode = 'fitWidth';
ComicBook.prototype.drawPage(); ComicBook.prototype.drawPage();
}; };
@ -323,7 +323,7 @@ var ComicBook = (function ($) {
var rendered = false; var rendered = false;
var queue = []; var queue = [];
this.showControl("loadingOverlay"); this.showControl('loadingOverlay');
function loadImage(i) { function loadImage(i) {
@ -335,23 +335,23 @@ var ComicBook = (function ($) {
pages[i] = this; pages[i] = this;
loaded.push(i); loaded.push(i);
$("#cb-progress-bar .progressbar-value").css("width", Math.floor((loaded.length / no_pages) * 100) + "%"); $('#cb-progress-bar .progressbar-value').css('width', Math.floor((loaded.length / no_pages) * 100) + '%');
// double page mode needs an extra page added // double page mode needs an extra page added
var buffer = (options.displayMode === "double" && pointer < srcs.length-1) ? 1 : 0; var buffer = (options.displayMode === 'double' && pointer < srcs.length-1) ? 1 : 0;
// start rendering the comic when the requested page is ready // start rendering the comic when the requested page is ready
if ((rendered === false && ($.inArray(pointer + buffer, loaded) !== -1) || if ((rendered === false && ($.inArray(pointer + buffer, loaded) !== -1) ||
(typeof page_requested === "number" && $.inArray(page_requested, loaded) !== -1)) (typeof page_requested === 'number' && $.inArray(page_requested, loaded) !== -1))
) { ) {
// if the user is waiting for a page to be loaded, render that one instead of the default pointer // if the user is waiting for a page to be loaded, render that one instead of the default pointer
if (typeof page_requested === "number") { if (typeof page_requested === 'number') {
pointer = page_requested-1; pointer = page_requested-1;
page_requested = false; page_requested = false;
} }
self.drawPage(); self.drawPage();
self.hideControl("loadingOverlay"); self.hideControl('loadingOverlay');
rendered = true; rendered = true;
} }
@ -359,7 +359,7 @@ var ComicBook = (function ($) {
loadImage(queue[0]); loadImage(queue[0]);
queue.splice(0,1); queue.splice(0,1);
} else { } else {
$("#cb-status").delay(500).fadeOut(); $('#cb-status').delay(500).fadeOut();
} }
}; };
} }
@ -400,7 +400,7 @@ var ComicBook = (function ($) {
}; };
ComicBook.prototype.pageLoaded = function (page_no) { ComicBook.prototype.pageLoaded = function (page_no) {
return (typeof loaded[page_no-1] !== "undefined"); return (typeof loaded[page_no-1] !== 'undefined');
}; };
/** /**
@ -410,14 +410,14 @@ var ComicBook = (function ($) {
var scrollY; var scrollY;
reset_scroll = (typeof reset_scroll !== "undefined") ? reset_scroll : true; reset_scroll = (typeof reset_scroll !== 'undefined') ? reset_scroll : true;
scrollY = reset_scroll ? 0 : window.scrollY; scrollY = reset_scroll ? 0 : window.scrollY;
// if a specific page is given try to render it, if not bail and wait for preload() to render it // if a specific page is given try to render it, if not bail and wait for preload() to render it
if (typeof page_no === "number" && page_no < srcs.length && page_no > 0) { if (typeof page_no === 'number' && page_no < srcs.length && page_no > 0) {
pointer = page_no-1; pointer = page_no-1;
if (!this.pageLoaded(page_no)) { if (!this.pageLoaded(page_no)) {
this.showControl("loadingOverlay"); this.showControl('loadingOverlay');
return; return;
} }
} }
@ -430,12 +430,12 @@ var ComicBook = (function ($) {
var page = self.getPage(pointer); var page = self.getPage(pointer);
var page2 = false; var page2 = false;
if (options.displayMode === "double" && pointer < srcs.length-1) { if (options.displayMode === 'double' && pointer < srcs.length-1) {
page2 = self.getPage(pointer + 1); page2 = self.getPage(pointer + 1);
} }
if (typeof page !== "object") { if (typeof page !== 'object') {
throw ComicBookException.INVALID_PAGE_TYPE + " " + typeof page; throw ComicBookException.INVALID_PAGE_TYPE + ' ' + typeof page;
} }
var width = page.width; var width = page.width;
@ -446,16 +446,16 @@ var ComicBook = (function ($) {
// show double page spreads on a single page // show double page spreads on a single page
is_double_page_spread = ( is_double_page_spread = (
typeof page2 === "object" && typeof page2 === 'object' &&
(page.width > page.height || page2.width > page2.height) && (page.width > page.height || page2.width > page2.height) &&
options.displayMode === "double" options.displayMode === 'double'
); );
if (is_double_page_spread) { options.displayMode = "single"; } if (is_double_page_spread) { options.displayMode = 'single'; }
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; }
@ -464,13 +464,13 @@ var ComicBook = (function ($) {
// update the page scale if a non manual mode has been chosen // update the page scale if a non manual mode has been chosen
switch (options.zoomMode) { switch (options.zoomMode) {
case "manual": case 'manual':
document.body.style.overflowX = "auto"; document.body.style.overflowX = 'auto';
zoom_scale = (options.displayMode === "double") ? scale * 2 : scale; zoom_scale = (options.displayMode === 'double') ? scale * 2 : scale;
break; break;
case "fitWidth": case 'fitWidth':
document.body.style.overflowX = "hidden"; document.body.style.overflowX = 'hidden';
// scale up if the window is wider than the page, scale down if the window // scale up if the window is wider than the page, scale down if the window
// is narrower than the page // is narrower than the page
@ -481,14 +481,14 @@ var ComicBook = (function ($) {
break; break;
default: default:
throw ComicBookException.INVALID_ZOOM_MODE + " " + options.zoomMode; throw ComicBookException.INVALID_ZOOM_MODE + ' ' + options.zoomMode;
} }
var canvas_width = page.width * zoom_scale; var canvas_width = page.width * zoom_scale;
var canvas_height = page.height * zoom_scale; var canvas_height = page.height * zoom_scale;
var page_width = (options.zoomMode === "manual") ? page.width * scale : canvas_width; var page_width = (options.zoomMode === 'manual') ? page.width * scale : canvas_width;
var page_height = (options.zoomMode === "manual") ? page.height * scale : canvas_height; var page_height = (options.zoomMode === 'manual') ? page.height * scale : canvas_height;
canvas_height = page_height; canvas_height = page_height;
@ -497,18 +497,18 @@ var ComicBook = (function ($) {
canvas.height = (canvas_height < window.innerHeight) ? window.innerHeight : canvas_height; canvas.height = (canvas_height < window.innerHeight) ? window.innerHeight : canvas_height;
// work out a horizontal position that will keep the pages always centred // work out a horizontal position that will keep the pages always centred
if (canvas_width < windowWidth() && options.zoomMode === "manual") { if (canvas_width < windowWidth() && options.zoomMode === 'manual') {
offsetW = (windowWidth() - page_width) / 2; offsetW = (windowWidth() - 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
if (canvas_height < window.innerHeight && options.zoomMode === "manual") { if (canvas_height < window.innerHeight && options.zoomMode === 'manual') {
offsetH = (window.innerHeight - page_height) / 2; offsetH = (window.innerHeight - page_height) / 2;
} }
// in manga double page mode reverse the page(s) // in manga double page mode reverse the page(s)
if (options.manga && options.displayMode === "double" && typeof page2 === "object") { if (options.manga && options.displayMode === 'double' && typeof page2 === 'object') {
var tmpPage = page; var tmpPage = page;
var tmpPage2 = page2; var tmpPage2 = page2;
page = tmpPage2; page = tmpPage2;
@ -517,11 +517,11 @@ var ComicBook = (function ($) {
// 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") { if (options.displayMode === 'double' && typeof page2 === 'object') {
context.drawImage(page2, page_width + offsetW, offsetH, page_width, page_height); context.drawImage(page2, page_width + offsetW, offsetH, page_width, page_height);
} }
this.pixastic = new Pixastic(context, options.libPath + "pixastic/"); this.pixastic = new Pixastic(context, options.libPath + 'pixastic/');
// apply any image enhancements previously defined // apply any image enhancements previously defined
$.each(options.enhance, function(action, options) { $.each(options.enhance, function(action, options) {
@ -529,33 +529,33 @@ var ComicBook = (function ($) {
}); });
var current_page = var current_page =
(options.displayMode === "double" && (options.displayMode === 'double' &&
pointer + 2 <= srcs.length) ? (pointer + 1) + "-" + (pointer + 2) : pointer + 1; pointer + 2 <= srcs.length) ? (pointer + 1) + '-' + (pointer + 2) : pointer + 1;
this.getControl("toolbar") this.getControl('toolbar')
.find("#current-page").text(current_page) .find('#current-page').text(current_page)
.end() .end()
.find("#page-count").text(srcs.length); .find('#page-count').text(srcs.length);
// revert page mode back to double if it was auto switched for a double page spread // revert page mode back to double if it was auto switched for a double page spread
if (is_double_page_spread) { options.displayMode = "double"; } if (is_double_page_spread) { options.displayMode = 'double'; }
// disable the fit width button if needed // disable the fit width button if needed
$("button.cb-fit-width").attr("disabled", (options.zoomMode === "fitWidth")); $('button.cb-fit-width').attr('disabled', (options.zoomMode === 'fitWidth'));
// disable prev/next buttons if not needed // disable prev/next buttons if not needed
$(".navigate").show(); $('.navigate').show();
if (pointer === 0) { if (pointer === 0) {
$(".navigate-left").hide(); $('.navigate-left').hide();
$(".navigate-right").show(); $('.navigate-right').show();
} }
if (pointer === srcs.length-1 || (typeof page2 === "object" && pointer === srcs.length-2)) { if (pointer === srcs.length-1 || (typeof page2 === 'object' && pointer === srcs.length-2)) {
$(".navigate-left").show(); $('.navigate-left').show();
$(".navigate-right").hide(); $('.navigate-right').hide();
} }
$(this).trigger("navigate"); $(this).trigger('navigate');
// update hash location // update hash location
if (getHash() !== pointer) { if (getHash() !== pointer) {
@ -582,7 +582,7 @@ var ComicBook = (function ($) {
if (!page) { return false; } if (!page) { return false; }
if (pointer + 1 < pages.length) { if (pointer + 1 < pages.length) {
pointer += (options.displayMode === "single" || is_double_page_spread) ? 1 : 2; pointer += (options.displayMode === 'single' || is_double_page_spread) ? 1 : 2;
try { try {
self.drawPage(); self.drawPage();
} catch (e) {} } catch (e) {}
@ -607,7 +607,7 @@ var ComicBook = (function ($) {
is_double_page_spread = (page.width > page.height); // need to run double page check again here as we are going backwards is_double_page_spread = (page.width > page.height); // need to run double page check again here as we are going backwards
if (pointer > 0) { if (pointer > 0) {
pointer -= (options.displayMode === "single" || is_double_page_spread) ? 1 : 2; pointer -= (options.displayMode === 'single' || is_double_page_spread) ? 1 : 2;
self.drawPage(); self.drawPage();
} }
}; };
@ -626,7 +626,7 @@ var ComicBook = (function ($) {
}; };
ComicBook.prototype.desaturate = function () { ComicBook.prototype.desaturate = function () {
if ($(this).is(":checked")) { if ($(this).is(':checked')) {
self.enhance.desaturate(); self.enhance.desaturate();
} else { } else {
self.enhance.resaturate(); self.enhance.resaturate();
@ -643,7 +643,7 @@ var ComicBook = (function ($) {
* Powered by the awesome Pixastic: http://www.pixastic.com/ * Powered by the awesome Pixastic: http://www.pixastic.com/
* *
* TODO: reset & apply all image enhancements each time before applying new one * TODO: reset & apply all image enhancements each time before applying new one
* TODO: abstract this into an "Enhance" object, separate from ComicBook? * TODO: abstract this into an 'Enhance' object, separate from ComicBook?
*/ */
ComicBook.prototype.enhance = { ComicBook.prototype.enhance = {
@ -691,7 +691,7 @@ var ComicBook = (function ($) {
*/ */
brightness: function (params, reset) { brightness: function (params, reset) {
if (reset !== false) { this.reset("brightness"); } if (reset !== false) { this.reset('brightness'); }
// merge user options with defaults // merge user options with defaults
var opts = merge({ brightness: 0, contrast: 0 }, params); var opts = merge({ brightness: 0, contrast: 0 }, params);
@ -752,17 +752,17 @@ var ComicBook = (function ($) {
ComicBook.prototype.navigation = function (e) { ComicBook.prototype.navigation = function (e) {
// disable navigation when the overlay is showing // disable navigation when the overlay is showing
if ($("#cb-loading-overlay").is(":visible")) { return false; } if ($('#cb-loading-overlay').is(':visible')) { return false; }
var side = false; var side = false;
switch (e.type) { switch (e.type) {
case "keydown": case 'keydown':
// navigation // navigation
if (e.keyCode === options.keyboard.previous) { side = "left"; } if (e.keyCode === options.keyboard.previous) { side = 'left'; }
if (e.keyCode === options.keyboard.next) { side = "right"; } if (e.keyCode === options.keyboard.next) { side = 'right'; }
// display controls // display controls
if (e.keyCode === options.keyboard.toolbar) { if (e.keyCode === options.keyboard.toolbar) {
@ -774,7 +774,7 @@ var ComicBook = (function ($) {
break; break;
default: default:
throw ComicBookException.INVALID_NAVIGATION_EVENT + " " + e.type; throw ComicBookException.INVALID_NAVIGATION_EVENT + ' ' + e.type;
} }
if (side) { if (side) {
@ -783,13 +783,13 @@ var ComicBook = (function ($) {
// western style (left to right) // western style (left to right)
if (!options.manga) { if (!options.manga) {
if (side === "left") { self.drawPrevPage(); } if (side === 'left') { self.drawPrevPage(); }
if (side === "right") { self.drawNextPage(); } if (side === 'right') { self.drawNextPage(); }
} }
// manga style (right to left) // manga style (right to left)
else { else {
if (side === "left") { self.drawNextPage(); } if (side === 'left') { self.drawNextPage(); }
if (side === "right") { self.drawPrevPage(); } if (side === 'right') { self.drawPrevPage(); }
} }
return false; return false;
@ -805,12 +805,12 @@ var ComicBook = (function ($) {
canvas.width = 0; canvas.width = 0;
canvas.height = 0; canvas.height = 0;
window.removeEventListener("keydown", this.navigation, false); window.removeEventListener('keydown', this.navigation, false);
window.removeEventListener("hashchange", checkHash, false); window.removeEventListener('hashchange', checkHash, false);
setHash(""); setHash('');
// $(this).trigger("destroy"); // $(this).trigger('destroy');
}; };
} }