Cleaned up and refactored tabs implementation

src/assets/javascripts/application.js

@@ -44,22 +44,6 @@ export default class Application {
    */
   initialize() {
 
-    // TODO: just a proof of concept
-    window.addEventListener("scroll", () => {
-
-      if (window.pageYOffset > 5) {
-        document.body.classList.add("bigger5")
-      } else {
-        document.body.classList.remove("bigger5")
-      }
-
-      if (window.pageYOffset > 48) {
-        document.body.classList.add("bigger48")
-      } else {
-        document.body.classList.remove("bigger48")
-      }
-    })
-
     /* Initialize Modernizr and FastClick */
     new Material.Event.Listener(document, "DOMContentLoaded", () => {
 
@@ -109,6 +93,16 @@ export default class Application {
       }
     }).listen()
 
+    /* Component: header shadow toggle */
+    new Material.Event.Listener(window, [
+      "scroll", "resize", "orientationchange"
+    ], new Material.Header.Shadow("[data-md-component=container]")).listen()
+
+    /* Component: tabs visibility toggle */
+    new Material.Event.Listener(window, [
+      "scroll", "resize", "orientationchange"
+    ], new Material.Tabs.Toggle("[data-md-component=tabs]")).listen()
+
     /* Component: sidebar container */
     if (!Modernizr.csscalc)
       new Material.Event.MatchMedia("(min-width: 960px)",
@@ -131,7 +125,7 @@ export default class Application {
     /* Component: link blurring for table of contents */
     new Material.Event.MatchMedia("(min-width: 960px)",
       new Material.Event.Listener(window, "scroll",
-        new Material.Nav.Blur("[data-md-component=toc] .md-nav__link")))
+        new Material.Nav.Blur("[data-md-component=toc] [href]")))
 
     /* Component: collapsible elements for navigation */
     const collapsibles =

src/assets/javascripts/components/Material.js

@@ -21,10 +21,12 @@
  */
 
 import Event from "./Material/Event"
+import Header from "./Material/Header"
 import Nav from "./Material/Nav"
 import Search from "./Material/Search"
 import Sidebar from "./Material/Sidebar"
 import Source from "./Material/Source"
+import Tabs from "./Material/tabs"
 
 /* ----------------------------------------------------------------------------
  * Module
@@ -32,8 +34,10 @@ import Source from "./Material/Source"
 
 export default {
   Event,
+  Header,
   Nav,
   Search,
   Sidebar,
-  Source
+  Source,
+  Tabs
 }

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

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2016-2017 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.
+ */
+
+import Shadow from "./Header/Shadow"
+
+/* ----------------------------------------------------------------------------
+ * Module
+ * ------------------------------------------------------------------------- */
+
+export default {
+  Shadow
+}

src/assets/javascripts/components/Material/Header/Shadow.js

@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) 2016-2017 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 Shadow {
+
+  /**
+   * Show the header shadow depending on scroll offset
+   *
+   * @constructor
+   * @param {(string|HTMLElement)} el - Selector or HTML element
+   */
+  constructor(el) {
+    this.el_ = (typeof el === "string")
+      ? document.querySelector(el)
+      : el
+
+    /* Grab parent and header */
+    this.el_     = this.el_.parentNode
+    this.header_ = this.el_.parentNode.previousElementSibling
+
+    /* Initialize height and state */
+    this.height_ = 0
+    this.active_ = false
+  }
+
+  /**
+   * Calculate total height of previous nodes
+   */
+  setup() {
+    let current = this.el_
+    while ((current = current.previousElementSibling))
+      this.height_ += current.offsetHeight
+  }
+
+  /**
+   * Update shadow state
+   */
+  update() {
+    const active = window.pageYOffset >= this.height_
+    if (active !== this.active_)
+      this.header_.dataset.mdState = (this.active_ = active) ? "shadow" : ""
+  }
+
+  /**
+   * Reset shadow state
+   */
+  reset() {
+    this.header_.dataset.mdState = ""
+    this.height_ = 0
+    this.active_ = false
+  }
+}

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

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2016-2017 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.
+ */
+
+import Toggle from "./Tabs/Toggle"
+
+/* ----------------------------------------------------------------------------
+ * Module
+ * ------------------------------------------------------------------------- */
+
+export default {
+  Toggle
+}

src/assets/javascripts/components/Material/Tabs/Toggle.js

@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2016-2017 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 Toggle {
+
+  /**
+   * Show tabs depending on scroll offset
+   *
+   * @constructor
+   * @param {(string|HTMLElement)} el - Selector or HTML element
+   */
+  constructor(el) {
+    this.el_ = (typeof el === "string")
+      ? document.querySelector(el)
+      : el
+
+    /* Initialize height and state */
+    this.height_ = 5
+    this.active_ = false
+  }
+
+  /**
+   * Update visibility
+   */
+  update() {
+    const active = window.pageYOffset >= this.height_
+    if (active !== this.active_)
+      this.el_.dataset.mdState = (this.active_ = active) ? "hidden" : ""
+  }
+
+  /**
+   * Reset visibility
+   */
+  reset() {
+    this.el_.dataset.mdState = ""
+    this.active_ = false
+  }
+}