Refactor language switcher using class

source/javascripts/site.js

@@ -3,20 +3,41 @@ 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');
+  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 {
-        control.setAttribute('aria-expanded', 'true');
-        popup.setAttribute('aria-hidden', 'false');
+        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');
+    }
+  }
+
+  for (const switcher of document.getElementsByClassName('language-switcher')) {
+    new LanguageSwitcher(switcher);
   }
 });