From c4ebde8951882af02ceb92476612161f81efd75d Mon Sep 17 00:00:00 2001
From: Kitaiti Makoto <KitaitiMakoto@gmail.com>
Date: Tue, 29 Dec 2020 19:40:22 +0900
Subject: [PATCH] Refactor language switcher using class

---
 source/javascripts/site.js | 47 +++++++++++++++++++++++++++-----------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/source/javascripts/site.js b/source/javascripts/site.js
index 00e1459..d209995 100644
--- a/source/javascripts/site.js
+++ b/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);
   }
 });