Issue 4925 - Create accordion component for Help Center

static/js/main.js

 (function(){
   document.addEventListener("DOMContentLoaded", function()
   {
 
     // Change html class name from "no-js" to "js"
     document.documentElement.className = "js";
 
     // Toggle Navbar Collapse
     function toggleNavbarCollapse()
     {
       var navbarCollapseEls = this.parentElement.getElementsByClassName("navbar-collapse");
       for (var i = 0; i < navbarCollapseEls.length; i++)
       {
         navbarCollapseEls[i]
           .classList.toggle("open")
       }
     }
 
     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()
+    {
+      var options = this.nextElementSibling;
+      if (options.getAttribute("aria-hidden") == "true")
+      {
+        options.removeAttribute("aria-hidden");
+        this.setAttribute("aria-expanded", "true");
+      }
+      else
+      {
+        options.setAttribute("aria-hidden", "true");
+        this.setAttribute("aria-expanded", "false");
+      }
+    }
+
+    var customSelectEls = document.getElementsByClassName('custom-select-selected');
+    for (var i = 0; i < customSelectEls.length; i++)
+    {
+      customSelectEls[i]
+        .addEventListener("click", onClickCustomSelect, false);
+      customSelectEls[i]
+        .nextElementSibling
+        .setAttribute("aria-hidden", "true");
+    }
+
     // Accordion menu
 
-    function setupAccordionMenu(accordionEl)
+    function Accordion(accordion)
     {
-      var accordionButtons = accordionEl.getElementsByClassName('accordion-toggle-button');
+      this.accordion = accordion;
       
-      for ( var i = 0; i < accordionButtons.length; i++ )
+      var accordionButtons = this.accordion.getElementsByClassName('accordion-toggle-button');
+      for (var i = 0; i < accordionButtons.length; i++)
       {
-        accordionButtons[i]
-          .addEventListener("click", toggleAccordionSection, false);
-        accordionButtons[i]
-          .addEventListener("keydown", navigateAccordionHeadings, false);
-
-        // Close all sections besides the first
-        if ( i !== 0 )
+        // Close all sections except the first
+        if (i !== 0)
         {
           accordionButtons[i].setAttribute("aria-expanded", "false");
-          accordionButtons[i].setAttribute("aria-disabled", "false");
           document
             .getElementById( accordionButtons[i].getAttribute("aria-controls") )

[juliandoucette, 2017/10/09 21:18:16]

NIT: Extra whitespace inside brackets

(The same applies elsewhere)

             .setAttribute("hidden", "true");
         }
       }
+
+      this.accordion
+        .addEventListener("click", this._onClick.bind(this), false);
+      this.accordion
+        .addEventListener("keydown", this._onKeyDown.bind(this), false);
     }
-    
-    function toggleAccordionSection()
+
+    Accordion.prototype.toggleSection = function(clickedButton)
     {
       // Hide currently expanded section
-      var accordion = this.parentElement.parentElement;
-      var expandedButton = accordion.querySelector("button[aria-expanded='true']");
-      if ( expandedButton )
+      var expandedButton = this.accordion.querySelector("button[aria-expanded='true']");
+      if (expandedButton)
       {
         expandedButton.setAttribute("aria-expanded", "false");
-        expandedButton.setAttribute("aria-disabled", "false");
         document
           .getElementById( expandedButton.getAttribute("aria-controls") )
           .setAttribute("hidden", "true");
       }
 
-      if ( expandedButton === this ) return;
+      // If currently expanded section is clicked
+      if (expandedButton === clickedButton) return;
 
       // Expand new section
-      this.setAttribute("aria-expanded", "true");
-      this.setAttribute("aria-disabled", "true");
+      clickedButton.setAttribute("aria-expanded", "true");
       document
-        .getElementById( this.getAttribute("aria-controls") )
+        .getElementById( clickedButton.getAttribute("aria-controls") )
         .removeAttribute("hidden");
     }
 
-    function navigateAccordionHeadings(e)
+    Accordion.prototype.focusNextSection = function()
     {
-      if ( e.keyCode !== 38 && e.keyCode !== 40 ) return;
+      var currentFocus = document.activeElement;
+      var nextheading = currentFocus.parentElement.nextElementSibling.nextElementSibling;
 
-      var accordion = this.parentElement.parentElement;
-
-      // Direction == up
-      if ( e.keyCode == 38 )
+      if (nextheading)
       {
-        var prevEl = this.parentElement.previousElementSibling;
-        if ( prevEl )
-        {
-          prevEl // .accordion-body
-            .previousElementSibling // .accordion-heading
-            .firstElementChild // .accordion-toggle-button
-            .focus();
-        }
-        else
-        {
-          accordion
-            .lastElementChild // .accordion-body
-            .previousElementSibling // .accordion-heading
-            .firstElementChild // .accordion-toggle-button
-            .focus();
-        }
+        nextheading // .accordion-heading
+          .firstElementChild // .accordion-toggle-button
+          .focus();
       }
-
-      // Direction == down
-      else if ( e.keyCode == 40 )
+      else
       {
-        var nextheading = this.parentElement.nextElementSibling.nextElementSibling;
-        if ( nextheading )
-        {
-          nextheading // .accordion-heading
-            .firstElementChild // .accordion-toggle-button
-            .focus();
-        }
-        else
-        {
-          accordion
-            .firstElementChild // .accordion-heading
-            .firstElementChild // .accordion-toggle-button
-            .focus();
-        }
+        this.accordion
+          .firstElementChild // .accordion-heading
+          .firstElementChild // .accordion-toggle-button
+          .focus();
       }
     }
 
-    var accordionMenus = document.getElementsByClassName('accordion');
-    for (var i = 0; i < accordionMenus.length; i++)
+    Accordion.prototype.focusPrevSection = function()
     {
-      setupAccordionMenu( accordionMenus[i] );
+      var currentFocus = document.activeElement;
+      var prevAccordionBody = currentFocus.parentElement.previousElementSibling;
+
+      if (prevAccordionBody)
+      {
+        prevAccordionBody // .accordion-body
+          .previousElementSibling // .accordion-heading
+          .firstElementChild // .accordion-toggle-button
+          .focus();
+      }
+      else
+      {
+        this.accordion
+          .lastElementChild // .accordion-body
+          .previousElementSibling // .accordion-heading
+          .firstElementChild // .accordion-toggle-button
+          .focus();
+      }
+    }
+
+    Accordion.prototype._onKeyDown = function(event)
+    {
+      if (!event.target.classList.contains("accordion-toggle-button")) return;
+
+      if (event.key == "ArrowUp" || event.keyCode == 38)
+      {
+        this.focusPrevSection();
+      }
+      else if (event.key == "ArrowDown" || event.keyCode == 40)
+      {
+        this.focusNextSection();
+      }
+    }
+
+    Accordion.prototype._onClick = function(event)
+    {
+      if (!event.target.classList.contains("accordion-toggle-button")) return;
+      
+      this.toggleSection(event.target);
+    }
+
+    var accordions = document.getElementsByClassName('accordion');
+    for (var i = 0; i < accordions.length; i++)
+    {
+      new Accordion(accordions[i]);
     }
 
   }, false);
 }());