From 7a14a37960b73e6f01120ffec444b14b7fee6b3b Mon Sep 17 00:00:00 2001
From: Guilhem Moulin <guilhem@fripost.org>
Date: Fri, 20 Jun 2025 14:47:33 +0200
Subject: Add a closing button to the measurement panel.

It can be confusing that one had to click on the ruler icon to go back
to the normal mode where one can select features.
---
 main.js   | 43 ++++++++++++++++++++++++++++++-------------
 style.css | 11 +++++++++--
 2 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/main.js b/main.js
index 08e8405..eccca7a 100644
--- a/main.js
+++ b/main.js
@@ -3918,14 +3918,25 @@ const infoMetadataAccordions = [];
   modal.appendChild(content);
   content.classList.add('modal-content');
 
-  const body = document.createElement('div');
-  content.appendChild(body);
-  body.classList.add('modal-body');
+  const header = document.createElement('div');
+  content.appendChild(header);
+  header.classList.add('modal-header');
 
   const title = document.createElement('div');
   title.classList.add('h5');
   title.innerHTML = 'Mät i kartan';
-  body.appendChild(title);
+  header.appendChild(title);
+
+  const btn_close = document.createElement('button');
+  btn_close.classList.add('btn-close');
+  btn_close.type = 'button';
+  btn_close.title = 'Stäng';
+  btn_close.setAttribute('aria-label', btn_close.title);
+  header.appendChild(btn_close);
+
+  const body = document.createElement('div');
+  content.appendChild(body);
+  body.classList.add('modal-body');
 
   const getMeasureMode = (function() {
     const btn_group = document.createElement('div');
@@ -3987,16 +3998,22 @@ const infoMetadataAccordions = [];
     btn_group.appendChild(buttons.ok);
   })();
 
-  document.getElementById('measure-button')
-    .getElementsByTagName('button')[0]
-    .addEventListener('click', function(event) {
-      if (event.currentTarget.getAttribute('aria-expanded') === 'true') {
-        disposePopover();
-        setup(getMeasureMode());
-      } else {
-        setup(null);
+  const button_menu = document.getElementById('measure-button')
+    .getElementsByTagName('button')[0];
+  button_menu.addEventListener('click', function(event) {
+    if (event.currentTarget.getAttribute('aria-expanded') === 'true') {
+      disposePopover();
+      setup(getMeasureMode());
+    } else {
+      setup(null);
+      /* XXX workaround for https://github.com/twbs/bootstrap/issues/41005#issuecomment-2585390544 */
+      const activeElement = document.activeElement;
+      if (activeElement.isEqualNode(btn_close)) {
+          activeElement.blur();
       }
-    });
+    }
+  });
+  btn_close.onclick = () => button_menu.click();
 })();
 
 /* popup and feature overlays */
diff --git a/style.css b/style.css
index da48ebb..748f615 100644
--- a/style.css
+++ b/style.css
@@ -494,9 +494,16 @@ body.inprogress {
   -moz-user-select: text;
   user-select: text; /* eslint-disable-line css/use-baseline */
 }
-#measure-panel .h5 {
+#measure-panel .modal-header {
+  border-bottom: none;
+  padding: var(--bs-modal-padding);
+}
+#measure-panel .modal-header .h5 {
   font-size: 1.25rem;
-  margin-bottom: .75rem;
+  margin: 0;
+}
+#measure-panel .modal-body {
+  padding-top: 0;
 }
 #age-filter-modal .btn-group > .btn-check:not(:checked) + label.btn:hover,
 #measure-panel .btn-group > .btn-check:not(:checked) + label.btn:hover {
-- 
cgit v1.2.3