app/assets/javascripts/leaflet.sidebar.js

   1 L.OSM.sidebar = function (selector) {
   2   var control = {},
   3       sidebar = $(selector),
   4       current = $(),
   5       currentButton = $(),
   6       map;
   7
   8   control.addTo = function (_) {
   9     map = _;
  10     return control;
  11   };
  12
  13   control.addPane = function (pane) {
  14     pane
  15       .hide()
  16       .appendTo(sidebar);
  17   };
  18
  19   control.togglePane = function (pane, button) {
  20     var mediumDeviceWidth = window.getComputedStyle(document.documentElement).getPropertyValue("--bs-breakpoint-md");
  21     var isMediumDevice = window.matchMedia(`(max-width: ${mediumDeviceWidth})`).matches;
  22     var paneWidth = 250;
  23
  24     current
  25       .hide()
  26       .trigger("hide");
  27
  28     currentButton
  29       .removeClass("active");
  30
  31     if (current === pane) {
  32       $(sidebar).hide();
  33       $("#content").addClass("overlay-right-sidebar");
  34       current = currentButton = $();
  35       if (isMediumDevice) {
  36         map.panBy([0, -$("#map").height() / 2], { animate: false });
  37       } else if ($("html").attr("dir") === "rtl") {
  38         map.panBy([-paneWidth, 0], { animate: false });
  39       }
  40     } else {
  41       $(sidebar).show();
  42       $("#content").removeClass("overlay-right-sidebar");
  43       current = pane;
  44       currentButton = button || $();
  45       if (isMediumDevice) {
  46         map.panBy([0, $("#map").height()], { animate: false });
  47       } else if ($("html").attr("dir") === "rtl") {
  48         map.panBy([paneWidth, 0], { animate: false });
  49       }
  50     }
  51
  52     map.invalidateSize({ pan: false, animate: false });
  53
  54     current
  55       .show()
  56       .trigger("show");
  57
  58     currentButton
  59       .addClass("active");
  60   };
  61
  62   return control;
  63 };