From ad2ad4f3799719148a5ccde8b2d70e1cb6150511 Mon Sep 17 00:00:00 2001 From: Bala Clark Date: Thu, 2 May 2013 22:26:33 +0200 Subject: [PATCH] refactoring, use Handlebars instead of jQuery objects, updated toolbar styles --- Makefile | 6 + css/styles.css | 15 +- css/toolbar.css | 118 ++++++ examples/dev.html | 12 +- fonts/icomoon-toolbar/Read Me.txt | 3 + fonts/icomoon-toolbar/fonts/toolbar.dev.svg | 108 ++++++ fonts/icomoon-toolbar/fonts/toolbar.eot | Bin 0 -> 5048 bytes fonts/icomoon-toolbar/fonts/toolbar.svg | 108 ++++++ fonts/icomoon-toolbar/fonts/toolbar.ttf | Bin 0 -> 4884 bytes fonts/icomoon-toolbar/fonts/toolbar.woff | Bin 0 -> 6328 bytes fonts/icomoon-toolbar/index.html | 343 ++++++++++++++++++ fonts/icomoon-toolbar/license.txt | 14 + fonts/icomoon-toolbar/lte-ie7.js | 56 +++ fonts/icomoon-toolbar/style.css | 126 +++++++ lib/ComicBook.js | 320 ++++++---------- lib/ComicBook.min.js | 78 ++-- lib/templates.js | 43 +++ lib/vendor/handlebars.runtime-1.0.rc.1.min.js | 2 + templates/loadingOverlay.handlebars | 2 + templates/navigateLeft.handlebars | 2 + templates/navigateRight.handlebars | 2 + templates/progressbar.handlebars | 5 + templates/toolbar.handlebars | 55 +++ 23 files changed, 1151 insertions(+), 267 deletions(-) create mode 100644 css/toolbar.css create mode 100755 fonts/icomoon-toolbar/Read Me.txt create mode 100755 fonts/icomoon-toolbar/fonts/toolbar.dev.svg create mode 100755 fonts/icomoon-toolbar/fonts/toolbar.eot create mode 100755 fonts/icomoon-toolbar/fonts/toolbar.svg create mode 100755 fonts/icomoon-toolbar/fonts/toolbar.ttf create mode 100755 fonts/icomoon-toolbar/fonts/toolbar.woff create mode 100755 fonts/icomoon-toolbar/index.html create mode 100755 fonts/icomoon-toolbar/license.txt create mode 100755 fonts/icomoon-toolbar/lte-ie7.js create mode 100755 fonts/icomoon-toolbar/style.css create mode 100644 lib/templates.js create mode 100644 lib/vendor/handlebars.runtime-1.0.rc.1.min.js create mode 100644 templates/loadingOverlay.handlebars create mode 100644 templates/navigateLeft.handlebars create mode 100644 templates/navigateRight.handlebars create mode 100644 templates/progressbar.handlebars create mode 100644 templates/toolbar.handlebars 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 0000000000000000000000000000000000000000..572000219b803d4b2ca702fc72fabb98ad25034c GIT binary patch literal 5048 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 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..a33dff12bc614a7a30450b8dcd1dda853ada5f7a GIT binary patch literal 4884 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 literal 0 HcmV?d00001 diff --git a/fonts/icomoon-toolbar/fonts/toolbar.woff b/fonts/icomoon-toolbar/fonts/toolbar.woff new file mode 100755 index 0000000000000000000000000000000000000000..6030af596d886b74264d1a4c15d6df22a3f30206 GIT binary patch literal 6328 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 OXU-Om{7DfEK>r_ou)KNz literal 0 HcmV?d00001 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('