Add new animation, add close button, add back button

script.js

@@ -1,9 +1,15 @@
-function init() {
-    const cards = document.getElementsByClassName('card-wrapper');
+let currentCard = -1;
+const cards = document.getElementsByClassName('card-wrapper');
+let idleTime = 0;
 
+function init() {
     for (let i = 0; i < cards.length; i++) {
         const cardListener = cards[i].getElementsByClassName('card-listener')[0];
         cardListener.addEventListener('click', () => openCard(cards, i));
+        document.body.addEventListener('mouseover', () => {
+            idleTime = Date.now();
+            console.log('User active, resetting idle timer.');
+        });
     }
 
 }
@@ -14,6 +20,7 @@ function openCard(cards, i) {
             cards[j].classList.remove('hidden');
             cards[j].classList.add('active');
             cards[j].getElementsByClassName('content-wrapper')[0].classList.add('visible');
+            currentCard = j;
             continue;
         }
         cards[j].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
@@ -22,6 +29,18 @@ function openCard(cards, i) {
     }
 }
 
+function nextCard() {
+    if (currentCard === -1) return;
+    const nextIndex = (currentCard + 1) % cards.length;
+    openCard(cards, nextIndex);
+}
+
+function previousCard() {
+    if (currentCard === -1) return;
+    const previousIndex = (currentCard - 1 + cards.length) % cards.length;
+    openCard(cards, previousIndex);
+}
+
 function addInProgress() {
     if (window.location.href.indexOf('127.0.0.1') === -1) {
         const warning = document.createElement('div');
@@ -34,34 +53,85 @@ function addInProgress() {
     }
 }
 
-function nextPage() {
-    const nextButtons = document.getElementsByClassName('close');
-    const cards = document.getElementsByClassName('card-wrapper');
+function switchPage() {
+    const nextButtons = document.getElementsByClassName('next');
+    const backButtons = document.getElementsByClassName('back');
 
     for (let i = 0; i < nextButtons.length; i++) {
         nextButtons[i].addEventListener('click', function() {
 
-            cards[(i+1) % nextButtons.length].classList.remove('hidden');
-            cards[(i+1) % nextButtons.length].classList.add('active');
-            cards[(i+1) % nextButtons.length].getElementsByClassName('content-wrapper')[0].classList.add('visible');
+            cards[i + 1].classList.remove('hidden');
+            cards[i + 1].classList.add('active');
+            cards[i + 1].getElementsByClassName('content-wrapper')[0].classList.add('visible');
+            currentCard = i + 1;
 
             cards[i].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
             cards[i].classList.add('hidden');
             cards[i].classList.remove('active');
         });
     }
+
+    for(let i = backButtons.length - 1; i >= 0; i--) {
+        backButtons[i].addEventListener('click', function() {
+
+            cards[i].classList.remove('hidden');
+            cards[i].classList.add('active');
+            cards[i].getElementsByClassName('content-wrapper')[0].classList.add('visible');
+            currentCard = i;
+
+            cards[i + 1].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
+            cards[i + 1].classList.add('hidden');
+            cards[i + 1].classList.remove('active');
+        });
+    }
+}
+
+function close() {
+    for (let i = 0; i < cards.length; i++) {
+        cards[i].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
+        cards[i].classList.remove('hidden');
+        cards[i].classList.remove('active');
+    }
+    currentCard = -1;
+}
+
+function closeEventListeners() {
+    const closeButtons = document.getElementsByClassName('close');
+    for (let i = 0; i < closeButtons.length; i++) {
+        closeButtons[i].addEventListener('click', close);
+    }
 }
 
 function idle() {
-    let idleTime = 61;
-    const cards = document.getElementsByClassName('card-wrapper');
     let cardIndex = 0;
+    let lastUpdate = 0;
     setInterval(function() {
-        idleTime+=2;
-        if (idleTime > 60) {
-            openCard(cards, cardIndex++ % cards.length);
+        const idleTimeElapsed = (Date.now() - idleTime) / 1000;
+        if (idleTimeElapsed > 3) {
+            for (let i = 0; i < cards.length; i++) {
+                if(cards[i].classList.contains('active')) return;
+            }
+            const animationTimeElapsed = (Date.now() - lastUpdate) / 1000;
+            if (animationTimeElapsed < 2.5) return;
+            lastUpdate = Date.now();
+            for (let i = 0; i < cards.length; i++) {
+                if (i === cardIndex % cards.length) {
+                    cards[i].getElementsByClassName('card-image')[0].classList.add('card-image-idle-animation');
+                    cards[i].getElementsByClassName('card-label')[0].classList.add('card-label-idle-animation');
+                } else {
+                    cards[i].getElementsByClassName('card-image')[0].classList.remove('card-image-idle-animation');
+                    cards[i].getElementsByClassName('card-label')[0].classList.remove('card-label-idle-animation');
+                }
+            }
+            cardIndex++;
         }
-    }, 10000);
+        else {
+            for (let i = 0; i < cards.length; i++) {
+                cards[i].getElementsByClassName('card-image')[0].classList.remove('card-image-idle-animation');
+                cards[i].getElementsByClassName('card-label')[0].classList.remove('card-label-idle-animation');
+            }
+        }
+    }, 100);
 
     document.onclick = document.onm = function() {
         console.log('User active, resetting idle timer.');
@@ -69,8 +139,53 @@ function idle() {
     };
 }
 
+document.onkeydown = (event) => {
+    idleTime = 0;
+    if (event.key === "Escape") {
+        close();
+        return;
+    }
+    if (event.key === "ArrowRight") {
+        if (currentCard === -1) return;
+        if (currentCard === cards.length - 1) return;
+        nextCard();
+        return;
+    }
+    if (event.key === "ArrowLeft") {
+        if (currentCard <= 0) return;
+        previousCard();
+        return;
+    }
+    if (event.key === "1") {
+        openCard(cards, 0);
+        return;
+    }
+    if (event.key === "2") {
+        openCard(cards, 1);
+        return;
+    }
+    if (event.key === "3") {
+        openCard(cards, 2);
+        return;
+    }
+    if (event.key === "4") {
+        openCard(cards, 3);
+        return;
+    }
+    if (event.key === "5") {
+        openCard(cards, 4);
+        return;
+    }
+}
+
+window.mouseover = () => {
+    idleTime = 0;
+    console.log('User active, resetting idle timer.');
+}
+
 
 addInProgress();
 init();
-nextPage();
+closeEventListeners();
+switchPage();
 idle();