diff --git a/Makefile b/Makefile index a004a78..31026b5 100644 --- a/Makefile +++ b/Makefile @@ -3,10 +3,15 @@ SOURCES = lib/pixastic/pixastic.core.js \ lib/pixastic/actions/brightness.js \ lib/pixastic/actions/desaturate.js \ lib/pixastic/actions/sharpen.js \ + lib/vendor/handlebars.runtime-1.0.rc.1.min.js \ + lib/templates.js \ lib/ComicBook.js all: reset lib/ComicBook.combined.js lib/ComicBook.min.js clean +lib/templates.js: templates/*.handlebars + handlebars $< -f $@ + lib/ComicBook.combined.js: ${SOURCES} cat > $@ $^ @@ -14,6 +19,7 @@ lib/ComicBook.min.js: lib/ComicBook.combined.js java -jar bin/closure-complier/compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --js $< --js_output_file $@ reset: + touch lib/ComicBook.min.js rm lib/ComicBook.min.js clean: diff --git a/css/styles.css b/css/styles.css index ead1d80..4754443 100644 --- a/css/styles.css +++ b/css/styles.css @@ -19,7 +19,7 @@ margin: 0 0 4px; } -.cb-control.cb-navigate { +.navigate { top: 0; margin: 0; cursor: pointer; @@ -31,16 +31,16 @@ box-shadow: none; } -.cb-control.cb-navigate:hover { +.navigate:hover { opacity: 1; } -.cb-control.cb-navigate.left { +.navigate-left { left: 0; background-image: url(../img/left.png); } -.cb-control.cb-navigate.right { +.navigate-right { right: 0; background-image: url(../img/right.png); } @@ -79,10 +79,15 @@ #cb-progress-bar { width: 200px; +} + +#cb-progress-bar, +#cb-progress-bar .progressbar-value { height: 3px; } -#cb-progress-bar .ui-widget-header { +#cb-progress-bar .progressbar-value { + width: 0; background: #86C441; border-color: #3E7600; } diff --git a/css/toolbar.css b/css/toolbar.css new file mode 100644 index 0000000..faf8de8 --- /dev/null +++ b/css/toolbar.css @@ -0,0 +1,118 @@ + +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 12px; + line-height: 20px; + color: #333; +} + +button, input, label { + cursor: pointer; +} + +.pull-left { + float: left; +} + +.pull-right { + float: right; +} + +.toolbar { + color: white; + background-color: black; + background-image: linear-gradient(to bottom, rgb(80, 80, 80), rgb(17, 17, 17)); + overflow: visible; + padding: 8px; + position: fixed; + left: 0; + right: 0; + z-index: 99; + margin-bottom: 0; + box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); + opacity: 0; + transition: opacity 0.2s ease-in-out; +} + +.toolbar:hover { + opacity: 1; +} + +.toolbar li { + display: inline-block; + position: relative; +} + +.toolbar .separator { + border: solid 1px; + height: 1em; +} + +.toolbar button { + color: white; + border: none; + background-color: transparent; + padding: 0; +} + +.toolbar li > button { + font-size: 16px; + padding: 0 12px; +} + +.toolbar li > button:hover { + color: #8CC746; +} + +.toolbar button[data-action=close]:hover { + color: #FF6464; +} + +.toolbar .dropdown { + font-size: 12px; + position: absolute; + width: 212px; + background-color: white; + color: #111; + border-radius: 4px; + box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); + top: 2em; + padding: 4px 0; + display: none; +} + +.toolbar li:hover > .dropdown { + display: block; +} + +/* dropdown arrow code taken from Twitter Bootstrap 2.3.1 */ +.toolbar .dropdown:after { + position: absolute; + top: -4px; + left: 15px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #ffffff; + border-left: 6px solid transparent; + content: ''; +} + +.dropdown .control-group { + padding: 8px; +} + +.dropdown .sliders { + font-size: 16px; +} + +.dropdown .control-group span { + float: left; + margin: 0 2px; + clear: both; +} + +.dropdown .control-group input[type=range] { + width: 171px; + float: right; + margin: 0; +} diff --git a/examples/dev.html b/examples/dev.html index 08bb8d1..7868aec 100644 --- a/examples/dev.html +++ b/examples/dev.html @@ -4,16 +4,18 @@ Dev - - + + + - + + @@ -48,11 +50,11 @@ 'goldenboy/goldenboy_23.jpg', 'goldenboy/goldenboy_24.jpg', 'goldenboy/goldenboy_25.jpg' - ]); + ]); book.draw(); - $(window).resize(function(event) { + $(window).on('resize', function () { book.draw(); }); diff --git a/fonts/icomoon-toolbar/Read Me.txt b/fonts/icomoon-toolbar/Read Me.txt new file mode 100755 index 0000000..9d2b9e5 --- /dev/null +++ b/fonts/icomoon-toolbar/Read Me.txt @@ -0,0 +1,3 @@ +To modify your generated font, use the *dev.svg* file, located in the *fonts* folder in this package. You can import this dev.svg file to the IcoMoon app. All the tags (class names) and the Unicode points of your glyphs are saved in this file. + +See the documentation for more info on how to use this package: http://icomoon.io/#docs/font-face \ No newline at end of file diff --git a/fonts/icomoon-toolbar/fonts/toolbar.dev.svg b/fonts/icomoon-toolbar/fonts/toolbar.dev.svg new file mode 100755 index 0000000..a7323d5 --- /dev/null +++ b/fonts/icomoon-toolbar/fonts/toolbar.dev.svg @@ -0,0 +1,108 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/icomoon-toolbar/fonts/toolbar.eot b/fonts/icomoon-toolbar/fonts/toolbar.eot new file mode 100755 index 0000000..5720002 Binary files /dev/null and b/fonts/icomoon-toolbar/fonts/toolbar.eot differ diff --git a/fonts/icomoon-toolbar/fonts/toolbar.svg b/fonts/icomoon-toolbar/fonts/toolbar.svg new file mode 100755 index 0000000..7003f7d --- /dev/null +++ b/fonts/icomoon-toolbar/fonts/toolbar.svg @@ -0,0 +1,108 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/icomoon-toolbar/fonts/toolbar.ttf b/fonts/icomoon-toolbar/fonts/toolbar.ttf new file mode 100755 index 0000000..a33dff1 Binary files /dev/null and b/fonts/icomoon-toolbar/fonts/toolbar.ttf differ diff --git a/fonts/icomoon-toolbar/fonts/toolbar.woff b/fonts/icomoon-toolbar/fonts/toolbar.woff new file mode 100755 index 0000000..6030af5 Binary files /dev/null and b/fonts/icomoon-toolbar/fonts/toolbar.woff differ diff --git a/fonts/icomoon-toolbar/index.html b/fonts/icomoon-toolbar/index.html new file mode 100755 index 0000000..5eb6a21 --- /dev/null +++ b/fonts/icomoon-toolbar/index.html @@ -0,0 +1,343 @@ + + + +Your Font/Glyphs + + + + + +
+
+
+

Your font contains the following glyphs

+

The generated SVG font can be imported back to IcoMoon for modification.

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+

Class Names

+
+ + +  icon-file + + + +  icon-image + + + +  icon-zoom-out + + + +  icon-zoom-in + + + +  icon-expand + + + +  icon-expand-2 + + + +  icon-folder-open + + + +  icon-folder + + + +  icon-cog + + + +  icon-menu + + + +  icon-wrench + + + +  icon-settings + + + +  icon-loop + + + +  icon-pin + + + +  icon-first + + + +  icon-last + + + +  icon-arrow-left + + + +  icon-arrow-right + + + +  icon-arrow-left-2 + + + +  icon-arrow-right-2 + + + +  icon-arrow-left-3 + + + +  icon-arrow-right-3 + + + +  icon-previous + + + +  icon-next + + + +  icon-droplet + + + +  icon-adjust + + + +  icon-sun + + + +  icon-remove-sign + + + +  icon-remove + +
+ +
+ + + \ No newline at end of file diff --git a/fonts/icomoon-toolbar/license.txt b/fonts/icomoon-toolbar/license.txt new file mode 100755 index 0000000..0be5efc --- /dev/null +++ b/fonts/icomoon-toolbar/license.txt @@ -0,0 +1,14 @@ +Icon Set: Entypo -- http://www.entypo.com/ +License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/ + + +Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ +License: CC BY 3.0 -- http://creativecommons.org/licenses/by/3.0/ + + +Icon Set: IcoMoon - Free -- http://keyamoon.com/icomoon/ +License: CC BY 3.0 -- http://creativecommons.org/licenses/by/3.0/ + + +Icon Set: Iconic -- http://somerandomdude.com/work/iconic/ +License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/us/ \ No newline at end of file diff --git a/fonts/icomoon-toolbar/lte-ie7.js b/fonts/icomoon-toolbar/lte-ie7.js new file mode 100755 index 0000000..07023a6 --- /dev/null +++ b/fonts/icomoon-toolbar/lte-ie7.js @@ -0,0 +1,56 @@ +/* Load this script using conditional IE comments if you need to support IE 7 and IE 6. */ + +window.onload = function() { + function addIcon(el, entity) { + var html = el.innerHTML; + el.innerHTML = '' + entity + '' + html; + } + var icons = { + 'icon-file' : '', + 'icon-image' : '', + 'icon-zoom-out' : '', + 'icon-zoom-in' : '', + 'icon-expand' : '', + 'icon-expand-2' : '', + 'icon-folder-open' : '', + 'icon-folder' : '', + 'icon-cog' : '', + 'icon-menu' : '', + 'icon-wrench' : '', + 'icon-settings' : '', + 'icon-loop' : '', + 'icon-pin' : '', + 'icon-first' : '', + 'icon-last' : '', + 'icon-arrow-left' : '', + 'icon-arrow-right' : '', + 'icon-arrow-left-2' : '', + 'icon-arrow-right-2' : '', + 'icon-arrow-left-3' : '', + 'icon-arrow-right-3' : '', + 'icon-previous' : '', + 'icon-next' : '', + 'icon-droplet' : '', + 'icon-adjust' : '', + 'icon-sun' : '', + 'icon-remove-sign' : '', + 'icon-remove' : '' + }, + els = document.getElementsByTagName('*'), + i, attr, html, c, el; + for (i = 0; ; i += 1) { + el = els[i]; + if(!el) { + break; + } + attr = el.getAttribute('data-icon'); + if (attr) { + addIcon(el, attr); + } + c = el.className; + c = c.match(/icon-[^\s'"]+/); + if (c && icons[c[0]]) { + addIcon(el, icons[c[0]]); + } + } +}; \ No newline at end of file diff --git a/fonts/icomoon-toolbar/style.css b/fonts/icomoon-toolbar/style.css new file mode 100755 index 0000000..fdc6cd8 --- /dev/null +++ b/fonts/icomoon-toolbar/style.css @@ -0,0 +1,126 @@ +@font-face { + font-family: 'toolbar'; + src:url('fonts/toolbar.eot'); + src:url('fonts/toolbar.eot?#iefix') format('embedded-opentype'), + url('fonts/toolbar.woff') format('woff'), + url('fonts/toolbar.ttf') format('truetype'), + url('fonts/toolbar.svg#toolbar') format('svg'); + font-weight: normal; + font-style: normal; +} + +/* Use the following CSS code if you want to use data attributes for inserting your icons */ +[data-icon]:before { + font-family: 'toolbar'; + content: attr(data-icon); + speak: none; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} + +/* Use the following CSS code if you want to have a class per icon */ +/* +Instead of a list of all class selectors, +you can use the generic selector below, but it's slower: +[class*="icon-"] { +*/ +.icon-file, .icon-image, .icon-zoom-out, .icon-zoom-in, .icon-expand, .icon-expand-2, .icon-folder-open, .icon-folder, .icon-cog, .icon-menu, .icon-wrench, .icon-settings, .icon-loop, .icon-pin, .icon-first, .icon-last, .icon-arrow-left, .icon-arrow-right, .icon-arrow-left-2, .icon-arrow-right-2, .icon-arrow-left-3, .icon-arrow-right-3, .icon-previous, .icon-next, .icon-droplet, .icon-adjust, .icon-sun, .icon-remove-sign, .icon-remove { + font-family: 'toolbar'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +.icon-file:before { + content: "\e000"; +} +.icon-image:before { + content: "\e001"; +} +.icon-zoom-out:before { + content: "\e002"; +} +.icon-zoom-in:before { + content: "\e003"; +} +.icon-expand:before { + content: "\e004"; +} +.icon-expand-2:before { + content: "\e005"; +} +.icon-folder-open:before { + content: "\e006"; +} +.icon-folder:before { + content: "\e007"; +} +.icon-cog:before { + content: "\e008"; +} +.icon-menu:before { + content: "\e009"; +} +.icon-wrench:before { + content: "\e00a"; +} +.icon-settings:before { + content: "\e00b"; +} +.icon-loop:before { + content: "\e00c"; +} +.icon-pin:before { + content: "\e00d"; +} +.icon-first:before { + content: "\e00e"; +} +.icon-last:before { + content: "\e00f"; +} +.icon-arrow-left:before { + content: "\e011"; +} +.icon-arrow-right:before { + content: "\e010"; +} +.icon-arrow-left-2:before { + content: "\e012"; +} +.icon-arrow-right-2:before { + content: "\e013"; +} +.icon-arrow-left-3:before { + content: "\e014"; +} +.icon-arrow-right-3:before { + content: "\e015"; +} +.icon-previous:before { + content: "\e016"; +} +.icon-next:before { + content: "\e017"; +} +.icon-droplet:before { + content: "\e01a"; +} +.icon-adjust:before { + content: "\f042"; +} +.icon-sun:before { + content: "\e018"; +} +.icon-remove-sign:before { + content: "\f057"; +} +.icon-remove:before { + content: "\f00d"; +} diff --git a/lib/ComicBook.js b/lib/ComicBook.js index ec62bfe..84cc776 100755 --- a/lib/ComicBook.js +++ b/lib/ComicBook.js @@ -11,6 +11,9 @@ - full browser test - IE9 / FF3.6+ / Chrome / Safari / Opera - don't inlcude the closure compiler, expect it (or similar) to be installed instead + - fix Makefile (handlebars is not compiling properly..) + - fonts for left / right navigation, remove all sprites / images completely + Nice 2 have: - lint - jump to page? @@ -23,6 +26,8 @@ - really need to speed up enhancements, try to use webworkers - refactor so we are not using all these loose shared variables and other nastyness - use custom event emitters instead of hacky code + - properly bind "this" so we don't have to keep using "self" + - allow toolbar to be sticky */ /** @@ -56,6 +61,7 @@ function merge(a, b) { * @returns {ComicBookException} */ var ComicBookException = { + INVALID_ACTION: "invalid action", INVALID_PAGE: "invalid page", INVALID_PAGE_TYPE: "invalid page type", UNDEFINED_CONTROL: "undefined control", @@ -159,6 +165,7 @@ function ComicBook(id, srcs, opts) { * @see #ComicBook.prototype.enhance */ function init() { + // setup canvas canvas = document.getElementById(canvas_id); context = canvas.getContext("2d"); @@ -170,199 +177,47 @@ function ComicBook(id, srcs, opts) { } // add page controls - // TODO: add IE event listeners too. - canvas.addEventListener("click", self.navigation, false); window.addEventListener("keydown", self.navigation, false); window.addEventListener("hashchange", checkHash, false); - //setInterval(function() { checkHash(); }, 300); // TODO: enable this when there is no onhashchange event } - /** - * User controls - * - * TODO: save current values - */ - ComicBook.prototype.control = { - - status: $(document.createElement("div")) - .attr("id", "cb-status") - .addClass("cb-control cb-always-on") - .append( - $(document.createElement("div")) - .attr("id", "cb-progress-bar") - .progressbar() - ), - - toolbar: $(document.createElement("div")) - .attr("id", "cb-toolbar") - .addClass("cb-control") - .append( - $(document.createElement("button")) - .attr("title", "close the toolbar") - .addClass("cb-close") - .click(function(){ - self.toggleToolbar(); - }) - ) - .append( - $(document.createElement("button")) - .attr("title", "switch between dual and single page modes") - .addClass("cb-layout " + options.displayMode) - .click(function(){ - self.toggleLayout(); - }) - ) - .append( - $(document.createElement("button")) - .attr("title", "tweak the page colors") - .addClass("cb-color cb-menu-button") - .click(function(){ - self.toggleControl("color"); - }) - ) - .append( - $(document.createElement("button")) - .attr("title", "zoom out") - .addClass("cb-zoom-out") - .click(function(){ - self.zoom(scale - 0.1); - }) - ) - .append( - $(document.createElement("button")) - .attr("title", "zoom in") - .addClass("cb-zoom-in") - .click(function(){ - self.zoom(scale + 0.1); - }) - ) - .append( - $(document.createElement("button")) - .attr("title", "fit to page width") - .addClass("cb-fit-width") - .click(function(){ - options.zoomMode = "fitWidth" - self.drawPage(); - }) - ) - .append( - $(document.createElement("p")) - .attr("id", "cb-comic-info") - .append(" / " + srcs.length) - ), - - /** - * Image enhancements - */ - color: $(document.createElement("div")) - .attr("id", "cb-color") - .addClass("cb-control") - .append("") - .append( - $("
").slider({ - value: 0, - step: 10, - min: -1000, - max: 1000, - change: function(event, ui) { - self.enhance.brightness({ brightness: ui.value }); - } - }) - ) - .append("") - .append( - $("
").slider({ - value: 0, - step: 0.001, - min: 0, - max: 1, - change: function(event, ui) { - self.enhance.brightness({ contrast: ui.value }); - } - }) - ) - .append("") - .append( - $("
").slider({ - value: 0, - step: 0.001, - min: 0, - max: 1, - change: function(event, ui) { - self.enhance.sharpen({ amount: ui.value }); - } - }) - ) - .append( - $(document.createElement("div")).addClass("cb-option") - .append(" ") - .append("") - ), - - /** - * Page navigation - */ - navigation: { - - left: $(document.createElement("div")) - .addClass("cb-control cb-navigate cb-always-on left") - .click(function(e){ - self.drawPrevPage(); - }), - - right: $(document.createElement("div")) - .addClass("cb-control cb-navigate cb-always-on right") - .click(function(e) { - self.drawNextPage(); - }) - }, - - loadingOverlay: $(document.createElement("div")) - .attr("id", "cb-loading-overlay") - .addClass("cb-control") - }; - ComicBook.prototype.renderControls = function() { - $(canvas) - .before(this.getControl("loadingOverlay")) - .before(this.getControl("status")) - .after(this.getControl("toolbar")) - .after(this.getControl("navigation").left) - .after(this.getControl("navigation").right) - .after(this.getControl("color").hide()); + var controls = {}; - $(".cb-menu-button").click(function(e) { - $(this).toggleClass("active"); + $.each(Handlebars.templates, function (name, template) { + + var $template = $(template().trim()); + controls[name] = $template; + + $template.find('*').andSelf().filter("[data-action][data-trigger]").each(function () { + + var $this = $(this); + var trigger = $this.data('trigger'); + var action = $this.data('action'); + + // trigger a direct method if exists + if (typeof self[$this.data('action')] === "function") { + $this.on(trigger, self[action]); + } + + // throw an event to be caught outside if the app code + $this.on(trigger, function (e) { + $(self).trigger(trigger, e); + }); + }); + + $(canvas).before($template); }); - $("#cb-desaturate").click(function(){ - if ($(this).is(":checked")) { - self.enhance.desaturate(); - } else { - self.enhance.resaturate(); - } - }); - - $("#cb-reset").click(function() { - // TODO: improve performance here. - $("#cb-brightness").slider("value", 0); - $("#cb-contrast").slider("value", 0); - $("#cb-saturation").slider("value", 0); - $("#cb-sharpen").slider("value", 0); - var desaturate = $("#cb-desaturate"); - desaturate.attr("checked", false); - self.enhance.reset(); - }); + this.controls = controls; }; ComicBook.prototype.getControl = function(control) { - - if (typeof this.control[control] === "undefined") { - throw ComicBookException.UNDEFINED_CONTROL+' '+control; + if (typeof this.controls[control] !== "object") { + throw ComicBookException.UNDEFINED_CONTROL + ' ' + control; } - - return this.control[control]; + return this.controls[control]; }; ComicBook.prototype.showControl = function(control) { @@ -377,23 +232,16 @@ function ComicBook(id, srcs, opts) { this.getControl(control).toggle().toggleClass("open"); }; - ComicBook.prototype.toggleToolbar = function() { - if ($("#cb-toolbar").is(":visible")) { - $(".cb-control").not(".cb-always-on").hide(); - } else { - $("#cb-toolbar, .cb-control.open").show(); - } - }; - ComicBook.prototype.toggleLayout = function() { - if (options.displayMode === "double") { - $("#cb-toolbar .cb-layout").removeClass("double"); - options.displayMode = "single"; - } else { - $("#cb-toolbar .cb-layout").removeClass("single"); - options.displayMode = "double"; - } - $("#cb-toolbar .cb-layout").addClass(options.displayMode); + + var $control = self.getControl("toolbar").find("[data-action=toggleLayout]"); + var displayMode = (options.displayMode === "single") ? "double" : "single"; + + $control.removeClass(options.displayMode); + $control.addClass(displayMode); + + options.displayMode = displayMode; + self.drawPage(); }; @@ -424,8 +272,7 @@ function ComicBook(id, srcs, opts) { init(); // resize navigation controls - $(".cb-control.cb-navigate").outerHeight(window.innerHeight); - $("#cb-toolbar").outerWidth(windowWidth()); + $(".navigate").outerHeight(window.innerHeight); $("#cb-loading-overlay").outerWidth(windowWidth()).height(window.innerHeight); // preload images if needed @@ -447,6 +294,19 @@ function ComicBook(id, srcs, opts) { if (typeof this.getPage(pointer) === "object") { this.drawPage(); } }; + ComicBook.prototype.zoomIn = function () { + self.zoom(scale + 0.1); + }; + + ComicBook.prototype.zoomOut = function () { + self.zoom(scale - 0.1); + }; + + ComicBook.prototype.fitWidth = function () { + options.zoomMode = "fitWidth" + ComicBook.prototype.drawPage(); + }; + /** * Preload all images, draw the page only after a given number have been loaded. * @@ -470,7 +330,7 @@ function ComicBook(id, srcs, opts) { pages[i] = this; loaded.push(i); - $("#cb-progress-bar").progressbar("value", Math.floor((loaded.length / no_pages) * 100)); + $("#cb-progress-bar .progressbar-value").css("width", Math.floor((loaded.length / no_pages) * 100) + "%"); // double page mode needs an extra page added var buffer = (options.displayMode === "double" && pointer < srcs.length-1) ? 1 : 0; @@ -662,7 +522,11 @@ function ComicBook(id, srcs, opts) { var current_page = (options.displayMode === "double" && pointer+2 <= srcs.length) ? (pointer+1) + "-" + (pointer+2) : pointer+1 - $("#cb-current-page").text(current_page); + + this.getControl('toolbar') + .find("#current-page").text(current_page) + .end() + .find("#page-count").text(srcs.length); // revert page mode back to double if it was auto switched for a double page spread if (is_double_page_spread) { options.displayMode = "double"; } @@ -671,21 +535,18 @@ function ComicBook(id, srcs, opts) { $("button.cb-fit-width").attr("disabled", (options.zoomMode === "fitWidth")); // disable prev/next buttons if not needed - $(".cb-navigate").show(); + $(".navigate").show(); if (pointer === 0) { - $(".cb-navigate.left").hide(); - $(".cb-navigate.right").show(); + $(".navigate-left").hide(); + $(".navigate-right").show(); } if (pointer === srcs.length-1 || (typeof page2 === "object" && pointer === srcs.length-2)) { - $(".cb-navigate.left").show(); - $(".cb-navigate.right").hide(); + $(".navigate-left").show(); + $(".navigate-right").hide(); } - // user callback - if (typeof options.afterDrawPage === "function") { - options.afterDrawPage(pointer + 1); - } + $(this).trigger("navigate"); // update hash location if (getHash() !== pointer) { @@ -706,7 +567,7 @@ function ComicBook(id, srcs, opts) { var page; try { - page = this.getPage(pointer+1); + page = self.getPage(pointer+1); } catch (e) {} if (!page) { return false; } @@ -714,7 +575,7 @@ function ComicBook(id, srcs, opts) { if (pointer + 1 < pages.length) { pointer += (options.displayMode === "single" || is_double_page_spread) ? 1 : 2; try { - this.drawPage(); + self.drawPage(); } catch (e) {} } }; @@ -729,7 +590,7 @@ function ComicBook(id, srcs, opts) { var page; try { - page = this.getPage(pointer-1); + page = self.getPage(pointer-1); } catch (e) {} if (!page) { return false; } @@ -738,10 +599,35 @@ function ComicBook(id, srcs, opts) { if (pointer > 0) { pointer -= (options.displayMode === "single" || is_double_page_spread) ? 1 : 2; - this.drawPage(); + self.drawPage(); } }; + + ComicBook.prototype.brightness = function () { + self.enhance.brightness({ brightness: $(this).val() }); + } + + ComicBook.prototype.contrast = function () { + self.enhance.brightness({ contrast: $(this).val() }); + } + + ComicBook.prototype.sharpen = function () { + self.enhance.sharpen({ amount: $(this).val() }); + } + + ComicBook.prototype.desaturate = function () { + if ($(this).is(":checked")) { + self.enhance.desaturate(); + } else { + self.enhance.resaturate(); + } + }; + + ComicBook.prototype.resetEnhancements = function () { + self.enhance.reset(); + }; + /** * Apply image enhancements to the canvas. * @@ -802,11 +688,8 @@ function ComicBook(id, srcs, opts) { * Force black and white */ desaturate: function () { - options.enhance.desaturate = {}; - Pixastic.process(canvas, "desaturate", { average : false }); - init(); }, @@ -855,9 +738,7 @@ function ComicBook(id, srcs, opts) { var side = false; switch (e.type) { - case "click": - self.toggleToolbar(); - break; + case "keydown": // navigation @@ -872,6 +753,7 @@ function ComicBook(id, srcs, opts) { self.toggleLayout(); } break; + default: throw ComicBookException.INVALID_NAVIGATION_EVENT+' '+e.type; } diff --git a/lib/ComicBook.min.js b/lib/ComicBook.min.js index e72c20d..f16ee3e 100644 --- a/lib/ComicBook.min.js +++ b/lib/ComicBook.min.js @@ -1,39 +1,41 @@ -var Pixastic=function(){function g(a,c,o){a.addEventListener?a.addEventListener(c,o,!1):a.attachEvent&&a.attachEvent("on"+c,o)}function f(a){var c=!1,o=function(){c||(c=!0,a())};document.write('