91 lines
2.7 KiB
JavaScript
91 lines
2.7 KiB
JavaScript
'use strict';
|
|
|
|
(() => {
|
|
// === DOM & VARS =======
|
|
const module = document.querySelector('.newsboard') || console.error('newsboard not found');
|
|
const DOM = {
|
|
messageNumber: module.querySelector('.message_number'),
|
|
newsboardContent: module.querySelector('.newsboard_content'),
|
|
buttonNext: module.querySelector('.button-next'),
|
|
buttonLast: module.querySelector('.button-last'),
|
|
buttonPrev: module.querySelector('.button-prev'),
|
|
buttonFirst: module.querySelector('.button-first'),
|
|
progressBar: module.querySelector('.progressbar progress'),
|
|
};
|
|
|
|
console.log(DOM);
|
|
|
|
// let currentMessageNumber = 1;
|
|
|
|
// === INIT =============
|
|
const init = () => {
|
|
// Funktionaufrufe zu beginn der Anwendung
|
|
initProgressbar();
|
|
showMessageByNumber(1);
|
|
showMessageNumber();
|
|
|
|
// Eventlauscher zu beginn der Anwendung
|
|
DOM.buttonNext.addEventListener('click', onClickNext);
|
|
DOM.buttonPrev.addEventListener('click', onClickPrev);
|
|
DOM.buttonFirst.addEventListener('click', onClickFirst);
|
|
DOM.buttonLast.addEventListener('click', onClickLast);
|
|
window.addEventListener('keyup', onKeyUp);
|
|
};
|
|
|
|
// === EVENTHANDLER =====
|
|
const onKeyUp = (e) => {
|
|
// Übung 8.3 && 8.4 Tastatursteuerung
|
|
if (e.altKey && e.key === 'ArrowLeft') {
|
|
onClickFirst();
|
|
} else if (e.altKey && e.key === 'ArrowRight') {
|
|
onClickLast();
|
|
} else if (e.key === 'ArrowLeft') {
|
|
onClickPrev();
|
|
} else if (e.key === 'ArrowRight') {
|
|
onClickNext();
|
|
}
|
|
};
|
|
|
|
const onClickNext = (e) => {
|
|
showMessageByNumber((DOM.progressBar.value += 1));
|
|
// showMessageByNumber(++currentMessageNumber);
|
|
};
|
|
const onClickPrev = (e) => {
|
|
showMessageByNumber((DOM.progressBar.value -= 1));
|
|
// showMessageByNumber(--currentMessageNumber);
|
|
};
|
|
|
|
const onClickFirst = (e) => {
|
|
showMessageByNumber((DOM.progressBar.value = 1));
|
|
// showMessageByNumber((currentMessageNumber = 1));
|
|
};
|
|
|
|
const onClickLast = (e) => {
|
|
showMessageByNumber((DOM.progressBar.value = MESSAGES.length));
|
|
// showMessageByNumber((currentMessageNumber = MESSAGES.length));
|
|
};
|
|
// === XHR/FETCH ========
|
|
|
|
// === FUNCTIONS ========
|
|
const showMessageByNumber = (n) => {
|
|
DOM.newsboardContent.innerHTML = MESSAGES[n - 1];
|
|
updateNavigationButtons();
|
|
};
|
|
|
|
const showMessageNumber = () => {
|
|
DOM.messageNumber.textContent = MESSAGES.length;
|
|
};
|
|
|
|
const initProgressbar = () => {
|
|
DOM.progressBar.max = MESSAGES.length;
|
|
DOM.progressBar.value = 1;
|
|
};
|
|
|
|
const updateNavigationButtons = () => {
|
|
DOM.buttonPrev.disabled = DOM.buttonFirst.disabled = DOM.progressBar.value === 1;
|
|
DOM.buttonNext.disabled = DOM.buttonLast.disabled = DOM.progressBar.value === MESSAGES.length;
|
|
};
|
|
|
|
init();
|
|
})();
|