From: Arnaud Guéras <arnaudgs@gmail.com>
Date: Sun, 24 Nov 2024 15:24:30 +0000 (+0100)
Subject: (improve) carousel add keyboard events for left and right touch
X-Git-Url: http://xenbits.xensource.com/gitweb?a=commitdiff_plain;h=e0bb23b49024c7866aaf21355626db313b4719ea;p=www-xenproject-org.git

(improve) carousel add keyboard events for left and right touch
---

diff --git a/themes/xen-project/assets/js/carousel.js b/themes/xen-project/assets/js/carousel.js
index 08f8553..1dbbb4d 100644
--- a/themes/xen-project/assets/js/carousel.js
+++ b/themes/xen-project/assets/js/carousel.js
@@ -17,18 +17,33 @@
     const lastItem = firstItem.cloneNode(true);
     itemsContainer.append(lastItem);
 
-    element.querySelector(".carousel-button.prev").addEventListener("click", () => {
-      itemsContainer.scrollBy({
-        left: -firstItem.clientWidth,
-        behavior: "smooth",
-      });
+    let isHovered = false;
+    let hasBeenFocused = false;
+    element.addEventListener("mouseenter", (e) => {
+      isHovered = true;
+    });
+    element.addEventListener("mouseleave", () => {
+      isHovered = false;
     });
 
-    element.querySelector(".carousel-button.next").addEventListener("click", () => {
-      itemsContainer.scrollBy({
-        left: firstItem.clientWidth,
-        behavior: "smooth",
-      });
+    element.addEventListener("focusin", () => {
+      hasBeenFocused = true;
+    });
+
+    document.addEventListener("keydown", (event) => {
+      if (hasBeenFocused || isHovered) {
+        if (event.key === "ArrowLeft") {
+          itemsContainer.scrollBy({
+            left: -firstItem.clientWidth,
+            behavior: "smooth",
+          });
+        } else if (event.key === "ArrowRight") {
+          itemsContainer.scrollBy({
+            left: firstItem.clientWidth,
+            behavior: "smooth",
+          });
+        }
+      }
     });
 
     function updateCarouselTabIndexes() {