make viewer RTL-agnostic

dlibrary/static/viewer.css

@@ -5,18 +5,18 @@ html, body {
     margin: 0;
 }
 
-#button-next, #button-prev {
+#button-left, #button-right {
     position: fixed;
     bottom: 0px;
     width: 30vw;
     height: 100vh;
 }
 
-#button-next {
+#button-left {
     left: 0px;
 }
 
-#button-prev {
+#button-right {
     right: 0px;
 }
 

dlibrary/static/viewer.js

@@ -5,6 +5,7 @@ document.addEventListener('DOMContentLoaded', () => {
     let paused = true;
     let interval;
     let elapsed = 0;
+    let rtl = (localStorage.getItem(`${WORK_ID}-rtl`) !== "false");
 
     function startTimer() {
         if (interval) {
@@ -78,6 +79,22 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    function left() {
+        if (currentPage === 0) {
+            rtl = true;
+            localStorage.setItem(`${WORK_ID}-rtl`, rtl);
+        }
+        changePage(currentPage + (rtl ? 1 : -1));
+    }
+
+    function right() {
+        if (currentPage === 0) {
+            rtl = false;
+            localStorage.setItem(`${WORK_ID}-rtl`, rtl);
+        }
+        changePage(currentPage + (rtl ? -1 : 1));
+    }
+
     function exitToWork() {
         changeDuration(duration, true);
         localStorage.setItem(`${WORK_ID}-currentPage`, 0);
@@ -93,7 +110,7 @@ document.addEventListener('DOMContentLoaded', () => {
             changeDuration(duration, !paused);
             break;
         case 37: //left
-            changePage(currentPage - 1);
+            left();
             break;
         case 38: //up
             if (2 <= duration && duration <= 10) {
@@ -105,7 +122,7 @@ document.addEventListener('DOMContentLoaded', () => {
             }
             break;
         case 39: //right
-            changePage(currentPage + 1);
+            right();
             break;
         case 40: //down
             if (duration < 10) {
@@ -122,7 +139,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
 
-    document.getElementById("button-next").onclick = () => { changePage(currentPage + 1); };
+    document.getElementById("button-left").onclick = left;
-    document.getElementById("button-prev").onclick = () => { changePage(currentPage - 1); };
+    document.getElementById("button-right").onclick = right;
     document.getElementById("button-back").onclick = exitToWork;
 });

dlibrary/templates/viewer.html

@@ -17,8 +17,8 @@
 <div id="page-num"></div>
 <div id="duration"></div>
 <div id="controls">
-  <div id="button-next"></div>
+  <div id="button-left"></div>
-  <div id="button-prev"></div>
+  <div id="button-right"></div>
   <div id="button-back"></div>
 </div>
 <div id="image-container"></div>