+ + diff --git a/main.js b/main.js index e1956fb..ff4bd7e 100644 --- a/main.js +++ b/main.js @@ -22,7 +22,6 @@ import TileLayer from 'ol/layer/Tile.js'; 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'; @@ -32,6 +31,8 @@ import proj4 from 'proj4'; import {get as getProjection} from 'ol/proj.js'; import {register as registerProjection} from 'ol/proj/proj4.js'; +import { Modal } from 'bootstrap'; + import './style.css'; @@ -89,7 +90,6 @@ const baseMapSource = new WMTS({ projection: projection, wrapX: false, crossOrigin: 'anonymous', - attributions: '© Lantmäteriet', }); @@ -115,16 +115,6 @@ const map = new Map({ units: 'metric', minWidth: 150, }), - new Attribution({ - collapsible: true, - collapsed: true, - tipLabel: 'Information', - label: (function() { - const label = document.createElement('i'); - label.classList.add('bi', 'bi-info'); - return label; - })(), - }), ], view: new View({ projection: projection, @@ -147,7 +137,7 @@ const map = new Map({ /* add the menu to the viewport */ const menu = document.createElement('div'); -menu.classList.add('d-none'); +menu.ariaHidden = 'true'; menu.id = 'map-menu'; map.getViewport().appendChild(menu); @@ -167,13 +157,13 @@ map.getViewport().appendChild(menu); btn.appendChild(i); i.classList.add('bi', 'bi-stack'); + const panel = document.getElementById('layer-selection-panel'); btn.onclick = function(event) { - const panel = document.getElementById('layer-selection-panel'); if (btn.ariaExpanded === 'true') { - panel.classList.add('d-none'); + panel.ariaHidden = 'true'; btn.ariaExpanded = 'false'; } else { - panel.classList.remove('d-none'); + panel.ariaHidden = 'false'; btn.ariaExpanded = 'true'; } }; @@ -196,7 +186,37 @@ map.getViewport().appendChild(menu); })); })(); -menu.classList.remove('d-none'); +/* info button */ +(function() { + 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 = 'Visa information'; + + const i = document.createElement('i'); + btn.appendChild(i); + i.classList.add('bi', 'bi-info-lg'); + + const panel = document.getElementById('modal-info'); + const modal = new Modal(panel, {}); + panel.addEventListener('show.bs.modal', function() { + btn.ariaExpanded = 'true'; + }); + panel.addEventListener('hidden.bs.modal', function() { + btn.ariaExpanded = 'false'; + }); + + btn.onclick = function() { + modal.toggle() + }; +})(); + +menu.ariaHidden = 'false'; document.getElementById('layer-topowebb_nedtonad').onchange = function(event) { const layer = event.target.checked ? 'topowebb_nedtonad' : 'topowebb'; diff --git a/style.css b/style.css index 9d4383a..8eda3c6 100644 --- a/style.css +++ b/style.css @@ -16,6 +16,20 @@ html, body { --menu-spacing: .5em; --menu-spacing-interline: .25em; } +.modal { + --bs-modal-border-width: var(--menu-border-width); + --bs-border-radius-lg: var(--menu-border-radius); + --bs-modal-border-radius: var(--menu-border-radius); + --bs-modal-bg: var(--bs-body-bg); + --bs-modal-color: var(--bs-body-color); +} +#modal-info .modal-header { + border-bottom: none; + --bs-modal-header-border-width: 0; +} +.btn-close { + --bs-btn-close-focus-shadow: none; +} @media screen and (max-width: 500px) { html, body { --menu-factor-size: 1; @@ -29,6 +43,10 @@ html, body { bottom: 0; width: 100%; } +#modal-info.modal { + --link-dark-rgb: var(--bs-modal-color); + --bs-emphasis-color-rgb: var(--bs-modal-color); +} .form-check-input:focus:not(:focus-visible, :hover) { box-shadow: none; } @@ -43,6 +61,10 @@ html, body { #map-menu, .ol-control { background-color: transparent; } +#map-menu[aria-hidden="true"], +#layer-selection-panel[aria-hidden="true"] { + display: none; +} .ol-control button, #map-menu button, #layer-selection-panel { -- cgit v1.2.3