Add template for a legend dialog.

1 files changed, 77 insertions, 14 deletions

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';
+})();