make viewer RTL-agnostic

This commit is contained in:
xenofem 2024-01-23 16:42:10 -05:00
parent ecb63ced83
commit 528ad4e6f2
3 changed files with 26 additions and 9 deletions

View file

@ -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;
}

View file

@ -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;
});

View file

@ -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>