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     $(L.SVG.create("svg"))
  15       .append($(L.SVG.create("use")).attr("href", "#icon-" + uiClass))
  16       .attr("class", "h-100 w-100")
  17       .appendTo(button);
  18
  19     button.appendTo($container);
  20
  21     const $ui = $("<div>")
  22       .attr("class", `${uiClass}-ui position-relative z-n1`);
  23
  24     $("<h2 class='p-3 pb-0 pe-5 text-break'>")
  25       .text(OSM.i18n.t(paneTitle))
  26       .appendTo($ui);
  27
  28     options.sidebar.addPane($ui);
  29
  30     this.loadContent = () =>
  31       fetch("/panes/" + uiClass)
  32         .then(r => r.text())
  33         .then(html => { $(html).appendTo($ui); })
  34         .then(this.onContentLoaded);
  35
  36     this.onAddPane(map, button, $ui, toggle);
  37
  38     function toggle(e) {
  39       e.stopPropagation();
  40       e.preventDefault();
  41       if (!button.hasClass("disabled")) {
  42         options.sidebar.togglePane($ui, button);
  43       }
  44       $(".leaflet-control .control-button").tooltip("hide");
  45     }
  46
  47     return $container[0];
  48   };
  49
  50   // control.onAddPane = function (map, button, $ui, toggle) {
  51   // }
  52
  53   return control;
  54 };