Refactor popover handling.

In particular, make the definition object hierarchical and rename its
fields.

1 files changed, 10 insertions, 40 deletions

diff --git a/main.js b/main.js
index aa58199..0055b88 100644
--- a/main.js
+++ b/main.js
@@ -46,10 +46,10 @@ import proj4 from 'proj4';
 import { get as getProjection } from 'ol/proj.js';
 import { register as registerProjection } from 'ol/proj/proj4.js';
 
-import { Modal, Popover } from 'bootstrap';
+import { Modal } from 'bootstrap';
 
 import { layers } from './src/layers.js';
-import { popover } from './src/popover.js';
+import { initPopupOverLay, initPopover, disposePopover } from './src/popover.js';
 import './src/style.css';
 
 proj4.defs('EPSG:3006', '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs');
@@ -275,8 +275,6 @@ const map = new Map({
   target: document.getElementById('map'),
 });
 
-const popup = document.getElementById('popup');
-
 /* move the control container to the viewport */
 const container = document.getElementById('map-control-container');
 (function() {
@@ -459,9 +457,8 @@ if (window.location === window.parent.location) {
   map.addControl(control);
 
   control.addEventListener('enterfullscreen', function() {
-    featureOverlayLayer.setVisible(false);
     /* dispose popover as entering fullscreen messes up its position */
-    Popover.getInstance(popup)?.dispose();
+    disposePopover()
 
     const btn = control.element.getElementsByTagName('button')[0];
     btn.classList.replace(classInactive, classActive);
@@ -475,9 +472,8 @@ if (window.location === window.parent.location) {
     }
   })
   control.addEventListener('leavefullscreen', function() {
-    featureOverlayLayer.setVisible(false);
     /* dispose popover as is might overflow the viewport */
-    Popover.getInstance(popup)?.dispose();
+    disposePopover();
 
     const btn = control.element.getElementsByTagName('button')[0];
     btn.classList.replace(classActive, classInactive);
@@ -780,8 +776,7 @@ if (window.location === window.parent.location) {
 container.setAttribute('aria-hidden', 'false');
 
 view.on('change', function() {
-  featureOverlayLayer.setVisible(false);
-  Popover.getInstance(popup)?.dispose();
+  disposePopover();
 
   const coordinates = view.getCenter();
   const searchParams = new URLSearchParams(location.hash.substring(1));
@@ -1202,7 +1197,7 @@ const styles = (function() {
   }, {});
 })();
 
-const [mapLayers, featureOverlayLayer] = (function() {
+const mapLayers = (function() {
   const baseurl = '/';
   const xyz = '/{z}/{x}/{y}.pbf';
   const tileGrid = createXYZ({
@@ -1299,31 +1294,7 @@ const [mapLayers, featureOverlayLayer] = (function() {
     map.addLayer(ret[k]);
   });
 
-  return [
-    ret,
-
-    /* We use a vector tile layer for featureOverlayLayer instead of a simple
-     * vector layer overlay, since we don't want to clip selected geometries at
-     * tile boundaries.  It sounds overkill to load an entire tile layer to
-     * display a single feature, but this shouldn't cause much overhead in
-     * practice (the tiles are most likely cached already). */
-    new VectorTileLayer({
-      source: new VectorTile({
-        urls: [],
-        format: new MVT(),
-        projection: projection,
-        wrapX: false,
-        transition: 0,
-        tileGrid: tileGrid,
-      }),
-      zIndex: 65535,
-      declutter: false,
-      visible: false,
-      renderMode: 'vector',
-      map: map,
-      style: null,
-    }),
-  ];
+  return ret;
 })();
 
 
@@ -1544,9 +1515,7 @@ const infoMetadataAccordions = [];
     }
   };
   const onClickFunction = function(layerList, event) {
-    featureOverlayLayer.setVisible(false);
-    featureOverlayLayer.changed();
-    Popover.getInstance(popup)?.dispose();
+    disposePopover();
 
     const searchParams = new URLSearchParams(location.hash.substring(1));
     let layersParams = searchParams.get('layers') || '';
@@ -2231,4 +2200,5 @@ const infoMetadataAccordions = [];
   };
 })();
 
-popover(map, mapLayers, featureOverlayLayer);
+initPopupOverLay(map, document.getElementById('popup'));
+initPopover(map);