Fix progress bar direction

cps/static/css/kthoom.css

@@ -84,15 +84,24 @@ body {
 #progress .bar-load,
 #progress .bar-read {
   display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
   position: absolute;
   top: 0;
-  left: 0;
   bottom: 0;
   transition: width 150ms ease-in-out;
 }
 
+#progress .from-left {
+  left: 0;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+#progress .from-right {
+  right: 0;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
 #progress .bar-load {
   color: #000;
   background-color: #ccc;

cps/static/js/kthoom.js

@@ -171,7 +171,10 @@ kthoom.ImageFile = function(file) {
 
 function initProgressClick() {
     $("#progress").click(function(e) {
-        var page = Math.max(1, Math.ceil((e.offsetX / $(this).width()) * totalImages)) - 1;
+        var offset = $(this).offset();
+        var x = e.pageX - offset.left;
+        var rate = settings.direction === 0 ? x / $(this).width() : 1 - x / $(this).width();
+        var page = Math.max(1, Math.ceil(rate * totalImages)) - 1;
         currentImage = page;
         updatePage();
     });
@@ -285,6 +288,22 @@ function updatePage() {
 }
 
 function updateProgress(loadPercentage) {
+    if (settings.direction === 0) {
+        $("#progress .bar-read")
+            .removeClass("from-right")
+            .addClass("from-left");
+        $("#progress .bar-load")
+            .removeClass("from-right")
+            .addClass("from-left");
+    } else {
+        $("#progress .bar-read")
+            .removeClass("from-left")
+            .addClass("from-right");
+        $("#progress .bar-load")
+            .removeClass("from-left")
+            .addClass("from-right");
+    }
+
     // Set the load/unzip progress if it's passed in
     if (loadPercentage) {
         $("#progress .bar-load").css({ width: loadPercentage + "%" });
@@ -526,18 +545,17 @@ function keyHandler(evt) {
             break;
         case kthoom.Key.SPACE:
             var container = $("#mainContent");
-            var atTop = container.scrollTop() === 0;
-            var atBottom = container.scrollTop() >= container[0].scrollHeight - container.height();
+            // var atTop = container.scrollTop() === 0;
+            // var atBottom = container.scrollTop() >= container[0].scrollHeight - container.height();
 
-            if (evt.shiftKey && atTop) {
+            if (evt.shiftKey) {
                 evt.preventDefault();
                 // If it's Shift + Space and the container is at the top of the page
                 showPrevPage();
-            } else if (!evt.shiftKey && atBottom) {
+            } else {
                 evt.preventDefault();
                 // If you're at the bottom of the page and you only pressed space
                 showNextPage();
-                container.scrollTop(0);
             }
             break;
         default:

cps/templates/readcbr.html

@@ -60,12 +60,12 @@
       <a id="fullscreen" class="icon-resize-full">Fullscreen</a>
     </div>
     <div id="progress" role="progressbar" class="loading">
-      <div class="bar-load">
+      <div class="bar-load from-left">
         <div class="text load">
           Loading...
         </div>
       </div>
-      <div class="bar-read">
+      <div class="bar-read from-left">
         <div class="text page"></div>
       </div>
     </div>