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

…4720 -Meeds-io/meeds#2530.

Before this change, when choose Arabic language (RTL mode) and create spaceX and add news stories template dislaying more than 10 news articles then publish several news articles in spacesX news target and sweep published news (in Stories template) from left to right, reaching the news limit on the right, the left back arrow does not appear as in LTR mode. To resolve this problem, in RTL mode, reverse the roles and display between the right and left scroll buttons compared to LTR mode. After this change, the back arrow from the two sides displays correctly and they sweep articles.

(cherry picked from commit b0a8b77)

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>
@@ -110,9 +110,16 @@ 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;
+          }
           this.computing = false;
         }, 200);
       }