Prototyped animation for navigation on desktop

material/base.html

@@ -91,7 +91,7 @@
       var base_url = '{{ base_url }}';
       var repo_url = '{{ repo_url }}';
     </script>
-    <script src="{{ base_url }}/assets/javascripts/application-caa33c61a6.js"></script>
+    <script src="{{ base_url }}/assets/javascripts/application-db87fe00d3.js"></script>
     {% for path in extra_javascript %}
       <script src="{{ path }}"></script>
     {% endfor %}

material/partials/nav-item.html

@@ -1,39 +1,37 @@
-{% if nav_item.children or nav_item == current_page %}
+{% if nav_item.children %}
   <li class="md-nav__item md-nav__item--nested">
-    {% if nav_item == current_page %}
+    {% if nav_item.active %}
-      {% set path = "toc" %}
-    {% endif %}
-    {% if nav_item.active and not nav_item == current_page %}
       <input class="md-toggle md-nav__toggle" type="checkbox" id="{{ path }}" checked>
     {% else %}
       <input class="md-toggle md-nav__toggle" type="checkbox" id="{{ path }}">
     {% endif %}
-    {% if nav_item == current_page %}
+    <label class="md-nav__link" for="{{ path }}">
-      <label class="md-nav__link md-nav__link--active" for="{{ path }}">
+      {{ nav_item.title }}
+    </label>
+    <nav class="md-nav">
+      <label class="md-nav__title" for="{{ path }}">
         {{ nav_item.title }}
       </label>
-      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active">
+      <ul class="md-nav__list">
-        {{ nav_item.title }}
+        {% for nav_item in nav_item.children %}
-      </a>
+          {% set temp = path %}
-      {% include "partials/toc.html" %}
+          {% set path = path + "-" + loop.index | string %}
-    {% else %}
+          {% include "partials/nav-item.html" %}
-      <label class="md-nav__link" for="{{ path }}">
+          {% set path = temp %}
-        {{ nav_item.title }}
+        {% endfor %}
-      </label>
+      </ul>
-      <nav class="md-nav">
+    </nav>
-        <label class="md-nav__title" for="{{ path }}">
+  </li>
-          {{ nav_item.title }}
+{% elif nav_item == current_page %}
-        </label>
+  <li class="md-nav__item">
-        <ul class="md-nav__list">
+    <input class="md-toggle md-nav__toggle" type="checkbox" id="toc">
-          {% for nav_item in nav_item.children %}
+    <label class="md-nav__link md-nav__link--active" for="toc">
-            {% set temp = path %}
+      {{ nav_item.title }}
-            {% set path = path + "-" + loop.index | string %}
+    </label>
-            {% include "partials/nav-item.html" %}
+    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active">
-            {% set path = temp %}
+      {{ nav_item.title }}
-          {% endfor %}
+    </a>
-        </ul>
+    {% include "partials/toc.html" %}
-      </nav>
-    {% endif %}
   </li>
 {% else %}
   <li class="md-nav__item">

src/assets/javascripts/application.js

@@ -29,6 +29,7 @@
 import FastClick from 'fastclick';
 import Sidebar from './components/sidebar';
 import ScrollSpy from './components/scrollspy';
+import Expander from './components/expander';
 
 /* ----------------------------------------------------------------------------
  * Application
@@ -118,16 +119,78 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   });
 
+  // var toc = new Sidebar('.md-sidebar--secondary');
+  // toc.listen();
+
+  var toggles = document.querySelectorAll('.md-nav__item--nested > .md-nav__link');
+  [].forEach.call(toggles, (toggle) => {
+    let nav = toggle.nextElementSibling;
+
+    // 1.
+
+    nav.style.maxHeight = nav.getBoundingClientRect().height + 'px';
+
+    toggle.addEventListener('click', function () {
+      let first = nav.getBoundingClientRect().height;
+      if (first) {
+        console.log('closing');
+        nav.style.maxHeight = first + 'px'; // reset!
+        requestAnimationFrame(() => {
+
+          nav.classList.add('md-nav--transitioning');
+          nav.style.maxHeight = '0px';
+        });
+      } else {
+        console.log('opening');
+
+        /* Toggle and read height */
+        nav.style.maxHeight = '';
+
+        nav.classList.add('md-nav--toggled');
+        let last = nav.getBoundingClientRect().height;
+        nav.classList.remove('md-nav--toggled');
+
+        // Initial state
+        nav.style.maxHeight = '0px';
+
+        /* Enable animations */
+        requestAnimationFrame(() => {
+          nav.classList.add('md-nav--transitioning');
+          nav.style.maxHeight = last + 'px';
+        });
+      }
+
+    });
+
+    // Capture the end with transitionend
+    nav.addEventListener('transitionend', function() {
+      this.classList.remove('md-nav--transitioning');
+      if (this.getBoundingClientRect().height > 0) {
+        this.style.maxHeight = '100%';
+      }
+    });
+  });
+
   // document.querySelector('[for="nav-3"]').addEventListener('click', function() {
   //   var el = document.querySelector('[for="nav-3"] + nav');
   //
   //   // TODO: do via class and disable transforms!!!
