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

Merge branch 'master' into touch

Browse source
This commit is contained in:
Bala Clark 2013-11-26 22:17:57 +01:00
commit 22be208b57
22 changed files with 298 additions and 260 deletions
Download patch file Download diff file Expand all files Collapse all files

110
lib/ComicBook.js
View file

@ -5,9 +5,7 @@
Fo sho:
- create onclose callback, show close button only if set
_ fix progress bar css
- only trigger navigate event on page change (not resize, etc.)
- fix manga mode
- fix progress bar css
- trigger preload if requesting valid but not loaded images (can happen if network was interupted)
- loading and generally hackiness of pointer is buggy, fix.
- check for html5 feature support where used: diveintohtml5.org/everything.html or www.modernizr.com
@ -23,7 +21,8 @@
- refactor so we are not using all these loose shared variables and other nastyness
- use custom event emitters instead of hacky code
- properly bind 'this' so we don't have to keep using 'self'
- allow toolbar to be sticky
- allow toolbar to be hidden on mobile (maybe show a small translucent button that opens the toolbar when clicked)
- enhancement progress bar
*/
var ComicBook = (function ($, $$) {
@ -77,7 +76,7 @@ var ComicBook = (function ($, $$) {
var defaults = {
displayMode: 'double', // single / double
zoomMode: 'fitWidth', // manual / fitWidth
zoomMode: 'fitWindow', // manual / fitWidth / fitWindow
manga: false, // true / false
enhance: {},
keyboard: {
@ -86,7 +85,8 @@ var ComicBook = (function ($, $$) {
toolbar: 84,
toggleLayout: 76
},
libPath: '/lib/'
libPath: '/lib/',
forward_buffer: 3
};
this.isMobile = false;
@ -213,7 +213,7 @@ var ComicBook = (function ($, $$) {
*/
ComicBook.prototype.renderControls = function () {
var controls = {};
var controls = {}, $toolbar;
$.each(Handlebars.templates, function (name, template) {
@ -242,6 +242,13 @@ var ComicBook = (function ($, $$) {
});
this.controls = controls;
$toolbar = this.getControl('toolbar');
$toolbar
.find('.manga-' + options.manga).show().end()
.find('.manga-' + !options.manga).hide().end()
.find('.layout').hide().end().find('.layout-' + options.displayMode).show();
};
ComicBook.prototype.getControl = function (control) {
@ -265,14 +272,13 @@ var ComicBook = (function ($, $$) {
ComicBook.prototype.toggleLayout = function() {
var $control = self.getControl('toolbar').find('[data-action=toggleLayout]');
var $toolbar = self.getControl('toolbar');
var displayMode = (options.displayMode === 'single') ? 'double' : 'single';
$control.removeClass(options.displayMode);
$control.addClass(displayMode);
options.displayMode = displayMode;
$toolbar.find('.layout').hide().end().find('.layout-' + options.displayMode).show();
self.drawPage();
};
@ -335,7 +341,12 @@ var ComicBook = (function ($, $$) {
ComicBook.prototype.fitWidth = function () {
options.zoomMode = 'fitWidth';
ComicBook.prototype.drawPage();
self.drawPage();
};
ComicBook.prototype.fitWindow = function () {
options.zoomMode = 'fitWindow';
self.drawPage();
};
/**
@ -394,8 +405,6 @@ var ComicBook = (function ($, $$) {
// to be loaded before you can scroll backwards
function preload(start, stop) {
var forward_buffer = 3; // TODO: make this into a config option?
var j = 0;
var count = 1;
var forward = start;
@ -403,7 +412,7 @@ var ComicBook = (function ($, $$) {
while (forward <= stop) {
if (count > forward_buffer && backward > -1) {
if (count > options.forward_buffer && backward > -1) {
queue.push(backward);
backward--;
count = 0;
@ -464,7 +473,7 @@ var ComicBook = (function ($, $$) {
throw ComicBookException.INVALID_PAGE_TYPE + ' ' + typeof page;
}
var width = page.width;
var width = page.width, height = page.height;
// reset the canvas to stop duplicate pages showing
canvas.width = 0;
@ -506,6 +515,21 @@ var ComicBook = (function ($, $$) {
scale = zoom_scale;
break;
case 'fitWindow':
document.body.style.overflowX = 'hidden';
var width_scale = (windowWidth() > width) ?
((windowWidth() - width) / windowWidth()) + 1 // scale up if the window is wider than the page
: windowWidth() / width; // scale down if the window is narrower than the page
var windowHeight = window.innerHeight;
var height_scale = (windowHeight > height) ?
((windowHeight - height) / windowHeight) + 1 // scale up if the window is wider than the page
: windowHeight / height; // scale down if the window is narrower than the page
zoom_scale = (width_scale > height_scale) ? height_scale : width_scale;
scale = zoom_scale;
break;
default:
throw ComicBookException.INVALID_ZOOM_MODE + ' ' + options.zoomMode;
}
@ -522,15 +546,19 @@ var ComicBook = (function ($, $$) {
canvas.width = (canvas_width < windowWidth()) ? windowWidth() : canvas_width;
canvas.height = (canvas_height < window.innerHeight) ? window.innerHeight : canvas_height;
// work out a horizontal position that will keep the pages always centred
if (canvas_width < windowWidth() && options.zoomMode === 'manual') {
offsetW = (windowWidth() - page_width) / 2;
if (options.displayMode === 'double') { offsetW = offsetW - page_width / 2; }
}
// always keep pages centered
if (options.zoomMode === 'manual' || options.zoomMode === 'fitWindow') {
// work out a vertical position that will keep the pages always centred
if (canvas_height < window.innerHeight && options.zoomMode === 'manual') {
offsetH = (window.innerHeight - page_height) / 2;
// work out a horizontal position
if (canvas_width < windowWidth()) {
offsetW = (windowWidth() - page_width) / 2;
if (options.displayMode === 'double') { offsetW = offsetW - page_width / 2; }
}
// work out a vertical position
if (canvas_height < window.innerHeight) {
offsetH = (window.innerHeight - page_height) / 2;
}
}
// in manga double page mode reverse the page(s)
@ -568,20 +596,33 @@ var ComicBook = (function ($, $$) {
// disable the fit width button if needed
$('button.cb-fit-width').attr('disabled', (options.zoomMode === 'fitWidth'));
$('button.cb-fit-window').attr('disabled', (options.zoomMode === 'fitWindow'));
// disable prev/next buttons if not needed
$('.navigate').show();
if (pointer === 0) {
$('.navigate-left').hide();
$('.navigate-right').show();
if (options.manga) {
$('.navigate-left').show();
$('.navigate-right').hide();
} else {
$('.navigate-left').hide();
$('.navigate-right').show();
}
}
if (pointer === srcs.length-1 || (typeof page2 === 'object' && pointer === srcs.length-2)) {
$('.navigate-left').show();
$('.navigate-right').hide();
if (options.manga) {
$('.navigate-left').hide();
$('.navigate-right').show();
} else {
$('.navigate-left').show();
$('.navigate-right').hide();
}
}
$(this).trigger('navigate');
if (pointer !== getHash()){
$(this).trigger('navigate');
}
// update hash location
if (getHash() !== pointer) {
@ -786,6 +827,10 @@ var ComicBook = (function ($, $$) {
switch (e.type) {
case 'click':
side = e.currentTarget.getAttribute('data-navigate-side');
break;
case 'keydown':
// navigation
@ -833,6 +878,13 @@ var ComicBook = (function ($, $$) {
}
};
ComicBook.prototype.toggleReadingMode = function () {
options.manga = !options.manga;
self.getControl('toolbar')
.find('.manga-' + options.manga).show().end()
.find('.manga-' + !options.manga).hide();
};
ComicBook.prototype.destroy = function () {
$.each(this.controls, function (name, $control) {

43
lib/templates.js
View file

@ -1,43 +0,0 @@
(function() {
var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['loadingOverlay'] = template(function (Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [2,'>= 1.0.0-rc.3'];
helpers = helpers || Handlebars.helpers; data = data || {};
return "\n<div id=\"cb-loading-overlay\" class=\"cb-control\"></div>\n";
});
templates['navigateLeft'] = template(function (Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [2,'>= 1.0.0-rc.3'];
helpers = helpers || Handlebars.helpers; data = data || {};
return "\n<div data-trigger=\"click\" data-action=\"drawPrevPage\" class=\"cb-control navigate navigate-left \">\n <span class=\"icon-arrow-left\"></span>\n</div>\n";
});
templates['navigateRight'] = template(function (Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [2,'>= 1.0.0-rc.3'];
helpers = helpers || Handlebars.helpers; data = data || {};
return "\n<div data-trigger=\"click\" data-action=\"drawNextPage\" class=\"cb-control navigate navigate-right\">\n <span class=\"icon-arrow-right\"></span>\n</div>\n";
});
templates['progressbar'] = template(function (Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [2,'>= 1.0.0-rc.3'];
helpers = helpers || Handlebars.helpers; data = data || {};
return "<div id=\"cb-status\" class=\"cb-control\">\n <div id=\"cb-progress-bar\">\n <div class=\"progressbar-value\"></div>\n </div>\n</div>\n";
});
templates['toolbar'] = template(function (Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [2,'>= 1.0.0-rc.3'];
helpers = helpers || Handlebars.helpers; data = data || {};
return "\n<div class=\"toolbar\">\n\n <ul class=\"pull-left\">\n <li class=\"close\">\n <button data-trigger=\"click\" data-action=\"close\" title=\"close\" class=\"icon-remove-sign\"></button>\n </li>\n <li class=\"close separator\"></li>\n <li>\n <button title=\"image settings\" class=\"icon-settings\" data-toggle=\"dropdown\"></button>\n <div class=\"dropdown\">\n <form name=\"image-enhancements\" data-trigger=\"reset\" data-action=\"resetEnhancements\">\n <div class=\"sliders\">\n <div class=\"control-group\">\n <label title=\"adjust brightness\" class=\"icon-sun\"></label>\n <input data-trigger=\"change\" data-action=\"brightness\" type=\"range\" min=\"-100\" max=\"100\" step=\"1\" value=\"0\">\n </div>\n <div class=\"control-group\">\n <label title=\"adjust contrast\" class=\"icon-adjust\"></label>\n <input data-trigger=\"change\" data-action=\"contrast\" type=\"range\" min=\"-1\" max=\"1\" step=\"0.1\" value=\"0\">\n </div>\n <div class=\"control-group\">\n <label title=\"sharpen\" class=\"icon-droplet\"></label>\n <input data-trigger=\"change\" data-action=\"sharpen\" type=\"range\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0\">\n </div>\n </div>\n <div class=\"control-group pull-left\">\n <input id=\"image-desaturate\" type=\"checkbox\" data-trigger=\"change\" data-action=\"desaturate\">\n <label for=\"image-desaturate\">desaturate</label>\n </div>\n <div class=\"control-group pull-right\">\n <input type=\"reset\" value=\"reset\">\n </div>\n </form>\n </div>\n </li>\n <li>\n <button data-trigger=\"click\" data-action=\"toggleLayout\" title=\"toggle one/two pages at a time\" class=\"icon-file\"></button>\n </li>\n <li>\n <button data-trigger=\"click\" data-action=\"zoomOut\" title=\"zoom out\" class=\"icon-zoom-out\"></button>\n </li>\n <li>\n <button data-trigger=\"click\" data-action=\"zoomIn\" title=\"zoom in\" class=\"icon-zoom-in\"></button>\n </li>\n <li>\n <button data-trigger=\"click\" data-action=\"fitWidth\" title=\"fit page to window width\" class=\"icon-expand\"></button>\n </li>\n </ul>\n\n <ul class=\"pull-right\">\n <li><span id=\"current-page\"></span> / <span id=\"page-count\"></span></li>\n </ul>\n\n</div>\n";
});
})();