diff --git a/dlibrary/static/dlibrary.css b/dlibrary/static/dlibrary.css
index 2f67966..aaa1b8e 100644
--- a/dlibrary/static/dlibrary.css
+++ b/dlibrary/static/dlibrary.css
@@ -135,3 +135,46 @@ 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 ffcd40c..f521e83 100644
--- a/dlibrary/static/viewer.css
+++ b/dlibrary/static/viewer.css
@@ -5,33 +5,27 @@ html, body {
margin: 0;
}
-#controls {
+.tap {
+ background: #000000;
opacity: 0.8;
+ position: fixed;
animation: 2s linear forwards fade;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
@keyframes fade {
to { opacity: 0; }
}
-.tap {
- background: #000000;
- position: fixed;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
#tap-left, #tap-right {
+ position: fixed;
bottom: 0px;
width: 30vw;
height: 100vh;
}
-#tap-left svg, #tap-right svg {
- width: min(90%, 100px);
-}
-
#tap-left {
left: 0px;
}
@@ -40,65 +34,9 @@ html, body {
right: 0px;
}
-#tap-back, #tap-restart {
+#tap-back {
+ top: 0px;
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 b6cab82..ebf9c62 100644
--- a/dlibrary/static/viewer.js
+++ b/dlibrary/static/viewer.js
@@ -1,5 +1,3 @@
-const PROGRESS_UPDATE_INTERVAL = 50;
-
document.addEventListener('DOMContentLoaded', () => {
const pages = Array.from(document.querySelectorAll('img.viewer-image'));
let currentPage = parseInt(localStorage.getItem(`${WORK_ID}-currentPage`)) || 0;
@@ -18,13 +16,13 @@ document.addEventListener('DOMContentLoaded', () => {
if (paused) {
return;
}
- elapsed += PROGRESS_UPDATE_INTERVAL;
+ elapsed += 100;
if (elapsed >= duration*1000) {
changePage(currentPage + 1);
}
updateBar();
},
- PROGRESS_UPDATE_INTERVAL,
+ 100
);
}
@@ -97,20 +95,16 @@ document.addEventListener('DOMContentLoaded', () => {
changePage(currentPage + (rtl ? -1 : 1));
}
- function restart() {
- changePage(0);
- }
-
function exitToWork() {
changeDuration(duration, true);
- if (currentPage === pages.length - 1) {
- localStorage.removeItem(`${WORK_ID}-currentPage`);
- }
+ localStorage.setItem(`${WORK_ID}-currentPage`, 0);
window.location.href = `../${INDEX}`;
}
function hideTapZones() {
- document.getElementById('controls').style.opacity = 0;
+ for (const el of document.getElementsByClassName('tap')) {
+ el.style.opacity = 0;
+ }
}
changePage(currentPage);
@@ -119,21 +113,14 @@ document.addEventListener('DOMContentLoaded', () => {
document.onkeydown = event => {
hideTapZones();
- switch (event.key) {
- case "ArrowLeft":
- event.preventDefault();
- left();
- break;
- case "ArrowRight":
- event.preventDefault();
- right();
- break;
- case " ":
- event.preventDefault();
+ switch (event.keyCode) {
+ case 32: //space
changeDuration(duration, !paused);
break;
- case "ArrowUp":
- event.preventDefault();
+ case 37: //left
+ left();
+ break;
+ case 38: //up
if (2 <= duration && duration <= 10) {
changeDuration(duration - 1, false);
} else if (10 < duration && duration <= 20) {
@@ -142,8 +129,10 @@ document.addEventListener('DOMContentLoaded', () => {
changeDuration(duration - 5, false);
}
break;
- case "ArrowDown":
- event.preventDefault();
+ case 39: //right
+ right();
+ break;
+ case 40: //down
if (duration < 10) {
changeDuration(duration + 1, false);
} else if (10 <= duration && duration < 20) {
@@ -152,12 +141,7 @@ document.addEventListener('DOMContentLoaded', () => {
changeDuration(duration + 5, false);
}
break;
- case "Enter":
- event.preventDefault();
- restart();
- break;
- case "Escape":
- event.preventDefault();
+ case 13: //enter
exitToWork();
break;
}
@@ -166,6 +150,5 @@ 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 86c44d3..dc521e9 100644
--- a/dlibrary/templates/viewer.html
+++ b/dlibrary/templates/viewer.html
@@ -33,13 +33,6 @@
-
{% endblock %}