From c2bfb29726a77f0ca6993cf74e852b66c7c6ca1f Mon Sep 17 00:00:00 2001
From: subdiox <subdiox@gmail.com>
Date: Sun, 21 Apr 2019 18:20:15 +0900
Subject: [PATCH] Add reading direction settings to readcbr page

---
 cps/static/css/kthoom.css  |  4 ++--
 cps/static/js/kthoom.js    | 43 ++++++++++++++++++++++++++------------
 cps/templates/readcbr.html | 35 +++++++++++++++++++++++++------
 3 files changed, 61 insertions(+), 21 deletions(-)

diff --git a/cps/static/css/kthoom.css b/cps/static/css/kthoom.css
index 770b94a2..6dfb9967 100644
--- a/cps/static/css/kthoom.css
+++ b/cps/static/css/kthoom.css
@@ -152,11 +152,11 @@ body {
   max-width: 70%;
 }
 
-#prev {
+#left {
   left: 40px;
 }
 
-#next {
+#right {
   right: 40px;
 }
 
diff --git a/cps/static/js/kthoom.js b/cps/static/js/kthoom.js
index 6ab25ad7..d7d97369 100644
--- a/cps/static/js/kthoom.js
+++ b/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();
         }
     });
 }
diff --git a/cps/templates/readcbr.html b/cps/templates/readcbr.html
index bdc2a3ea..9fdce0f8 100644
--- a/cps/templates/readcbr.html
+++ b/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>