-  //   el.style.maxHeight = '100%';
+  //   el.style.maxHeight = '100%'; // class !?
-  //   var rect = el.getBoundingClientRect();
-  //   el.style.maxHeight = '0';
   //
-  //   // console.log(rect.height);
+  //   var rect = el.getBoundingClientRect();
-  //   el.style.maxHeight = '120px';
+  //
+  //   console.log(rect);
+  //
+  //   el.style.maxHeight = '0px';
+  //   requestAnimationFrame(function() {
+  //     el.classList.add('md-nav--transitioning');
+  //     el.style.maxHeight = rect.height + 'px';
+  //   });
+  //
+  //   // Capture the end with transitionend
+  //   el.addEventListener('transitionend', function() {
+  //     el.classList.remove('md-nav--transitioning');
+  //   });
   // });
 
 

src/assets/javascripts/components/expander.js

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+'use strict';
+
+/* ----------------------------------------------------------------------------
+ * Navigation expander
+ * ------------------------------------------------------------------------- */
+
+class Expander {
+
+  /**
+   * Constructor
+   *
+   * @constructor
+   * @param {(string|HTMLElement)} el - Selector or HTML element
+   */
+  constructor(el) {
+    this.el_ = (typeof el === 'string') ? document.querySelector(el) : el;
+
+    /* Event listener */
+    this.handler_ = ev => {
+      this.update(ev);
+    };
+  };
+
+  /**
+   * Update state of expandable element
+   *
+   * @param {Event} ev - Event
+   */
+  update(ev) {
+    console.log("foo");
+  };
+
+  /**
+   * Reset state of expandable element
+   */
+  reset() {
+    // this.el_.classList.remove('md-js__sidebar--locked');
+    // this.el_.style.height = '';
+    //
+    // /* Reset parameters */
+    // this.height_ = 0;
+    // this.locked_ = false;
+  };
+
+  /**
+   * Register listener for all relevant events
+   */
+  listen() {
+    ['click'].forEach(name => {
+      window.addEventListener(name, this.handler_, false);
+    });
+  };
+
+  /**
+   * Unregister listener for all relevant events
+   */
+  unlisten() {
+    ['click'].forEach(name => {
+      window.removeEventListener(name, this.handler_, false);
+    });
+
+    /* Perform reset */
+    this.reset();
+  };
+}
+
+/* ----------------------------------------------------------------------------
+ * Exports
+ * ------------------------------------------------------------------------- */
+
+export default Expander;

src/assets/javascripts/components/scrollspy.js

