From e0bb23b49024c7866aaf21355626db313b4719ea Mon Sep 17 00:00:00 2001
From: =?utf8?q?Arnaud=20Gu=C3=A9ras?= <arnaudgs@gmail.com>
Date: Sun, 24 Nov 2024 16:24:30 +0100
Subject: [PATCH] (improve) carousel add keyboard events for left and right
 touch

---
 themes/xen-project/assets/js/carousel.js | 35 +++++++++++++++++-------
 1 file changed, 25 insertions(+), 10 deletions(-)

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() {
-- 
2.39.5