Improve comments.

1 files changed, 20 insertions, 8 deletions

diff --git a/src/popover.js b/src/popover.js
index 6a6320e..74e79d6 100644
--- a/src/popover.js
+++ b/src/popover.js
@@ -947,7 +947,7 @@ const formatValue = function(value, options) {
   }
 };
 
-/* turn the properties into a fine table */
+/* turn the properties into a fine <table> */
 const formatFeaturePropertiesToHTML = function(properties) {
   const table = document.createElement('table');
   table.classList.add('table', 'table-sm', 'table-borderless', 'table-hover');
@@ -987,6 +987,7 @@ const formatFeaturePropertiesToHTML = function(properties) {
   return content;
 };
 
+/* Initialize popup overlay with the give map and HTML element */
 let popupOverlay = null;
 export const initPopupOverLay = function(map, element) {
   popupOverlay = new Overlay({
@@ -1000,6 +1001,7 @@ let featureOverlayLayer = null;
 let overlayAttributes = [],
     overlayAttrIdx = 0,
     mapSources = {};
+/* Clear the highlighted feature list and make the overlay layer invisible */
 const disposeFeatureOverlay = function() {
   if (featureOverlayLayer?.getVisible?.()) {
     featureOverlayLayer.setVisible(false);
@@ -1012,6 +1014,7 @@ const disposeFeatureOverlay = function() {
 }
 
 let popover = null;
+/* Clear overlay layer and dispose popover */
 export const disposePopover = function() {
   disposeFeatureOverlay();
   if (popover?.tip != null) {
@@ -1019,6 +1022,7 @@ export const disposePopover = function() {
   }
 };
 
+/* Initialize popover on the given map */
 export const initPopover = function(map) {
   featureOverlayLayer = new VectorTileLayer({
     zIndex: 65535,
@@ -1040,6 +1044,7 @@ export const initPopover = function(map) {
   headerGrabbingArea.appendChild(pageNode);
 
   headerGrabbingArea.onmousedown = function(event) {
+    /* move the popover around */
     if (event.button != 0) {
       return;
     }
@@ -1072,6 +1077,7 @@ export const initPopover = function(map) {
     };
 
     document.onmouseup = function(event) {
+      /* done moving around */
       if (event.button != 0) {
         return;
       }
@@ -1081,6 +1087,7 @@ export const initPopover = function(map) {
     };
   };
 
+  /* current number page and total page count */
   const pageNum = document.createElement('span');
   const pageCount = document.createElement('span');
   pageNode.appendChild(document.createTextNode('Träff '));
@@ -1088,13 +1095,14 @@ export const initPopover = function(map) {
   pageNode.appendChild(document.createTextNode(' av '));
   pageNode.appendChild(pageCount);
 
+  /* highlight a feature */
   const featureOverlayStyle = new Style({
     stroke: new Stroke({
       color: 'rgba(0, 255, 255, .8)',
       width: 3,
     }),
   });
-  const updateFeatureOverlayLayer = function(layer_group, layer, id) {
+  const highlightFeature = function(layer_group, layer, id) {
     const source = mapSources[layer_group];
     if (source == null) {
       return;
@@ -1112,21 +1120,23 @@ export const initPopover = function(map) {
     featureOverlayLayer.setVisible(true);
     featureOverlayLayer.changed();
   };
+  /* highlight the feature at index overlayAttrIdx within the CGI reply list */
   const refreshPopover = function() {
     const attr = overlayAttributes[overlayAttrIdx];
-    updateFeatureOverlayLayer(attr.layer_group, attr.layer, attr.ogc_fid);
+    highlightFeature(attr.layer_group, attr.layer, attr.ogc_fid);
 
     pageNum.innerHTML = (overlayAttrIdx + 1).toString();
     const content = formatFeaturePropertiesToHTML(attr);
     popover.tip.getElementsByClassName('popover-body')[0].replaceChildren(content);
   };
+  /* go back/forward in the overlayAttributes list */
   const onClickPageChange = function(event, offset) {
     const btn = event.target;
     if (btn.classList.contains('disabled') || popover?.tip == null) {
       return;
     }
     if (overlayAttrIdx + offset < 0 || overlayAttrIdx + offset > overlayAttributes.length - 1) {
-      return;
+      return; /* out of range */
     }
 
     overlayAttrIdx += offset;
@@ -1145,6 +1155,7 @@ export const initPopover = function(map) {
     setTimeout(function() { btn.blur() }, 100);
   };
 
+  /* control buttons */
   const btnPrev = document.createElement('button');
   btnPrev.classList.add('popover-button', 'popover-button-prev');
   btnPrev.setAttribute('type', 'button');
@@ -1169,7 +1180,7 @@ export const initPopover = function(map) {
   const btnExpandTitle = 'Förstora';
   const btnExpandTitle2 = 'Förminska';
   btnExpand.setAttribute('aria-label', btnExpand.title);
-  btnExpand.onclick = function() {
+  btnExpand.onclick = function() { /* maximize or reduce the popover */
     if (popover?.tip == null) {
       return;
     }
@@ -1211,7 +1222,7 @@ export const initPopover = function(map) {
 
     const size = event.map.getSize();
     if (size[0] < 576 || size[1] < 576) {
-      return;
+      return; /* skip popover if the map is too small */
     }
 
     /* unclear how many feature we'll find, don't render prev/next buttons for now */
@@ -1238,7 +1249,7 @@ export const initPopover = function(map) {
         return false;
       }
       if (fetch_body.length === 0) {
-        /* first feature in the list */
+        /* first feature in the list, mark cursor and detached popover as in-progress */
         document.body.classList.add('inprogress');
         popover?.tip?.classList?.add?.('inprogress');
       }
@@ -1306,7 +1317,7 @@ export const initPopover = function(map) {
           popupOverlay.setPosition(event.coordinate);
 
           const attr = overlayAttributes[0];
-          updateFeatureOverlayLayer(attr.layer_group, attr.layer, attr.ogc_fid);
+          highlightFeature(attr.layer_group, attr.layer, attr.ogc_fid);
           popover = new Popover(popupOverlay.element, {
             template: '<div class="popover" role="tooltip"><div class="popover-arrow"></div>' +
                       '<div class="popover-header"></div><div class="popover-body"></div></div>',
@@ -1329,6 +1340,7 @@ export const initPopover = function(map) {
         console.log(e);
       })
       .finally(function() {
+        /* remove in-progress marking on the cursor */
         document.body.classList.remove('inprogress');
       });
   });