From 528ad4e6f22d8a2c480cd1520b1f7c0552244438 Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Tue, 23 Jan 2024 16:42:10 -0500
Subject: [PATCH] make viewer RTL-agnostic

---
 dlibrary/static/viewer.css     |  6 +++---
 dlibrary/static/viewer.js      | 25 +++++++++++++++++++++----
 dlibrary/templates/viewer.html |  4 ++--
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/dlibrary/static/viewer.css b/dlibrary/static/viewer.css
index 31181aa..0955210 100644
--- a/dlibrary/static/viewer.css
+++ b/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;
 }
 
diff --git a/dlibrary/static/viewer.js b/dlibrary/static/viewer.js
index a3d0240..3c2e1a4 100644
--- a/dlibrary/static/viewer.js
+++ b/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-prev").onclick = () => { changePage(currentPage - 1); };
+    document.getElementById("button-left").onclick = left;
+    document.getElementById("button-right").onclick = right;
     document.getElementById("button-back").onclick = exitToWork;
 });
diff --git a/dlibrary/templates/viewer.html b/dlibrary/templates/viewer.html
index 2457287..c1de14e 100644
--- a/dlibrary/templates/viewer.html
+++ b/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-prev"></div>
+  <div id="button-left"></div>
+  <div id="button-right"></div>
   <div id="button-back"></div>
 </div>
 <div id="image-container"></div>