fix: Sweep issue using AR language in cardCarrousel component - EXO-7…

…4720 -Meeds-io/meeds#2530. (#4135)
Meeds-io · Oct 28, 2024 · 6eb3942 · 6eb3942
2 parents 9e3861d + b0a8b77
commit 6eb3942
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/webapp/portlet/src/main/webapp/vue-apps/common/components/CardCarousel.vue b/webapp/portlet/src/main/webapp/vue-apps/common/components/CardCarousel.vue
@@ -13,7 +13,7 @@
         absolute
         left
         x-small
-        @click="moveLeft">
+        @click="($vuetify.rtl) ? moveRight() : moveLeft()">
         <v-icon size="25">fa-arrow-circle-left</v-icon>
       </v-btn>
     </v-fab-transition>
@@ -40,7 +40,7 @@
         absolute
         right
         x-small
-        @click="moveRight">
+        @click="($vuetify.rtl) ? moveLeft() : moveRight()">
         <v-icon size="25">fa-arrow-circle-right</v-icon>
       </v-btn>
     </v-fab-transition>
@@ -111,9 +111,12 @@ export default {
           const contentWidth = this.scrollElement.firstChild.offsetWidth;
           const children = this.scrollElement.firstChild.children;
           const childrenCount = children.length;
+          const scrollElementLeft = (this.$vuetify.rtl) ? -this.scrollElement.scrollLeft : this.scrollElement.scrollLeft;
+          const visibilityIconArrowPrev = this.scrollElement && childrenCount && scrollElementLeft > children[0].offsetLeft;
+          const visibilityIconArrowNext = this.scrollElement && (this.scrollElement.scrollWidth - this.scrollElement.offsetWidth - scrollElementLeft) > 5;
           this.visibleChildrenPerPage = parseInt(parentWidth * childrenCount / contentWidth);
-          this.displayLeftArrow = this.scrollElement && childrenCount && this.scrollElement.scrollLeft > children[0].offsetLeft;
-          this.displayRightArrow = this.scrollElement && (this.scrollElement.scrollWidth - this.scrollElement.offsetWidth - this.scrollElement.scrollLeft) > 5;
+          this.displayLeftArrow = (this.$vuetify.rtl) ? visibilityIconArrowNext : visibilityIconArrowPrev;
+          this.displayRightArrow = (this.$vuetify.rtl) ? visibilityIconArrowPrev : visibilityIconArrowNext;
           if (!this.initialized && childrenCount) {
             this.childScrollIndex = this.visibleChildrenPerPage >= children.length ? (children.length - 1) : this.visibleChildrenPerPage;
             this.initialized = true;