diff options
| author | Guilhem Moulin <guilhem@fripost.org> | 2024-01-12 16:23:32 +0100 |
|---|---|---|
| committer | Guilhem Moulin <guilhem@fripost.org> | 2024-01-12 16:23:32 +0100 |
| commit | bf224efbf4d65baa1c0e19542354ce2ca856feeb (patch) | |
| tree | 4486f99af1d4aa828bcdd81073d54190b4aa4c59 | |
| parent | f6345c958eccaf4693e3d53f63c611395daaf545 (diff) | |
Add FullScreen mode support.
| -rw-r--r-- | index.html | 5 | ||||
| -rw-r--r-- | main.js | 70 | ||||
| -rw-r--r-- | style.css | 8 |
3 files changed, 57 insertions, 26 deletions
@@ -7,11 +7,6 @@ </head> <body> <div id="map"></div> - <div id="map-menu" class="d-none"> - <button id="layer-selection-btn" type="button" aria-expanded="false" title="Byt kartlager"> - <i class="bi bi-stack"></i> - </button> - </div> <div id="layer-selection-panel" class="d-none"> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="layer-topowebb_nedtonad"> @@ -23,10 +23,10 @@ import WMTS from 'ol/source/WMTS.js'; import WMTSTileGrid from 'ol/tilegrid/WMTS.js'; import Attribution from 'ol/control/Attribution.js'; +import FullScreen from 'ol/control/FullScreen.js'; import ScaleLine from 'ol/control/ScaleLine.js'; import Zoom from 'ol/control/Zoom.js'; import ZoomSlider from 'ol/control/ZoomSlider.js'; -import Control from 'ol/control/Control.js'; import proj4 from 'proj4'; import {get as getProjection} from 'ol/proj.js'; @@ -142,31 +142,63 @@ const map = new Map({ source: baseMapSource }), ], + target: document.getElementById('map'), }); -map.setTarget(document.getElementById('map')); +/* add the menu to the viewport */ +const menu = document.createElement('div'); +menu.classList.add('d-none'); +menu.id = 'map-menu'; +map.getViewport().appendChild(menu); + +/* layer selection button */ (function() { - const menu = document.getElementById('map-menu'); - map.getViewport().append(menu); - map.addControl(new Control({ - element: menu, + const div = document.createElement('div'); + menu.append(div); + div.classList.add('ol-unselectable', 'ol-control'); + + const btn = document.createElement('button'); + div.appendChild(btn); + btn.type = 'button'; + btn.ariaExpanded = 'false'; + btn.title = 'Byt kartlager'; + + const i = document.createElement('i'); + btn.appendChild(i); + i.classList.add('bi', 'bi-stack'); + + btn.onclick = function(event) { + const panel = document.getElementById('layer-selection-panel'); + if (btn.ariaExpanded === 'true') { + panel.classList.add('d-none'); + btn.ariaExpanded = 'false'; + } else { + panel.classList.remove('d-none'); + btn.ariaExpanded = 'true'; + } + }; +})(); + +/* fullscreen control */ +(function() { + const label = document.createElement('i'); + label.classList.add('bi', 'bi-fullscreen'); + + const labelActive = document.createElement('i'); + labelActive.classList.add('bi', 'bi-fullscreen-exit'); + + map.addControl(new FullScreen({ + label: label, + labelActive: labelActive, + tipLabel: 'Växla helskärmsläge', + keys: true, + target: menu, })); - menu.classList.remove('d-none'); })(); -document.getElementById('layer-selection-btn').onclick = function(event) { - const btn = document.getElementById('layer-selection-btn'); - const panel = document.getElementById('layer-selection-panel'); - if (btn.ariaExpanded === 'true') { - panel.classList.add('d-none'); - btn.ariaExpanded = 'false'; - } else { - panel.classList.remove('d-none'); - btn.ariaExpanded = 'true'; - } -}; +menu.classList.remove('d-none'); document.getElementById('layer-topowebb_nedtonad').onchange = function(event) { const layer = event.target.checked ? 'topowebb_nedtonad' : 'topowebb'; baseMapSource.setUrl('https://minkarta.lantmateriet.se/map/topowebbcache?LAYER=' + layer); -} +}; @@ -182,12 +182,16 @@ html, body { top: var(--menu-spacing); margin: 0; } -#map-menu button { +#map-menu > * { margin-top: var(--menu-spacing-interline); } -#map-menu button:first-child { +#map-menu > *:first-child { margin-top: 0; } +#map-menu > .ol-control { + position: relative; + inset: initial; +} #map-menu button[aria-expanded="true"] { background-color: var(--ol-subtle-foreground-color); |