From 97a29ec68cb64e4264afc1d6a95e73e608b33748 Mon Sep 17 00:00:00 2001
From: Gregor Kleen <kleen@cip.ifi.lmu.de>
Date: Sun, 20 Oct 2019 16:48:14 +0200
Subject: [PATCH] feat(i18n): close language select on click anywhere

---
 frontend/src/utils/navbar/navbar.js           | 48 +++++++++++++++++++
 .../src/utils/navbar/navbar.scss              |  0
 frontend/src/utils/utils.js                   |  2 +
 templates/widgets/navbar/navbar.hamlet        |  2 +-
 4 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/utils/navbar/navbar.js
 rename templates/widgets/navbar/navbar.lucius => frontend/src/utils/navbar/navbar.scss (100%)

diff --git a/frontend/src/utils/navbar/navbar.js b/frontend/src/utils/navbar/navbar.js
new file mode 100644
index 000000000..95af958f4
--- /dev/null
+++ b/frontend/src/utils/navbar/navbar.js
@@ -0,0 +1,48 @@
+import { Utility } from '../../core/utility';
+import './navbar.scss';
+
+
+export const LANGUAGE_SELECT_UTIL_SELECTOR = '[uw-language-select]';
+const LANGUAGE_SELECT_INITIALIZED_CLASS = 'language-select--initialized';
+
+
+@Utility({
+  selector: LANGUAGE_SELECT_UTIL_SELECTOR,
+})
+export class LanguageSelectUtil {
+  _element;
+  checkbox;
+  
+  constructor(element) {
+    if (!element) {
+      throw new Error('Language Select utility needs to be passed an element!');
+    }
+
+    if (element.classList.contains(LANGUAGE_SELECT_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    this._element = element;
+    this.checkbox = element.querySelector('#lang-checkbox');
+
+    window.addEventListener('click', event => this.close(event));
+
+    element.classList.add(LANGUAGE_SELECT_INITIALIZED_CLASS);
+  }
+
+  close(event) {
+    if (!this._element.contains(event.target) && window.document.contains(event.target)) {
+      this.checkbox.checked = false;
+    }
+  }
+
+  destroy() {
+    // TODO
+  }
+
+}
+
+
+export const NavbarUtils = [
+  LanguageSelectUtil,
+];
diff --git a/templates/widgets/navbar/navbar.lucius b/frontend/src/utils/navbar/navbar.scss
similarity index 100%
rename from templates/widgets/navbar/navbar.lucius
rename to frontend/src/utils/navbar/navbar.scss
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index 06e095af6..b539edb44 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -10,6 +10,7 @@ import { MassInput } from './mass-input/mass-input';
 import { Modal } from './modal/modal';
 import { Tooltip } from './tooltips/tooltips';
 import { CourseTeaser } from './course-teaser/course-teaser';
+import { NavbarUtils } from './navbar/navbar';
 
 export const Utils = [
   Alerts,
@@ -25,4 +26,5 @@ export const Utils = [
   ShowHide,
   Tooltip,
   CourseTeaser,
+  ...NavbarUtils,
 ];
diff --git a/templates/widgets/navbar/navbar.hamlet b/templates/widgets/navbar/navbar.hamlet
index 77e1184a9..0f6d227fb 100644
--- a/templates/widgets/navbar/navbar.hamlet
+++ b/templates/widgets/navbar/navbar.hamlet
@@ -37,7 +37,7 @@ $newline never
               $else
                 ^{navbarItem (menuItem, menuIdent)}
           $of _
-      <li .navbar__list-item--lang-wrapper>
+      <li .navbar__list-item--lang-wrapper uw-language-select>
         <input type="checkbox" id="lang-checkbox" uw-no-checkbox>
         <div id="lang-dropdown">
           ^{langFormView'}