Skip to content

Commit

Permalink
fix: Sweep issue using AR language in cardCarrousel component - EXO-7…
Browse files Browse the repository at this point in the history
…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.
  • Loading branch information
akhanfir committed Oct 28, 2024
1 parent 9e3861d commit b0a8b77
Showing 1 changed file with 7 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit b0a8b77

Please sign in to comment.