diff --git a/css/styles.css b/css/styles.css index 2b35790..8e3b9e4 100644 --- a/css/styles.css +++ b/css/styles.css @@ -3,13 +3,13 @@ color: #fff; font-size: 12px; background-color: #111; - margin: 5px; - padding: 8px; + padding: 10px; opacity: .9; position: fixed !important; } .cb-control.floating { + margin: 5px; border: 2px solid #444; border-radius: 4px; -webkit-border-radius: 4px; @@ -29,7 +29,6 @@ } .cb-control.cb-navigate:hover { - display: block; opacity: 1; } @@ -47,6 +46,16 @@ cursor: move; } +#cb-toolbar { + top: 0; + height: 25px; + opacity: 0; +} + +#cb-toolbar:hover { + opacity: 1; +} + #cb-color { width: 200px; height: 150px; diff --git a/lib/ComicBook.js b/lib/ComicBook.js index 5870ba0..16b6e9c 100755 --- a/lib/ComicBook.js +++ b/lib/ComicBook.js @@ -176,6 +176,39 @@ function ComicBook(id, srcs, opts) { * TODO: save current values */ ComicBook.prototype.control = { + + toolbar: $(document.createElement("div")) + .attr("id", "cb-toolbar") + .addClass("cb-control") + .append( + $(document.createElement("button")) + .text("layout") + .addClass(options.displayMode) + .click(function(){ + ComicBook.prototype.toggleLayout(); + }) + ) + .append( + $(document.createElement("button")) + .text("enhance") + .click(function(){ + ComicBook.prototype.toggleControl("color"); + }) + ) + .append( + $(document.createElement("button")) + .text("zoom out") + .click(function(){ + ComicBook.prototype.zoom(scale - 0.1); + }) + ) + .append( + $(document.createElement("button")) + .text("zoom in") + .click(function(){ + ComicBook.prototype.zoom(scale + 0.1); + }) + ), /** * Image enhancements @@ -287,7 +320,7 @@ function ComicBook(id, srcs, opts) { ComicBook.prototype.hideControl = function(control) { this.getControl(control).hide(); - } + }; ComicBook.prototype.toggleControl = function(control) { if (this.getControl(control).is(":visible")) { @@ -295,8 +328,17 @@ function ComicBook(id, srcs, opts) { } else { this.showControl(control); } - } + }; + ComicBook.prototype.toggleLayout = function() { + if (options.displayMode === "double") { + options.displayMode = "single"; + } else { + options.displayMode = "double"; + } + ComicBook.prototype.draw(); + }; + /** * Get the image for a given page. * @@ -495,6 +537,7 @@ function ComicBook(id, srcs, opts) { // resize navigation controls $(".cb-control.cb-navigate").height(window.innerHeight); + $("#cb-toolbar").width(window.innerWidth); // user callback if (typeof options.afterDrawPage === "function") {