From 33c9956cf7b4f4b596872e349c8c284080677eee Mon Sep 17 00:00:00 2001
From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
Date: Thu, 29 May 2025 03:35:06 +0200
Subject: [PATCH] Write share sidebar in erb template

---
 app/abilities/ability.rb                  |   2 +-
 app/assets/javascripts/leaflet.share.js   | 259 +++-------------------
 app/controllers/share_panes_controller.rb |   9 +
 app/views/share_panes/show.html.erb       |  85 +++++++
 config/locales/en.yml                     |   2 +-
 config/routes.rb                          |   1 +
 6 files changed, 124 insertions(+), 234 deletions(-)
 create mode 100644 app/controllers/share_panes_controller.rb
 create mode 100644 app/views/share_panes/show.html.erb

diff --git a/app/abilities/ability.rb b/app/abilities/ability.rb
index f68449aa8..fefa361b4 100644
--- a/app/abilities/ability.rb
+++ b/app/abilities/ability.rb
@@ -4,7 +4,7 @@ class Ability
   include CanCan::Ability
 
   def initialize(user)
-    can :read, [:feature_query, :legend_pane]
+    can :read, [:feature_query, :legend_pane, :share_pane]
     can :read, [Node, Way, Relation, OldNode, OldWay, OldRelation]
     can [:show, :create], Note
     can :read, :directions
diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index fedfc4d31..4bca5ebd6 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -6,251 +6,37 @@ L.OSM.share = function (options) {
           adjustButton: false
         });
 
