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 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.

+  function navigationClick(event)
   {
-    var element = e.target;
+    var element = event.target;
     while (true)
     {
       if (!element)
-        return;
+        return false;
 
       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;
+        {
+          event.preventDefault();
+          toggleClass(document.querySelector("header nav > ul"), "visible");
+        }
+        return false;
       }  
       element = element.parentElement;
     }
   }
 
   function initMenu()
   {
     if ("querySelector" in document)
-      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.

+      document.querySelector("header nav").onclick = navigationClick;
   }
 
   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();
 })();