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

@@ -18,38 +18,127 @@
   // === INIT =============
   const init = () => {
     // Funktionaufrufe zu beginn der Anwendung
-    showMessageByNumber(1);
+
+    //////////////////
+    // 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) => {
-    showMessageByNumber((DOM.progressBar.value += 1));
+    updateMessageByNumber((DOM.progressBar.value += 1));
   };
   const onClickPrev = (e) => {
-    showMessageByNumber((DOM.progressBar.value -= 1));
+    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 showMessageByNumber = (n) => {
+  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();
 })();