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

added left/right navigation arrows

Browse source
This commit is contained in:
Bala Clark 2011-08-30 22:58:31 +02:00
parent b5dcc04f32
commit 2a622f2726
4 changed files with 58 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

35
lib/ComicBook.js
View file

@ -183,14 +183,35 @@ function ComicBook(id, srcs, opts) {
top: "40%",
left: "40%"
})
.draggable()
.draggable(),
/**
* Page navigation
*/
navigation: {
left: $(document.createElement("div"))
.addClass("control navigate left")
.click(function(e){
ComicBook.prototype.drawPrevPage();
}),
right: $(document.createElement("div"))
.addClass("control navigate right")
.click(function(e) {
ComicBook.prototype.drawNextPage();
})
}
};
/**
* TODO: center, make sure they never leave the visible portion of the screen
*/
ComicBook.prototype.renderControls = function() {
$(canvas).after(this.getControl("image").hide());
$(canvas)
.after(this.getControl("navigation").left)
.after(this.getControl("navigation").right)
.after(this.getControl("image").hide());
};
ComicBook.prototype.getControl = function(control) {
@ -263,7 +284,7 @@ function ComicBook(id, srcs, opts) {
// show load status panel
if ($("#status").length === 0) {
$(canvas).after('<div class="control" id="status"><p></p></div>');
$(canvas).after('<div class="floating control" id="status"><p></p></div>');
}
// I am using recursion instead of a forEach loop so that the next image is
@ -352,7 +373,8 @@ function ComicBook(id, srcs, opts) {
: window.innerWidth / width; // scale down if the window is narrower than the page
break;
default:throw "invalid zoomMode";
default:
throw "invalid zoomMode";
}
var canvas_width = page.width * zoom_scale;
@ -402,6 +424,9 @@ function ComicBook(id, srcs, opts) {
// revert page mode back to double if it was auto switched for a double page spread
if (is_double_page_spread) { options.displayMode = "double"; }
// resize navigation controls
$(".control.navigate").height(window.innerHeight);
// user callback
if (typeof options.afterDrawPage === "function") {
options.afterDrawPage(pointer + 1);
@ -550,7 +575,7 @@ function ComicBook(id, srcs, opts) {
e.stopPropagation();
window.scroll(0,0); // make sure the top of the page is in view
window.scroll(0, 0); // make sure the top of the page is in view
// western style (left to right)
if (!options.manga) {