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

created (very hacky) function to get window.innerWidth - scrollbar widths

Browse source
This commit is contained in:
Bala Clark 2011-09-04 10:09:55 +02:00
parent 47f54170bb
commit f080bf88e5
1 changed files with 35 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

49
lib/ComicBook.js
View file

@ -13,7 +13,6 @@
- write bin scripts to minify & join all js
Nice 2 have:
- when toggling to double page mode make sure the pages are in the correct left / right order
- enable menu items via config, allow for custom items
- decouple controls from reader api
- split out classes into seperate files
@ -96,10 +95,36 @@ function ComicBook(id, srcs, opts) {
var is_double_page_spread = false;
var controlsRendered = false; // have the user controls been inserted into the dom yet?
var page_requested = false; // used to request non preloaded pages
var shiv = false;
// the current page, can pass a default as a url hash
var pointer = (parseInt(location.hash.substring(1),10) - 1) || 0;
/**
* Gets the window.innerWidth - scrollbars
*/
function windowWidth() {
var height = window.innerHeight + 1;
if (shiv === false) {
shiv = $(document.createElement("div"))
.attr("id", "cb-width-shiv")
.css({
width: "100%",
position: "absolute",
top: 0,
zIndex: "-1000"
});
$("body").append(shiv);
}
shiv.height(height);
return shiv.innerWidth();
}
/**
* enables the back button
*/
@ -389,9 +414,9 @@ function ComicBook(id, srcs, opts) {
init();
// resize navigation controls
$(".cb-control.cb-navigate").height(window.innerHeight);
$("#cb-toolbar").width(window.innerWidth);
$("#cb-loading-overlay").width(window.innerWidth).height(window.innerHeight);
$(".cb-control.cb-navigate").outerHeight(window.innerHeight);
$("#cb-toolbar").outerWidth(windowWidth());
$("#cb-loading-overlay").outerWidth(windowWidth()).height(window.innerHeight);
// preload images if needed
if (pages.length !== no_pages) {
@ -538,9 +563,9 @@ function ComicBook(id, srcs, opts) {
case "fitWidth":
document.body.style.overflowX = "hidden";
zoom_scale = (window.innerWidth > width)
? ((window.innerWidth - width) / window.innerWidth) + 1 // scale up if the window is wider than the page
: window.innerWidth / width; // scale down if the window is narrower than the page
zoom_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
// update the interal scale var so switching zoomModes while zooming will be smooth
scale = zoom_scale
@ -559,16 +584,12 @@ function ComicBook(id, srcs, opts) {
canvas_height = page_height;
// make sure the canvas is always at least full screen, even if the page is more narrow than the screen
canvas.width = (canvas_width < window.innerWidth) ? window.innerWidth : canvas_width;
canvas.width = (canvas_width < windowWidth()) ? windowWidth() : canvas_width;
canvas.height = (canvas_height < window.innerHeight) ? window.innerHeight : canvas_height;
// disable scrollbars if not needed
document.body.style.overflowX = (canvas_width < window.innerWidth) ? "hidden" : "auto";
document.body.style.overflowY = (canvas_height < window.innerHeight) ? "hidden" : "auto";
// work out a horizontal position that will keep the pages always centred
if (canvas_width < window.innerWidth && options.zoomMode === "manual") {
offsetW = (window.innerWidth - page_width) / 2;
if (canvas_width < windowWidth() && options.zoomMode === "manual") {
offsetW = (windowWidth() - page_width) / 2;
if (options.displayMode === "double") { offsetW = offsetW - page_width / 2; }
}