93 lines
1.9 KiB
JavaScript
93 lines
1.9 KiB
JavaScript
window.addEventListener('load', init);
|
|
|
|
let slides;
|
|
let currentSlide;
|
|
|
|
function init() {
|
|
slides = Array.from(document.querySelectorAll('article'));
|
|
for (let i = 0; i < slides.length; i++) {
|
|
slides[i].id = `slide${i}`;
|
|
}
|
|
resumeOrGoToStart();
|
|
document.addEventListener('keydown', onKeyPressed);
|
|
}
|
|
|
|
function resumeOrGoToStart() {
|
|
let urlParts = window.location.href.split('#');
|
|
if (urlParts.length > 1) {
|
|
goToSlide(parseInt(urlParts[1].replace('slide', '')))
|
|
} else {
|
|
goToSlide(0)
|
|
}
|
|
}
|
|
|
|
function goToSlide(index) {
|
|
if (index >= 0 && index < slides.length) {
|
|
currentSlide = index;
|
|
window.location.href = window.location.href.split('#')[0] + `#slide${index}`;
|
|
}
|
|
}
|
|
|
|
function goToPreviousSlide() {
|
|
if (!showPreviousFragment()) {
|
|
goToSlide(currentSlide - 1);
|
|
}
|
|
}
|
|
|
|
function goToNextSlide() {
|
|
if (!showNextFragment()) {
|
|
goToSlide(currentSlide + 1);
|
|
}
|
|
}
|
|
|
|
function goToFirstSlide() {
|
|
goToSlide(0);
|
|
}
|
|
|
|
function goToLastSlide() {
|
|
goToSlide(slides.length - 1);
|
|
}
|
|
|
|
function onKeyPressed(event) {
|
|
switch (event.keyCode) {
|
|
case 34: // page down
|
|
case 40: // arrow down
|
|
case 39: // arrow right
|
|
goToNextSlide();
|
|
break;
|
|
case 33: // page up
|
|
case 38: // arrow up
|
|
case 37: // arrow left
|
|
goToPreviousSlide();
|
|
break;
|
|
case 36: // pos1
|
|
goToFirstSlide();
|
|
break;
|
|
case 35: // end
|
|
goToLastSlide();
|
|
break;
|
|
}
|
|
}
|
|
|
|
function showNextFragment() {
|
|
let fragments = [... slides[currentSlide].querySelectorAll('.fragment')]
|
|
let visible = [... slides[currentSlide].querySelectorAll('.fragment.visible')]
|
|
|
|
if (fragments.length == visible.length) {
|
|
return false;
|
|
} else {
|
|
fragments[visible.length].classList.add('visible')
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function showPreviousFragment() {
|
|
let visible = [...slides[currentSlide].querySelectorAll('.fragment.visible')]
|
|
|
|
if (visible.length == 0) {
|
|
return false;
|
|
} else {
|
|
visible[visible.length - 1].classList.remove('visible')
|
|
return true;
|
|
}
|
|
} |