Issue 2826 - Hamburger menu not visible on all pages

static/js/main.js

 "use strict";
 
 (function()
 {
   function escapeRegExp(string)
   {
     return string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
   }
 
   function hasClass(element, className)
@@ skipping 47 matching lines @@
     language.onclick = function(event)
     {
       if (hasClass(languageSelection, "visible"))
         return;
 
       addClass(languageSelection, "visible");
       stopPropagation(event);
     };
   }
 
-  function getSelectedItem(menu)
+  function navigationClick(e)

[Thomas Greiner, 2015/07/29 11:06:59]

Rename variable to "event" to (1) make it consistent with existing code, (2)
make it more descriptive and (3) to adapt to older versions of IE.

[saroyanm, 2015/07/29 13:55:50]

Done.

   {
-    var items = menu.getElementsByTagName("li");
-    for (var i = 0; i < items.length; i++)
+    var element = e.target;
+    while (true)
     {
-      var item = items[i];
-      if (hasClass(item, "selected"))
-        return item;
+      if (!element)
+        return;
+
+      if (hasClass(element, "selected") || element.id == "hamburger")
+      {
+        if ("querySelector" in document)
+          toggleClass(document.querySelector("header nav>ul"), "visible");

[Thomas Greiner, 2015/07/29 11:06:59]

Don't forget to call `event.preventDefault()` and to return `false` to make sure
that the default action is prevented.

[Thomas Greiner, 2015/07/29 11:06:59]

Detail: Missing whitespaces in selector string.

[saroyanm, 2015/07/29 13:55:50]

Done.

[saroyanm, 2015/07/29 13:55:50]

Done.

+        return;
+      }  
+      element = element.parentElement;
     }
   }
 
   function initMenu()
   {
     if ("querySelector" in document)
-    {
-      var menu = document.querySelector("header nav>ul");
-      var selectedItem = getSelectedItem(menu);
-      if (selectedItem)
-        selectedItem.onclick = function()
-        {
-          toggleClass(menu, "visible");
-        };
-    }
+      document.querySelector("nav").onclick = navigationClick;

[Thomas Greiner, 2015/07/29 11:06:59]

No need to use `document.querySelector`. `document.getElementsByTagName` is
sufficient here.

[saroyanm, 2015/07/29 13:55:50]

Just noticed that there are two nav elements on the page and while the header
menu is by default visible on IE8 I think we can go with this modified version
of querySelector here.

   }
 
   function initFooterSection(section)
   {
     var header = section.getElementsByTagName("h1")[0];
     header.onclick = function()
     {
       toggleClass(section, "visible");
     };
   }
 
   function initFooter()
   {
     var footerContent = document.getElementById("footer-content");
     var footerNav = footerContent.getElementsByTagName("nav")[0];
     var footerNavSections = footerNav.getElementsByTagName("section");
 
     for (var i = 0; i < footerNavSections.length; i++)
     {
       var section = footerNavSections[i];
       initFooterSection(section);
     }
   }
 
   initLanguageSelection();
   initMenu();
   initFooter();
 })();