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

added a page loading overlay

Browse source
This commit is contained in:
Bala Clark 2011-09-03 21:41:26 +02:00
parent e93e200a1d
commit f163b7ba6e
3 changed files with 67 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

9
css/styles.css
View file

@ -57,6 +57,15 @@
cursor: move;
}
#cb-loading-overlay {
z-index: 100;
opacity: 0.8;
background: #000 url("../img/loading.gif") no-repeat center;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#cb-toolbar {
top: 0;
border-bottom: 2px solid #444;

2
examples/basic.html
View file

@ -36,7 +36,7 @@
'futuristic_tales/x-012.jpg',
'futuristic_tales/x-013.jpg',
'futuristic_tales/x-014.jpg',
'futuristic_tales/x-005.jpg'
'futuristic_tales/x-015.jpg'
]
);
book.draw();

93
lib/ComicBook.js
View file

@ -11,11 +11,11 @@
- an "alert" control for any error messages / notifications ( & remove any instances of alert() )
- decouple controls from reader api
- split out classes into seperate files
- show loading graphic & then fade in new page if user is ahead of the last loaded page
- check for html5 feature support where used: diveintohtml5.org/everything.html or www.modernizr.com
- write bin scripts to minify & join all js
Nice 2 have:
- enable menu items via config, allow for custom items
- offline access
- thumbnail browser
- remove jquery dependency in favour of straight js
@ -96,6 +96,7 @@ function ComicBook(id, srcs, opts) {
var scale = 1; // page zoom scale, 1 = 100%
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
// the current page, can pass a default as a url hash
var pointer = (parseInt(location.hash.substring(1),10) - 1) || 0;
@ -278,7 +279,11 @@ function ComicBook(id, srcs, opts) {
.click(function(e) {
ComicBook.prototype.drawNextPage();
})
}
},
loadingIndicator: $(document.createElement("div"))
.attr("id", "cb-loading-overlay")
.addClass("cb-control")
};
/**
@ -287,6 +292,7 @@ function ComicBook(id, srcs, opts) {
ComicBook.prototype.renderControls = function() {
$(canvas)
.before(this.getControl("loadingIndicator").hide())
.after(this.getControl("toolbar"))
.after(this.getControl("navigation").left)
.after(this.getControl("navigation").right)
@ -363,11 +369,16 @@ function ComicBook(id, srcs, opts) {
* @return Image
*/
ComicBook.prototype.getPage = function(i) {
if (i < 0 || i > srcs.length) {
throw new ComicBookException(ComicBookException.INVALID_PAGE, i);
}
if (typeof pages[i] === "object") {
return pages[i];
} else {
throw new ComicBookException(ComicBookException.INVALID_PAGE, i);
page_requested = i;
this.showControl("loadingIndicator");
}
};
@ -378,9 +389,17 @@ 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);
// preload images if needed
if (pages.length !== no_pages) { this.preload(); }
else { this.drawPage(); }
if (pages.length !== no_pages) {
this.preload();
} else {
this.drawPage();
}
};
/**
@ -400,6 +419,8 @@ function ComicBook(id, srcs, opts) {
* @see #drawPage
*/
ComicBook.prototype.preload = function () {
this.showControl("loadingIndicator");
//var srcs = this.srcs;
@ -413,6 +434,7 @@ function ComicBook(id, srcs, opts) {
function preload(i) {
var page = new Image();
var padding;
$("#cb-status").text("loading page " + (i + 1) + " of " + no_pages);
@ -434,10 +456,22 @@ function ComicBook(id, srcs, opts) {
preload(i);
}
//console.log(loaded[loaded.length-1], pointer, pointer + buffer);
//console.log(loaded[loaded.length-1]);
padding = (options.displayMode === "double") ? 1 : 0;
// start rendering the comic when the buffer level has been reached (FIXME: buggy, fails if trying to load the last couple of pages)
if (loaded[loaded.length-1] === pointer + buffer) { ComicBook.prototype.drawPage(); }
if (loaded[loaded.length-1] === pointer + buffer + padding || loaded[loaded.length-1] === page_requested) {
// if the user is waiting for a page to be loaded, render that one instead of the default pointer
if (typeof page_requested === "number") {
pointer = page_requested-1;
page_requested = false;
}
ComicBook.prototype.drawPage();
ComicBook.prototype.hideControl("loadingIndicator");
}
if (loaded.length === no_pages) { $("#cb-status").remove(); }
};
}
@ -469,7 +503,7 @@ function ComicBook(id, srcs, opts) {
// reset the canvas to stop duplicate pages showing
canvas.width = 0;
canvas.height = 0;
// show double page spreads on a single page
is_double_page_spread = ((page.width > page.height || page2.width > page2.height) && options.displayMode === "double");
if (is_double_page_spread) { options.displayMode = "single"; }
@ -553,10 +587,6 @@ 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
$(".cb-control.cb-navigate").height(window.innerHeight);
$("#cb-toolbar").width(window.innerWidth);
// user callback
if (typeof options.afterDrawPage === "function") {
options.afterDrawPage(pointer + 1);
@ -574,17 +604,12 @@ function ComicBook(id, srcs, opts) {
* @see #drawPage
*/
ComicBook.prototype.drawNextPage = function () {
try {
if (pointer + 1 < pages.length) {
pointer += (options.displayMode === "single" || is_double_page_spread) ? 1 : 2;
this.drawPage();
}
} catch (e) {
if (e.type === ComicBookException.INVALID_PAGE) {
alert("you are at the end of the comic");
} else {
throw e;
}
if (!this.getPage(pointer+1)) { return false; }
if (pointer + 1 < pages.length) {
pointer += (options.displayMode === "single" || is_double_page_spread) ? 1 : 2;
this.drawPage();
}
};
@ -594,19 +619,15 @@ function ComicBook(id, srcs, opts) {
* @see #drawPage
*/
ComicBook.prototype.drawPrevPage = function () {
try {
is_double_page_spread = (this.getPage(pointer-1).width > this.getPage(pointer-1).height); // need to run double page check again here as we are going backwards
var page = this.getPage(pointer-1);
if (!page) { return false; }
is_double_page_spread = (page.width > page.height); // need to run double page check again here as we are going backwards
if (pointer > 0) {
pointer -= (options.displayMode === "single" || is_double_page_spread) ? 1 : 2;
this.drawPage();
}
} catch (e) {
if (e.type === ComicBookException.INVALID_PAGE) {
alert("you are at the start of the comic");
} else {
throw e;
}
if (pointer > 0) {
pointer -= (options.displayMode === "single" || is_double_page_spread) ? 1 : 2;
this.drawPage();
}
};