Merge pull request 'close-switcher' (#114) from close-switcher into main

Reviewed-on: #114

.gitignore

@@ -4,4 +4,6 @@
 .sass-cache
 build/
 trans/
+translate/
 locale/
+.netlify/

source/javascripts/site.js

@@ -3,21 +3,51 @@ document.getElementById('menu').addEventListener('click', evt =>
 )
 
 document.addEventListener('DOMContentLoaded', () => {
-  for (const switcher of document.getElementsByClassName('language-switcher')) {
-    const control = switcher.querySelector('[aria-haspopup]');
-    control.addEventListener('click', event => {
-      const popupId = control.getAttribute('aria-controls');
-      if (! popupId) return;
-      const popup = document.getElementById(popupId);
-      if (! popup) return;
-      if (control.getAttribute('aria-expanded') === 'true') {
-        control.setAttribute('aria-expanded', 'false');
-        popup.setAttribute('aria-hidden', 'true');
-      } else {
-        control.setAttribute('aria-expanded', 'true');
-        popup.setAttribute('aria-hidden', 'false');
+  class LanguageSwitcher {
+    constructor(element) {
+      this.element = element;
+      this.control = this.element.querySelector('[aria-haspopup]');
+      const popupId = this.control.getAttribute('aria-controls');
+      this.popup = document.getElementById(popupId);
+      this.control.addEventListener('click', _ => {this.toggle();});
+    }
+
+    get expanded() {
+      return this.control.getAttribute('aria-expanded') === 'true';
+    }
 
+    toggle() {
+      if (this.expanded) {
+        this.collapse();
+      } else {
+        this.expand();
       }
-    });
+    }
+
+    expand() {
+      if (this.expanded) return;
+      this.control.setAttribute('aria-expanded', 'true');
+      this.popup.setAttribute('aria-hidden', 'false');
+    }
+
+    collapse() {
+      if (! this.expanded) return;
+      this.control.setAttribute('aria-expanded', 'false');
+      this.popup.setAttribute('aria-hidden', 'true');
+    }
   }
+
+  const languageSwitchers = [];
+  for (const switcher of document.getElementsByClassName('language-switcher')) {
+    languageSwitchers.push(new LanguageSwitcher(switcher));
+  }
+
+  document.body.addEventListener('click', event => {
+    if (languageSwitchers.some(ls => ls.element.contains(event.target))) {
+      return;
+    }
+    for (const ls of languageSwitchers) {
+      ls.collapse();
+    }
+  });
 });