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

…4720 -Meeds-io/meeds#2530 (#4236)

Before this change, the caroussel arrows are not displayed correctly in
RTL mode when there is more then 10 news in the target. To resolve this
problem, the way to check if the arrows should be displayed or not is
changed to use the first and last carousel elements locations related to
the caroussel's location. After this change, the back arrow from the two
sides displays correctly and they sweep articles.

(cherry picked from commit 4f2c7e5)

webapp/src/main/webapp/vue-apps/common/components/CardCarousel.vue

@@ -111,9 +111,11 @@ 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;
+          const firstElementLocation = this.scrollElement.firstChild.children[0].getBoundingClientRect();
+          const lastElementLocation = this.scrollElement.lastChild.children[9].getBoundingClientRect();
+          const carouselLocation = this.scrollElement.parentElement.getBoundingClientRect();
+          const visibilityIconArrowNext = (this.$vuetify.rtl) ? lastElementLocation.right<carouselLocation.x : lastElementLocation.x>carouselLocation.right;
+          const visibilityIconArrowPrev = (this.$vuetify.rtl) ? firstElementLocation.x > carouselLocation.right :firstElementLocation.right < carouselLocation.x;
           this.visibleChildrenPerPage = parseInt(parentWidth * childrenCount / contentWidth);
           this.displayLeftArrow = (this.$vuetify.rtl) ? visibilityIconArrowNext : visibilityIconArrowPrev;
           this.displayRightArrow = (this.$vuetify.rtl) ? visibilityIconArrowPrev : visibilityIconArrowNext;