Refactor button selection logic.

Thereby making it easier to extend if needs be.

1 files changed, 40 insertions, 69 deletions

diff --git a/main.js b/main.js
index 3814a67..693dd99 100644
--- a/main.js
+++ b/main.js
@@ -277,79 +277,50 @@ if (window.location !== window.parent.location) {
 
 /* layer selection button and legend */
 if (window.location === window.parent.location) {
-  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.title = 'Lagerval';
-    btn.setAttribute('aria-label', btn.title);
-    btn.setAttribute('aria-expanded', 'false');
-    btn.classList.add('btn', 'btn-light');
-
-    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.title = 'Teckenförklaring';
-    btn.setAttribute('aria-label', btn.title);
-    btn.setAttribute('aria-expanded', 'false');
-    btn.classList.add('btn', 'btn-light');
-
-    const i = document.createElement('i');
-    btn.appendChild(i);
-    i.classList.add('bi', 'bi-list-task');
-
-    return btn;
-  })();
+  const buttons = Object.fromEntries([
+      {id: 'layer-selection', title: 'Lagerval', bi: 'stack'},
+      {id: 'map-legend', title: 'Teckenförklaring', bi: 'list-task'},
+    ].map(function(x) {
+      const div = document.createElement('div');
+      menu.appendChild(div);
+      div.id = x.id + '-button';
+      div.classList.add('ol-unselectable', 'ol-control');
 
-  const panel = document.getElementById('layer-selection-panel');
-  btn.onclick = function(event) {
-    if (btn.getAttribute('aria-expanded') === 'true') {
-      panel.setAttribute('aria-hidden', 'true');
+      const btn = document.createElement('button');
+      div.appendChild(btn);
+      btn.type = 'button';
+      btn.title = x.title;
+      btn.setAttribute('aria-label', btn.title);
       btn.setAttribute('aria-expanded', 'false');
-      btn.classList.replace('btn-dark', 'btn-light');
-    } else {
-      if (btn2.getAttribute('aria-expanded') === 'true') {
-        btn2.click();
-      }
-      panel.setAttribute('aria-hidden', 'false');
-      btn.setAttribute('aria-expanded', 'true');
-      btn.classList.replace('btn-light', 'btn-dark');
-    }
-  };
-
-  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.replace('btn-dark', 'btn-light');
-    } else {
+      btn.classList.add('btn', 'btn-light');
+
+      const i = document.createElement('i');
+      btn.appendChild(i);
+      i.classList.add('bi', 'bi-' + x.bi);
+      return [x.id, btn]
+  }));
+
+  Object.keys(buttons).forEach(function(id) {
+    const panel = document.getElementById(id + '-panel');
+    const btn = buttons[id];
+    btn.onclick = function(event) {
       if (btn.getAttribute('aria-expanded') === 'true') {
-        btn.click();
+        panel.setAttribute('aria-hidden', 'true');
+        btn.setAttribute('aria-expanded', 'false');
+        btn.classList.replace('btn-dark', 'btn-light');
+      } else {
+        Object.values(buttons).forEach(function(btn2) {
+          /* close all other panels */
+          if (!btn.isEqualNode(btn2) && btn2.getAttribute('aria-expanded') === 'true') {
+            btn2.click();
+          }
+        });
+        panel.setAttribute('aria-hidden', 'false');
+        btn.setAttribute('aria-expanded', 'true');
+        btn.classList.replace('btn-light', 'btn-dark');
       }
-      panel2.setAttribute('aria-hidden', 'false');
-      btn2.setAttribute('aria-expanded', 'true');
-      btn2.classList.replace('btn-light', 'btn-dark');
-    }
-  };
+    };
+  });
 }
 
 /* fullscreen control */