-  control.onAddPane = function (map, button, $ui) {
+  function init(map, $ui) {
     // Link / Embed
-    $("#content").addClass("overlay-right-sidebar");
 
-    const $linkSection = $("<div>")
-      .attr("class", "share-link p-3 border-bottom border-secondary-subtle")
-      .appendTo($ui);
-
-    $("<h4>")
-      .text(OSM.i18n.t("javascripts.share.link"))
-      .appendTo($linkSection);
-
-    let $form = $("<form>")
-      .appendTo($linkSection);
-
-    $("<div>")
-      .attr("class", "form-check mb-3")
-      .appendTo($form)
-      .append($("<label>")
-        .attr("for", "link_marker")
-        .attr("class", "form-check-label")
-        .text(OSM.i18n.t("javascripts.share.include_marker")))
-      .append($("<input>")
-        .attr("id", "link_marker")
-        .attr("type", "checkbox")
-        .attr("class", "form-check-input")
-        .bind("change", toggleMarker));
-
-    $("<div class='btn-group btn-group-sm mb-2'>")
-      .appendTo($form)
-      .append($("<a class='btn btn-primary'>")
-        .addClass("active")
-        .attr("for", "long_input")
-        .attr("id", "long_link")
-        .text(OSM.i18n.t("javascripts.share.long_link")))
-      .append($("<a class='btn btn-primary'>")
-        .attr("for", "short_input")
-        .attr("id", "short_link")
-        .text(OSM.i18n.t("javascripts.share.short_link")))
-      .append($("<a class='btn btn-primary'>")
-        .attr("for", "embed_html")
-        .attr("id", "embed_link")
-        .attr("data-bs-title", OSM.i18n.t("javascripts.site.embed_html_disabled"))
-        .attr("href", "#")
-        .text(OSM.i18n.t("javascripts.share.embed")))
-      .on("click", "a", function (e) {
+    $ui.find("#link_marker").on("change", toggleMarker);
+
+    $ui.find(".btn-group .btn")
+      .on("click", function (e) {
         e.preventDefault();
         if (!$(this).hasClass("btn-primary")) return;
         const id = "#" + $(this).attr("for");
         $(this).siblings("a")
           .removeClass("active");
         $(this).addClass("active");
-        $linkSection.find(".share-tab")
-          .hide();
-        $linkSection.find(".share-tab:has(" + id + ")")
-          .show()
+        $ui.find(".share-tab")
+          .prop("hidden", true);
+        $ui.find(".share-tab:has(" + id + ")")
+          .prop("hidden", false)
           .find("input, textarea")
-          .select();
+          .trigger("select");
       });
 
-    $("<div>")
-      .attr("class", "share-tab")
-      .appendTo($form)
-      .append($("<input>")
-        .attr("id", "long_input")
-        .attr("type", "text")
-        .attr("class", "form-control form-control-sm font-monospace")
-        .attr("readonly", true)
-        .on("click", select));
-
-    $("<div>")
-      .attr("class", "share-tab")
-      .hide()
-      .appendTo($form)
-      .append($("<input>")
-        .attr("id", "short_input")
-        .attr("type", "text")
-        .attr("class", "form-control form-control-sm font-monospace")
-        .attr("readonly", true)
-        .on("click", select));
-
-    $("<div>")
-      .attr("class", "share-tab")
-      .hide()
-      .appendTo($form)
-      .append(
-        $("<textarea>")
-          .attr("id", "embed_html")
-          .attr("class", "form-control form-control-sm font-monospace")
-          .attr("readonly", true)
-          .on("click", select))
-      .append(
-        $("<p>")
-          .attr("class", "text-body-secondary")
-          .text(OSM.i18n.t("javascripts.share.paste_html")));
-
-    // Geo URI
-
-    const $geoUriSection = $("<div>")
-      .attr("class", "share-geo-uri p-3 border-bottom border-secondary-subtle")
-      .appendTo($ui);
-
-    $("<h4>")
-      .text(OSM.i18n.t("javascripts.share.geo_uri"))
-      .appendTo($geoUriSection);
-
-    $("<div>")
-      .appendTo($geoUriSection)
-      .append($("<a>")
-        .attr("id", "geo_uri"));
+    $ui.find(".share-tab [id]").on("click", select);
 
     // Image
 
-    const $imageSection = $("<div>")
-      .attr("class", "share-image p-3")
-      .appendTo($ui);
-
-    $("<h4>")
-      .text(OSM.i18n.t("javascripts.share.image"))
-      .appendTo($imageSection);
-
-    $("<div>")
-      .attr("id", "export-warning")
-      .attr("class", "text-body-secondary")
-      .text(OSM.i18n.t("javascripts.share.only_layers_exported_as_image"))
-      .append(
-        $("<ul>").append(
-          map.baseLayers
-            .filter(layer => layer.options.canDownloadImage)
-            .map(layer => $("<li>").text(layer.options.name))))
-      .appendTo($imageSection);
-
-    $form = $("<form>")
-      .attr("id", "export-image")
-      .attr("action", "/export/finish")
-      .attr("method", "post")
-      .appendTo($imageSection);
-
-    $("<div>")
-      .appendTo($form)
-      .attr("class", "row mb-3")
-      .append($("<label>")
-        .attr("for", "mapnik_format")
-        .attr("class", "col-auto col-form-label")
-        .text(OSM.i18n.t("javascripts.share.format")))
-      .append($("<div>")
-        .attr("class", "col-auto")
-        .append($("<select>")
-          .attr("name", "mapnik_format")
-          .attr("id", "mapnik_format")
-          .attr("class", "form-select w-auto")
-          .append($("<option>").val("png").text("PNG").prop("selected", true))
-          .append($("<option>").val("jpeg").text("JPEG"))
-          .append($("<option>").val("webp").text("WEBP"))
-          .append($("<option>").val("svg").text("SVG"))
-          .append($("<option>").val("pdf").text("PDF"))));
-
-    $("<div>")
-      .appendTo($form)
-      .attr("class", "row mb-3")
-      .attr("id", "mapnik_scale_row")
-      .append($("<label>")
-        .attr("for", "mapnik_scale")
-        .attr("class", "col-auto col-form-label")
-        .text(OSM.i18n.t("javascripts.share.scale")))
-      .append($("<div>")
-        .attr("class", "col-auto")
-        .append($("<div>")
-          .attr("class", "input-group flex-nowrap")
-          .append($("<span>")
-            .attr("class", "input-group-text")
-            .text("1 : "))
-          .append($("<input>")
-            .attr("name", "mapnik_scale")
-            .attr("id", "mapnik_scale")
-            .attr("type", "text")
-            .attr("class", "form-control")
-            .on("change", update))));
-
-    $("<div>")
-      .attr("class", "row mb-3")
-      .appendTo($form)
-      .append($("<div>")
-        .attr("class", "col-auto")
-        .append($("<div>")
-          .attr("class", "form-check")
-          .append($("<label>")
-            .attr("for", "image_filter")
-            .attr("class", "form-check-label")
-            .text(OSM.i18n.t("javascripts.share.custom_dimensions")))
-          .append($("<input>")
-            .attr("id", "image_filter")
-            .attr("type", "checkbox")
-            .attr("class", "form-check-input")
-            .bind("change", toggleFilter))));
-
-    const mapnikNames = ["minlon", "minlat", "maxlon", "maxlat", "lat", "lon"];
-
-    for (const name of mapnikNames) {
-      $("<input>")
-        .attr("id", "mapnik_" + name)
-        .attr("name", name)
-        .attr("type", "hidden")
-        .appendTo($form);
-    }
-
-    const hiddenExportDefaults = {
-      format: "mapnik",
-      zoom: map.getZoom(),
-      width: 0,
-      height: 0
-    };
-
-    for (const name in hiddenExportDefaults) {
-      $("<input>")
-        .attr("id", "map_" + name)
-        .attr("name", name)
-        .attr("value", hiddenExportDefaults[name])
-        .attr("type", "hidden")
-        .appendTo($form);
-    }
-
-    const csrfAttrs = { type: "hidden" };
-    [[csrfAttrs.name, csrfAttrs.value]] = Object.entries(OSM.csrf);
+    $ui.find("#mapnik_scale").on("change", update);
 
-    $("<input>")
-      .attr(csrfAttrs)
-      .appendTo($form);
+    $ui.find("#image_filter").bind("change", toggleFilter);
 
-    const args = {
-      layer: "<span id=\"mapnik_image_layer\"></span>",
-      width: "<span id=\"mapnik_image_width\"></span>",
-      height: "<span id=\"mapnik_image_height\"></span>"
-    };
-
-    $("<p>")
-      .attr("class", "text-body-secondary")
-      .html(OSM.i18n.t("javascripts.share.image_dimensions", args))
-      .appendTo($form);
-
-    $("<input>")
-      .attr("type", "submit")
-      .attr("class", "btn btn-primary")
-      .attr("value", OSM.i18n.t("javascripts.share.download"))
-      .appendTo($form);
+    const csrfInput = $ui.find("#csrf_export")[0];
+    [[csrfInput.name, csrfInput.value]] = Object.entries(OSM.csrf);
 
     locationFilter
       .on("change", update)
@@ -264,6 +50,8 @@ L.OSM.share = function (options) {
       .on("show", shown)
       .on("hide", hidden);
 
+    update();
+
     function shown() {
       $("#mapnik_scale").val(getScale());
       update();
@@ -363,7 +151,7 @@ L.OSM.share = function (options) {
         .toggleClass("btn-secondary", !canEmbed)
         .tooltip(canEmbed ? "disable" : "enable");
       if (!canEmbed && $("#embed_link").hasClass("active")) {
-        $("#long_link").click();
+        $("#long_link").trigger("click");
       }
 
       $("#embed_html").val(
@@ -377,7 +165,7 @@ L.OSM.share = function (options) {
 
       $("#geo_uri")
         .attr("href", map.getGeoUri(marker))
-        .html(map.getGeoUri(marker));
+        .text(map.getGeoUri(marker));
 
       // Image
 
@@ -422,7 +210,7 @@ L.OSM.share = function (options) {
     }
 
     function select() {
-      $(this).select();
+      $(this).trigger("select");
     }
 
     function getScale() {
@@ -439,6 +227,13 @@ L.OSM.share = function (options) {
       const precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
       return precision * Math.ceil(scale / precision);
     }
+  }
+
+  control.onAddPane = function (map, button, $ui) {
+    $("#content").addClass("overlay-right-sidebar");
+
+    control.onContentLoaded = () => init(map, $ui);
+    $ui.one("show", control.loadContent);
   };
 
   return control;
diff --git a/app/controllers/share_panes_controller.rb b/app/controllers/share_panes_controller.rb
new file mode 100644
index 000000000..4b1b64bcf
--- /dev/null
+++ b/app/controllers/share_panes_controller.rb
@@ -0,0 +1,9 @@
+class SharePanesController < ApplicationController
+  before_action :authorize_web
+  before_action :set_locale
+  authorize_resource :class => false
+
+  def show
+    render :layout => false
+  end
+end
diff --git a/app/views/share_panes/show.html.erb b/app/views/share_panes/show.html.erb
new file mode 100644
index 000000000..9167eb386
--- /dev/null
+++ b/app/views/share_panes/show.html.erb
@@ -0,0 +1,85 @@
+<div class="share-link p-3 border-bottom border-secondary-subtle">
+  <h4><%= t "javascripts.share.link" %></h4>
+  <form>
+    <div class="form-check mb-3">
+      <label for="link_marker" class="form-check-label"><%= t "javascripts.share.include_marker" %></label>
+      <input id="link_marker" type="checkbox" class="form-check-input" />
+    </div>
+    <div class="btn-group btn-group-sm mb-2">
+      <a class="btn btn-primary active" for="long_input" id="long_link"><%= t "javascripts.share.long_link" %></a>
+      <a class="btn btn-primary" for="short_input" id="short_link"><%= t "javascripts.share.short_link" %></a>
+      <a class="btn btn-primary" for="embed_html" id="embed_link" data-bs-title="<%= t "javascripts.site.embed_html_disabled" %>" href="#"><%= t "javascripts.share.embed" %></a>
+    </div>
+    <div class="share-tab">
+      <input id="long_input" type="text" class="form-control form-control-sm font-monospace" autocomplete="off" readonly />
+    </div>
+    <div class="share-tab" hidden>
+      <input id="short_input" type="text" class="form-control form-control-sm font-monospace" autocomplete="off" readonly />
+    </div>
+    <div class="share-tab" hidden>
+      <textarea id="embed_html" class="form-control form-control-sm font-monospace" readonly></textarea>
+      <p class="text-body-secondary"><%= t "javascripts.share.paste_html" %></p>
+    </div>
+  </form>
+</div>
+<div class="share-geo-uri p-3 border-bottom border-secondary-subtle">
+  <h4><%= t "javascripts.share.geo_uri" %></h4>
+  <div><a id="geo_uri"></a></div>
+</div>
+<div class="share-image p-3">
+  <h4><%= t "javascripts.share.image" %></h4>
+  <div id="export-warning" class="text-body-secondary">
+    <%= t "javascripts.share.only_layers_exported_as_image" %>
+    <ul>
+      <% MapLayers.full_definitions("config/layers.yml")
+                  .select { |layer| layer["canDownloadImage"] }
+                  .each do |layer| %>
+        <li><%= t "javascripts.map.base.#{layer['nameId']}" %></li>
+      <% end %>
+    </ul>
+  </div>
+  <form id="export-image" action="/export/finish" method="post">
+    <div class="row mb-3">
+      <label for="mapnik_format" class="col-auto col-form-label"><%= t "javascripts.share.format" %></label>
+      <div class="col-auto">
+        <select name="mapnik_format" id="mapnik_format" class="form-select w-auto" required>
+          <option value="png">PNG</option>
+          <option value="jpeg">JPEG</option>
+          <option value="webp">WEBP</option>
+          <option value="svg">SVG</option>
+          <option value="pdf">PDF</option>
+        </select>
+      </div>
+    </div>
+    <div class="row mb-3" id="mapnik_scale_row">
+      <label for="mapnik_scale" class="col-auto col-form-label"><%= t "javascripts.share.scale" %></label>
+      <div class="col-auto">
+        <div class="input-group flex-nowrap">
+          <span class="input-group-text">1 : </span>
+          <input name="mapnik_scale" id="mapnik_scale" type="text" class="form-control" autocomplete="off" />
+        </div>
+      </div>
+    </div>
+    <div class="row mb-3">
+      <div class="col-auto">
+        <div class="form-check">
+          <label for="image_filter" class="form-check-label"><%= t "javascripts.share.custom_dimensions" %></label>
+          <input id="image_filter" type="checkbox" class="form-check-input">
+        </div>
+      </div>
+    </div>
+    <% %w[minlon minlat maxlon maxlat lat lon].each do |name| %>
+      <input id="mapnik_<%= name %>" name="<%= name %>" type="hidden" />
+    <% end %>
+    <% { :format => "mapnik", :zoom => 0, :width => 0, :height => 0 }.each do |name, value| %>
+      <input id="map_<%= name %>" name="<%= name %>" type="hidden" value="<%= value %>" />
+    <% end %>
+    <input id="csrf_export" type="hidden" />
+    <p class="text-body-secondary">
+      <%= t "javascripts.share.image_dimensions_html",
+            **%w[layer width height]
+              .to_h { |key| [key.to_sym, content_tag(:span, "", :id => "mapnik_image_#{key}")] } %>
+    </p>
+    <input type="submit" class="btn btn-primary" value="<%= t "javascripts.share.download" %>" />
+  </form>
+</div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index b699b6b9c..a2fc2ef7d 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -3300,7 +3300,7 @@ en:
       custom_dimensions: "Set custom dimensions"
       format: "Format:"
       scale: "Scale:"
-      image_dimensions: "Image will show the %{layer} layer at %{width} x %{height}"
+      image_dimensions_html: "Image will show the %{layer} layer at %{width} x %{height}"
       download: "Download"
       short_url: "Short URL"
       include_marker: "Include marker"
diff --git a/config/routes.rb b/config/routes.rb
index 834c60fa5..d1c0a7cac 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -203,6 +203,7 @@ OpenStreetMap::Application.routes.draw do
   match "/logout" => "sessions#destroy", :via => [:get, :post]
   get "/offline" => "site#offline"
   resource :legend_pane, :path => "/panes/legend", :only => :show
+  resource :share_pane, :path => "/panes/share", :only => :show
   get "/id" => "site#id"
   resource :feature_query, :path => "query", :only => :show
   post "/user/:display_name/confirm/resend" => "confirmations#confirm_resend", :as => :user_confirm_resend
-- 
2.39.5