app/assets/javascripts/leaflet.sidebar-pane.js

   1 L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) {
   2   const control = L.control(options);
   3
   4   control.onAdd = function (map) {
   5     const $container = $("<div>")
   6       .attr("class", "control-" + uiClass);
   7
   8     const button = $("<a>")
   9       .attr("class", "control-button")
  10       .attr("href", "#")
  11       .attr("title", OSM.i18n.t(buttonTitle))
  12       .on("click", toggle);
  13
  14     const iconMap = {
  15       layers: "stack",
  16       legend: "info-lg",
  17       share: "share-fill"
  18     };
  19     const iconName = iconMap[uiClass] || uiClass;
  20     $("<i>").addClass("fs-5 bi bi-" + iconName).appendTo(button);
  21     button.appendTo($container);
  22
  23     const $ui = $("<div>")
  24       .attr("class", `${uiClass}-ui position-relative z-n1`);
  25
  26     $("<h2 class='p-3 pb-0 pe-5 text-break'>")
  27       .text(OSM.i18n.t(paneTitle))
  28       .appendTo($ui);
  29
  30     options.sidebar.addPane($ui);
  31
  32     this.loadContent = () =>
  33       fetch("/panes/" + uiClass)
  34         .then(r => r.text())
  35         .then(html => { $(html).appendTo($ui); })
  36         .then(this.onContentLoaded);
  37
  38     this.onAddPane(map, button, $ui, toggle);
  39
  40     function toggle(e) {
  41       e.stopPropagation();
  42       e.preventDefault();
  43       if (!button.hasClass("disabled")) {
  44         options.sidebar.togglePane($ui, button);
  45       }
  46       $(".leaflet-control .control-button").tooltip("hide");
  47     }
  48
  49     return $container[0];
  50   };
  51
  52   // control.onAddPane = function (map, button, $ui, toggle) {
  53   // }
  54
  55   return control;
  56 };