From c02b131a296b70ac80fc0e8348bcffbc7341eac9 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Thu, 22 Sep 2022 16:33:28 +0300
Subject: [PATCH] Pan map when showing/hiding sidebars depending on ltr/rtl

---
 app/assets/javascripts/leaflet.map.js     | 11 ++++++++---
 app/assets/javascripts/leaflet.sidebar.js |  8 ++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js
index ffb2d7a21..105b03ed6 100644
--- a/app/assets/javascripts/leaflet.map.js
+++ b/app/assets/javascripts/leaflet.map.js
@@ -300,12 +300,17 @@ L.OSM.Map = L.Map.extend({
   },
 
   setSidebarOverlaid: function (overlaid) {
+    var sidebarWidth = 350;
     if (overlaid && !$("#content").hasClass("overlay-sidebar")) {
       $("#content").addClass("overlay-sidebar");
-      this.invalidateSize({ pan: false })
-        .panBy([-350, 0], { animate: false });
+      this.invalidateSize({ pan: false });
+      if ($("html").attr("dir") !== "rtl") {
+        this.panBy([-sidebarWidth, 0], { animate: false });
+      }
     } else if (!overlaid && $("#content").hasClass("overlay-sidebar")) {
-      this.panBy([350, 0], { animate: false });
+      if ($("html").attr("dir") !== "rtl") {
+        this.panBy([sidebarWidth, 0], { animate: false });
+      }
       $("#content").removeClass("overlay-sidebar");
       this.invalidateSize({ pan: false });
     }
diff --git a/app/assets/javascripts/leaflet.sidebar.js b/app/assets/javascripts/leaflet.sidebar.js
index f51aaa728..7e72278e3 100644
--- a/app/assets/javascripts/leaflet.sidebar.js
+++ b/app/assets/javascripts/leaflet.sidebar.js
@@ -17,6 +17,8 @@ L.OSM.sidebar = function (selector) {
   };
 
   control.togglePane = function (pane, button) {
+    var paneWidth = 250;
+
     current
       .hide()
       .trigger("hide");
@@ -25,12 +27,18 @@ L.OSM.sidebar = function (selector) {
       .removeClass("active");
 
     if (current === pane) {
+      if ($("html").attr("dir") === "rtl") {
+        map.panBy([-paneWidth, 0], { animate: false });
+      }
       $(sidebar).hide();
       current = currentButton = $();
     } else {
       $(sidebar).show();
       current = pane;
       currentButton = button || $();
+      if ($("html").attr("dir") === "rtl") {
+        map.panBy([paneWidth, 0], { animate: false });
+      }
     }
 
     map.invalidateSize({ pan: false, animate: false });
-- 
2.45.1