From cc85897348a429a70ebc77fd1f7843984dfcc770 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Fri, 3 May 2019 11:05:10 -0700
Subject: [PATCH] Fix map pane animation on RTL layout (close #6290)

---
 modules/ui/init.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/modules/ui/init.js b/modules/ui/init.js
index 23c34a2aa..4dc8f5c13 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -423,6 +423,8 @@ export function uiInit(context) {
     ui.togglePanes = function(showPane) {
         var shownPanes = d3_selectAll('.map-pane.shown');
 
+        var side = textDirection === 'ltr' ? 'right' : 'left';
+
         shownPanes
             .classed('shown', false);
 
@@ -432,7 +434,7 @@ export function uiInit(context) {
         if (showPane) {
             shownPanes
                 .style('display', 'none')
-                .style('right', '-500px');
+                .style(side, '-500px');
 
             d3_selectAll('.' + showPane.attr('pane') + '-control button')
                 .classed('active', true);
@@ -443,21 +445,21 @@ export function uiInit(context) {
             if (shownPanes.empty()) {
                 showPane
                     .style('display', 'block')
-                    .style('right', '-500px')
+                    .style(side, '-500px')
                     .transition()
                     .duration(200)
-                    .style('right', '0px');
+                    .style(side, '0px');
             } else {
                 showPane
-                    .style('right', '0px');
+                    .style(side, '0px');
             }
         } else {
             shownPanes
                 .style('display', 'block')
-                .style('right', '0px')
+                .style(side, '0px')
                 .transition()
                 .duration(200)
-                .style('right', '-500px')
+                .style(side, '-500px')
                 .on('end', function() {
                     d3_select(this).style('display', 'none');
                 });