@@ -42,7 +42,7 @@ class ScrollSpy {
     this.offset_ = window.pageYOffset;
 
     /* Event listener */
-    this.handler_ = (ev) => {
+    this.handler_ = ev => {
       this.update(ev);
     };
   }
@@ -57,7 +57,7 @@ class ScrollSpy {
     /* Scroll direction is down */
     if (this.offset_ <= window.pageYOffset) {
       for (let i = this.index_ + 1; i < this.el_.length; i++) {
-        let anchor = document.querySelector(this.el_[i].hash);
+        let anchor = document.querySelector(this.el_[i].hash);                  // TODO: improve performance by caching
         if (anchor.offsetTop <= window.pageYOffset) {
           if (i > 0)
             this.el_[i - 1].classList.add('md-nav__link--marked');
@@ -89,7 +89,7 @@ class ScrollSpy {
    * Reset state of sidebar
    */
   reset() {
-    [].forEach.call(this.el_, (el) => {
+    [].forEach.call(this.el_, el => {
       el.classList.remove('md-nav__link--marked');
     });
   }
@@ -98,7 +98,7 @@ class ScrollSpy {
    * Register listener for all relevant events
    */
   listen() {
-    ['scroll', 'resize', 'orientationchange'].forEach((name) => {
+    ['scroll', 'resize', 'orientationchange'].forEach(name => {
       window.addEventListener(name, this.handler_, false);
     });
 
@@ -110,7 +110,7 @@ class ScrollSpy {
    * Unregister listener for all relevant events
    */
   unlisten() {
-    ['scroll', 'resize', 'orientationchange'].forEach((name) => {
+    ['scroll', 'resize', 'orientationchange'].forEach(name => {
       window.removeEventListener(name, this.handler_, false);
     });
 

src/assets/javascripts/components/sidebar.js

@@ -42,7 +42,7 @@ class Sidebar {
     this.locked_ = false;
 
     /* Event listener */
-    this.handler_ = (ev) => {
+    this.handler_ = ev => {
       this.update(ev);
     };
   };
@@ -103,7 +103,7 @@ class Sidebar {
    * Register listener for all relevant events
    */
   listen() {
-    ['scroll', 'resize', 'orientationchange'].forEach((name) => {
+    ['scroll', 'resize', 'orientationchange'].forEach(name => {
       window.addEventListener(name, this.handler_, false);
     });
 
@@ -115,7 +115,7 @@ class Sidebar {
    * Unregister listener for all relevant events
    */
   unlisten() {
-    ['scroll', 'resize', 'orientationchange'].forEach((name) => {
+    ['scroll', 'resize', 'orientationchange'].forEach(name => {
       window.removeEventListener(name, this.handler_, false);
     });
 

src/assets/stylesheets/layout/_nav.scss

@@ -330,6 +330,12 @@
   // [screen +]: Tree-like navigation
   @include break-from-device(screen) {
 
+    // Animation is only possible if JavaScript is available, as the max-height
+    // property must be calculated before transitioning.
+    &.md-nav--transitioning {
+      transition: max-height 0.4s cubic-bezier(0.86, 0.0, 0.07, 1.0);
+    }
+
     // Hide nested navigation by default
     .md-nav__toggle ~ & {
       max-height: 0;
@@ -337,7 +343,8 @@
     }
 
     // Expand nested navigation, if toggle is checked
-    .md-nav__toggle:checked ~ & {
+    .md-nav__toggle:checked ~ &,
+    &.md-nav--toggled {
       max-height: 100%;
     }
 
@@ -356,14 +363,15 @@
       // Item contains a nested list
       .md-nav__item--nested > &::after {
         display: inline-block;
-        transform-origin: 0.5em 0.475em;
+        transform-origin: 0.45em 0.485em;
-        transition: transform 0.25s;
+        transform-style: preserve-3d;
+        transition: transform 0.4s;
         vertical-align: -0.125em;
       }
 
       // Rotate icon for expanded lists
       .md-nav__item--nested .md-nav__toggle:checked ~ &::after {
-        transform: rotate(180deg);
+        transform: rotateX(180deg);
       }
     }
   }

src/partials/nav-item.html

@@ -21,14 +21,11 @@
 -->
 
 <!-- Main navigation item with nested items -->
-{% if nav_item.children or nav_item == current_page %}
+{% if nav_item.children %}
   <li class="md-nav__item md-nav__item--nested">
-    {% if nav_item == current_page %}
-      {% set path = "toc" %}
-    {% endif %}
 
     <!-- Active checkbox expands items contained within nested section -->
-    {% if nav_item.active and not nav_item == current_page %}
+    {% if nav_item.active %}
       <input class="md-toggle md-nav__toggle" type="checkbox"
           id="{{ path }}" checked />
     {% else %}
@@ -37,38 +34,44 @@
     {% endif %}
 
     <!-- Expand active pages -->
-    {% if nav_item == current_page %}
+    <label class="md-nav__link" for="{{ path }}">
-      <label class="md-nav__link md-nav__link--active"
+      {{ nav_item.title }}
-          for="{{ path }}">
+    </label>
+    <nav class="md-nav">
+      <label class="md-nav__title" for="{{ path }}">
         {{ nav_item.title }}
       </label>
-      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
+      <ul class="md-nav__list">
-          class="md-nav__link md-nav__link--active">
-        {{ nav_item.title }}
-      </a>
 
-      <!-- Show table of contents -->
+        <!-- Render nested item list -->
-      {% include "partials/toc.html" %}
+        {% for nav_item in nav_item.children %}
-    {% else %}
+          {% set temp = path %}
-      <label class="md-nav__link" for="{{ path }}">
+          {% set path = path + "-" + loop.index | string %}
-        {{ nav_item.title }}
+          {% include "partials/nav-item.html" %}
-      </label>
+          {% set path = temp %}
-      <nav class="md-nav">
+        {% endfor %}
-        <label class="md-nav__title" for="{{ path }}">
+      </ul>
-          {{ nav_item.title }}
+    </nav>
-        </label>
+  </li>
-        <ul class="md-nav__list">
 
-          <!-- Render nested item list -->
+<!-- Main navigation item with nested items -->
-          {% for nav_item in nav_item.children %}
+{% elif nav_item == current_page %}
-            {% set temp = path %}
+  <li class="md-nav__item">
-            {% set path = path + "-" + loop.index | string %}
+
-            {% include "partials/nav-item.html" %}
+    <!-- Active checkbox expands items contained within nested section -->
-            {% set path = temp %}
+    <input class="md-toggle md-nav__toggle" type="checkbox" id="toc" />
-          {% endfor %}
+
-        </ul>
+    <!-- Expand active pages -->
-      </nav>
+    <label class="md-nav__link md-nav__link--active" for="toc">
-    {% endif %}
+      {{ nav_item.title }}
+    </label>
+    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
+        class="md-nav__link md-nav__link--active">
+      {{ nav_item.title }}
+    </a>
+
+    <!-- Show table of contents -->
+    {% include "partials/toc.html" %}
   </li>
 
 <!-- Main navigation item -->