feat(i18n): close language select on click anywhere

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,
+];

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,
 ];

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'}