From f04919109133af0fed1e28a655a908a411ac49c2 Mon Sep 17 00:00:00 2001 From: Anwar khanfir Date: Mon, 28 Oct 2024 09:14:32 +0100 Subject: [PATCH] fix: Sweep issue using AR language in cardCarrousel component - EXO-74720 -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 b0a8b77a50e8bc2f66ea35f03af1e5cb4185e8b3) --- .../vue-apps/common/components/CardCarousel.vue | 15 +++++++++++---- 1 file changed, 11 insertions(+), 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 index 4d3968c185e..783fd46c085 100644 --- 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()"> fa-arrow-circle-left @@ -40,7 +40,7 @@ absolute right x-small - @click="moveRight"> + @click="($vuetify.rtl) ? moveLeft() : moveRight()"> fa-arrow-circle-right @@ -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); }