Add template for a legend dialog.

3 files changed, 87 insertions, 18 deletions

diff --git a/index.html b/index.html
index a22f02d..0dfe772 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
     <div id="map-control-container" aria-hidden="true">
       <div id="zoom-control"></div>
       <div id="layer-selection-panel"></div>
+      <div id="map-legend-panel"></div>
       <div id="map-menu"></div>
     </div>
     <div class="modal" id="modal-info" tabindex="-1" aria-hidden="true">
diff --git a/main.js b/main.js
index 9348bbe..c724fd8 100644
--- a/main.js
+++ b/main.js
@@ -190,24 +190,49 @@ const container = document.getElementById('map-control-container');
   map.addControl(control);
 })();
 
-/* layer selection button */
+/* layer selection button and legend */
 const menu = document.getElementById('map-menu');
 (function() {
-  const div = document.createElement('div');
-  menu.appendChild(div);
-  div.id = 'layer-selection-button';
-  div.classList.add('ol-unselectable', 'ol-control');
+  const btn = (function() {
+    const div = document.createElement('div');
+    menu.appendChild(div);
+    div.id = 'layer-selection-button';
+    div.classList.add('ol-unselectable', 'ol-control');
 
-  const btn = document.createElement('button');
-  div.appendChild(btn);
-  btn.type = 'button';
-  btn.setAttribute('aria-expanded', 'false');
-  btn.title = 'Byt kartlager';
-  btn.classList.add('btn', 'btn-light');
+    const btn = document.createElement('button');
+    div.appendChild(btn);
+    btn.type = 'button';
+    btn.setAttribute('aria-expanded', 'false');
+    btn.title = 'Lagerval';
+    btn.classList.add('btn', 'btn-light');
 
-  const i = document.createElement('i');
-  btn.appendChild(i);
-  i.classList.add('bi', 'bi-stack');
+    const i = document.createElement('i');
+    btn.appendChild(i);
+    i.classList.add('bi', 'bi-stack');
+
+    return btn;
+  })();
+
+  const btn2 = (function() {
+    const div = document.createElement('div');
+    menu.appendChild(div);
+    div.id = 'map-legend-button';
+    div.classList.add('ol-unselectable', 'ol-control');
+
+    const btn = document.createElement('button');
+    div.appendChild(btn);
+    btn.type = 'button';
+    btn.setAttribute('aria-expanded', 'false');
+    btn.title = 'Byt kartlager';
+    btn.title = 'Teckenförklaring';
+    btn.classList.add('btn', 'btn-light');
+
+    const i = document.createElement('i');
+    btn.appendChild(i);
+    i.classList.add('bi', 'bi-list-task');
+
+    return btn;
+  })();
 
   const panel = document.getElementById('layer-selection-panel');
   btn.onclick = function(event) {
@@ -217,12 +242,33 @@ const menu = document.getElementById('map-menu');
       btn.classList.add('btn-light');
       btn.classList.remove('btn-dark');
     } else {
+      if (btn2.getAttribute('aria-expanded') === 'true') {
+        btn2.click();
+      }
       panel.setAttribute('aria-hidden', 'false');
       btn.setAttribute('aria-expanded', 'true');
       btn.classList.add('btn-dark');
       btn.classList.remove('btn-light');
     }
   };
+
+  const panel2 = document.getElementById('map-legend-panel');
+  btn2.onclick = function(event) {
+    if (btn2.getAttribute('aria-expanded') === 'true') {
+      panel2.setAttribute('aria-hidden', 'true');
+      btn2.setAttribute('aria-expanded', 'false');
+      btn2.classList.add('btn-light');
+      btn2.classList.remove('btn-dark');
+    } else {
+      if (btn.getAttribute('aria-expanded') === 'true') {
+        btn.click();
+      }
+      panel2.setAttribute('aria-hidden', 'false');
+      btn2.setAttribute('aria-expanded', 'true');
+      btn2.classList.add('btn-dark');
+      btn2.classList.remove('btn-light');
+    }
+  };
 })();
 
 /* fullscreen control */
@@ -425,3 +471,20 @@ view.on('change', function(event) {
     };
   })();
 })();
+
+/* legend panel */
+(function() {
+  const modal = document.getElementById('map-legend-panel');
+  modal.classList.add('modal');
+  modal.setAttribute('role', 'dialog');
+  modal.setAttribute('aria-hidden', 'true');
+
+  const content = document.createElement('div');
+  modal.appendChild(content);
+  content.classList.add('modal-content');
+
+  const body = document.createElement('div');
+  content.appendChild(body);
+  body.classList.add('modal-body');
+  body.innerHTML = 'legend TODO';
+})();
diff --git a/style.css b/style.css
index 07e1dcf..42e0e19 100644
--- a/style.css
+++ b/style.css
@@ -179,10 +179,12 @@ html, body {
 }
 
 #map-control-container[aria-hidden="true"],
-#layer-selection-panel[aria-hidden="true"] {
+#layer-selection-panel[aria-hidden="true"],
+#map-legend-panel[aria-hidden="true"] {
   display: none;
 }
-#layer-selection-panel {
+#layer-selection-panel,
+#map-legend-panel {
   position: relative;
   display: block;
   min-width: min-content;
@@ -195,14 +197,17 @@ html, body {
   --bs-modal-padding: .75rem;
 }
 @media screen and (max-width: 576px) {
-  #layer-selection-panel {
+  #layer-selection-panel,
+  #map-legend-panel {
     max-width: 100%;
     margin-right: .5rem;
     display: none;
   }
   #layer-selection-button,
+  #map-legend-button,
   #export-to-image,
   #map-menu #layer-selection-panel,
+  #map-menu #map-legend-panel,
   #map-menu .ol-full-screen {
     display: none;
   }
@@ -220,7 +225,7 @@ html, body {
   }
 }
 @media screen and (max-width: 768px) {
-  #layer-selection-panel {
+  #map-legend-panel, #layer-selection-panel {
     max-width: 60%;
   }
 }