From 8004ddfa2050239e606063354bd9fe5778946833 Mon Sep 17 00:00:00 2001
From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
Date: Wed, 2 Jul 2025 08:59:30 +0200
Subject: [PATCH] Refactor share pane buttons to use Bootstrap tabs

---
 app/assets/javascripts/leaflet.share.js | 24 ++++++--------------
 app/views/share_panes/show.html.erb     | 30 ++++++++++++++-----------
 config/eslint.config.mjs                |  1 +
 3 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 4bca5ebd6..b4547cc79 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -12,18 +12,8 @@ L.OSM.share = function (options) {
     $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");
-        $ui.find(".share-tab")
-          .prop("hidden", true);
-        $ui.find(".share-tab:has(" + id + ")")
-          .prop("hidden", false)
-          .find("input, textarea")
+      .on("shown.bs.tab", () =>{
+        $ui.find(".tab-pane.active [id]")
           .trigger("select");
       });
 
@@ -146,13 +136,13 @@ L.OSM.share = function (options) {
         params.set("marker", latLng.lat + "," + latLng.lng);
       }
 
+      if (!canEmbed && $("#nav-embed").hasClass("active")) {
+        bootstrap.Tab.getOrCreateInstance($("#long_link")).show();
+      }
       $("#embed_link")
-        .toggleClass("btn-primary", canEmbed)
-        .toggleClass("btn-secondary", !canEmbed)
+        .toggleClass("disabled", !canEmbed)
+        .parent()
         .tooltip(canEmbed ? "disable" : "enable");
-      if (!canEmbed && $("#embed_link").hasClass("active")) {
-        $("#long_link").trigger("click");
-      }
 
       $("#embed_html").val(
         "<iframe width=\"425\" height=\"350\" src=\"" +
diff --git a/app/views/share_panes/show.html.erb b/app/views/share_panes/show.html.erb
index c05fdf829..04b4e1532 100644
--- a/app/views/share_panes/show.html.erb
+++ b/app/views/share_panes/show.html.erb
@@ -5,20 +5,24 @@
       <label for="link_marker" class="form-check-label"><%= t ".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 ".long_link" %></a>
-      <a class="btn btn-primary" for="short_input" id="short_link"><%= t ".short_link" %></a>
-      <a class="btn btn-primary" for="embed_html" id="embed_link" data-bs-title="<%= t ".embed_html_disabled" %>" href="#"><%= t ".embed" %></a>
+    <div class="btn-group btn-group-sm mb-2 nav nav-pills" id="nav-tab" role="tablist">
+      <a class="btn btn-primary flex-grow-0 active" id="long_link" data-bs-toggle="tab" data-bs-target="#nav-long-link" type="button" role="tab" aria-controls="nav-long-link" aria-selected="true"><%= t ".long_link" %></a>
+      <a class="btn btn-primary flex-grow-0" id="short_link" data-bs-toggle="tab" data-bs-target="#nav-short-link" type="button" role="tab" aria-controls="nav-short-link" aria-selected="false"><%= t ".short_link" %></a>
+      <span class="btn-group btn-group-sm" tabindex="0" data-bs-title="<%= t ".embed_html_disabled" %>" data-bs-toggle="tooltip">
+        <a class="btn btn-primary" id="embed_link" data-bs-toggle="tab" data-bs-target="#nav-embed" type="button" role="tab" aria-controls="nav-embed" aria-selected="false"><%= t ".embed" %></a>
+      </span>
     </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 ".paste_html" %></p>
+    <div class="tab-content" id="nav-tabContent">
+      <div class="tab-pane active" id="nav-long-link" role="tabpanel" aria-labelledby="long_link">
+        <input type="text" id="long_input" class="form-control form-control-sm font-monospace" autocomplete="off" readonly />
+      </div>
+      <div class="tab-pane" id="nav-short-link" role="tabpanel" aria-labelledby="short_link">
+        <input type="text" id="short_input" class="form-control form-control-sm font-monospace" autocomplete="off" readonly />
+      </div>
+      <div class="tab-pane" id="nav-embed" role="tabpanel" aria-labelledby="embed_link">
+        <textarea id="embed_html" class="form-control form-control-sm font-monospace" readonly></textarea>
+        <p class="text-body-secondary mb-0"><%= t ".paste_html" %></p>
+      </div>
     </div>
   </form>
 </div>
diff --git a/config/eslint.config.mjs b/config/eslint.config.mjs
index 6d695bbf6..597649645 100644
--- a/config/eslint.config.mjs
+++ b/config/eslint.config.mjs
@@ -30,6 +30,7 @@ export default [
         Matomo: "readonly",
         OSM: "writable",
         Turbo: "readonly",
+        bootstrap: "readonly",
         plurals: "readonly",
         updateLinks: "readonly"
       }
-- 
2.39.5