Permalink
Browse files

add fit-window mode

  • Loading branch information...
puzzlet committed Oct 14, 2013
1 parent ec13a20 commit 6f1d5d467f553a138a1d2fd67167a101ff2a0bb4
Showing with 27 additions and 3 deletions.
  1. +24 −3 lib/ComicBook.js
  2. +3 −0 templates/toolbar.handlebars
View
@@ -76,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: {
@@ -338,7 +338,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();
};
/**
@@ -465,7 +470,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;
@@ -507,6 +512,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;
}
@@ -569,6 +589,7 @@ 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();
@@ -47,6 +47,9 @@
<li>
<button data-trigger="click" data-action="fitWidth" title="fit page to window width" class="icon-expand"></button>
</li>
+ <li>
+ <button data-trigger="click" data-action="fitWindow" title="fit page to window" class="icon-expand-2"></button>
+ </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-left-3 manga-true"></button>

0 comments on commit 6f1d5d4

Please sign in to comment.