Add reading direction settings to readcbr page

cps/static/css/kthoom.css

@@ -152,11 +152,11 @@ body {
   max-width: 70%;
 }
 
-#prev {
+#left {
   left: 40px;
 }
 
-#next {
+#right {
   right: 40px;
 }
 

cps/static/js/kthoom.js

@@ -66,7 +66,8 @@ var settings = {
     vflip: false,
     rotateTimes: 0,
     fitMode: kthoom.Key.B,
-    theme: "light"
+    theme: "light",
+    direction: 0 // 0 = Left to Right, 1 = Right to Left
 };
 
 kthoom.saveSettings = function() {
@@ -367,6 +368,22 @@ function setImage(url) {
     }
 }
 
+function showLeftPage() {
+    if (settings.direction === 0) {
+        showPrevPage()
+    } else {
+        showNextPage()
+    }
+}
+
+function showRightPage() {
+    if (settings.direction === 0) {
+        showNextPage()
+    } else {
+        showPrevPage()
+    }
+}
+
 function showPrevPage() {
     currentImage--;
     if (currentImage < 0) {
@@ -421,11 +438,11 @@ function keyHandler(evt) {
     switch (evt.keyCode) {
         case kthoom.Key.LEFT:
             if (hasModifier) break;
-            showPrevPage();
+            showLeftPage();
             break;
         case kthoom.Key.RIGHT:
             if (hasModifier) break;
-            showNextPage();
+            showRightPage();
             break;
         case kthoom.Key.L:
             if (hasModifier) break;
@@ -486,11 +503,11 @@ function keyHandler(evt) {
             if (evt.shiftKey && atTop) {
                 evt.preventDefault();
                 // If it's Shift + Space and the container is at the top of the page
-                showPrevPage();
+                showLeftPage();
             } else if (!evt.shiftKey && atBottom) {
                 evt.preventDefault();
                 // If you're at the bottom of the page and you only pressed space
-                showNextPage();
+                showRightPage();
                 container.scrollTop(0);
             }
             break;
@@ -621,25 +638,25 @@ function init(filename) {
 
         // Determine if the user clicked/tapped the left side or the
         // right side of the page.
-        var clickedPrev = false;
+        var clickedLeft = false;
         switch (settings.rotateTimes) {
             case 0:
-                clickedPrev = clickX < (comicWidth / 2);
+                clickedLeft = clickX < (comicWidth / 2);
                 break;
             case 1:
-                clickedPrev = clickY < (comicHeight / 2);
+                clickedLeft = clickY < (comicHeight / 2);
                 break;
             case 2:
-                clickedPrev = clickX > (comicWidth / 2);
+                clickedLeft = clickX > (comicWidth / 2);
                 break;
             case 3:
-                clickedPrev = clickY > (comicHeight / 2);
+                clickedLeft = clickY > (comicHeight / 2);
                 break;
         }
-        if (clickedPrev) {
-            showPrevPage();
+        if (clickedLeft) {
+            showLeftPage();
         } else {
-            showNextPage();
+            showRightPage();
         }
     });
 }

cps/templates/readcbr.html

@@ -17,9 +17,19 @@
   <script src="{{ url_for('static', filename='js/kthoom.js') }}"></script>
 	<script src="{{ url_for('static', filename='js/archive.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('serve_book', book_id=comicfile, book_format=extension) }}");                             
+        init("{{ url_for('serve_book', book_id=comicfile, book_format=extension) }}");
+        updateArrows();
       }
     };
   </script>
@@ -70,8 +80,8 @@
     <div id="mainText" style="display:none"></div>
     <canvas id="mainImage"></canvas>
   </div>
-  <div id="prev" class="arrow" onclick="showPrevPage()">‹</div>
-  <div id="next" class="arrow" onclick="showNextPage()">›</div>
+  <div id="left" class="arrow" onclick="showLeftPage()">‹</div>
+  <div id="right" class="arrow" onclick="showRightPage()">›</div>
 </div>
 
 <div class="modal md-effect-1" id="settings-modal">
@@ -84,8 +94,8 @@
           <tr><th colspan="2">{{_('Keyboard Shortcuts')}}</th></tr>
           </thead>
           <tbody>
-          <tr><td>&larr;</td> <td>{{_('Previous Page')}}</td></tr>
-          <tr><td>&rarr;</td> <td>{{_('Next Page')}}</td></tr>
+          <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>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>
@@ -144,6 +154,15 @@
               </div>
             </td>
           </tr>
+          <tr>
+            <th>{{_('Direction')}}:</th>
+            <td>
+              <div class="inputs">
+                <label for="leftToRight"><input type="radio" id="leftToRight" name="direction" value="0" /> {{_('Left to Right')}}</label>
+                <label for="rightToLeft"><input type="radio" id="rightToLeft" name="direction" value="1" /> {{_('Right to Left')}}</label>
+              </div>
+            </td>
+          </tr>
           </tbody>
         </table>
       </div>
@@ -152,6 +171,10 @@
   </div>
 </div>
 <div class="overlay"></div>
-
+<script>
+  $('input[name="direction"]').change(function() {
+    updateArrows();
+  });
+</script>
 </body>
 </html>