diff --git a/cps/static/js/kthoom.js b/cps/static/js/kthoom.js index d955dfb1..84992450 100644 --- a/cps/static/js/kthoom.js +++ b/cps/static/js/kthoom.js @@ -71,7 +71,8 @@ var settings = { fitMode: kthoom.Key.B, theme: "light", direction: 0, // 0 = Left to Right, 1 = Right to Left - 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 pageDisplay: 0 // 0 = Single Page, 1 = Long Strip }; @@ -131,7 +132,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"; } @@ -187,7 +188,7 @@ function initProgressClick() { }); } -function loadFromArrayBuffer(ab) { +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 @@ -222,7 +223,7 @@ function loadFromArrayBuffer(ab) { // display first page if we haven't yet if (imageFiles.length === currentImage + 1) { - updatePage(); + updatePage(lastCompletion); } } else { totalImages--; @@ -237,17 +238,6 @@ function loadFromArrayBuffer(ab) { } function scrollTocToActive() { - $(".page").text((currentImage + 1 ) + "/" + totalImages); - - // Mark the current page in the TOC - $("#tocView a[data-page]") - // Remove the currently active thumbnail - .removeClass("active") - // Find the new one - .filter("[data-page=" + (currentImage + 1) + "]") - // 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 @@ -255,12 +245,31 @@ function scrollTocToActive() { } function updatePage() { + $(".page").text((currentImage + 1 ) + "/" + totalImages); + + // Mark the current page in the TOC + $("#tocView a[data-page]") + // Remove the currently active thumbnail + .removeClass("active") + // Find the new one + .filter("[data-page=" + (currentImage + 1) + "]") + // Set it to active + .addClass("active"); + scrollTocToActive(); - scrollCurrentImageIntoView(); updateProgress(); pageDisplayUpdate(); setTheme(); + if (imageFiles[currentImage]) { + setImage(imageFiles[currentImage].dataURI); + } else { + setImage("loading"); + } + + $("body").toggleClass("dark-theme", settings.theme === "dark"); + $("#mainContent").toggleClass("disabled-scrollbar", settings.scrollbar === 0); + kthoom.setSettings(); kthoom.saveSettings(); } @@ -335,6 +344,7 @@ function setImage(url, _canvas) { img.onerror = function() { canvas.width = innerWidth - 100; canvas.height = 300; + updateScale(true); x.fillStyle = "black"; x.font = "50px sans-serif"; x.strokeStyle = "black"; @@ -388,6 +398,8 @@ function setImage(url, _canvas) { scrollTo(0, 0); x.drawImage(img, 0, 0); + updateScale(false); + canvas.style.display = ""; $("body").css("overflowY", ""); x.restore(); @@ -426,6 +438,9 @@ function showPrevPage() { currentImage++; } else { updatePage(); + if (settings.nextPage === 0) { + $("#mainContent").scrollTop(0); + } } } @@ -436,6 +451,9 @@ function showNextPage() { currentImage--; } else { updatePage(); + if (settings.nextPage === 0) { + $("#mainContent").scrollTop(0); + } } } @@ -451,7 +469,7 @@ function scrollCurrentImageIntoView() { } } -function updateScale() { +function updateScale(clear) { var canvasArray = $("#mainContent > canvas"); var maxheight = innerHeight - 50; @@ -460,7 +478,7 @@ function updateScale() { canvasArray.css("maxWidth", ""); canvasArray.css("maxHeight", ""); - if(settings.pageDisplay === 0) { + if(!clear) { canvasArray.addClass("hide"); pageDisplayUpdate(); } @@ -627,7 +645,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); } @@ -681,7 +699,7 @@ function init(filename) { } updatePage(); - updateScale(); + updateScale(false); }); // Close modal @@ -694,6 +712,9 @@ function init(filename) { $("#thumbnails").on("click", "a", function() { currentImage = $(this).data("page") - 1; updatePage(); + if (settings.nextPage === 0) { + $("#mainContent").scrollTop(0); + } }); // Fullscreen mode diff --git a/cps/templates/readcbr.html b/cps/templates/readcbr.html index a4ac3722..c4f49aec 100644 --- a/cps/templates/readcbr.html +++ b/cps/templates/readcbr.html @@ -1,5 +1,6 @@ + @@ -20,23 +21,6 @@ - -
- - - - - - - - - - +
{{_('Settings')}}
{{_('Theme')}}: -
+
+
+
+ + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - -
{{_('Settings')}}
{{_('Theme')}}: +
@@ -139,59 +123,118 @@ - -
{{_('Rotate')}}: -
- - - - -
-
{{_('Flip')}}: -
- - -
-
{{_('Direction')}}: -
+
+
{{_('Rotate')}}: +
+ + + + +
+
{{_('Flip')}}: +
+ + +
+
{{_('Direction')}}: +
{{_('Next Page')}}: +
+ + +
+
{{_('Scrollbar')}}:
-
-
+
+ + + + + +
-
- -
- +
+ + + + diff --git a/cps/web.py b/cps/web.py index 51ff32b3..9793f01a 100755 --- a/cps/web.py +++ b/cps/web.py @@ -1561,7 +1561,7 @@ def read_book(book_id, book_format): title = title + " #" + '{0:.2f}'.format(book.series_index).rstrip('0').rstrip('.') log.debug("Start comic reader for %d", book_id) return render_title_template('readcbr.html', comicfile=all_name, title=title, - extension=fileExt) + extension=fileExt, bookmark=bookmark) log.debug("Selected book is unavailable. File does not exist or is not accessible") flash(_("Oops! Selected book is unavailable. File does not exist or is not accessible"), category="error")