Merge branch 'feat/asidenav' into 'master'

Hover-Menus in Asidenav See merge request !18
2018-03-29 23:50:06 +02:00 · 2018-03-29 23:50:06 +02:00 · 3c1ff0da67
commit 3c1ff0da67
parent a5edb92182 b0ebc620ae
4 changed files with 145 additions and 65 deletions
--- a/templates/widgets/asidenav.hamlet
+++ b/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>
--- a/templates/widgets/asidenav.julius
+++ b/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) {
-      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);
+    function addListener() {

-    asideEl.addEventListener('mouseover', function(event) {
-      if (!collapsed) {
-        return false;
-      }
-      aboveCollapsedNav = true;
-      console.log(event);
-      window.setTimeout(function() {
-        if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
-          asideEl.classList.add('pseudo-hover');
+      asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
+        collapsed = !collapsed;
+        check();
+      }, false);
+
+      asideEl.addEventListener('transitionend', function(event) {
+        if (event.propertyName === 'opacity') {
+          asideEl.classList.remove(animClass);
        }
-      }, 430);
-    }, false);
-    asideEl.addEventListener('mouseleave', function(event) {
-      aboveCollapsedNav = false;
-      asideEl.classList.remove('pseudo-hover');
-    }, false);
+      }, false);
+
+      window.addEventListener('resize', function() {
+        collapsed = document.body.getBoundingClientRect().width < 999;
+        check();
+      }, 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'));

 });
--- a/templates/widgets/asidenav.lucius
+++ b/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;
--- a/templates/widgets/navbar.julius
+++ b/templates/widgets/navbar.julius
@ -1,28 +1,48 @@
-/**
- * .js-sticky-navbar
- *   ul
- *     li Item 1
- *     li Item 2
- */
+ (function() {
+   'use strict';
+
+   window.utils = window.utils || {};
+
+   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;
-  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();
+  utils.stickynav(document.querySelector('.js-sticky-navbar'));

 });