Merged comic save position

2023-08-26 20:12:34 +02:00 · 2023-08-26 20:12:34 +02:00 · 9b99427c84
commit 9b99427c84
parent d253804a50
3 changed files with 161 additions and 97 deletions
--- a/cps/static/js/kthoom.js
+++ b/cps/static/js/kthoom.js
@ -71,6 +71,7 @@ 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	
    pageDisplay: 0 // 0 = Single Page, 1 = Long Strip
 };
@ -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,6 +238,13 @@ 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
@ -248,19 +256,20 @@ function scrollTocToActive() {
        // 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();
    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
--- a/cps/templates/readcbr.html
+++ b/cps/templates/readcbr.html
@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@ -20,23 +21,6 @@
  <script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/compress/uncompress.js') }}"></script>
  <script src="{{ url_for('static', filename='js/kthoom.js') }}"></script>
-  <script>
-    var updateArrows = function() {
-      if ($('input[name="direction"]:checked').val() === "0") {
-        $("#prev_page_key").html("&larr;");
-        $("#next_page_key").html("&rarr;");
-      } else {
-        $("#prev_page_key").html("&rarr;");
-        $("#next_page_key").html("&larr;");
-      }
-    };
-    document.onreadystatechange = function () {
-      if (document.readyState == "complete") {
-      	init("{{ url_for('web.serve_book', book_id=comicfile, book_format=extension) }}");
-      	updateArrows();
-      }
-    }
-  </script>
 </head>
 <body>
 <div id="sidebar">
@ -77,8 +61,8 @@
  <div id="mainContent" tabindex="-1">
    <div id="mainText" style="display:none"></div>
  </div>
-  <div id="left" class="arrow" onclick="showLeftPage()">‹</div>
-  <div id="right" class="arrow" onclick="showRightPage()">›</div>
+  <div id="left" class="arrow" onclick="showLeftPage(); setBookmark();">‹</div>
+  <div id="right" class="arrow" onclick="showRightPage(); setBookmark();">›</div>
 </div>

 <div class="modal md-effect-1" id="settings-modal">
@ -171,6 +155,15 @@
              </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>
            <td>
@ -186,12 +179,62 @@
      </div>
      <div class="closer icon-cancel-circled"></div>
    </div>
-</div>
-<div class="overlay"></div>
-<script>
+  </div>
+  <div class="overlay"></div>
+  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+  <script>
+    var updateArrows = function () {
+      if ($('input[name="direction"]:checked').val() === "0") {
+        $("#prev_page_key").html("&larr;");
+        $("#next_page_key").html("&rarr;");
+      } else {
+        $("#prev_page_key").html("&rarr;");
+        $("#next_page_key").html("&larr;");
+      }
+    };
+  </script>
+  <script>
+    function setBookmark() {
+      // get csrf_token
+      let csrf_token = $("input[name='csrf_token']").val();
+      //This sends a bookmark update to calibreweb.
+      $.ajax(calibre.bookmarkUrl, {
+        method: "post",
+        data: {
+          csrf_token: csrf_token,
+          bookmark: currentImage
+        }
+      }).fail(function (xhr, status, error) {
+        console.error(error);
+      });
+    }
+
+    window.calibre = {
+      filePath: "{{ url_for('static', filename='js/libs/') }}",
+      cssPath: "{{ url_for('static', filename='css/') }}",
+      bookUrl: "{{ url_for('static', filename=comicfile) }}/",
+      bookmarkUrl: "{{ url_for('web.set_bookmark', book_id=comicfile, book_format=extension.upper()) }}",
+      bookmark: "{{ bookmark.bookmark_key if bookmark != None }}",
+      useBookmarks: "{{ current_user.is_authenticated | tojson }}"
+    };
+    if (calibre.useBookmarks) {
+      currentImage = eval(calibre.bookmark);
+      if (typeof currentImage !== 'number'){
+        currentImage = 0;
+      }
+    }
+    
+    document.onreadystatechange = function () {
+      if (document.readyState == "complete") {
+        init("{{ url_for('web.serve_book', book_id=comicfile, book_format=extension) }}");
+        updateArrows();
+      }
+    }
+  </script>
+  <script>
    $('input[name="direction"]').change(function() {
        updateArrows();
      });
-</script>
+    </script>
 </body>
 </html>
--- 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")