Add a modal with information text.

author: Guilhem Moulin <guilhem@fripost.org> 2024-01-12 16:24:22 +0100
committer: Guilhem Moulin <guilhem@fripost.org> 2024-01-13 14:29:51 +0100
commit: 610d754456a7e4e7c702e60c8d3e0ecf6459d240 (patch)
tree: d3abfc8bebc3f265de5cf70074e84ff2141a4518
parent: bf224efbf4d65baa1c0e19542354ce2ca856feeb (diff)
3 files changed, 88 insertions, 18 deletions
diff --git a/index.html b/index.html
index 78f67f9..bae1dc5 100644
--- a/index.html
+++ b/index.html
@@ -7,12 +7,40 @@
   </head>
   <body>
     <div id="map"></div>
-    <div id="layer-selection-panel" class="d-none">
+    <div id="layer-selection-panel" aria-hidden="true">
       <div class="form-check form-switch">
         <input class="form-check-input" type="checkbox" role="switch" id="layer-topowebb_nedtonad">
         <label class="form-check-label" for="layer-topowebb_nedtonad">Nedtonad bakgrund karta</label>
       </div>
     </div>
+    <div class="modal" id="modal-info" tabindex="-1" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content">
+          <div class="modal-header pb-2">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body pt-2">
+            <p>Webbkartan skapades av <a href="https://guilhem.se" class="link-dark">Guilhem Datakonsult</a>
+              på uppdrag av <a href="https://www.klimatanalysnorr.se" class="link-body-emphasis">Klimat Analys Norr projektet</a>.</p>
+            <p class="mb-0">Källor och licensinformation:</p>
+            <ul>
+              <li>Bakgrund karta:
+                &copy; <a href="https://lantmateriet.se" target="_blank" class="link-dark">Lantmäteriet</a>, CC0
+                (<a href="https://www.lantmateriet.se/sv/geodata/vara-produkter/oppna-data/#anchor-1" class="link-dark">öppna data</a>).
+              </li>
+              <li>Webbkartan:
+                &copy; <a href="https://guilhem.se" target="_blank" class="link-dark">Guilhem Moulin</a>, AGPLv3+.
+                <a href="https://git.guilhem.org" target="_blank" class="link-body-emphasis">Källkod</a>.
+              </li>
+              <li>Backend-verktyg:
+                &copy; <a href="https://guilhem.se" target="_blank" class="link-dark">Guilhem Moulin</a>, GPLv3+.
+                <a href="https://git.guilhem.org" target="_blank" class="link-body-emphasis">Källkod</a>.
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
     <script type="module" src="./main.js"></script>
   </body>
 </html>
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';
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 {
author	Guilhem Moulin <guilhem@fripost.org>	2024-01-12 16:24:22 +0100
committer	Guilhem Moulin <guilhem@fripost.org>	2024-01-13 14:29:51 +0100
commit	610d754456a7e4e7c702e60c8d3e0ecf6459d240 (patch)
tree	d3abfc8bebc3f265de5cf70074e84ff2141a4518
parent	bf224efbf4d65baa1c0e19542354ce2ca856feeb (diff)