diff options
| -rw-r--r-- | src/popover.js | 28 |
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'); }); }); |