smoother progress bar, prevent browser from interfering with escape key
This commit is contained in:
parent
6461b05bb2
commit
b295ee2ad8
|
@ -1,3 +1,5 @@
|
||||||
|
const PROGRESS_UPDATE_INTERVAL = 50;
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const pages = Array.from(document.querySelectorAll('img.viewer-image'));
|
const pages = Array.from(document.querySelectorAll('img.viewer-image'));
|
||||||
let currentPage = parseInt(localStorage.getItem(`${WORK_ID}-currentPage`)) || 0;
|
let currentPage = parseInt(localStorage.getItem(`${WORK_ID}-currentPage`)) || 0;
|
||||||
|
@ -16,13 +18,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
if (paused) {
|
if (paused) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
elapsed += 100;
|
elapsed += PROGRESS_UPDATE_INTERVAL;
|
||||||
if (elapsed >= duration*1000) {
|
if (elapsed >= duration*1000) {
|
||||||
changePage(currentPage + 1);
|
changePage(currentPage + 1);
|
||||||
}
|
}
|
||||||
updateBar();
|
updateBar();
|
||||||
},
|
},
|
||||||
100
|
PROGRESS_UPDATE_INTERVAL,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -119,15 +121,19 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
||||||
switch (event.key) {
|
switch (event.key) {
|
||||||
case "ArrowLeft":
|
case "ArrowLeft":
|
||||||
|
event.preventDefault();
|
||||||
left();
|
left();
|
||||||
break;
|
break;
|
||||||
case "ArrowRight":
|
case "ArrowRight":
|
||||||
|
event.preventDefault();
|
||||||
right();
|
right();
|
||||||
break;
|
break;
|
||||||
case " ":
|
case " ":
|
||||||
|
event.preventDefault();
|
||||||
changeDuration(duration, !paused);
|
changeDuration(duration, !paused);
|
||||||
break;
|
break;
|
||||||
case "ArrowUp":
|
case "ArrowUp":
|
||||||
|
event.preventDefault();
|
||||||
if (2 <= duration && duration <= 10) {
|
if (2 <= duration && duration <= 10) {
|
||||||
changeDuration(duration - 1, false);
|
changeDuration(duration - 1, false);
|
||||||
} else if (10 < duration && duration <= 20) {
|
} else if (10 < duration && duration <= 20) {
|
||||||
|
@ -137,6 +143,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "ArrowDown":
|
case "ArrowDown":
|
||||||
|
event.preventDefault();
|
||||||
if (duration < 10) {
|
if (duration < 10) {
|
||||||
changeDuration(duration + 1, false);
|
changeDuration(duration + 1, false);
|
||||||
} else if (10 <= duration && duration < 20) {
|
} else if (10 <= duration && duration < 20) {
|
||||||
|
@ -146,9 +153,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "Enter":
|
case "Enter":
|
||||||
|
event.preventDefault();
|
||||||
restart();
|
restart();
|
||||||
break;
|
break;
|
||||||
case "Escape":
|
case "Escape":
|
||||||
|
event.preventDefault();
|
||||||
exitToWork();
|
exitToWork();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue