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('