Issue 2675 - Implemented responsive header for web.eyeo.com

static/js/scripts.js

-document.addEventListener("DOMContentLoaded", function()

[saroyanm, 2016/05/19 07:43:41]

addEventListener is not supported in older versions of IE:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener...

[juliandoucette, 2016/05/19 12:01:45]

My mistake. Will fix.

-{
-  // expand & contract fixed header
+(function(){
+  function addListener(target, event, callback)
+  {
+    if (target.addEventListener)
+      return target.addEventListener(event, callback, false);
+    else
+      return target.attachEvent("on" + event, callback);
+  }
 
-  var header = document.getElementById("header");
-  var headerPadding = 13;

[saroyanm, 2016/05/19 07:43:41]

Detail: you are using the value only in 1 place so no need to assign it to the
variable.

[juliandoucette, 2016/05/19 12:01:45]

For readability? (To give the literal value meaning in the code)

[saroyanm, 2016/05/23 12:39:20]

Acknowledged.

+  function onLoad(callback)
+  {
+    if (document.addEventListener)
+      return addListener(document, "DOMContentLoaded", callback);
+    else
+      return addListener(window, "load", callback);
+  }
 
-  window.addEventListener("scroll", function()
+  onLoad(function()
   {
-    var scrollY = window.scrollY || document.documentElement.scrollTop;
-    if (scrollY < headerPadding)
+    // expand & contract fixed header
+    var header = document.getElementById("header");
+    var headerPadding = 13;
+    addListener(window, "scroll", function()
     {
-      header.className = "top";
-    }
-    else
+      var scrollY = window.scrollY || document.documentElement.scrollTop;
+      if (scrollY < headerPadding)
+        header.className = "top";
+      else
+        header.className = "";
+    });
+    // open & close header menu (on small screens)
+    var menu = document.getElementById("menu");
+    var menuButton = document.getElementById("header-hamburger");
+    addListener(menuButton, "click", function()
     {
-      header.className = "";
-    }
-  }, false);
-
-  // open & close header menu (on small screens)
-
-  var menu = document.getElementById("menu");

[saroyanm, 2016/05/19 07:43:40]

Detail: you can get the menu element using the "header" above instead of
document.

[juliandoucette, 2016/05/19 12:01:45]

Yes. But that is a preference.

document.getElementById is the fastest, best supported, and most widely used
method for this purpose.

element.querySelector is also appropriate, although a little slower, and not
supported < IE8.

I could also loop the header children for element.id === 'menu'. Sacrificing a
little readability and maintainability (if we later moved the element for some
reason).

I would recommend document.getElementById for this purpose. What do you think?

[saroyanm, 2016/05/23 12:39:20]

I agree with you

-  var menuButton = document.getElementById("header-hamberger");
-
-  menuButton.addEventListener("click", function()
-  {
-    if (menu.className === "open")
-    {
-      menu.className = "";
-      menu.setAttribute("aria-expanded", false);
-    }
-    else
-    {
-      menu.className = "open";
-      menu.setAttribute("aria-expanded", true);
-    }
-  }, false);
-}, false);
+      if (menu.className === "open")
+      {
+        menu.className = "";
+        menu.setAttribute("aria-expanded", false);
+      }
+      else
+      {
+        menu.className = "open";
+        menu.setAttribute("aria-expanded", true);
+      }
+    });
+  });
+}());