add tap zones for mobile viewing

dlibrary/static/viewer.css

@@ -4,3 +4,26 @@ html, body {
     padding: 0;
     margin: 0;
 }
+
+#button-next, #button-prev {
+    position: fixed;
+    bottom: 0px;
+    width: 30vw;
+    height: 100vh;
+}
+
+#button-next {
+    left: 0px;
+}
+
+#button-prev {
+    right: 0px;
+}
+
+#button-back {
+    position: fixed;
+    top: 0px;
+    left: 30vw;
+    width: 40vw;
+    height: 20vh;
+}

dlibrary/static/viewer.js

@@ -78,6 +78,12 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    function exitToWork() {
+        changeDuration(duration, true);
+        localStorage.setItem(`${WORK_ID}-currentPage`, 0);
+        window.location.href = "../";
+    }
+
     changePage(currentPage);
     changeDuration(duration, paused);
 
@@ -111,10 +117,12 @@ document.addEventListener('DOMContentLoaded', () => {
             }
             break;
         case 13: //enter
-            changeDuration(duration, true);
-            localStorage.setItem(`${WORK_ID}-currentPage`, 0);
-            window.location.href = "../";
+            exitToWork();
             break;
         }
     };
+
+    document.getElementById("button-next").onclick = () => { changePage(currentPage + 1); };
+    document.getElementById("button-prev").onclick = () => { changePage(currentPage - 1); };
+    document.getElementById("button-back").onclick = exitToWork;
 });

dlibrary/templates/viewer.html

@@ -16,5 +16,10 @@
 <div id="progress"></div>
 <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-back"></div>
+</div>
 <div id="image-container"></div>
 {% endblock %}