feat(ui5-carousel): implement rtl support (#2086)

SAP · Aug 13, 2020 · f69ffa5 · f69ffa5
1 parent 230cd7f
commit f69ffa5
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 35 deletions.
diff --git a/packages/main/src/Carousel.hbs b/packages/main/src/Carousel.hbs
@@ -23,36 +23,15 @@
 
         {{#if arrows.content}}
             <div class="ui5-carousel-navigation-arrows">
-                <ui5-button
-                    arrow-back
-                    class="ui5-carousel-navigation-button {{classes.navPrevButton}}"
-                    icon="slim-arrow-left"
-                    tabindex="-1"
-                    @click={{navigateLeft}}
-                    @keydown={{_onbuttonkeydown}}
-                ></ui5-button>
-                <ui5-button
-                    arrow-forward
-                    class="ui5-carousel-navigation-button {{classes.navNextButton}}"
-                    icon="slim-arrow-right"
-                    tabindex="-1"
-                    @click={{navigateRight}}
-                    @keydown={{_onbuttonkeydown}}
-                ></ui5-button>
+                {{> arrow-back}}
+                {{> arrow-forward}}
             </div>
         {{/if}}
 
         {{#if showNavigationArrows}}
             <div class="{{classes.navigation}}">
                 {{#if arrows.navigation}}
-                <ui5-button
-                    arrow-back
-                    class="ui5-carousel-navigation-button {{classes.navPrevButton}}"
-                    icon="slim-arrow-left"
-                    tabindex="-1"
-                    @click={{navigateLeft}}
-                    @keydown={{_onbuttonkeydown}}
-                ></ui5-button>
+                    {{> arrow-back}}
                 {{/if}}
 
                 <div class="ui5-carousel-navigation">
@@ -71,16 +50,29 @@
                 </div>
 
                 {{#if arrows.navigation}}
-                    <ui5-button
-                        arrow-forward
-                        class="ui5-carousel-navigation-button {{classes.navNextButton}}"
-                        icon="slim-arrow-right"
-                        tabindex="-1"
-                        @click={{navigateRight}}
-                        @keydown={{_onbuttonkeydown}}
-                    ></ui5-button>
+                    {{> arrow-forward}}
                 {{/if}}
             </div>
         {{/if}}
     </div>
-</section>
+</section>
+
+{{#*inline "arrow-back"}}
+	<ui5-button
+        arrow-back
+        class="ui5-carousel-navigation-button {{classes.navPrevButton}}"
+        icon="slim-arrow-left"
+        tabindex="-1"
+        @click={{navigateLeft}}
+    ></ui5-button>
+{{/inline}}
+
+{{#*inline "arrow-forward"}}
+    <ui5-button
+        arrow-forward
+        class="ui5-carousel-navigation-button {{classes.navNextButton}}"
+        icon="slim-arrow-right"
+        tabindex="-1"
+        @click={{navigateRight}}
+    ></ui5-button>
+{{/inline}}
diff --git a/packages/main/src/Carousel.js b/packages/main/src/Carousel.js
@@ -411,7 +411,7 @@ class Carousel extends UI5Element {
 	get styles() {
 		return {
 			content: {
-				transform: `translateX(-${this.selectedIndex * this._itemWidth}px`,
+				transform: `translateX(${this._isRTL ? "" : "-"}${this.selectedIndex * this._itemWidth}px`,
 			},
 		};
 	}
@@ -484,8 +484,12 @@ class Carousel extends UI5Element {
 		return this._resizing || getAnimationMode() === AnimationMode.None;
 	}
 
+	get _isRTL() {
+		return this.effectiveDir === "rtl";
+	}
+
 	get selectedIndexToShow() {
-		return this.selectedIndex + 1;
+		return this._isRTL ? this.pagesCount - (this.pagesCount - this.selectedIndex) + 1 : this.selectedIndex + 1;
 	}
 
 	get showNavigationArrows() {