From bf224efbf4d65baa1c0e19542354ce2ca856feeb Mon Sep 17 00:00:00 2001 From: Guilhem Moulin Date: Fri, 12 Jan 2024 16:23:32 +0100 Subject: Add FullScreen mode support. --- index.html | 5 ----- main.js | 70 +++++++++++++++++++++++++++++++++++++++++++++----------------- style.css | 8 +++++-- 3 files changed, 57 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 79b7bae..78f67f9 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,6 @@
-
- -
diff --git a/main.js b/main.js index f2f3890..e1956fb 100644 --- a/main.js +++ b/main.js @@ -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); -} +}; diff --git a/style.css b/style.css index df2c454..9d4383a 100644 --- a/style.css +++ b/style.css @@ -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); -- cgit v1.2.3