navigation cleanup

templates/widgets/asidenav.julius

@@ -3,9 +3,18 @@
 
   window.utils = window.utils || {};
 
-  window.utils.aside = function(asideEl, topNav) {
+  // Defines a function to turn an element into an interactive aside-navigation.
+  // If the small is smaller than 999px the navigation is automatically
+  // collapsed - even when dynamically resized (e.g. switching from portatit
+  // to landscape).
+  // The can user may also manually collapse and expand the navigation by
+  // using the little arrow at the bottom.
+  window.utils.aside = function(asideEl) {
     var collapsed = false;
     var collClass = 'main__aside--collapsed';
+    // animClass used to enable transitions only when needed so that
+    // (potentially happening) initial collapse of the asidenav
+    // goes unnoticed by the user.
     var animClass = 'main__aside--transitioning';
     var aboveCollapsedNav = false;
 
@@ -15,24 +24,14 @@
       if (document.body.getBoundingClientRect().width < 999 || collLS) {
         asideEl.classList.add(collClass);
         collapsed = true;
-          if (topNav) {
-            topNav.style.paddingLeft = '90px';
-          window.setTimeout(function() {
-                topNav.classList.add('navbar--animated');
-          }, 200);
-        }
-      } else if (topNav) {
-        topNav.classList.add('navbar--animated');
       }
+      addListener();
     }
 
     function check() {
       if (collapsed && !hasClass() || !collapsed && hasClass()) {
         asideEl.classList.add(animClass);
         asideEl.classList.toggle(collClass, collapsed);
-          if (topNav) {
-            topNav.style.paddingLeft = collapsed ? '90px' : '';
-        }
         window.localStorage.setItem('asidenavCollapsed', collapsed);
       }
     }
@@ -41,41 +40,46 @@
       return asideEl.classList.contains(collClass);
     }
 
-    asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
+    function addListener() {
-      collapsed = !collapsed;
-      check();
-    }, false);
-    asideEl.addEventListener('transitionend', function(event) {
-      if (event.propertyName === 'opacity') {
-        asideEl.classList.remove(animClass);
-      }
-    }, false);
-    window.addEventListener('resize', function() {
-      collapsed = document.body.getBoundingClientRect().width < 999;
-      check();
-    }, false);
 
-    asideEl.addEventListener('mouseover', function(event) {
+      asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
-      if (!collapsed) {
+        collapsed = !collapsed;
-        return false;
+        check();
-      }
+      }, false);
-      aboveCollapsedNav = true;
+
-      console.log(event);
+      asideEl.addEventListener('transitionend', function(event) {
-      window.setTimeout(function() {
+        if (event.propertyName === 'opacity') {
-        if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
+          asideEl.classList.remove(animClass);
-          asideEl.classList.add('pseudo-hover');
         }
-      }, 430);
+      }, false);
-    }, false);
+
-    asideEl.addEventListener('mouseleave', function(event) {
+      window.addEventListener('resize', function() {
-      aboveCollapsedNav = false;
+        collapsed = document.body.getBoundingClientRect().width < 999;
-      asideEl.classList.remove('pseudo-hover');
+        check();
-    }, false);
+      }, false);
+
+      asideEl.addEventListener('mouseover', function(event) {
+        if (!collapsed) {
+          return false;
+        }
+        aboveCollapsedNav = true;
+        window.setTimeout(function() {
+          if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
+            asideEl.classList.add('pseudo-hover');
+          }
+        }, 800);
+      }, false);
+
+      asideEl.addEventListener('mouseleave', function(event) {
+        aboveCollapsedNav = false;
+        asideEl.classList.remove('pseudo-hover');
+      }, false);
+    }
   };
 })();
 
 document.addEventListener('DOMContentLoaded', function() {
 
-    utils.aside(document.querySelector('.main__aside'), document.querySelector('.navbar'));
+    utils.aside(document.querySelector('.main__aside'));
 
 });

templates/widgets/navbar.julius

@@ -1,28 +1,48 @@
-/**
+ (function() {
- * .js-sticky-navbar
+   'use strict';
- *   ul
+
- *     li Item 1
+   window.utils = window.utils || {};
- *     li Item 2
+
- */
+   window.utils.stickynav = function(nav) {
+     var ticking = false;
+
+     init();
+     function init() {
+       nav.style.paddingLeft = document.body.getBoundingClientRect().width < 999 ? '90px' : '';
+       window.setTimeout(function() {
+         nav.classList.add('navbar--animated');
+       }, 200);
+       checkScroll();
+       addListener();
+     }
+
+     // checks scroll direction and shows/hides navbar accordingly
+     function checkScroll() {
+       var sticky = window.scrollY > 0;
+       nav.classList.toggle('navbar--sticky', sticky);
+       ticking = false;
+     }
+
+     function addListener() {
+       window.addEventListener('scroll', function(e) {
+         if (!ticking) {
+           window.requestAnimationFrame(checkScroll);
+           ticking = true;
+         }
+       }, false);
+     }
+
+     window.addEventListener('resize', function() {
+       nav.style.paddingLeft = document.body.getBoundingClientRect().width < 999 ? '90px' : '';
+     }, false);
+   }
+
+
+
+})();
 
 document.addEventListener('DOMContentLoaded', function() {
 
-  var ticking = false;
+  utils.stickynav(document.querySelector('.js-sticky-navbar'));
-  var nav = document.querySelector('.js-sticky-navbar');
-
-  window.addEventListener('scroll', function(e) {
-      if (!ticking) {
-          window.requestAnimationFrame(checkScroll);
-          ticking = true;
-      }
-  }, false);
-
-  // checks scroll direction and shows/hides navbar accordingly
-  function checkScroll() {
-      var sticky = window.scrollY > 0;
-      nav.classList.toggle('navbar--sticky', sticky);
-      ticking = false;
-  }
-  checkScroll();
 
 });