From f163b7ba6ec374c9ca3aaa3b4bb5511c5158b61b Mon Sep 17 00:00:00 2001 From: Bala Clark Date: Sat, 3 Sep 2011 21:41:26 +0200 Subject: [PATCH] added a page loading overlay --- css/styles.css | 9 +++++ examples/basic.html | 2 +- lib/ComicBook.js | 93 +++++++++++++++++++++++++++------------------ 3 files changed, 67 insertions(+), 37 deletions(-) diff --git a/css/styles.css b/css/styles.css index d87e1c9..e091475 100644 --- a/css/styles.css +++ b/css/styles.css @@ -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; diff --git a/examples/basic.html b/examples/basic.html index 007f70d..3311a17 100755 --- a/examples/basic.html +++ b/examples/basic.html @@ -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(); diff --git a/lib/ComicBook.js b/lib/ComicBook.js index b8238fd..04dbe4a 100755 --- a/lib/ComicBook.js +++ b/lib/ComicBook.js @@ -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(); } };