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

add fit-window mode

Browse source
This commit is contained in:
Puzzlet Chung 2013-10-15 02:36:40 +09:00
parent ec13a20d79
commit 6f1d5d467f
2 changed files with 27 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

27
lib/ComicBook.js
View file

@ -76,7 +76,7 @@ var ComicBook = (function ($) {
var defaults = { var defaults = {
displayMode: 'double', // single / double displayMode: 'double', // single / double
zoomMode: 'fitWidth', // manual / fitWidth zoomMode: 'fitWindow', // manual / fitWidth / fitWindow
manga: false, // true / false manga: false, // true / false
enhance: {}, enhance: {},
keyboard: { keyboard: {
@ -338,7 +338,12 @@ var ComicBook = (function ($) {
ComicBook.prototype.fitWidth = function () { ComicBook.prototype.fitWidth = function () {
options.zoomMode = 'fitWidth'; options.zoomMode = 'fitWidth';
ComicBook.prototype.drawPage(); self.drawPage();
};
ComicBook.prototype.fitWindow = function () {
options.zoomMode = 'fitWindow';
self.drawPage();
}; };
/** /**
@ -465,7 +470,7 @@ var ComicBook = (function ($) {
throw ComicBookException.INVALID_PAGE_TYPE + ' ' + typeof page; 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 // reset the canvas to stop duplicate pages showing
canvas.width = 0; canvas.width = 0;
@ -507,6 +512,21 @@ var ComicBook = (function ($) {
scale = zoom_scale; scale = zoom_scale;
break; 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: default:
throw ComicBookException.INVALID_ZOOM_MODE + ' ' + options.zoomMode; throw ComicBookException.INVALID_ZOOM_MODE + ' ' + options.zoomMode;
} }
@ -569,6 +589,7 @@ var ComicBook = (function ($) {
// 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'));
$('button.cb-fit-window').attr('disabled', (options.zoomMode === 'fitWindow'));
// disable prev/next buttons if not needed // disable prev/next buttons if not needed
$('.navigate').show(); $('.navigate').show();

3
templates/toolbar.handlebars
View file

@ -47,6 +47,9 @@
<li> <li>
<button data-trigger="click" data-action="fitWidth" title="fit page to window width" class="icon-expand"></button> <button data-trigger="click" data-action="fitWidth" title="fit page to window width" class="icon-expand"></button>
</li> </li>
<li>
<button data-trigger="click" data-action="fitWindow" title="fit page to window" class="icon-expand-2"></button>
</li>
<li> <li>
<button data-trigger="click" data-action="toggleReadingMode" title="switch reading direction" class="icon-arrow-right-3 manga-false"></button> <button data-trigger="click" data-action="toggleReadingMode" title="switch reading direction" class="icon-arrow-right-3 manga-false"></button>
<button data-trigger="click" data-action="toggleReadingMode" title="switch reading direction" class="icon-arrow-left-3 manga-true"></button> <button data-trigger="click" data-action="toggleReadingMode" title="switch reading direction" class="icon-arrow-left-3 manga-true"></button>