diff --git a/css/styles.css b/css/styles.css index ead1d80..f23cbe7 100644 --- a/css/styles.css +++ b/css/styles.css @@ -7,6 +7,19 @@ .cb-control { color: #fff; background-color: #111; + background-image: linear-gradient(bottom, rgb(17,17,17) 20%, rgb(41,41,41) 72%); + background-image: -o-linear-gradient(bottom, rgb(17,17,17) 20%, rgb(41,41,41) 72%); + background-image: -moz-linear-gradient(bottom, rgb(17,17,17) 20%, rgb(41,41,41) 72%); + background-image: -webkit-linear-gradient(bottom, rgb(17,17,17) 20%, rgb(41,41,41) 72%); + background-image: -ms-linear-gradient(bottom, rgb(17,17,17) 20%, rgb(41,41,41) 72%); + + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0.2, rgb(17,17,17)), + color-stop(0.72, rgb(41,41,41)) + ); padding: 10px; position: fixed !important; -webkit-box-shadow: 0 0 4px #000; @@ -94,7 +107,7 @@ #cb-toolbar { top: 0; - border-bottom: 2px solid #444; + border-bottom: 1px solid #888; } #cb-toolbar button { @@ -129,6 +142,12 @@ #cb-toolbar button.cb-fit-width:hover { background-position: -24px -48px } #cb-toolbar button.cb-fit-width[disabled=disabled] { background-position: -48px -48px } +#cb-toolbar button.cb-read-direction#toleft{ background-position: 0 -144px } +#cb-toolbar button.cb-read-direction:hover#toleft{ background-position: -24px -144px } + +#cb-toolbar button.cb-read-direction#toright{ background-position: 0 -168px } +#cb-toolbar button.cb-read-direction:hover#toright { background-position: -24px -168px } + #cb-color { width: 246px; top: 44px; diff --git a/examples/basic.html b/examples/basic.html index f041da8..782bf63 100755 --- a/examples/basic.html +++ b/examples/basic.html @@ -6,7 +6,11 @@ - + + + + + diff --git a/img/iconic/sprite.png b/img/iconic/sprite.png index d90c23e..50a74ce 100644 Binary files a/img/iconic/sprite.png and b/img/iconic/sprite.png differ diff --git a/img/iconic/sprite.psd b/img/iconic/sprite.psd index f7c1ab6..60d00bb 100644 Binary files a/img/iconic/sprite.psd and b/img/iconic/sprite.psd differ diff --git a/lib/ComicBook.js b/lib/ComicBook.js index 31741a8..cb4d699 100755 --- a/lib/ComicBook.js +++ b/lib/ComicBook.js @@ -4,7 +4,6 @@ TODOs: Fo sho: - - fix manga mode - trigger preload if requesting valid but not loaded images (can happen if network was interupted) - loading and generally hackiness of pointer is buggy, fix. - check for html5 feature support where used: diveintohtml5.org/everything.html or www.modernizr.com @@ -79,7 +78,8 @@ function ComicBook(id, srcs, opts) { previous: 80, toolbar: 84, toggleLayout: 76 - } + }, + forward_buffer: 3 }; var options = merge(defaults, opts); // options array for internal use @@ -170,11 +170,9 @@ function ComicBook(id, srcs, opts) { } // add page controls - // TODO: add IE event listeners too. canvas.addEventListener("click", ComicBook.prototype.navigation, false); window.addEventListener("keydown", ComicBook.prototype.navigation, false); - window.addEventListener("hashchange", checkHash, false); - //setInterval(function() { checkHash(); }, 300); // TODO: enable this when there is no onhashchange event + $(window).bind('hashchange', checkHash); } /** @@ -245,6 +243,16 @@ function ComicBook(id, srcs, opts) { ComicBook.prototype.drawPage(); }) ) + .append( + $(document.createElement("button")) + .attr("title", ((options.manga == true) ? "change reading direction to 'left-to-right'" : "change reading direction to 'right-to-left'")) + .addClass("cb-read-direction") + .click(function(){ + options.manga = !options.manga; + ComicBook.prototype.drawPage(); + }) + .attr("id", ((options.manga == true) ? "toright" : "toleft")) + ) .append( $(document.createElement("p")) .attr("id", "cb-comic-info") @@ -307,13 +315,27 @@ function ComicBook(id, srcs, opts) { left: $(document.createElement("div")) .addClass("cb-control cb-navigate cb-always-on left") .click(function(e){ - ComicBook.prototype.drawPrevPage(); + if(options.manga == false) + { + ComicBook.prototype.drawPrevPage(); + } + else + { + ComicBook.prototype.drawNextPage(); + } }), right: $(document.createElement("div")) .addClass("cb-control cb-navigate cb-always-on right") .click(function(e) { - ComicBook.prototype.drawNextPage(); + if(options.manga == false) + { + ComicBook.prototype.drawNextPage(); + } + else + { + ComicBook.prototype.drawPrevPage(); + } }) }, @@ -515,9 +537,6 @@ function ComicBook(id, srcs, opts) { // loads pages in both directions so you don't have to wait for all pages // to be loaded before you can scroll backwards function preload(start, stop) { - - var forward_buffer = 3; // TODO: make this into a config option? - var j = 0; var count = 1; var forward = start; @@ -525,7 +544,7 @@ function ComicBook(id, srcs, opts) { while (forward <= stop) { - if (count > forward_buffer && backward > -1) { + if (count > options.forward_buffer && backward > -1) { queue.push(backward); backward--; count = 0; @@ -678,19 +697,39 @@ function ComicBook(id, srcs, opts) { // disable the fit width button if needed $("button.cb-fit-width").attr("disabled", (options.zoomMode === "fitWidth")); + + //Change the icon on the read direction + if(options.manga == true) + { + $("button.cb-read-direction").attr("id", "toright"); + } + else + { + $("button.cb-read-direction").attr("id", "toleft"); + } // disable prev/next buttons if not needed $(".cb-navigate").show(); - if (pointer === 0) { + if ((pointer === 0) && (options.manga == false)) { $(".cb-navigate.left").hide(); $(".cb-navigate.right").show(); } - - if (pointer === srcs.length-1 || (typeof page2 === "object" && pointer === srcs.length-2)) { + else if ((pointer === 0) && (options.manga == true)) + { $(".cb-navigate.left").show(); $(".cb-navigate.right").hide(); } + if ((pointer === srcs.length-1 || (typeof page2 === "object" && pointer === srcs.length-2)) && (options.manga == false)) { + $(".cb-navigate.left").show(); + $(".cb-navigate.right").hide(); + } + else if ((pointer === srcs.length-1 || (typeof page2 === "object" && pointer === srcs.length-2)) && (options.manga == true)) + { + $(".cb-navigate.left").hide(); + $(".cb-navigate.right").show(); + } + // user callback if (typeof options.afterDrawPage === "function") { options.afterDrawPage(pointer + 1); diff --git a/lib/ComicBook.min.js b/lib/ComicBook.min.js index 8633224..f9af946 100644 --- a/lib/ComicBook.min.js +++ b/lib/ComicBook.min.js @@ -1,39 +1,23 @@ -var Pixastic=function(){function c(a,g,o){a.addEventListener?a.addEventListener(g,o,!1):a.attachEvent&&a.attachEvent("on"+g,o)}function b(a){var g=!1,o=function(){g||(g=!0,a())};document.write('