Don't re-attach open popovers when clicking on a feature.

Once an open popover is detached, keep it detached until it is closed.
That's also the behavior of https://apps.sgu.se/kartvisare/kartvisare-mineralrattigheter.html .

1 files changed, 28 insertions, 9 deletions

diff --git a/main.js b/main.js
index 6839369..d86651e 100644
--- a/main.js
+++ b/main.js
@@ -1993,6 +1993,15 @@ map.addLayer(vectorLayer2);
   pageNode.appendChild(document.createTextNode(' av '));
   pageNode.appendChild(pageCount);
 
+  const refreshPopover = function() {
+    const x = features[featureNum];
+    featureOverlaySource.clear(true);
+    featureOverlaySource.addFeature(x.feature);
+
+    pageNum.innerHTML = (featureNum + 1).toString();
+    popover.tip.getElementsByClassName('popover-body')[0].
+      replaceChildren(x.formattedContent);
+  };
   const onClickPageChange = function(event, offset) {
     const btn = event.target;
     if (btn.classList.contains('disabled') || popover === null || popover.tip === null) {
@@ -2014,13 +2023,7 @@ map.addLayer(vectorLayer2);
       btnNext.classList.add('disabled');
     }
 
-    const x = features[featureNum];
-    featureOverlaySource.clear(true);
-    featureOverlaySource.addFeature(x.feature);
-
-    pageNum.innerHTML = (featureNum + 1).toString();
-    popover.tip.getElementsByClassName('popover-body')[0].
-      replaceChildren(x.formattedContent);
+    refreshPopover();
     setTimeout(function() { btn.blur() }, 100);
   };
 
@@ -2065,10 +2068,13 @@ map.addLayer(vectorLayer2);
     features.length = 0;
     featureNum = 0;
 
-    /* dispose any pre-existing popover */
+    /* dispose any pre-existing popover if not in detached mode */
     popover = Popover.getInstance(popup);
     if (popover !== null) {
-      popover.dispose();
+      const popoverTip = popover.tip;
+      if (popoverTip !== null && !popoverTip.classList.contains('popover-detached')) {
+        popover.dispose();
+      }
     }
 
     const size = map.getSize();
@@ -2149,6 +2155,11 @@ map.addLayer(vectorLayer2);
         pageNode.classList.remove('d-none');
       }
 
+      if (features.length > 1) {
+        /* we're already showing the first feature */
+        return;
+      }
+
       if (popover === null || popover.tip === null) {
         /* create a new popover if we're not already showing one */
         pageNum.innerHTML = (featureNum + 1).toString();
@@ -2167,10 +2178,18 @@ map.addLayer(vectorLayer2);
         popover.show();
         featureOverlaySource.addFeature(feature);
       }
+      else if (popover.tip.classList.contains('popover-detached')) {
+        refreshPopover();
+      }
     }, {
       hitTolerance: 5,
       checkWrapped: false,
       layerFilter: (l) => l === vectorLayer || l === vectorLayer2,
     });
+
+    if (features.length === 0 && popover !== null && popover.tip !== null) {
+      /* dispose pre-detached popover */
+      popover.dispose();
+    }
   });
 }());