121 lines
3.5 KiB
JavaScript
121 lines
3.5 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const pages = Array.from(document.querySelectorAll('img.viewer-image'));
|
|
let currentPage = parseInt(localStorage.getItem(`${WORK_ID}-currentPage`)) || 0;
|
|
let duration = parseInt(localStorage.getItem(`${WORK_ID}-duration`)) || 10;
|
|
let paused = true;
|
|
let interval;
|
|
let elapsed = 0;
|
|
|
|
function startTimer() {
|
|
if (interval) {
|
|
clearInterval(interval);
|
|
}
|
|
interval = setInterval(
|
|
function () {
|
|
if (paused) {
|
|
return;
|
|
}
|
|
elapsed += 100;
|
|
if (elapsed >= duration*1000) {
|
|
changePage(currentPage + 1);
|
|
}
|
|
updateBar();
|
|
},
|
|
100
|
|
);
|
|
}
|
|
|
|
const progressBar = document.getElementById('progress');
|
|
function updateBar() {
|
|
progressBar.style.width = `${100*elapsed/(1000*duration)}%`;
|
|
}
|
|
|
|
function stopTimer() {
|
|
if (interval) {
|
|
clearInterval(interval);
|
|
interval = null;
|
|
}
|
|
elapsed = 0;
|
|
updateBar();
|
|
}
|
|
|
|
function changePage(pageNum) {
|
|
elapsed = 0;
|
|
|
|
const previous = pages[currentPage];
|
|
const current = pages[pageNum];
|
|
|
|
if (current == null) {
|
|
return;
|
|
}
|
|
|
|
previous.classList.remove('current');
|
|
current.classList.add('current');
|
|
|
|
currentPage = pageNum;
|
|
localStorage.setItem(`${WORK_ID}-currentPage`, currentPage);
|
|
|
|
const display = document.getElementById('image-container');
|
|
display.style.backgroundImage = `url("${current.src}")`;
|
|
|
|
document.getElementById('page-num')
|
|
.innerText = [
|
|
(pageNum + 1).toLocaleString(),
|
|
pages.length.toLocaleString()
|
|
].join('\u200a/\u200a');
|
|
}
|
|
|
|
function changeDuration(secs, pause) {
|
|
duration = secs;
|
|
localStorage.setItem(`${WORK_ID}-duration`, duration);
|
|
paused = pause;
|
|
|
|
document.getElementById('duration').textContent = (paused ? '[paused] ' : '') + duration.toLocaleString() + 's';
|
|
if (paused) {
|
|
stopTimer();
|
|
} else {
|
|
startTimer();
|
|
}
|
|
}
|
|
|
|
changePage(currentPage);
|
|
changeDuration(duration, paused);
|
|
|
|
document.onkeydown = event =>{
|
|
switch (event.keyCode) {
|
|
case 32: //space
|
|
changeDuration(duration, !paused);
|
|
break;
|
|
case 37: //left
|
|
changePage(currentPage - 1);
|
|
break;
|
|
case 38: //up
|
|
if (2 <= duration && duration <= 10) {
|
|
changeDuration(duration - 1, false);
|
|
} else if (10 < duration && duration <= 20) {
|
|
changeDuration(duration - 2.5, false);
|
|
} else if (20 < duration) {
|
|
changeDuration(duration - 5, false);
|
|
}
|
|
break;
|
|
case 39: //right
|
|
changePage(currentPage + 1);
|
|
break;
|
|
case 40: //down
|
|
if (duration < 10) {
|
|
changeDuration(duration + 1, false);
|
|
} else if (10 <= duration && duration < 20) {
|
|
changeDuration(duration + 2.5, false);
|
|
} else if (20 <= duration) {
|
|
changeDuration(duration + 5, false);
|
|
}
|
|
break;
|
|
case 13: //enter
|
|
changeDuration(duration, true);
|
|
localStorage.setItem(`${WORK_ID}-currentPage`, 0);
|
|
window.location.href = ROOT;
|
|
break;
|
|
}
|
|
};
|
|
});
|