From 5a5546aed6d06837a5a5e0d62742c684c0f99bc2 Mon Sep 17 00:00:00 2001 From: Bala Clark Date: Fri, 2 Sep 2011 10:25:49 +0200 Subject: [PATCH] toggle toolbar with a keyboard shortcut --- css/styles.css | 9 ++------- lib/ComicBook.js | 29 ++++++++++++++++++++--------- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/css/styles.css b/css/styles.css index 075d3a2..c402404 100644 --- a/css/styles.css +++ b/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; diff --git a/lib/ComicBook.js b/lib/ComicBook.js index 2b2fb40..75efdb1 100755 --- a/lib/ComicBook.js +++ b/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"); }