JS/03_dom/uebungen/u08-09_newsboard/assets/js/main.js

'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);

  // === INIT =============
  const init = () => {
    // Funktionaufrufe zu beginn der Anwendung

    //////////////////
    // Start 9.2 & 9.3
    // ich musste hier die Reihenfolge ändern, damit meine Lösung funktioniert
    // sonst wäre DOM.progressBar.value = 0 (wird erst in der initPro... auf 1 initialisiert)
    initProgressbar();
    updateMessageByNumber(1);
    // Ende 9.2 & 9.3
    /////////////////

    ////////////////
    // Start 8.2
    setMessageNumber(1);
    // Ende 8.2
    ////////////////

    // Eventlauscher zu beginn der Anwendung
    DOM.buttonNext.addEventListener('click', onClickNext);
    DOM.buttonPrev.addEventListener('click', onClickPrev);
    ///////////////////////
    // Start 8.1
    DOM.buttonFirst.addEventListener('click', onClickFirst);
    DOM.buttonLast.addEventListener('click', onClickLast);
    // Ende 8.1
    ///////////////
    window.addEventListener('keyup', onKeyUp);
  };

  // === EVENTHANDLER =====
  const onKeyUp = (e) => {
    // Übung 8.3 && 8.4 Tastatursteuerung
    console.log(e);
    if (e.key === 'ArrowLeft') {
      if (!e.altKey) {
        onClickPrev(e);
      } else {
        onClickFirst(e);
      }
    } else if (e.key === 'ArrowRight') {
      if (!e.altKey) {
        onClickNext(e);
      } else {
        onClickLast(e);
      }
    }
  };

  const onClickNext = (e) => {
    updateMessageByNumber((DOM.progressBar.value += 1));
  };
  const onClickPrev = (e) => {
    updateMessageByNumber((DOM.progressBar.value -= 1));
  };

  //////////////////
  // Start 8.1
  const onClickFirst = (e) => {
    updateMessageByNumber((DOM.progressBar.value = 1));
  };
  const onClickLast = (e) => {
    updateMessageByNumber((DOM.progressBar.value = MESSAGES.length));
  };
  // Ende 8.1
  /////////////////////////

  // === XHR/FETCH ========

  // === FUNCTIONS ========
  const updateMessageByNumber = (n) => {
    DOM.newsboardContent.innerHTML = MESSAGES[n - 1];
    //////////////
    // Start 8.2
    setMessageNumber(n);
    // Ende 8.2
    //////////////////

    //////////////////
    // Start 9.2
    updateBtnState();
    // Ende 9.2
    ///////////////////////
  };

  /////////////////////////
  // Start 9.2
  const updateBtnState = () => {
    const n = DOM.progressBar.value;
    if (n === 1) {
      // wir sind am Anfang, also die linken Buttons AUSschalten und
      // die rechten EINschalten
      DOM.buttonFirst.disabled = DOM.buttonPrev.disabled = true;
      DOM.buttonLast.disabled = DOM.buttonNext.disabled = false;
    } else if (n > 1 && n < MESSAGES.length) {
      // wir sind mitten in der message liste - also alle Buttons aktivieren
      DOM.buttonFirst.disabled = false;
      DOM.buttonPrev.disabled = false;
      DOM.buttonLast.disabled = false;
      DOM.buttonNext.disabled = false;
    } else if (n === MESSAGES.length) {
      // wir sind am Ende, also die linken Buttons EINschalten und
      // die rechten EINschalten
      DOM.buttonLast.disabled = DOM.buttonNext.disabled = true;
      DOM.buttonFirst.disabled = DOM.buttonPrev.disabled = false;
    }
  };
  // Ende 9.2 & 9.3
  /////////////////////

  const initProgressbar = () => {
    DOM.progressBar.max = MESSAGES.length;
    DOM.progressBar.value = 1;
  };

  //////////////
  // Start 8.2
  const setMessageNumber = (n) => {
    DOM.messageNumber.textContent = `${n}/${MESSAGES.length}`;
  };
  // Ende 8.2
  /////////////////////////////////

  init();
})();

// Übung 8: Newsboard: Das geht noch besser
// Das Newsboard wartet noch auf das Vervollständigen seiner Funktionen.

// 1. Belege die Links » und « mit Funktionalität. Der Link mit der Aufschrift « soll es erlauben, zur ersten Nachricht zu springen, der Link » zur letzten.

// 2. Der bisher eher sinnlose rote Kreis in der linken oberen Ecke soll nun die Gesamtanzahl der Nachrichten anzeigen. Schreibe eine Funktion, die diese Anzahl ausliest und in das <span> mit der Klasse message_number einträgt.

// 3. Unterstütze ab sofort das Navigieren durch die News mit der Tastatur. Die Pfeiltasten nach links und rechts sollen dabei jeweils die gleiche Funktionalität wie die Buttons < und > ermöglichen.

// 4. Auch das Springen auf die erste bzw. letzte Position soll nun mit Tastatur möglich sein. Die Tastenkombination dafür ist alt und die Pfeiltaste nach links (zur ersten Nachricht) bzw. rechts (zur letzten Nachricht).

// Übung 9: Newsboard: Jetzt ist aber Schluss!

// Die neuen Features des Newsboards sind schon fast fertig. Problematisch ist aber, dass die Vorwärts- und Rückwärts-Buttons auch aktiv sind, wenn es keine vorige bzw. nächste Nachricht mehr gibt. Dies führt zu einem sehr unschönen Fehler.

// 2. Sorge dafür, dass die Vor- und Rückwärts-Buttons jeweils deaktiviert werden, sobald der Anwender am Anfang bzw. Ende der Nachrichtenliste angekommen ist.

// 3. Auch die Buttons, die den Anwender zur ersten bzw. zur letzten Nachricht führen, sollen deaktiviert sein, sobald sich der Anwender bei der ersten bzw. letzten Nachricht befindet.