diff --git a/cps/static/css/kthoom.css b/cps/static/css/kthoom.css
index 9565cd30..2c733e52 100644
--- a/cps/static/css/kthoom.css
+++ b/cps/static/css/kthoom.css
@@ -149,6 +149,20 @@ body {
word-wrap: break-word;
}
+#mainContent > canvas {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.long-strip > .mainImage {
+ margin-bottom: 4px;
+}
+
+.long-strip > .mainImage:last-child {
+ margin-bottom: 0px !important;
+}
+
#titlebar {
min-height: 25px;
height: auto;
diff --git a/cps/static/js/kthoom.js b/cps/static/js/kthoom.js
index 268fe9ec..92a34d5b 100644
--- a/cps/static/js/kthoom.js
+++ b/cps/static/js/kthoom.js
@@ -62,6 +62,7 @@ var currentImage = 0;
var imageFiles = [];
var imageFilenames = [];
var totalImages = 0;
+var prevScrollPosition = 0;
var settings = {
hflip: false,
@@ -70,8 +71,8 @@ var settings = {
fitMode: kthoom.Key.B,
theme: "light",
direction: 0, // 0 = Left to Right, 1 = Right to Left
- nextPage: 0, // 0 = Reset to Top, 1 = Remember Position
- scrollbar: 1 // 0 = Hide Scrollbar, 1 = Show Scrollbar
+ scrollbar: 1, // 0 = Hide Scrollbar, 1 = Show Scrollbar
+ pageDisplay: 0 // 0 = Single Page, 1 = Long Strip
};
kthoom.saveSettings = function() {
@@ -178,8 +179,7 @@ function initProgressClick() {
});
}
-function loadFromArrayBuffer(ab) {
- var lastCompletion = 0;
+function loadFromArrayBuffer(ab, _callback) {
const collator = new Intl.Collator('en', { numeric: true, sensitivity: 'base' });
loadArchiveFormats(['rar', 'zip', 'tar'], function() {
// Open the file as an archive
@@ -208,9 +208,13 @@ function loadFromArrayBuffer(ab) {
"</a>" +
"</li>"
);
+
+ drawCanvas();
+ setImage(test.dataURI, null);
+
// display first page if we haven't yet
if (imageFiles.length === currentImage + 1) {
- updatePage(lastCompletion);
+ updatePage();
}
} else {
totalImages--;
@@ -225,13 +229,6 @@ function loadFromArrayBuffer(ab) {
}
function scrollTocToActive() {
- // Scroll to the thumbnail in the TOC on page change
- $("#tocView").stop().animate({
- scrollTop: $("#tocView a.active").position().top
- }, 200);
-}
-
-function updatePage() {
$(".page").text((currentImage + 1 ) + "/" + totalImages);
// Mark the current page in the TOC
@@ -243,22 +240,40 @@ function updatePage() {
// Set it to active
.addClass("active");
+ // Scroll to the thumbnail in the TOC on page change
+ $("#tocView").stop().animate({
+ scrollTop: $("#tocView a.active").position().top
+ }, 200);
+}
+
+function updatePage() {
scrollTocToActive();
+ scrollCurrentImageIntoView();
updateProgress();
-
- if (imageFiles[currentImage]) {
- setImage(imageFiles[currentImage].dataURI);
- } else {
- setImage("loading");
- }
-
- $("body").toggleClass("dark-theme", settings.theme === "dark");
- $("#mainContent").toggleClass("disabled-scrollbar", settings.scrollbar === 0);
+ pageDisplayUpdate();
+ setTheme();
kthoom.setSettings();
kthoom.saveSettings();
}
+function setTheme() {
+ $("body").toggleClass("dark-theme", settings.theme === "dark");
+ $("#mainContent").toggleClass("disabled-scrollbar", settings.scrollbar === 0);
+}
+
+function pageDisplayUpdate() {
+ if(settings.pageDisplay === 0) {
+ $(".mainImage").addClass("hide");
+ $(".mainImage").eq(currentImage).removeClass("hide");
+ $("#mainContent").removeClass("long-strip");
+ } else {
+ $(".mainImage").removeClass("hide");
+ $("#mainContent").addClass("long-strip");
+ scrollCurrentImageIntoView();
+ }
+}
+
function updateProgress(loadPercentage) {
if (settings.direction === 0) {
$("#progress .bar-read")
@@ -290,100 +305,92 @@ function updateProgress(loadPercentage) {
$("#progress .bar-read").css({ width: totalImages === 0 ? 0 : Math.round((currentImage + 1) / totalImages * 100) + "%"});
}
-function setImage(url) {
- var canvas = $("#mainImage")[0];
- var x = $("#mainImage")[0].getContext("2d");
+function setImage(url, _canvas) {
+ var canvas = _canvas || $(".mainImage").slice(-1)[0]; // Select the last item on the array if _canvas is null
+ var x = canvas.getContext("2d");
+
$("#mainText").hide();
- if (url === "loading") {
- updateScale(true);
- canvas.width = innerWidth - 100;
- canvas.height = 200;
+ if (url === "error") {
x.fillStyle = "black";
x.textAlign = "center";
x.font = "24px sans-serif";
- x.strokeStyle = "black";
- x.fillText("Loading Page #" + (currentImage + 1), innerWidth / 2, 100);
+ x.strokeStyle = (settings.theme === "dark") ? "white" : "black";
+ x.fillText("Unable to decompress image #" + (currentImage + 1), innerWidth / 2, 100);
+
+ $(".mainImage").slice(-1).addClass("error");
} else {
- if (url === "error") {
- updateScale(true);
- canvas.width = innerWidth - 100;
- canvas.height = 200;
- x.fillStyle = "black";
- x.textAlign = "center";
- x.font = "24px sans-serif";
- x.strokeStyle = "black";
- x.fillText("Unable to decompress image #" + (currentImage + 1), innerWidth / 2, 100);
- } else {
- if ($("body").css("scrollHeight") / innerHeight > 1) {
- $("body").css("overflowY", "scroll");
- }
-
- var img = new Image();
- img.onerror = function() {
- canvas.width = innerWidth - 100;
- canvas.height = 300;
- updateScale(true);
- x.fillStyle = "black";
- x.font = "50px sans-serif";
- x.strokeStyle = "black";
- x.fillText("Page #" + (currentImage + 1) + " (" +
- imageFiles[currentImage].filename + ")", innerWidth / 2, 100);
- x.fillStyle = "black";
- x.fillText("Is corrupt or not an image", innerWidth / 2, 200);
-
- var xhr = new XMLHttpRequest();
- if (/(html|htm)$/.test(imageFiles[currentImage].filename)) {
- xhr.open("GET", url, true);
- xhr.onload = function() {
- $("#mainText").css("display", "");
- $("#mainText").innerHTML("<iframe style=\"width:100%;height:700px;border:0\" src=\"data:text/html," + escape(xhr.responseText) + "\"></iframe>");
- };
- xhr.send(null);
- } else if (!/(jpg|jpeg|png|gif|webp)$/.test(imageFiles[currentImage].filename) && imageFiles[currentImage].data.uncompressedSize < 10 * 1024) {
- xhr.open("GET", url, true);
- xhr.onload = function() {
- $("#mainText").css("display", "");
- $("#mainText").innerText(xhr.responseText);
- };
- xhr.send(null);
- }
- };
- img.onload = function() {
- var h = img.height,
- w = img.width,
- sw = w,
- sh = h;
- settings.rotateTimes = (4 + settings.rotateTimes) % 4;
- x.save();
- if (settings.rotateTimes % 2 === 1) {
- sh = w;
- sw = h;
- }
- canvas.height = sh;
- canvas.width = sw;
- x.translate(sw / 2, sh / 2);
- x.rotate(Math.PI / 2 * settings.rotateTimes);
- x.translate(-w / 2, -h / 2);
- if (settings.vflip) {
- x.scale(1, -1);
- x.translate(0, -h);
- }
- if (settings.hflip) {
- x.scale(-1, 1);
- x.translate(-w, 0);
- }
- canvas.style.display = "none";
- scrollTo(0, 0);
- x.drawImage(img, 0, 0);
-
- updateScale(false);
-
- canvas.style.display = "";
- $("body").css("overflowY", "");
- x.restore();
- };
- img.src = url;
+ if ($("body").css("scrollHeight") / innerHeight > 1) {
+ $("body").css("overflowY", "scroll");
}
+
+ var img = new Image();
+ img.onerror = function() {
+ canvas.width = innerWidth - 100;
+ canvas.height = 300;
+ x.fillStyle = "black";
+ x.font = "50px sans-serif";
+ x.strokeStyle = "black";
+ x.fillText("Page #" + (currentImage + 1) + " (" +
+ imageFiles[currentImage].filename + ")", innerWidth / 2, 100);
+ x.fillStyle = "black";
+ x.fillText("Is corrupt or not an image", innerWidth / 2, 200);
+
+ var xhr = new XMLHttpRequest();
+ if (/(html|htm)$/.test(imageFiles[currentImage].filename)) {
+ xhr.open("GET", url, true);
+ xhr.onload = function() {
+ $("#mainText").css("display", "");
+ $("#mainText").innerHTML("<iframe style=\"width:100%;height:700px;border:0\" src=\"data:text/html," + escape(xhr.responseText) + "\"></iframe>");
+ };
+ xhr.send(null);
+ } else if (!/(jpg|jpeg|png|gif|webp)$/.test(imageFiles[currentImage].filename) && imageFiles[currentImage].data.uncompressedSize < 10 * 1024) {
+ xhr.open("GET", url, true);
+ xhr.onload = function() {
+ $("#mainText").css("display", "");
+ $("#mainText").innerText(xhr.responseText);
+ };
+ xhr.send(null);
+ }
+ };
+ img.onload = function() {
+ var h = img.height,
+ w = img.width,
+ sw = w,
+ sh = h;
+ settings.rotateTimes = (4 + settings.rotateTimes) % 4;
+ x.save();
+ if (settings.rotateTimes % 2 === 1) {
+ sh = w;
+ sw = h;
+ }
+ canvas.height = sh;
+ canvas.width = sw;
+ x.translate(sw / 2, sh / 2);
+ x.rotate(Math.PI / 2 * settings.rotateTimes);
+ x.translate(-w / 2, -h / 2);
+ if (settings.vflip) {
+ x.scale(1, -1);
+ x.translate(0, -h);
+ }
+ if (settings.hflip) {
+ x.scale(-1, 1);
+ x.translate(-w, 0);
+ }
+ canvas.style.display = "none";
+ scrollTo(0, 0);
+ x.drawImage(img, 0, 0);
+
+ canvas.style.display = "";
+ $("body").css("overflowY", "");
+ x.restore();
+ };
+ img.src = url;
+ }
+}
+
+function reloadImages() {
+ for(i=0; imageFiles.length; i++) {
+ setImage(imageFiles[i].dataURI, $(".mainImage")[i]);
}
}
@@ -410,9 +417,6 @@ function showPrevPage() {
currentImage++;
} else {
updatePage();
- if (settings.nextPage === 0) {
- $("#mainContent").scrollTop(0);
- }
}
}
@@ -423,36 +427,53 @@ function showNextPage() {
currentImage--;
} else {
updatePage();
- if (settings.nextPage === 0) {
- $("#mainContent").scrollTop(0);
- }
}
}
-function updateScale(clear) {
- var mainImageStyle = getElem("mainImage").style;
- mainImageStyle.width = "";
- mainImageStyle.height = "";
- mainImageStyle.maxWidth = "";
- mainImageStyle.maxHeight = "";
- var maxheight = innerHeight - 50;
-
- if (!clear) {
- switch (settings.fitMode) {
- case kthoom.Key.B:
- mainImageStyle.maxWidth = "100%";
- mainImageStyle.maxHeight = maxheight + "px";
- break;
- case kthoom.Key.H:
- mainImageStyle.height = maxheight + "px";
- break;
- case kthoom.Key.W:
- mainImageStyle.width = "100%";
- break;
- default:
- break;
- }
+function scrollCurrentImageIntoView() {
+ if(settings.pageDisplay == 0) {
+ // This will scroll all the way up when Single Page is selected
+ $("#mainContent").scrollTop(0);
+ } else {
+ // This will scroll to the image when Long Strip is selected
+ $("#mainContent").stop().animate({
+ scrollTop: $(".mainImage").eq(currentImage).offset().top + $("#mainContent").scrollTop() - $("#mainContent").offset().top
+ }, 200);
}
+}
+
+function updateScale() {
+ var canvasArray = $("#mainContent > canvas");
+ var maxheight = innerHeight - 50;
+
+ canvasArray.css("width", "");
+ canvasArray.css("height", "");
+ canvasArray.css("maxWidth", "");
+ canvasArray.css("maxHeight", "");
+
+ if(settings.pageDisplay === 0) {
+ canvasArray.addClass("hide");
+ pageDisplayUpdate();
+ }
+
+ switch (settings.fitMode) {
+ case kthoom.Key.B:
+ canvasArray.css("maxWidth", "100%");
+ canvasArray.css("maxHeight", maxheight + "px");
+ break;
+ case kthoom.Key.H:
+ canvasArray.css("maxHeight", maxheight + "px");
+ break;
+ case kthoom.Key.W:
+ canvasArray.css("width", "100%");
+ break;
+ default:
+ break;
+ }
+
+ $("#mainContent > canvas.error").css("width", innerWidth - 100);
+ $("#mainContent > canvas.error").css("height", 200);
+
$("#mainContent").css({maxHeight: maxheight + 5});
kthoom.setSettings();
kthoom.saveSettings();
@@ -469,6 +490,20 @@ function keyHandler(evt) {
if (hasModifier) break;
showRightPage();
break;
+ case kthoom.Key.S:
+ if (hasModifier) break;
+ settings.pageDisplay = 0;
+ pageDisplayUpdate();
+ kthoom.setSettings();
+ kthoom.saveSettings();
+ break;
+ case kthoom.Key.O:
+ if (hasModifier) break;
+ settings.pageDisplay = 1;
+ pageDisplayUpdate();
+ kthoom.setSettings();
+ kthoom.saveSettings();
+ break;
case kthoom.Key.L:
if (hasModifier) break;
settings.rotateTimes--;
@@ -503,22 +538,22 @@ function keyHandler(evt) {
case kthoom.Key.W:
if (hasModifier) break;
settings.fitMode = kthoom.Key.W;
- updateScale(false);
+ updateScale();
break;
case kthoom.Key.H:
if (hasModifier) break;
settings.fitMode = kthoom.Key.H;
- updateScale(false);
+ updateScale();
break;
case kthoom.Key.B:
if (hasModifier) break;
settings.fitMode = kthoom.Key.B;
- updateScale(false);
+ updateScale();
break;
case kthoom.Key.N:
if (hasModifier) break;
settings.fitMode = kthoom.Key.N;
- updateScale(false);
+ updateScale();
break;
case kthoom.Key.SPACE:
if (evt.shiftKey) {
@@ -537,6 +572,43 @@ function keyHandler(evt) {
}
}
+function drawCanvas() {
+ var maxheight = innerHeight - 50;
+ var canvasElement = $("<canvas></canvas>");
+ var x = canvasElement[0].getContext("2d");
+ canvasElement.addClass("mainImage");
+
+ switch (settings.fitMode) {
+ case kthoom.Key.B:
+ canvasElement.css("maxWidth", "100%");
+ canvasElement.css("maxHeight", maxheight + "px");
+ break;
+ case kthoom.Key.H:
+ canvasElement.css("maxHeight", maxheight + "px");
+ break;
+ case kthoom.Key.W:
+ canvasElement.css("width", "100%");
+ break;
+ default:
+ break;
+ }
+
+ if(settings.pageDisplay === 0) {
+ canvasElement.addClass("hide");
+ }
+
+ //Fill with Placeholder text. setImage will override this
+ canvasElement.width = innerWidth - 100;
+ canvasElement.height = 200;
+ x.fillStyle = "black";
+ x.textAlign = "center";
+ x.font = "24px sans-serif";
+ x.strokeStyle = (settings.theme === "dark") ? "white" : "black";
+ x.fillText("Loading Page #" + (currentImage + 1), innerWidth / 2, 100);
+
+ $("#mainContent").append(canvasElement);
+}
+
function init(filename) {
var request = new XMLHttpRequest();
request.open("GET", filename);
@@ -548,16 +620,17 @@ function init(filename) {
console.warn(request.statusText, request.responseText);
}
});
+ kthoom.loadSettings();
+ setTheme();
+ updateScale();
request.send();
initProgressClick();
document.body.className += /AppleWebKit/.test(navigator.userAgent) ? " webkit" : "";
- kthoom.loadSettings();
- updateScale(true);
$(document).keydown(keyHandler);
$(window).resize(function() {
- updateScale(false);
+ updateScale();
});
// Open TOC menu
@@ -588,8 +661,14 @@ function init(filename) {
value = /^\d+$/.test(value) ? parseInt(value) : value;
settings[this.name] = value;
+
+ if(["hflip", "vflip", "rotateTimes"].includes(this.name)) {
+ //reloadImages is a slow process when multiple images are involved. Only used when rotating/mirroring
+ reloadImages();
+ }
+
updatePage();
- updateScale(false);
+ updateScale();
});
// Close modal
@@ -601,9 +680,6 @@ function init(filename) {
$("#thumbnails").on("click", "a", function() {
currentImage = $(this).data("page") - 1;
updatePage();
- if (settings.nextPage === 0) {
- $("#mainContent").scrollTop(0);
- }
});
// Fullscreen mode
@@ -633,7 +709,7 @@ function init(filename) {
showRightPage();
},
});
- $("#mainImage").click(function(evt) {
+ $(".mainImage").click(function(evt) {
// Firefox does not support offsetX/Y so we have to manually calculate
// where the user clicked in the image.
var mainContentWidth = $("#mainContent").width();
@@ -668,5 +744,37 @@ function init(filename) {
showRightPage();
}
});
+
+ //Scrolling up/down will update current image if a new image is into view (for Long Strip Display)
+ $("#mainContent").scroll(function(){
+ var scroll = $("#mainContent").scrollTop();
+ if(settings.pageDisplay === 0) {
+ // Don't trigger the scroll for Single Page
+ } else if(scroll > prevScrollPosition) {
+ //Scroll Down
+ if(currentImage + 1 < imageFiles.length) {
+ if(currentImageOffset(currentImage + 1) <= 1) {
+ currentImage++;
+ scrollTocToActive();
+ updateProgress();
+ }
+ }
+ } else {
+ //Scroll Up
+ if(currentImage - 1 > -1 ) {
+ if(currentImageOffset(currentImage - 1) >= 0) {
+ currentImage--;
+ scrollTocToActive();
+ updateProgress();
+ }
+ }
+ }
+
+ // Update scroll position
+ prevScrollPosition = scroll;
+ });
}
+function currentImageOffset(imageIndex) {
+ return $(".mainImage").eq(imageIndex).offset().top - $("#mainContent").position().top
+}
diff --git a/cps/templates/readcbr.html b/cps/templates/readcbr.html
index 411e3fdd..df2e53dd 100644
--- a/cps/templates/readcbr.html
+++ b/cps/templates/readcbr.html
@@ -73,7 +73,6 @@
<div id="mainContent" tabindex="-1">
<div id="mainText" style="display:none"></div>
- <canvas id="mainImage"></canvas>
</div>
<div id="left" class="arrow" onclick="showLeftPage()">‹</div>
<div id="right" class="arrow" onclick="showRightPage()">›</div>
@@ -91,6 +90,8 @@
<tbody>
<tr><td id="prev_page_key">←</td> <td>{{_('Previous Page')}}</td></tr>
<tr><td id="next_page_key">→</td> <td>{{_('Next Page')}}</td></tr>
+ <tr><td>S</td> <td>{{_('Single Page Display')}}</td></tr>
+ <tr><td>O</td> <td>{{_('Long Strip Display')}}</td></tr>
<tr><td>B</td> <td>{{_('Scale to Best')}}</td></tr>
<tr><td>W</td> <td>{{_('Scale to Width')}}</td></tr>
<tr><td>H</td> <td>{{_('Scale to Height')}}</td></tr>
@@ -118,6 +119,15 @@
</div>
</td>
</tr>
+ <tr>
+ <th>{{_('Display')}}:</th>
+ <td>
+ <div class="inputs">
+ <label for="singlePage"><input type="radio" id="singlePage" name="pageDisplay" value="0" /> {{_('Single Page')}}</label>
+ <label for="longStrip"><input type="radio" id="longStrip" name="pageDisplay" value="1" /> {{_('Long Strip')}}</label>
+ </div>
+ </td>
+ </tr>
<tr>
<th>{{_('Scale')}}:</th>
<td>
@@ -157,15 +167,6 @@
<label for="rightToLeft"><input type="radio" id="rightToLeft" name="direction" value="1" /> {{_('Right to Left')}}</label>
</div>
</td>
- </tr>
- <tr>
- <th>{{_('Next Page')}}:</th>
- <td>
- <div class="inputs">
- <label for="resetToTop"><input type="radio" id="resetToTop" name="nextPage" value="0" /> {{_('Reset to Top')}}</label>
- <label for="rememberPosition"><input type="radio" id="rememberPosition" name="nextPage" value="1" /> {{_('Remember Position')}}</label>
- </div>
- </td>
</tr>
<tr>
<th>{{_('Scrollbar')}}:</th>