Merge master into HEAD

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

@@ -41,6 +41,9 @@ export default class Blur {
     this.index_  = 0
     this.offset_ = window.pageYOffset
 
+    /* Necessary state to correctly reset the index */
+    this.dir_ = false
+
     /* Index anchor node offsets for fast lookup */
     this.anchors_ = [].map.call(this.els_, el => {
       return document.getElementById(el.hash.substring(1))
@@ -62,6 +65,14 @@ export default class Blur {
    */
   update() {
     const offset = window.pageYOffset
+    const dir = this.offset_ - offset < 0
+
+    /* Hack: reset index if direction changed, to catch very fast scrolling,
+       because otherwise we would have to register a timer and that sucks */
+    if (this.dir_ !== dir)
+      this.index_ = dir
+        ? this.index_ = 0
+        : this.index_ = this.els_.length - 1
 
     /* Exit when there are no anchors */
     if (this.anchors_.length === 0)
@@ -92,8 +103,9 @@ export default class Blur {
       }
     }
 
-    /* Remember current offset for next iteration */
+    /* Remember current offset and direction for next iteration */
     this.offset_ = offset
+    this.dir_ = dir
   }
 
   /**

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

@@ -40,6 +40,10 @@ export default class Collapse {
 
   /**
    * Animate expand and collapse smoothly
+   *
+   * Internet Explorer 11 is very slow at recognizing changes on the dataset
+   * which results in the menu not expanding or collapsing properly. THerefore,
+   * for reasons of compatibility, the attribute accessors are used.
    */
   update() {
     const current = this.el_.getBoundingClientRect().height
@@ -48,34 +52,34 @@ export default class Collapse {
     if (current) {
       this.el_.style.maxHeight = `${current}px`
       requestAnimationFrame(() => {
-        this.el_.dataset.mdState = "animate"
+        this.el_.setAttribute("data-md-state", "animate")
         this.el_.style.maxHeight = "0px"
       })
 
     /* Collapsed, so expand */
     } else {
-      this.el_.dataset.mdState = "expand"
+      this.el_.setAttribute("data-md-state", "expand")
       this.el_.style.maxHeight = ""
 
       /* Read height and unset pseudo-toggled state */
       const height = this.el_.getBoundingClientRect().height
-      this.el_.dataset.mdState = ""
+      this.el_.removeAttribute("data-md-state")
 
       /* Set initial state and animate */
       this.el_.style.maxHeight = "0px"
       requestAnimationFrame(() => {
-        this.el_.dataset.mdState = "animate"
+        this.el_.setAttribute("data-md-state", "animate")
         this.el_.style.maxHeight = `${height}px`
       })
     }
 
     /* Remove state on end of transition */
     const end = ev => {
-      ev.target.dataset.mdState = ""
+      ev.target.removeAttribute("data-md-state")
       ev.target.style.maxHeight = ""
 
       /* Only fire once, so directly remove event listener */
-      ev.target.removeEventListener("transitionend", end, false)
+      ev.target.removeEventListener("transitionend", end)
     }
     this.el_.addEventListener("transitionend", end, false)
   }