Add -webkit-overflow-scrolling via JavaScript on navigation

material/base.html

@@ -36,7 +36,7 @@
       {% include "partials/webfonts.html" %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-f2889ef118.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-7515027b77.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-535e87ca3f.palette.css">
       {% endif %}
@@ -106,7 +106,7 @@
           <script src="https://cdn.mathjax.org/{{ path }}"></script>
         {% endif %}
       {% endfor %}
-      <script src="{{ base_url }}/assets/javascripts/application-34d9ef09a7.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-7d27d432c4.js"></script>
       <script>
         /* Configuration for application */
         var config = {

material/partials/nav-item.html

@@ -8,10 +8,8 @@
     <label class="md-nav__link" for="{{ path }}">
       {{ nav_item.title }}
     </label>
-    <nav class="md-nav" data-md-collapse>
-      <label class="md-nav__title" for="{{ path }}">
-        {{ nav_item.title }}
-      </label>
+    <nav class="md-nav" data-md-component="collapsible">
+      <label class="md-nav__title" for="{{ path }}"></label>
       <ul class="md-nav__list">
         {% for nav_item in nav_item.children %}
           {% set temp = path %}

src/assets/javascripts/application.js

@@ -119,12 +119,19 @@ export default class Application {
         new Material.Nav.Blur("[data-md-component=toc] .md-nav__link")))
 
     /* Component: collapsible elements for navigation */
-    const collapsibles = document.querySelectorAll("[data-md-collapse]")
+    const collapsibles =
+      document.querySelectorAll("[data-md-component=collapsible]")
     for (const collapse of collapsibles)
       new Material.Event.MatchMedia("(min-width: 1200px)",
         new Material.Event.Listener(collapse.previousElementSibling, "click",
           new Material.Nav.Collapse(collapse)))
 
+    /* Component: pane monitor for iOS scrolling fixes */
+    new Material.Event.MatchMedia("(max-width: 1199px)",
+      new Material.Event.Listener(
+        "[data-md-component=navigation] [data-md-toggle]", "change",
+          new Material.Nav.Scrolling("[data-md-component=navigation] nav")))
+
     /* Component: search body lock for mobile */
     new Material.Event.MatchMedia("(max-width: 959px)",
       new Material.Event.Listener("[data-md-toggle=search]", "change",

src/assets/javascripts/components/Material/Nav.js

@@ -22,6 +22,7 @@
 
 import Blur from "./Nav/Blur"
 import Collapse from "./Nav/Collapse"
+import Scrolling from "./Nav/Scrolling"
 
 /* ----------------------------------------------------------------------------
  * Module
@@ -29,5 +30,6 @@ import Collapse from "./Nav/Collapse"
 
 export default {
   Blur,
-  Collapse
+  Collapse,
+  Scrolling
 }

src/assets/javascripts/components/Material/Nav/Blur.js

@@ -82,7 +82,7 @@ export default class Blur {
       for (let i = this.index_; i >= 0; i--) {
         if (this.anchors_[i] > offset) {
           if (i > 0)
-            delete this.els_[i - 1].dataset.mdState
+            this.els_[i - 1].dataset.mdState = ""
         } else {
           this.index_ = i
           break
@@ -99,7 +99,7 @@ export default class Blur {
    */
   reset() {
     for (const el of this.els_)
-      delete el.dataset.mdState
+      el.dataset.mdState = ""
 
     /* Reset index and page y-offset */
     this.index_  = 0

src/assets/javascripts/components/Material/Nav/Collapse.js

@@ -59,7 +59,7 @@ export default class Collapse {
 
       /* Read height and unset pseudo-toggled state */
       const height = this.el_.getBoundingClientRect().height
-      delete this.el_.dataset.mdState
+      this.el_.dataset.mdState = ""
 
       /* Set initial state and animate */
       this.el_.style.maxHeight = "0px"
@@ -70,8 +70,8 @@ export default class Collapse {
     }
 
     /* Remove state on end of transition */
-    const end = function(ev) {
-      delete ev.target.dataset.mdState
+    const end = ev => {
+      ev.target.dataset.mdState = ""
       ev.target.style.maxHeight = ""
 
       /* Only fire once, so directly remove event listener */
@@ -84,7 +84,7 @@ export default class Collapse {
    * Reset height and pseudo-toggled state
    */
   reset() {
-    delete this.el_.dataset.mdState
+    this.el_.dataset.mdState = ""
     this.el_.style.maxHeight = ""
   }
 }

src/assets/javascripts/components/Material/Nav/Scrolling.js

@@ -0,0 +1,137 @@
+/*
+ * 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.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Class
+ * ------------------------------------------------------------------------- */
+
+export default class Scrolling {
+
+  /**
+   * Set overflow scrolling on the current active pane (for iOS)
+   *
+   * @constructor
+   * @param {(string|HTMLElement)} el - Selector or HTML element
+   */
+  constructor(el) {
+    this.el_ = (typeof el === "string")
+      ? document.querySelector(el)
+      : el
+  }
+
+  /**
+   * Setup panes
+   */
+  setup() {
+
+    /* Initially set overflow scrolling on main pane */
+    this.el_.children[1].style.webkitOverflowScrolling = "touch"
+
+    /* Find all toggles and check which one is active */
+    const toggles = this.el_.querySelectorAll("[data-md-toggle]")
+    for (const toggle of toggles) {
+      if (!toggle.checked)
+        return
+
+      /* Find corresponding navigational pane */
+      let pane = toggle.nextElementSibling
+      while (pane.tagName !== "NAV")
+        pane = pane.nextElementSibling
+
+      /* Find current and parent list elements */
+      const parent = toggle.parentNode.parentNode
+      const target = pane.children[pane.children.length - 1]
+
+      /* Always reset all lists when transitioning */
+      parent.style.webkitOverflowScrolling = ""
+      target.style.webkitOverflowScrolling = "touch"
+    }
+  }
+
+  /**
+   * Update active panes
+   *
+   * @param {Event} ev - Change event
+   */
+  update(ev) {
+
+    /* Find corresponding navigational pane */
+    let pane = ev.target.nextElementSibling
+    while (pane.tagName !== "NAV")
+      pane = pane.nextElementSibling
+
+    /* Find current and parent list elements */
+    const parent = ev.target.parentNode.parentNode
+    const target = pane.children[pane.children.length - 1]
+
+    /* Always reset all lists when transitioning */
+    parent.style.webkitOverflowScrolling = ""
+    target.style.webkitOverflowScrolling = ""
+
+    /* Set overflow scrolling on parent */
+    if (!ev.target.checked) {
+      const end = () => {
+        parent.style.webkitOverflowScrolling = "touch"
+        pane.removeEventListener("transitionend", end)
+      }
+      pane.addEventListener("transitionend", end, false)
+    }
+
+    /* Set overflow scrolling on target */
+    if (ev.target.checked) {
+      const end = () => {
+        target.style.webkitOverflowScrolling = "touch"
+        pane.removeEventListener("transitionend", end, false)
+      }
+      pane.addEventListener("transitionend", end, false)
+    }
+  }
+
+  /**
+   * Reset panes
+   */
+  reset() {
+
+    /* Reset overflow scrolling on main pane */
+    this.el_.children[1].style.webkitOverflowScrolling = ""
+
+    /* Find all toggles and check which one is active */
+    const toggles = this.el_.querySelectorAll("[data-md-toggle]")
+    for (const toggle of toggles) {
+      if (!toggle.checked)
+        return
+
+      /* Find corresponding navigational pane */
+      let pane = toggle.nextElementSibling
+      while (pane.tagName !== "NAV")
+        pane = pane.nextElementSibling
+
+      /* Find current and parent list elements */
+      const parent = toggle.parentNode.parentNode
+      const target = pane.children[pane.children.length - 1]
+
+      /* Always reset all lists when transitioning */
+      parent.style.webkitOverflowScrolling = ""
+      target.style.webkitOverflowScrolling = ""
+    }
+  }
+}

src/assets/javascripts/components/Material/Search/Lock.js

@@ -66,7 +66,7 @@ export default class Lock {
 
     /* Exiting search mode */
     } else {
-      delete document.body.dataset.mdState
+      document.body.dataset.mdState = ""
 
       /* Scroll to former position, but wait for 100ms to prevent flashes on
          iOS. A short timeout seems to do the trick */
@@ -81,8 +81,8 @@ export default class Lock {
    * Reset locked state and page y-offset
    */
   reset() {
-    if (document.body.dataset.mdState)
+    if (document.body.dataset.mdState === "lock")
       window.scrollTo(0, this.offset_)
-    delete document.body.dataset.mdState
+    document.body.dataset.mdState = ""
   }
 }

src/assets/javascripts/components/Material/Sidebar/Position.js

@@ -86,7 +86,7 @@ export default class Position {
 
     /* Sidebar should be unlocked, if locked */
     } else if (this.el_.dataset.mdState === "lock") {
-      delete this.el_.dataset.mdState
+      this.el_.dataset.mdState = ""
     }
   }
 
@@ -94,7 +94,7 @@ export default class Position {
    * Reset locked state and height
    */
   reset() {
-    delete this.el_.dataset.mdState
+    this.el_.dataset.mdState = ""
     this.el_.style.height = ""
     this.height_ = 0
   }

src/assets/stylesheets/layout/_footer.scss

@@ -90,7 +90,7 @@
     transition: background 0.25s;
   }
 
-  // Link title
+  // Link title - set line height to match icon for correct alignment
   &__title {
     position: relative;
     padding: 0 2.0rem;
@@ -169,7 +169,7 @@
 
     // Adjust line-height to match height for correct alignment
     &::before {
-      line-height: 3.2rem;
+      line-height: 2.0;
     }
   }
 }

src/assets/stylesheets/layout/_header.scss

@@ -94,7 +94,7 @@
     }
   }
 
-  // Header title
+  // Header title - set line height to match icon for correct alignment
   &__title {
     padding: 0 2.0rem;
     font-size: 1.8rem;

src/partials/nav-item.html

@@ -37,10 +37,8 @@
     <label class="md-nav__link" for="{{ path }}">
       {{ nav_item.title }}
     </label>
-    <nav class="md-nav" data-md-collapse>
-      <label class="md-nav__title" for="{{ path }}">
-        {{ nav_item.title }}
-      </label>
+    <nav class="md-nav" data-md-component="collapsible">
+      <label class="md-nav__title" for="{{ path }}"></label>
       <ul class="md-nav__list">
 
         <!-- Render nested item list -->