Add a modal with information text.

1 files changed, 37 insertions, 17 deletions

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: '&copy; <a href="https://lantmateriet.se" target="_blank">Lantmäteriet</a>',
 });
 
 
@@ -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';