From a8689ae26beaee6fb6e3ff2f16d5289b0bf9a2a0 Mon Sep 17 00:00:00 2001 From: GarcaMan Date: Wed, 24 Nov 2021 19:41:07 +0000 Subject: [PATCH 001/386] first commit --- cps/static/css/kthoom.css | 14 ++ cps/static/js/kthoom.js | 408 +++++++++++++++++++++++-------------- cps/templates/readcbr.html | 21 +- 3 files changed, 283 insertions(+), 160 deletions(-) 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) { "" + "" ); + + 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(""); - }; - 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(""); + }; + 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 = $(""); + 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 @@
-
‹
@@ -91,6 +90,8 @@ ← {{_('Previous Page')}} → {{_('Next Page')}} + S {{_('Single Page Display')}} + O {{_('Long Strip Display')}} B {{_('Scale to Best')}} W {{_('Scale to Width')}} H {{_('Scale to Height')}} @@ -118,6 +119,15 @@ + + {{_('Display')}}: + +
+ + +
+ + {{_('Scale')}}: @@ -157,15 +167,6 @@ - - - {{_('Next Page')}}: - -
- - -
- {{_('Scrollbar')}}: From 7fc04b353bdff5236d79037768e2d676afc9501f Mon Sep 17 00:00:00 2001 From: GarcaMan Date: Wed, 24 Nov 2021 20:22:10 +0000 Subject: [PATCH 002/386] Selecting Position will not scroll the current image up --- cps/static/js/kthoom.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/cps/static/js/kthoom.js b/cps/static/js/kthoom.js index 92a34d5b..cfc9cf2d 100644 --- a/cps/static/js/kthoom.js +++ b/cps/static/js/kthoom.js @@ -665,6 +665,9 @@ function init(filename) { if(["hflip", "vflip", "rotateTimes"].includes(this.name)) { //reloadImages is a slow process when multiple images are involved. Only used when rotating/mirroring reloadImages(); + } else if(this.name === "direction") { + // Skips updatePage and updateScale so that the current image doesn't scroll up + return updateProgress(); } updatePage(); From 3f56f0dca75bb6b059289913cab61de740b4cc2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20Rodr=C3=ADguez?= <68790233+GarckaMan@users.noreply.github.com> Date: Thu, 25 Nov 2021 01:30:20 -0300 Subject: [PATCH 003/386] Removed parameter that was wrongly added --- cps/static/js/kthoom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cps/static/js/kthoom.js b/cps/static/js/kthoom.js index cfc9cf2d..6e309c86 100644 --- a/cps/static/js/kthoom.js +++ b/cps/static/js/kthoom.js @@ -179,7 +179,7 @@ function initProgressClick() { }); } -function loadFromArrayBuffer(ab, _callback) { +function loadFromArrayBuffer(ab) { const collator = new Intl.Collator('en', { numeric: true, sensitivity: 'base' }); loadArchiveFormats(['rar', 'zip', 'tar'], function() { // Open the file as an archive From 3ac08a8c0df1f4a70d6b3ca600a9a88fe06ae092 Mon Sep 17 00:00:00 2001 From: GarcaMan Date: Thu, 2 Dec 2021 18:20:14 +0000 Subject: [PATCH 004/386] After toggling fullscreen, focus on main container --- cps/static/js/kthoom.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/cps/static/js/kthoom.js b/cps/static/js/kthoom.js index cfc9cf2d..b637fc93 100644 --- a/cps/static/js/kthoom.js +++ b/cps/static/js/kthoom.js @@ -666,7 +666,6 @@ function init(filename) { //reloadImages is a slow process when multiple images are involved. Only used when rotating/mirroring reloadImages(); } else if(this.name === "direction") { - // Skips updatePage and updateScale so that the current image doesn't scroll up return updateProgress(); } @@ -689,6 +688,8 @@ function init(filename) { if (typeof screenfull !== "undefined") { $("#fullscreen").click(function() { screenfull.toggle($("#container")[0]); + // Focus so you can use up/down keys immediately after fullscreen + $("#mainContent").focus(); }); if (screenfull.raw) { From 0693cb1ddb394faac5abacc4505e32d04e5f9873 Mon Sep 17 00:00:00 2001 From: Bharat KNV Date: Sun, 12 Dec 2021 18:40:44 +0530 Subject: [PATCH 005/386] Added basic theming to the epub reader --- cps/static/css/epub_themes.css | 14 ++++++++++++++ cps/static/css/main.css | 25 +++++++++++++++++++++++++ cps/static/js/reading/epub.js | 4 ++++ cps/templates/read.html | 34 ++++++++++++++++++++++++++++++++++ 4 files changed, 77 insertions(+) create mode 100644 cps/static/css/epub_themes.css diff --git a/cps/static/css/epub_themes.css b/cps/static/css/epub_themes.css new file mode 100644 index 00000000..4f686681 --- /dev/null +++ b/cps/static/css/epub_themes.css @@ -0,0 +1,14 @@ +.lightTheme { + background: #fff; + color: #000; +} + +.darkTheme { + background: #000; + color: #fff +} + +.sepiaTheme { + background: #ece1ca; + color: #000; +} \ No newline at end of file diff --git a/cps/static/css/main.css b/cps/static/css/main.css index adbfbfdf..84f03229 100644 --- a/cps/static/css/main.css +++ b/cps/static/css/main.css @@ -567,6 +567,31 @@ input:-moz-placeholder { color: #454545; } font-size: 0.8em; } +.md-content .themes button { + display: inline-block; + border: none; + text-align: center; + text-decoration: none; + margin-top: 5%; + margin-right: 1%; + font-size: 16px; +} + +.md-content .themes button.darkTheme { + background-color: black; + color: white; +} + +.md-content .themes button.whiteTheme { + background-color: white; + color: black; +} + +.md-content .themes button.sepiaTheme { + background-color: #ece1ca; + color: black; +} + /* Effect 1: Fade in and scale up */ .md-effect-1 .md-content { -webkit-transform: scale(0.7); diff --git a/cps/static/js/reading/epub.js b/cps/static/js/reading/epub.js index edafa82c..5e674812 100644 --- a/cps/static/js/reading/epub.js +++ b/cps/static/js/reading/epub.js @@ -13,6 +13,10 @@ var reader; bookmarks: calibre.bookmark ? [calibre.bookmark] : [] }); + reader.rendition.themes.register("lightTheme", "/static/css/epub_themes.css"); + reader.rendition.themes.register("darkTheme", "/static/css/epub_themes.css"); + reader.rendition.themes.register("sepiaTheme", "/static/css/epub_themes.css"); + if (calibre.useBookmarks) { reader.on("reader:bookmarked", updateBookmark.bind(reader, "add")); reader.on("reader:unbookmarked", updateBookmark.bind(reader, "remove")); diff --git a/cps/templates/read.html b/cps/templates/read.html index 3d2566e0..ed33e850 100644 --- a/cps/templates/read.html +++ b/cps/templates/read.html @@ -69,6 +69,14 @@ + + From a80735d7d389d622639e1026db8991476c8058f2 Mon Sep 17 00:00:00 2001 From: Olivier Date: Tue, 11 Oct 2022 23:37:12 +0900 Subject: [PATCH 104/386] Save the position of the last read page for comics --- cps/static/js/kthoom.js | 35 ++--- cps/templates/readcbr.html | 307 ++++++++++++++++++++----------------- cps/web.py | 2 +- 3 files changed, 187 insertions(+), 157 deletions(-) diff --git a/cps/static/js/kthoom.js b/cps/static/js/kthoom.js index 51dbadba..c587206f 100644 --- a/cps/static/js/kthoom.js +++ b/cps/static/js/kthoom.js @@ -70,8 +70,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 + nextPage: 0, // 0 = Reset to Top, 1 = Remember Position + scrollbar: 1 // 0 = Hide Scrollbar, 1 = Show Scrollbar }; kthoom.saveSettings = function() { @@ -130,7 +130,7 @@ var createURLFromArray = function(array, mimeType) { } if ((typeof URL !== "function" && typeof URL !== "object") || - typeof URL.createObjectURL !== "function") { + typeof URL.createObjectURL !== "function") { throw "Browser support for Object URLs is missing"; } @@ -186,8 +186,7 @@ function initProgressClick() { }); } -function loadFromArrayBuffer(ab) { - var lastCompletion = 0; +function loadFromArrayBuffer(ab, lastCompletion = 0) { const collator = new Intl.Collator('en', { numeric: true, sensitivity: 'base' }); loadArchiveFormats(['rar', 'zip', 'tar'], function() { // Open the file as an archive @@ -244,7 +243,7 @@ function updatePage() { // Mark the current page in the TOC $("#tocView a[data-page]") - // Remove the currently active thumbnail + // Remove the currently active thumbnail .removeClass("active") // Find the new one .filter("[data-page=" + (currentImage + 1) + "]") @@ -261,7 +260,7 @@ function updatePage() { } $("body").toggleClass("dark-theme", settings.theme === "dark"); - $("#mainContent").toggleClass("disabled-scrollbar", settings.scrollbar === 0); + $("#mainContent").toggleClass("disabled-scrollbar", settings.scrollbar === 0); kthoom.setSettings(); kthoom.saveSettings(); @@ -335,7 +334,7 @@ function setImage(url) { x.font = "50px sans-serif"; x.strokeStyle = "black"; x.fillText("Page #" + (currentImage + 1) + " (" + - imageFiles[currentImage].filename + ")", innerWidth / 2, 100); + imageFiles[currentImage].filename + ")", innerWidth / 2, 100); x.fillStyle = "black"; x.fillText("Is corrupt or not an image", innerWidth / 2, 200); @@ -418,9 +417,9 @@ function showPrevPage() { currentImage++; } else { updatePage(); - if (settings.nextPage === 0) { - $("#mainContent").scrollTop(0); - } + if (settings.nextPage === 0) { + $("#mainContent").scrollTop(0); + } } } @@ -431,9 +430,9 @@ function showNextPage() { currentImage--; } else { updatePage(); - if (settings.nextPage === 0) { - $("#mainContent").scrollTop(0); - } + if (settings.nextPage === 0) { + $("#mainContent").scrollTop(0); + } } } @@ -551,7 +550,7 @@ function init(filename) { request.responseType = "arraybuffer"; request.addEventListener("load", function() { if (request.status >= 200 && request.status < 300) { - loadFromArrayBuffer(request.response); + loadFromArrayBuffer(request.response, currentImage); } else { console.warn(request.statusText, request.responseText); } @@ -609,9 +608,9 @@ function init(filename) { $("#thumbnails").on("click", "a", function() { currentImage = $(this).data("page") - 1; updatePage(); - if (settings.nextPage === 0) { - $("#mainContent").scrollTop(0); - } + if (settings.nextPage === 0) { + $("#mainContent").scrollTop(0); + } }); // Fullscreen mode diff --git a/cps/templates/readcbr.html b/cps/templates/readcbr.html index 411e3fdd..6ab14a94 100644 --- a/cps/templates/readcbr.html +++ b/cps/templates/readcbr.html @@ -1,5 +1,6 @@ + @@ -17,78 +18,61 @@ - -