fix: show arrows carousel

oramasearch · Aug 20, 2024 · d5e119f · d5e119f
1 parent bf40ee9
commit d5e119f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/...ma-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss b/...ma-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.scss
@@ -94,7 +94,6 @@
 
 .sources-wrapper {
   display: flex;
-  gap: var(--spacing-s, $spacing-s);
   overflow-x: auto;
   scrollbar-width: none;
   position: relative;
@@ -108,6 +107,7 @@
   position: relative;
   overflow: hidden;
   width: pxToRem(195);
+  margin-right: var(--spacing-s, $spacing-s);
   flex-grow: 0;
   flex-shrink: 0;
   text-decoration: none;

diff --git a/...ama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx b/...ama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx
@@ -40,13 +40,20 @@ export class OramaChatAssistentMessage {
     const carousel = this.carouselSourceRef
     const slide = carousel.querySelector('.source')
     const slideWidth = slide.clientWidth
-    carousel.scrollLeft = carousel.scrollLeft + (next ? slideWidth : -slideWidth)
+    const slideMargin = Number.parseInt(window.getComputedStyle(slide).marginRight, 10)
+    const slideTotalWidth = slideWidth + slideMargin
+    carousel.scrollLeft = carousel.scrollLeft + (next ? slideTotalWidth : -slideTotalWidth)
 
+    // TO be fixed
     if (next) {
+      if (this.carouselEnd) return
       this.carouselStart = false
-      this.carouselEnd = carousel.scrollLeft === carousel.scrollWidth - carousel.clientWidth
+      this.carouselEnd =
+        Number.parseInt(carousel.scrollLeft + slideTotalWidth.toString()) ===
+        carousel.scrollWidth - carousel.offsetWidth
     } else {
-      this.carouselStart = carousel.scrollLeft - slideWidth === 0
+      if (this.carouselStart) return
+      this.carouselStart = carousel.scrollLeft - slideTotalWidth === 0
       this.carouselEnd = false
     }
   }