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

toggle toolbar with a keyboard shortcut

Browse source
This commit is contained in:
Bala Clark 2011-09-02 10:25:49 +02:00
parent 3c14fa09fc
commit 5a5546aed6
2 changed files with 22 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

9
css/styles.css
View file

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

29
lib/ComicBook.js
View file

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