Merge remote-tracking branch 'direction'

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) {
+        if (clickedLeft) {
-            showPrevPage();
+            showLeftPage();
         } else {
-            showNextPage();
+            showRightPage();
         }
     });
 }

cps/static/js/libs/screenfull.min.js

@@ -1,7 +1,7 @@
 /*!
 * screenfull
-* v3.3.0 - 2017-07-06
+* v4.2.0 - 2019-04-01
 * (c) Sindre Sorhus; MIT License
 */
 
-!function(){"use strict";var a="undefined"!=typeof window&&void 0!==window.document?window.document:{},b="undefined"!=typeof module&&module.exports,c="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,d=function(){for(var b,c=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],d=0,e=c.length,f={};d<e;d++)if((b=c[d])&&b[1]in a){for(d=0;d<b.length;d++)f[c[0][d]]=b[d];return f}return!1}(),e={change:d.fullscreenchange,error:d.fullscreenerror},f={request:function(b){var e=d.requestFullscreen;b=b||a.documentElement,/5\.1[.\d]* Safari/.test(navigator.userAgent)?b[e]():b[e](c&&Element.ALLOW_KEYBOARD_INPUT)},exit:function(){a[d.exitFullscreen]()},toggle:function(a){this.isFullscreen?this.exit():this.request(a)},onchange:function(a){this.on("change",a)},onerror:function(a){this.on("error",a)},on:function(b,c){var d=e[b];d&&a.addEventListener(d,c,!1)},off:function(b,c){var d=e[b];d&&a.off(d,c,!1)},raw:d};if(!d)return void(b?module.exports=!1:window.screenfull=!1);Object.defineProperties(f,{isFullscreen:{get:function(){return Boolean(a[d.fullscreenElement])}},element:{enumerable:!0,get:function(){return a[d.fullscreenElement]}},enabled:{enumerable:!0,get:function(){return Boolean(a[d.fullscreenEnabled])}}}),b?module.exports=f:window.screenfull=f}();
+!function(){"use strict";var u="undefined"!=typeof window&&void 0!==window.document?window.document:{},e="undefined"!=typeof module&&module.exports,t="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,c=function(){for(var e,n=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],l=0,r=n.length,t={};l<r;l++)if((e=n[l])&&e[1]in u){for(l=0;l<e.length;l++)t[n[0][l]]=e[l];return t}return!1}(),r={change:c.fullscreenchange,error:c.fullscreenerror},n={request:function(r){return new Promise(function(e){var n=c.requestFullscreen,l=function(){this.off("change",l),e()}.bind(this);r=r||u.documentElement,/ Version\/5\.1(?:\.\d+)? Safari\//.test(navigator.userAgent)?r[n]():r[n](t?Element.ALLOW_KEYBOARD_INPUT:{}),this.on("change",l)}.bind(this))},exit:function(){return new Promise(function(e){if(this.isFullscreen){var n=function(){this.off("change",n),e()}.bind(this);u[c.exitFullscreen](),this.on("change",n)}else e()}.bind(this))},toggle:function(e){return this.isFullscreen?this.exit():this.request(e)},onchange:function(e){this.on("change",e)},onerror:function(e){this.on("error",e)},on:function(e,n){var l=r[e];l&&u.addEventListener(l,n,!1)},off:function(e,n){var l=r[e];l&&u.removeEventListener(l,n,!1)},raw:c};c?(Object.defineProperties(n,{isFullscreen:{get:function(){return Boolean(u[c.fullscreenElement])}},element:{enumerable:!0,get:function(){return u[c.fullscreenElement]}},enabled:{enumerable:!0,get:function(){return Boolean(u[c.fullscreenEnabled])}}}),e?(module.exports=n,module.exports.default=n):window.screenfull=n):e?module.exports=!1:window.screenfull=!1}();

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) }}");
+        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="left" class="arrow" onclick="showLeftPage()">‹</div>
-  <div id="next" class="arrow" onclick="showNextPage()">›</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 id="prev_page_key">&larr;</td> <td>{{_('Previous Page')}}</td></tr>
-          <tr><td>&rarr;</td> <td>{{_('Next 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>