From 6461b05bb24721b612b488f4b91a908c66f7f859 Mon Sep 17 00:00:00 2001 From: xenofem Date: Thu, 25 Jan 2024 13:57:39 -0500 Subject: [PATCH] only restart a work if we exit on the last page or hit/tap the restart input --- dlibrary/static/dlibrary.css | 43 ------------------ dlibrary/static/viewer.css | 80 ++++++++++++++++++++++++++++++---- dlibrary/static/viewer.js | 38 +++++++++------- dlibrary/templates/viewer.html | 7 +++ 4 files changed, 101 insertions(+), 67 deletions(-) diff --git a/dlibrary/static/dlibrary.css b/dlibrary/static/dlibrary.css index aaa1b8e..2f67966 100644 --- a/dlibrary/static/dlibrary.css +++ b/dlibrary/static/dlibrary.css @@ -135,46 +135,3 @@ body { display: inline-block; margin-bottom: 5px; } - -/* viewer stuff */ - -#viewer-images { - display: none; -} - -#image-container { - height: 100vh; - width: 100vw; - background-size: contain; - background-repeat: no-repeat; - background-position: center; -} - -#page-num, #duration { - position: fixed; - font-size: 14pt; - top: 10px; - font-weight: bold; - opacity: 0.75; - text-shadow: /* Duplicate the same shadow to make it very strong */ - 0 0 2px #222, - 0 0 2px #222, - 0 0 2px #222; -} - -#page-num { - left: 10px; -} - -#duration { - right: 10px; -} - -#progress { - background-color: #4488ffcc; - height: 5px; - width: 0; - position: fixed; - top: 0; - left: 0; -} diff --git a/dlibrary/static/viewer.css b/dlibrary/static/viewer.css index f521e83..ffcd40c 100644 --- a/dlibrary/static/viewer.css +++ b/dlibrary/static/viewer.css @@ -5,27 +5,33 @@ html, body { margin: 0; } -.tap { - background: #000000; +#controls { opacity: 0.8; - position: fixed; animation: 2s linear forwards fade; - display: flex; - justify-content: center; - align-items: center; } @keyframes fade { to { opacity: 0; } } -#tap-left, #tap-right { +.tap { + background: #000000; position: fixed; + display: flex; + justify-content: center; + align-items: center; +} + +#tap-left, #tap-right { bottom: 0px; width: 30vw; height: 100vh; } +#tap-left svg, #tap-right svg { + width: min(90%, 100px); +} + #tap-left { left: 0px; } @@ -34,9 +40,65 @@ html, body { right: 0px; } -#tap-back { - top: 0px; +#tap-back, #tap-restart { left: 30vw; width: 40vw; height: 20vh; } + +#tap-back svg { + height: min(51%, 100px); +} + +#tap-restart svg { + height: min(90%, 175px); +} + +#tap-back { + top: 0px; +} + +#tap-restart { + bottom: 0px; +} + +#viewer-images { + display: none; +} + +#image-container { + height: 100vh; + width: 100vw; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +#page-num, #duration { + position: fixed; + font-size: 14pt; + top: 10px; + font-weight: bold; + opacity: 0.75; + text-shadow: /* Duplicate the same shadow to make it very strong */ + 0 0 2px #222, + 0 0 2px #222, + 0 0 2px #222; +} + +#page-num { + left: 10px; +} + +#duration { + right: 10px; +} + +#progress { + background-color: #4488ffcc; + height: 5px; + width: 0; + position: fixed; + top: 0; + left: 0; +} diff --git a/dlibrary/static/viewer.js b/dlibrary/static/viewer.js index ebf9c62..cc0abe1 100644 --- a/dlibrary/static/viewer.js +++ b/dlibrary/static/viewer.js @@ -95,16 +95,20 @@ document.addEventListener('DOMContentLoaded', () => { changePage(currentPage + (rtl ? -1 : 1)); } + function restart() { + changePage(0); + } + function exitToWork() { changeDuration(duration, true); - localStorage.setItem(`${WORK_ID}-currentPage`, 0); + if (currentPage === pages.length - 1) { + localStorage.removeItem(`${WORK_ID}-currentPage`); + } window.location.href = `../${INDEX}`; } function hideTapZones() { - for (const el of document.getElementsByClassName('tap')) { - el.style.opacity = 0; - } + document.getElementById('controls').style.opacity = 0; } changePage(currentPage); @@ -113,14 +117,17 @@ document.addEventListener('DOMContentLoaded', () => { document.onkeydown = event => { hideTapZones(); - switch (event.keyCode) { - case 32: //space - changeDuration(duration, !paused); - break; - case 37: //left + switch (event.key) { + case "ArrowLeft": left(); break; - case 38: //up + case "ArrowRight": + right(); + break; + case " ": + changeDuration(duration, !paused); + break; + case "ArrowUp": if (2 <= duration && duration <= 10) { changeDuration(duration - 1, false); } else if (10 < duration && duration <= 20) { @@ -129,10 +136,7 @@ document.addEventListener('DOMContentLoaded', () => { changeDuration(duration - 5, false); } break; - case 39: //right - right(); - break; - case 40: //down + case "ArrowDown": if (duration < 10) { changeDuration(duration + 1, false); } else if (10 <= duration && duration < 20) { @@ -141,7 +145,10 @@ document.addEventListener('DOMContentLoaded', () => { changeDuration(duration + 5, false); } break; - case 13: //enter + case "Enter": + restart(); + break; + case "Escape": exitToWork(); break; } @@ -150,5 +157,6 @@ document.addEventListener('DOMContentLoaded', () => { document.onclick = hideTapZones; document.getElementById("tap-left").onclick = left; document.getElementById("tap-right").onclick = right; + document.getElementById("tap-restart").onclick = restart; document.getElementById("tap-back").onclick = exitToWork; }); diff --git a/dlibrary/templates/viewer.html b/dlibrary/templates/viewer.html index dc521e9..86c44d3 100644 --- a/dlibrary/templates/viewer.html +++ b/dlibrary/templates/viewer.html @@ -33,6 +33,13 @@ +
+ + + + + +
{% endblock %}