Merge remote-tracking branch 'comic/long_strip_cbrreader'

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;

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() {
@@ -187,7 +188,6 @@ function initProgressClick() {
 }
 
 function loadFromArrayBuffer(ab) {
-    var lastCompletion = 0;
     const collator = new Intl.Collator('en', { numeric: true, sensitivity: 'base' });
     loadArchiveFormats(['rar', 'zip', 'tar'], function() {
         // Open the file as an archive
@@ -216,9 +216,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--;
@@ -233,13 +237,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
@@ -251,22 +248,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();
-
+    pageDisplayUpdate();
-    if (imageFiles[currentImage]) {
+    setTheme();
-        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();
 }
 
+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")
@@ -298,100 +313,93 @@ function updateProgress(loadPercentage) {
     $("#progress .bar-read").css({ width: totalImages === 0 ? 0 : Math.round((currentImage + 1) / totalImages * 100) + "%"});
 }
 
-function setImage(url) {
+function setImage(url, _canvas) {
-    var canvas = $("#mainImage")[0];
+    var canvas = _canvas || $(".mainImage").slice(-1)[0]; // Select the last item on the array if _canvas is null
-    var x = $("#mainImage")[0].getContext("2d");
+    var x = canvas.getContext("2d");
+
     $("#mainText").hide();
-    if (url === "loading") {
+    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.strokeStyle = (settings.theme === "dark") ? "white" : "black";
-        x.fillText("Loading Page #" + (currentImage + 1), innerWidth / 2, 100);
+        x.fillText("Unable to decompress image #" + (currentImage + 1), innerWidth / 2, 100);
+
+        $(".mainImage").slice(-1).addClass("error");
     } else {
-        if (url === "error") {
+        if ($("body").css("scrollHeight") / innerHeight > 1) {
-            updateScale(true);
+            $("body").css("overflowY", "scroll");
-            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;
         }
+
+        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;
+    }
+}
+
+// reloadImages is a slow process when multiple images are involved. Only used when rotating/mirroring
+function reloadImages() {
+    for(i=0; i < imageFiles.length; i++) {
+        setImage(imageFiles[i].dataURI, $(".mainImage")[i]);
     }
 }
 
@@ -418,9 +426,6 @@ function showPrevPage() {
         currentImage++;
     } else {
         updatePage();
-		if (settings.nextPage === 0) {
-			$("#mainContent").scrollTop(0);
-		}
     }
 }
 
@@ -431,36 +436,53 @@ function showNextPage() {
         currentImage--;
     } else {
         updatePage();
-		if (settings.nextPage === 0) {
-			$("#mainContent").scrollTop(0);
-		}
     }
 }
 
-function updateScale(clear) {
+function scrollCurrentImageIntoView() {
-    var mainImageStyle = getElem("mainImage").style;
+    if(settings.pageDisplay == 0) {
-    mainImageStyle.width = "";
+        // This will scroll all the way up when Single Page is selected
-    mainImageStyle.height = "";
+		$("#mainContent").scrollTop(0);
-    mainImageStyle.maxWidth = "";
+    } else {
-    mainImageStyle.maxHeight = "";
+        // This will scroll to the image when Long Strip is selected
-    var maxheight = innerHeight - 50;
+        $("#mainContent").stop().animate({
-
+            scrollTop: $(".mainImage").eq(currentImage).offset().top + $("#mainContent").scrollTop() - $("#mainContent").offset().top
-    if (!clear) {
+        }, 200);
-        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 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();
@@ -477,6 +499,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--;
@@ -484,6 +520,7 @@ function keyHandler(evt) {
                 settings.rotateTimes = 3;
             }
             updatePage();
+			reloadImages();
             break;
         case kthoom.Key.R:
             if (hasModifier) break;
@@ -492,6 +529,7 @@ function keyHandler(evt) {
                 settings.rotateTimes = 0;
             }
             updatePage();
+			reloadImages();
             break;
         case kthoom.Key.F:
             if (hasModifier) break;
@@ -507,26 +545,27 @@ function keyHandler(evt) {
                 settings.hflip = true;
             }
             updatePage();
+			reloadImages();
             break;
         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) {
@@ -545,6 +584,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);
@@ -556,16 +632,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
@@ -596,28 +673,35 @@ function init(filename) {
         value = /^\d+$/.test(value) ? parseInt(value) : value;
 
         settings[this.name] = value;
+
+        if(["hflip", "vflip", "rotateTimes"].includes(this.name)) {
+            reloadImages();
+        } else if(this.name === "direction") {
+            return updateProgress();
+        }
+        
         updatePage();
-        updateScale(false);
+        updateScale();
     });
 
     // Close modal
     $(".closer, .overlay").click(function() {
         $(".md-show").removeClass("md-show");
+		$("#mainContent").focus(); // focus back on the main container so you use up/down keys without having to click on it
     });
 
     // TOC thumbnail pagination
     $("#thumbnails").on("click", "a", function() {
         currentImage = $(this).data("page") - 1;
         updatePage();
-		if (settings.nextPage === 0) {
-			$("#mainContent").scrollTop(0);
-		}
     });
 
     // Fullscreen mode
     if (typeof screenfull !== "undefined") {
         $("#fullscreen").click(function() {
             screenfull.toggle($("#container")[0]);
+			// Focus on main container so you can use up/down keys immediately after fullscreen
+			$("#mainContent").focus();
         });
 
         if (screenfull.raw) {
@@ -641,7 +725,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();
@@ -676,5 +760,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
+}

cps/templates/readcbr.html

@@ -76,7 +76,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>
@@ -94,6 +93,8 @@
           <tbody>
           <tr><td id="prev_page_key">&larr;</td> <td>{{_('Previous Page')}}</td></tr>
           <tr><td id="next_page_key">&rarr;</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>
@@ -121,6 +122,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>
@@ -160,15 +170,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>