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

static/js/scripts.js

-jQuery(function()
-{
-  var toTop = jQuery("#to-top");
-  toTop.click(function ()
+(function(){
+

[saroyanm, 2016/06/22 07:54:20]

Detail: compared to our other JS codes we do not have so many new lines after
each block and piece of code.

[juliandoucette, 2016/06/23 17:25:42]

Done.

+  function addListener(target, event, callback)
   {
-    jQuery("body,html").animate({
-        scrollTop: 0
-    }, 800);
-    return false;
-  });
-});
-
-jQuery(window).scroll(function()
-{
-  var scrollTop = jQuery(window).scrollTop();
-
-  // Fix header
-  var header = jQuery("#header");
-  var height = header.height();
-  var fixed = (scrollTop > height);
-  if (fixed != header.hasClass("fixed"))
-  {
-    if (fixed)
+    if (target.addEventListener)
     {

[saroyanm, 2016/06/22 07:54:23]

I couldn't find the rule in our coding style whether we mention that single line
condition should be wrapped with the braces, but for consistency reasons with
other JS codes we have, I'll suggest not to have braces for single line
conditions.
Same goes to other single line conditions below.

[juliandoucette, 2016/06/23 17:25:42]

Done.

-      header.css("top", -height);
-      header.animate({top: 0},function()
-      {
-          header.css("top", "");
-      });
-      header.addClass("fixed");
+      return target.addEventListener(event, callback, false);
     }
     else
-      header.removeClass("fixed");
+    {
+      return target.attachEvent("on" + event, callback);
+    }
   }
 
-  // Display "to top" button
-  var toTop = jQuery("#to-top");
-  toTop.css("opacity", scrollTop > 100 ? 1 : 0)
-});
+  function onLoad(callback)
+  {
+    if (document.addEventListener)
+    {
+      return addListener(document, "DOMContentLoaded", callback);
+    }
+    else
+    {
+      return addListener(window, "load", callback);
+    }
+  }
+
+  onLoad(function()
+  {
+    // expand & contract fixed header
+

[saroyanm, 2016/06/22 07:54:19]

Detail: Same as above comment about new lines, same goes to the new lines below.

[juliandoucette, 2016/06/23 17:25:42]

Done.

+    var header = document.getElementById("header");
+    var headerPadding = 13;
+

[saroyanm, 2016/06/22 07:54:23]

Detail: no new line needed here as well

[juliandoucette, 2016/06/23 17:25:43]

Done.

+    addListener(window, "scroll", function()
+    {
+      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()
+    {
+      if (menu.className === "open")
+      {
+        menu.className = "";
+        menu.setAttribute("aria-expanded", false);
+      }
+      else
+      {
+        menu.className = "open";
+        menu.setAttribute("aria-expanded", true);
+      }
+    });
+  });
+
+}());

[saroyanm, 2016/06/22 07:54:19]

Detail: According to our coding styles "Newline at end of file, otherwise no
trailing whitespace"

[juliandoucette, 2016/06/23 17:25:42]

Done.