Merge branch 'feat/asidenav' into 'master'

Hover-Menus in Asidenav

See merge request !18

templates/widgets/asidenav.hamlet

@@ -21,13 +21,28 @@ $newline never
           <a .asidenav__link-wrapper href="/course/S2018/ixd/show">
             <div .asidenav__link-triple>IXD
             <div .asidenav__link-label>Interaction Design
+          <ul .asidenav__nested-list>
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ixd/ex">Übungsblätter
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ixd/show">Klausuren
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ixd/show">Übungsgruppen
         <li .asidenav__list-item>
           <a .asidenav__link-wrapper href="/course/S2018/ffp/show">
             <div .asidenav__link-triple>FFP
             <div .asidenav__link-label>Fortgeschrittene Funktionale Programmierung
+          <ul .asidenav__nested-list>
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ffp/ex">Abgaben
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ffp/show">Klausuren
         <li .asidenav__list-item>
           <a .asidenav__link-wrapper href="/course/S2018/dbs/show">
             <div .asidenav__link-triple>DBS
             <div .asidenav__link-label>Datenbanksysteme
+          <ul .asidenav__nested-list>
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/dbs/ex">Übungsgruppen
 
   <div .asidenav__toggler>

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/asidenav.lucius

@@ -4,7 +4,6 @@
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   z-index: 1;
   flex: 0 0 300px;
-  overflow: hidden;
 }
 .main__aside--transitioning {
   transition: flex-basis .2s ease;
@@ -19,6 +18,7 @@
 .main__aside--collapsed {
   width: 50px;
   flex-basis: 50px;
+  overflow: hidden;
 
   .asidenav__box-title {
     width: 50px;
@@ -44,6 +44,9 @@
   margin-top: 20px;
   color: white;
 
+  .js-show-hide__target {
+    overflow: visible;
+  }
   .js-show-hide__toggle::before {
     top: 14px;
     right: 12px;
@@ -76,6 +79,39 @@
   }
 }
 
+.asidenav__nested-list {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: var(--fontbase);
+  transform: translateX(0);
+  opacity: 0;
+  transition: all .2s ease;
+  z-index: -1;
+
+  .asidenav__list-item {
+    background-color: var(--darkbase);
+    color: white;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .asidenav__link-wrapper {
+    padding-left: 13px;
+    padding-right: 13px;
+    border-left: 20px solid white;
+    transition: all .2s ease;
+
+    &:hover {
+      background-color: white;
+      color: var(--darkbase) !important;
+      border-left: 20px solid var(--darkbase);
+    }
+  }
+}
+
 .asidenav__list-item {
   position: relative;
   background-color: white;
@@ -86,6 +122,11 @@
     color: white;
     background-color: var(--darkbase);
 
+    .asidenav__nested-list {
+      transform: translateX(100%);
+      opacity: 1;
+    }
+
     .asidenav__link-wrapper,
     .asidenav__link-label {
       color: white;

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();
 
 });