Issue 5824 - Refactor CustomSelect on help.eyeo.com

static/js/main.js

Index: static/js/main.js
===================================================================
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,16 +1,27 @@
 (function(){
   document.addEventListener("DOMContentLoaded", function()
   {
 
+    /* ******************************************

[ire, 2017/10/04 08:07:40]

The document was starting to get really long so I added these comments

[juliandoucette, 2017/10/09 23:14:15]

Acknowledged.

We should be consistent about how we format these comments. I don't like those
[extra spaces, extra lines, not 79 or 80 char lines]. If you do, then we could
come up with some interesting way of deciding e.g. bet or game.

[ire, 2017/10/10 11:54:18]

I think I actually prefer your way so updating that now. 

We'll have to find something else to bet on :p

+     *
+     * General
+     * 
+     * ****************************************** */
+
     // Change html class name from "no-js" to "js"
     document.documentElement.className = "js";
 
-    // Toggle Navbar Collapse
+    /* ******************************************
+     *
+     * Navbar
+     * 
+     * ****************************************** */
+
     function toggleNavbarCollapse()
     {
       var navbarCollapseEls = this.parentElement.getElementsByClassName("navbar-collapse");
       for (var i = 0; i < navbarCollapseEls.length; i++)
       {
         navbarCollapseEls[i]
           .classList.toggle("open")
       }
@@ -18,36 +29,63 @@
 
     var toggleNavbarCollapseEls = document.getElementsByClassName("toggle-navbar-collapse");
     for (var i = 0; i < toggleNavbarCollapseEls.length; i++)
     {
       toggleNavbarCollapseEls[i]
         .addEventListener("click", toggleNavbarCollapse, false);
     }
 
-    // Custom Select
-    function onClickCustomSelect()
+    /* ******************************************
+     *
+     * CustomSelect
+     * 
+     * ****************************************** */
+
+    function CustomSelect(select)
     {
-      var options = this.nextElementSibling;
-      if (options.getAttribute("aria-hidden") == "true")
+      this.select = select;
+      this.close();
+      select.addEventListener("click", this._onClick.bind(this), false);
+    }
+
+    CustomSelect.prototype._onClick = function(event)
+    {
+      if (event.target.classList.contains("custom-select-selected"))
       {
-        options.removeAttribute("aria-hidden");
-        this.setAttribute("aria-expanded", "true");
-      }
-      else
-      {
-        options.setAttribute("aria-hidden", "true");
-        this.setAttribute("aria-expanded", "false");
+        var options = this.select.querySelector(".custom-select-options");
+        if (options.getAttribute("aria-hidden") == "true")
+        {
+          this.open();
+        }
+        else
+        {
+          this.close();
+        }
       }
     }
 
-    var customSelectEls = document.getElementsByClassName('custom-select-selected');
-    for (var i = 0; i < customSelectEls.length; i++)
+    CustomSelect.prototype.open = function()
     {
-      customSelectEls[i]
-        .addEventListener("click", onClickCustomSelect, false);
-      customSelectEls[i]
-        .nextElementSibling
+      this.select
+        .querySelector(".custom-select-selected")
+        .setAttribute("aria-expanded", "true");
+
+      this.select
+        .querySelector(".custom-select-options")
+        .removeAttribute("aria-hidden");
+    }
+
+    CustomSelect.prototype.close = function()
+    {
+      this.select
+        .querySelector(".custom-select-selected")
+        .setAttribute("aria-expanded", "false");
+
+    this.select
+        .querySelector(".custom-select-options")
         .setAttribute("aria-hidden", "true");
     }
+    
+    new CustomSelect(document.getElementById("language-select"));
 
   }, false);
 }());