diff options
| -rw-r--r-- | main.js | 36 | ||||
| -rw-r--r-- | style.css | 34 |
2 files changed, 67 insertions, 3 deletions
@@ -1946,6 +1946,9 @@ map.addLayer(vectorLayer2); return; } const popoverTip = Popover.getInstance(popup).tip; + if (popoverTip.classList.contains('popover-maximized')) { + return; + } pageNode.classList.add('grabbing-area-grabbed'); if (!popoverTip.classList.contains('popover-detached')) { @@ -2045,6 +2048,30 @@ map.addLayer(vectorLayer2); return onClickPageChange(event, +1); }; + const btnExpand = document.createElement('button'); + btnExpand.classList.add('popover-button', 'popover-button-expand'); + btnExpand.setAttribute('type', 'button'); + const btnExpandTitle = 'Förstora'; + const btnExpandTitle2 = 'Förminska'; + btnExpand.setAttribute('aria-label', btnExpand.title); + btnExpand.onclick = function(event) { + if (popover === null || popover.tip === null) { + return; + } + if (!popover.tip.classList.contains('popover-maximized')) { + popover.tip.classList.add('popover-maximized'); + btnExpand.classList.replace('popover-button-expand', 'popover-button-reduce'); + btnExpand.title = btnExpandTitle2; + btnExpand.setAttribute('aria-label', btnExpand.title); + } else { + popover.tip.classList.remove('popover-maximized'); + btnExpand.classList.replace('popover-button-reduce', 'popover-button-expand'); + btnExpand.title = btnExpandTitle; + btnExpand.setAttribute('aria-label', btnExpand.title); + } + setTimeout(function() { btnExpand.blur() }, 100); + }; + const btnClose = document.createElement('button'); btnClose.classList.add('popover-button', 'popover-button-close'); btnClose.setAttribute('type', 'button'); @@ -2059,6 +2086,7 @@ map.addLayer(vectorLayer2); header.appendChild(btnPrev); header.appendChild(btnNext); + header.appendChild(btnExpand); header.appendChild(btnClose); const container0 = map.getViewport().getElementsByClassName('ol-overlaycontainer-stopevent')[0]; @@ -2087,6 +2115,14 @@ map.addLayer(vectorLayer2); btnPrev.classList.add('d-none', 'disabled'); btnNext.classList.add('d-none', 'disabled'); + /* never start in maximized mode */ + if (popover !== null && popover.tip !== null) { + popover.tip.classList.remove('popover-maximized'); + } + btnExpand.classList.replace('popover-button-reduce', 'popover-button-expand'); + btnExpand.title = btnExpandTitle; + btnExpand.setAttribute('aria-label', btnExpand.title); + map.forEachFeatureAtPixel(event.pixel, function(feature, layer) { const properties = feature.getProperties(); const def = layers[properties.layer]; @@ -415,21 +415,49 @@ html, body { .popover-header .popover-button-next { --popover-button-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath transform='scale(1.3799) translate(-2.2025 -2.2025)' d='M6 12.796V3.204L11.481 8zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753'/%3e%3c/svg%3e"); } +.popover-header .popover-button-expand { + --popover-button-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707'/%3e%3c/svg%3e"); +} +.popover-header .popover-button-reduce { + --popover-button-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707M15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707'/%3e%3c/svg%3e"); +} .popover-header .popover-button-close { --popover-button-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath transform='scale(1.3332) translate(-2 -2)' d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3e%3c/svg%3e"); } -.popover .grabbing-area { +.popover:not(.popover-maximized) .grabbing-area { cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } -.popover .grabbing-area.grabbing-area-grabbed { +.popover:not(.popover-maximized) .grabbing-area.grabbing-area-grabbed { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } -.popover.popover-detached > .popover-arrow { +.popover.popover-detached > .popover-arrow, +.popover.popover-maximized > .popover-arrow { display: none; } +.popover.popover-maximized { + position: relative !important; + inset: 0 !important; + transform: none !important; + margin: calc(.75*var(--map-container-padding)) auto !important; + --bs-popover-max-width: calc(100vw - 1.5*var(--map-container-padding)); + height: calc(100vh - 1.5*var(--map-container-padding)); + animation: fade-in .25s ease-in-out both; +} +@media screen and (min-width: 1280px) { + .popover.popover-maximized { + --bs-popover-max-width: 1280px; + } +} +@media screen and (min-height: 1920px) { + .popover.popover-maximized { + height: 1920px; + margin-top: calc(50vh - 960px) !important; + margin-bottom: calc(50vh - 960px) !important; + } +} |