more bookmark feature

tornado fix for tornado <6.2

cps/static/js/kthoom.js

@@ -179,6 +179,8 @@ kthoom.ImageFile = function(file) {
 };
 
 function updateDirectionButtons(){
+    $("#right").show();
+    $("#left").show();
     if (currentImage == 0 ) {
         if (settings.direction === 0) {
             $("#right").show();
@@ -205,11 +207,12 @@ function initProgressClick() {
         var rate = settings.direction === 0 ? x / $(this).width() : 1 - x / $(this).width();
         currentImage = Math.max(1, Math.ceil(rate * totalImages)) - 1;
         updateDirectionButtons();
+        setBookmark();
         updatePage();
     });
 }
 
-function loadFromArrayBuffer(ab, lastCompletion = 0) {
+function loadFromArrayBuffer(ab) {
     const collator = new Intl.Collator('en', { numeric: true, sensitivity: 'base' });
     loadArchiveFormats(['rar', 'zip', 'tar'], function() {
         // Open the file as an archive
@@ -244,12 +247,8 @@ function loadFromArrayBuffer(ab, lastCompletion = 0) {
                                     
                                     // display first page if we haven't yet
                                     if (imageFiles.length === currentImage + 1) {
-                                        if (settings.direction === 0) {
+                                        updateDirectionButtons();
-                                            $("#right").show();
+                                        updatePage();
-                                        } else {
-                                            $("#left").show();
-                                        }
-                                        updatePage(lastCompletion);
                                     }
                                 } else {
                                     totalImages--;
@@ -264,13 +263,6 @@ function loadFromArrayBuffer(ab, lastCompletion = 0) {
 }
 
 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
@@ -282,20 +274,19 @@ 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();
     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();
 }
@@ -370,7 +361,6 @@ 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";
@@ -424,8 +414,6 @@ function setImage(url, _canvas) {
             scrollTo(0, 0);
             x.drawImage(img, 0, 0);
 
-            updateScale(false);
-
             canvas.style.display = "";
             $("body").css("overflowY", "");
             x.restore();
@@ -447,6 +435,7 @@ function showLeftPage() {
     } else {
         showNextPage();
     }
+    setBookmark();
 }
 
 function showRightPage() {
@@ -455,6 +444,7 @@ function showRightPage() {
     } else {
         showPrevPage();
     }
+    setBookmark();
 }
 
 function showPrevPage() {
@@ -464,9 +454,6 @@ function showPrevPage() {
         currentImage++;
     } else {
         updatePage();
-        if (settings.nextPage === 0) {
-            $("#mainContent").scrollTop(0);
-        }
     }
     updateDirectionButtons();
 }
@@ -478,9 +465,6 @@ function showNextPage() {
         currentImage--;
     } else {
         updatePage();
-        if (settings.nextPage === 0) {
-            $("#mainContent").scrollTop(0);
-        }
     }
     updateDirectionButtons();
 }
@@ -497,7 +481,7 @@ function scrollCurrentImageIntoView() {
     }
 }
 
-function updateScale(clear) {
+function updateScale() {
     var canvasArray = $("#mainContent > canvas");
     var maxheight = innerHeight - 50;
     
@@ -506,7 +490,7 @@ function updateScale(clear) {
     canvasArray.css("maxWidth", "");
     canvasArray.css("maxHeight", "");
 
-    if(!clear) {
+    if(settings.pageDisplay === 0) {
         canvasArray.addClass("hide");
         pageDisplayUpdate();
     }
@@ -667,13 +651,23 @@ function drawCanvas() {
     $("#mainContent").append(canvasElement);
 }
 
+function updateArrows() {
+    if ($('input[name="direction"]:checked').val() === "0") {
+        $("#prev_page_key").html("←");
+        $("#next_page_key").html("→");
+    } else {
+        $("#prev_page_key").html("→");
+        $("#next_page_key").html("←");
+    }
+};
+
 function init(filename) {
     var request = new XMLHttpRequest();
     request.open("GET", filename);
     request.responseType = "arraybuffer";
     request.addEventListener("load", function () {
         if (request.status >= 200 && request.status < 300) {
-            loadFromArrayBuffer(request.response, currentImage);
+            loadFromArrayBuffer(request.response);
         } else {
             console.warn(request.statusText, request.responseText);
         }
@@ -728,7 +722,7 @@ function init(filename) {
         }
 
         updatePage();
-        updateScale(false);
+        updateScale();
     });
 
     // Close modal
@@ -741,9 +735,6 @@ function init(filename) {
     $("#thumbnails").on("click", "a", function () {
         currentImage = $(this).data("page") - 1;
         updatePage();
-        if (settings.nextPage === 0) {
-            $("#mainContent").scrollTop(0);
-        }
     });
 
     // Fullscreen mode
@@ -812,8 +803,12 @@ function init(filename) {
     });
 
     // Scrolling up/down will update current image if a new image is into view (for Long Strip Display)
-    $("#mainContent").scroll(function(){
+    $("#mainContent").scroll(function (event){
         var scroll = $("#mainContent").scrollTop();
+        var viewLength = 0;
+        $(".mainImage").each(function(){
+            viewLength += $(this).height();
+        });        
         if (settings.pageDisplay === 0) {
             // Don't trigger the scroll for Single Page
         } else if (scroll > prevScrollPosition) {
@@ -821,6 +816,7 @@ function init(filename) {
             if (currentImage + 1 < imageFiles.length) {
                 if (currentImageOffset(currentImage + 1) <= 1) {
                     currentImage++;
+                    console.log(Math.round(imageFiles.length / viewLength * scroll, 0));
                     scrollTocToActive();
                     updateProgress();
                 }
@@ -830,6 +826,7 @@ function init(filename) {
             if (currentImage - 1 > -1) {
                 if (currentImageOffset(currentImage - 1) >= 0) {
                     currentImage--;
+                    console.log(Math.round(imageFiles.length / viewLength * scroll, 0));
                     scrollTocToActive();
                     updateProgress();
                 }
@@ -844,3 +841,31 @@ function init(filename) {
 function currentImageOffset(imageIndex) {
     return $(".mainImage").eq(imageIndex).offset().top - $("#mainContent").position().top
 }
+
+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);
+    });
+}
+
+$(function() {
+    $('input[name="direction"]').change(function () {
+        updateArrows();
+    });
+
+    $('#left').click(function () {
+        showLeftPage();
+    });
+    $('#right').click(function () {
+        showRightPage();
+    });
+});

cps/templates/readcbr.html

@@ -61,8 +61,8 @@
   <div id="mainContent" tabindex="-1">
     <div id="mainText" style="display:none"></div>
   </div>
-  <div id="left" class="arrow" style="display:none" onclick="showLeftPage(); setBookmark();">‹</div>
+  <div id="left" class="arrow" style="display:none">‹</div>
-  <div id="right" class="arrow" style="display:none" onclick="showRightPage(); setBookmark();">›</div>
+  <div id="right" class="arrow" style="display:none">›</div>
 </div>
 
 <div class="modal md-effect-1" id="settings-modal">
@@ -183,58 +183,23 @@
   <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 }}"
     };
+
+    document.onreadystatechange = function () {
+      if (document.readyState == "complete") {
           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>
 </body>
 </html>

cps/tornado_wsgi.py

@@ -34,7 +34,7 @@ if typing.TYPE_CHECKING:
 class MyWSGIContainer(WSGIContainer):
 
     def __call__(self, request: httputil.HTTPServerRequest) -> None:
-        if tornado.version_info > (6, 2, 0, 0):
+        if tornado.version_info < (6, 2, 0, 0):
             data = {}  # type: Dict[str, Any]
             response = []  # type: List[bytes]
 
@@ -91,9 +91,9 @@ class MyWSGIContainer(WSGIContainer):
 
 
     def environ(self, request: httputil.HTTPServerRequest) -> Dict[Text, Any]:
-        if isinstance(WSGIContainer.environ, FunctionType):
+        try:
             environ = WSGIContainer.environ(self, request)
-        else:
+        except TypeError as e:
             environ = WSGIContainer.environ(request)
         environ['RAW_URI'] = request.path
         return environ