Prototyped animation for navigation on desktop

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%';
-  //   var rect = el.getBoundingClientRect();
-  //   el.style.maxHeight = '0';
+  //   el.style.maxHeight = '100%'; // class !?
   //
-  //   // console.log(rect.height);
-  //   el.style.maxHeight = '120px';
+  //   var rect = el.getBoundingClientRect();
+  //
+  //   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);
     });