added a page loading overlay

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;

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();

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)
@@ -364,10 +370,15 @@ function ComicBook(id, srcs, opts) {
 	 */
 	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(); }
+		if (pages.length !== no_pages) {
-		else { this.drawPage(); }
+			this.preload();
+		} else {
+			this.drawPage();
+		}
 	};
 
 	/**
@@ -401,6 +420,8 @@ function ComicBook(id, srcs, opts) {
 	 */
 	ComicBook.prototype.preload = function () {
 		
+		this.showControl("loadingIndicator");
+
 		//var srcs = this.srcs;
 
 		if (no_pages < buffer) { buffer = no_pages; } // don't get stuck if the buffer level is higher than the number of pages
@@ -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(); }
 			};
 		}
@@ -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) {
+		if (!this.getPage(pointer+1)) { return false; }
-				pointer += (options.displayMode === "single" || is_double_page_spread) ? 1 : 2;
+		
-				this.drawPage();
+		if (pointer + 1 < pages.length) {
-			}
+			pointer += (options.displayMode === "single" || is_double_page_spread) ? 1 : 2;
-		} catch (e) {
+			this.drawPage();
-			if (e.type === ComicBookException.INVALID_PAGE) {
-				alert("you are at the end of the comic");
-			} else {
-				throw e;
-			}
 		}
 	};
 
@@ -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
 		
-			if (pointer > 0) {
+		var page = this.getPage(pointer-1);		
-				pointer -= (options.displayMode === "single" || is_double_page_spread) ? 1 : 2;
+		if (!page) { return false; }
-				this.drawPage();
+		
-			}
+		is_double_page_spread = (page.width > page.height); // need to run double page check again here as we are going backwards
-		} catch (e) {
+
-			if (e.type === ComicBookException.INVALID_PAGE) {
+		if (pointer > 0) {
-				alert("you are at the start of the comic");
+			pointer -= (options.displayMode === "single" || is_double_page_spread) ? 1 : 2;
-			} else {
+			this.drawPage();
-				throw e;
-			}
 		}
 	};