toggle toolbar with a keyboard shortcut

css/styles.css

@@ -21,7 +21,6 @@
 	-webkit-box-shadow: 0 0 4px #000;
 	-moz-box-shadow: 0 0 4px #000;
 	box-shadow: 0 0 4px #000;
-	
 }
 
 .cb-control.cb-navigate {
@@ -29,8 +28,8 @@
 	margin: 0;
 	cursor: pointer;
 	width: 128px;
-	background: center no-repeat;
 	opacity: 0;
+	background: center no-repeat;
 }
 
 .cb-control.cb-navigate:hover {
@@ -54,20 +53,16 @@
 #cb-toolbar {
 	top: 0;
 	height: 25px;
-	opacity: 0;
 	border-top: none;
 	border-left: none;
 	border-right: none;
+	display: none;
 }
 
 #cb-toolbar #cb-status {
 	float: right;
 }
 
-#cb-toolbar:hover {
-	opacity: 1;
-}
-
 #cb-color {
 	width: 200px;
 	height: 150px;

lib/ComicBook.js

@@ -77,7 +77,8 @@ function ComicBook(id, srcs, opts) {
 			next: 78,
 			previous: 80,
 			control: {
-				color: 69
+				color: 69,
+				toolbar: 84
 			}
 		}
 	};
@@ -177,7 +178,7 @@ function ComicBook(id, srcs, opts) {
 	 * TODO: save current values
 	 */
 	ComicBook.prototype.control = {
-		
+
 		toolbar: $(document.createElement("div"))
 			.attr("id", "cb-toolbar")
 			.addClass("cb-control")
@@ -324,12 +325,16 @@ function ComicBook(id, srcs, opts) {
 		this.getControl(control).hide();
 	};
 
+	ComicBook.prototype.toggle = function(e) {
+		e.toggle();
+	};
+
 	ComicBook.prototype.toggleControl = function(control) {
-		if (this.getControl(control).is(":visible")) {
-			this.hideControl(control);
-		} else {
-			this.showControl(control);
-		}
+		ComicBook.prototype.toggle(this.getControl(control));
+	};
+
+	ComicBook.prototype.toggleToolbar = function() {
+		ComicBook.prototype.toggle($("#cb-toolbar"));
 	};
 
 	ComicBook.prototype.toggleLayout = function() {
@@ -343,7 +348,7 @@ function ComicBook(id, srcs, opts) {
 		$("#cb-toolbar .cb-layout").addClass(options.displayMode);
 		ComicBook.prototype.draw();
 	};
-	
+
 	/**
 	 * Get the image for a given page.
 	 *
@@ -400,7 +405,7 @@ function ComicBook(id, srcs, opts) {
 		function preload(i) {
 
 			var page = new Image();
-			
+
 			$("#cb-status").text("loading page " + (i + 1) + " of " + no_pages);
 
 			page.src = srcs[i];
@@ -707,8 +712,14 @@ function ComicBook(id, srcs, opts) {
 				break;
 			case "keydown":
 
+				// navigation
 				if (e.keyCode === options.keyboard.previous) { side = "left"; }
 				if (e.keyCode === options.keyboard.next) { side = "right"; }
+
+				// display controls
+				if (e.keyCode === options.keyboard.control.toolbar) {
+					ComicBook.prototype.toggleToolbar();
+				}
 				if (e.keyCode === options.keyboard.control.color) {
 					ComicBook.prototype.toggleControl("color");
 				}