dlibrary/static/viewer.js

121 lines
3.5 KiB
JavaScript
Raw Normal View History

2024-01-22 07:01:41 -05:00
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;
}
};
});