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

Merge pull request #1 from klutzy/feature/best-fit

Browse source 
Add best-fit mode
This commit is contained in:
Kyung-hown Chung 2013-05-17 07:38:12 -07:00
commit 022b551b35
3 changed files with 30 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
css/styles.css
View file

@ -142,6 +142,10 @@
#cb-toolbar button.cb-fit-width:hover { background-position: -24px -48px }
#cb-toolbar button.cb-fit-width[disabled=disabled] { background-position: -48px -48px }
#cb-toolbar button.cb-fit-best { background-position: 0 -192px }
#cb-toolbar button.cb-fit-best:hover { background-position: -24px -192px }
#cb-toolbar button.cb-fit-best[disabled=disabled] { background-position: -48px -192px }
#cb-toolbar button.cb-read-direction#toleft{ background-position: 0 -144px }
#cb-toolbar button.cb-read-direction:hover#toleft{ background-position: -24px -144px }

BIN
img/iconic/sprite.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

Before After
Before After

26
lib/ComicBook.js
View file

@ -243,6 +243,15 @@ function ComicBook(id, srcs, opts) {
ComicBook.prototype.drawPage();
})
)
.append(
$(document.createElement("button"))
.attr("title", "fit to page width/height")
.addClass("cb-fit-best")
.click(function(){
options.zoomMode = "fitBest"
ComicBook.prototype.drawPage();
})
)
.append(
$(document.createElement("button"))
.attr("title", ((options.manga == true) ? "change reading direction to 'left-to-right'" : "change reading direction to 'right-to-left'"))
@ -601,6 +610,7 @@ function ComicBook(id, srcs, opts) {
}
var width = page.width;
var height = page.height;
// reset the canvas to stop duplicate pages showing
canvas.width = 0;
@ -642,6 +652,21 @@ function ComicBook(id, srcs, opts) {
scale = zoom_scale
break;
case "fitBest":
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;
}
@ -697,6 +722,7 @@ function ComicBook(id, srcs, opts) {
// disable the fit width button if needed
$("button.cb-fit-width").attr("disabled", (options.zoomMode === "fitWidth"));
$("button.cb-fit-best").attr("disabled", (options.zoomMode === "fitBest"));
//Change the icon on the read direction
if(options.manga == true)