Merge branch 'master' into refactor/sidebar-height-spacing

src/assets/javascripts/application.js

@@ -27,35 +27,40 @@ import Material from "./components/Material"
  * Application
  * ------------------------------------------------------------------------- */
 
-export const initialize = config => {
+/**
+ * Initialize Material for MkDocs
+ *
+ * @param {Object} config - Configuration
+ */
+function initialize(config) { // eslint-disable-line func-style
 
   /* Initialize Modernizr and FastClick */
   new Material.Event.Listener(document, "DOMContentLoaded", () => {
+    if (!(document.body instanceof HTMLElement))
+      throw new ReferenceError
+
+    /* Attach FastClick to mitigate 300ms delay on touch devices */
+    FastClick.attach(document.body)
 
     /* Test for iOS */
     Modernizr.addTest("ios", () => {
       return !!navigator.userAgent.match(/(iPad|iPhone|iPod)/g)
     })
 
-    /* Test for web application context */
-    Modernizr.addTest("standalone", () => {
-      return !!navigator.standalone
-    })
-
-    /* Attach FastClick to mitigate 300ms delay on touch devices */
-    FastClick.attach(document.body)
-
     /* Wrap all data tables for better overflow scrolling */
     const tables = document.querySelectorAll("table:not([class])")
     Array.prototype.forEach.call(tables, table => {
-      const wrap = document.createElement("div")
-      wrap.classList.add("md-typeset__table")
+      const wrap = (
+        <div class="md-typeset__scrollwrap">
+          <div class="md-typeset__table"></div>
+        </div>
+      )
       if (table.nextSibling) {
         table.parentNode.insertBefore(wrap, table.nextSibling)
       } else {
         table.parentNode.appendChild(wrap)
       }
-      wrap.appendChild(table)
+      wrap.children[0].appendChild(table)
     })
 
     /* Force 1px scroll offset to trigger overflow scrolling */
@@ -89,13 +94,6 @@ export const initialize = config => {
     "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)",
-      new Material.Event.Listener(window, [
-        "resize", "orientationchange"
-      ], new Material.Sidebar.Container("[data-md-component=container]")))
-
   /* Component: sidebar with navigation */
   new Material.Event.MatchMedia("(min-width: 1220px)",
     new Material.Event.Listener(window, [
@@ -139,7 +137,7 @@ export const initialize = config => {
       new Material.Search.Lock("[data-md-toggle=search]")))
 
   /* Component: search results */
-  new Material.Event.Listener(document.forms.search.query, [
+  new Material.Event.Listener("[data-md-component=query]", [
     "focus", "keyup"
   ], new Material.Search.Result("[data-md-component=result]", () => {
     return fetch(`${config.url.base}/mkdocs/search_index.json`, {
@@ -163,6 +161,8 @@ export const initialize = config => {
     new Material.Event.Listener("[data-md-component=navigation] [href^='#']",
       "click", () => {
         const toggle = document.querySelector("[data-md-toggle=drawer]")
+        if (!(toggle instanceof HTMLInputElement))
+          throw new ReferenceError
         if (toggle.checked) {
           toggle.checked = false
           toggle.dispatchEvent(new CustomEvent("change"))
@@ -172,16 +172,23 @@ export const initialize = config => {
   /* Listener: focus input after opening search */
   new Material.Event.Listener("[data-md-toggle=search]", "change", ev => {
     setTimeout(toggle => {
-      const query = document.forms.search.query
-      if (toggle.checked)
+      if (!(toggle instanceof HTMLInputElement))
+        throw new ReferenceError
+      if (toggle.checked) {
+        const query = document.querySelector("[data-md-component=query]")
+        if (!(query instanceof HTMLInputElement))
+          throw new ReferenceError
         query.focus()
+      }
     }, 400, ev.target)
   }).listen()
 
   /* Listener: open search on focus */
   new Material.Event.MatchMedia("(min-width: 960px)",
-    new Material.Event.Listener(document.forms.search.query, "focus", () => {
+    new Material.Event.Listener("[data-md-component=query]", "focus", () => {
       const toggle = document.querySelector("[data-md-toggle=search]")
+      if (!(toggle instanceof HTMLInputElement))
+        throw new ReferenceError
       if (!toggle.checked) {
         toggle.checked = true
         toggle.dispatchEvent(new CustomEvent("change"))
@@ -192,6 +199,8 @@ export const initialize = config => {
   new Material.Event.MatchMedia("(min-width: 960px)",
     new Material.Event.Listener(document.body, "click", () => {
       const toggle = document.querySelector("[data-md-toggle=search]")
+      if (!(toggle instanceof HTMLInputElement))
+        throw new ReferenceError
       if (toggle.checked) {
         toggle.checked = false
         toggle.dispatchEvent(new CustomEvent("change"))
@@ -203,10 +212,15 @@ export const initialize = config => {
     const code = ev.keyCode || ev.which
     if (code === 27) {
       const toggle = document.querySelector("[data-md-toggle=search]")
+      if (!(toggle instanceof HTMLInputElement))
+        throw new ReferenceError
       if (toggle.checked) {
         toggle.checked = false
         toggle.dispatchEvent(new CustomEvent("change"))
-        document.forms.search.query.blur()
+        const query = document.querySelector("[data-md-component=query]")
+        if (!(query instanceof HTMLInputElement))
+          throw new ReferenceError
+        query.focus()
       }
     }
   }).listen()
@@ -224,13 +238,16 @@ export const initialize = config => {
   /* Retrieve facts for the given repository type */
   ;(() => {
     const el = document.querySelector("[data-md-source]")
-    if (!el) return Promise.resolve([])
+    if (!el)
+      return Promise.resolve([])
+    else if (!(el instanceof HTMLAnchorElement))
+      throw new ReferenceError
     switch (el.dataset.mdSource) {
       case "github": return new Material.Source.Adapter.GitHub(el).fetch()
       default: return Promise.resolve([])
     }
 
-  /* Render repository source information */
+  /* Render repository information */
   })().then(facts => {
     const sources = document.querySelectorAll("[data-md-source]")
     Array.prototype.forEach.call(sources, source => {
@@ -239,3 +256,11 @@ export const initialize = config => {
     })
   })
 }
+
+/* ----------------------------------------------------------------------------
+ * Exports
+ * ------------------------------------------------------------------------- */
+
+export {
+  initialize
+}

src/assets/javascripts/components/Material/Event/Listener.js

@@ -30,14 +30,22 @@ export default class Listener {
    * Generic event listener
    *
    * @constructor
-   * @param {(string|NodeList<HTMLElement>)} els - Selector or HTML elements
-   * @param {Array.<string>} events - Event names
-   * @param {(object|function)} handler - Handler to be invoked
+   *
+   * @property {(Array<EventTarget>)} els_ - Event targets
+   * @property {Object} handler_- Event handlers
+   * @property {Array<string>} events_ - Event names
+   * @property {Function} update_ - Update handler
+   *
+   * @param {?(string|EventTarget|NodeList<EventTarget>)} els -
+   *   Selector or Event targets
+   * @param {(string|Array<string>)} events - Event names
+   * @param {(Object|Function)} handler - Handler to be invoked
    */
   constructor(els, events, handler) {
-    this.els_ = (typeof els === "string")
-      ? document.querySelectorAll(els)
-      : [].concat(els)
+    this.els_ = Array.prototype.slice.call(
+      (typeof els === "string")
+        ? document.querySelectorAll(els)
+        : [].concat(els))
 
     /* Set handler as function or directly as object */
     this.handler_ = typeof handler === "function"
@@ -53,7 +61,7 @@ export default class Listener {
    * Register listener for all relevant events
    */
   listen() {
-    Array.prototype.forEach.call(this.els_, el => {
+    this.els_.forEach(el => {
       this.events_.forEach(event => {
         el.addEventListener(event, this.update_, false)
       })
@@ -68,7 +76,7 @@ export default class Listener {
    * Unregister listener for all relevant events
    */
   unlisten() {
-    Array.prototype.forEach.call(this.els_, el => {
+    this.els_.forEach(el => {
       this.events_.forEach(event => {
         el.removeEventListener(event, this.update_)
       })

src/assets/javascripts/components/Material/Event/MatchMedia.js

@@ -20,6 +20,8 @@
  * IN THE SOFTWARE.
  */
 
+import Listener from "./Listener" // eslint-disable-line no-unused-vars
+
 /* ----------------------------------------------------------------------------
  * Class
  * ------------------------------------------------------------------------- */
@@ -33,6 +35,9 @@ export default class MatchMedia {
    * switches the given listeners on or off.
    *
    * @constructor
+   *
+   * @property {Function} handler_ - Media query event handler
+   *
    * @param {string} query - Media query to test for
    * @param {Listener} listener - Event listener
    */

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

@@ -27,19 +27,29 @@
 export default class Shadow {
 
   /**
-   * Show the header shadow depending on scroll offset
+   * Show or hide header shadow depending on page y-offset
    *
    * @constructor
+   *
+   * @property {HTMLElement} el_ - Content container
+   * @property {HTMLElement} header_ - Header
+   * @property {number} height_ - Offset height of previous nodes
+   * @property {boolean} active_ - Header shadow state
+   *
    * @param {(string|HTMLElement)} el - Selector or HTML element
    */
   constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
       ? document.querySelector(el)
       : el
+    if (!(ref instanceof Node) ||
+        !(ref.parentNode instanceof HTMLElement) ||
+        !(ref.parentNode.previousElementSibling instanceof HTMLElement))
+      throw new ReferenceError
 
     /* Grab parent and header */
-    this.el_     = this.el_.parentNode
-    this.header_ = this.el_.parentNode.previousElementSibling
+    this.el_     = ref.parentNode
+    this.header_ = ref.parentNode.previousElementSibling
 
     /* Initialize height and state */
     this.height_ = 0
@@ -51,8 +61,11 @@ export default class Shadow {
    */
   setup() {
     let current = this.el_
-    while ((current = current.previousElementSibling))
+    while ((current = current.previousElementSibling)) {
+      if (!(current instanceof HTMLElement))
+        throw new ReferenceError
       this.height_ += current.offsetHeight
+    }
     this.update()
   }
 

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

@@ -27,9 +27,16 @@
 export default class Blur {
 
   /**
-   * Blur anchors within the navigation above current page y-offset
+   * Blur links within the table of contents above current page y-offset
    *
    * @constructor
+   *
+   * @property {NodeList<HTMLElement>} els_ - Table of contents links
+   * @property {Array<HTMLElement>} anchors_ - Referenced anchor nodes
+   * @property {number} index_ - Current link index
+   * @property {number} offset_ - Current page y-offset
+   * @property {boolean} dir_ - Scroll direction change
+   *
    * @param {(string|NodeList<HTMLElement>)} els - Selector or HTML elements
    */
   constructor(els) {
@@ -38,27 +45,28 @@ export default class Blur {
       : els
 
     /* Initialize index and page y-offset */
-    this.index_  = 0
+    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))
-    })
+    this.anchors_ = [].reduce.call(this.els_, (anchors, el) => {
+      return anchors.concat(
+        document.getElementById(el.hash.substring(1)) || [])
+    }, [])
   }
 
   /**
-   * Initialize anchor states
+   * Initialize blur states
    */
   setup() {
     this.update()
   }
 
   /**
-   * Update anchor states
+   * Update blur states
    *
    * Deduct the static offset of the header (56px) and sidebar offset (24px),
    * see _permalinks.scss for more information.
@@ -67,7 +75,7 @@ export default class Blur {
     const offset = window.pageYOffset
     const dir = this.offset_ - offset < 0
 
-    /* Hack: reset index if direction changed, to catch very fast scrolling,
+    /* 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
@@ -109,7 +117,7 @@ export default class Blur {
   }
 
   /**
-   * Reset anchor states
+   * Reset blur states
    */
   reset() {
     Array.prototype.forEach.call(this.els_, el => {

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

@@ -30,12 +30,18 @@ export default class Collapse {
    * Expand or collapse navigation on toggle
    *
    * @constructor
+   *
+   * @property {HTMLElement} el_ - Navigation list
+   *
    * @param {(string|HTMLElement)} el - Selector or HTML element
    */
   constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
       ? document.querySelector(el)
       : el
+    if (!(ref instanceof HTMLElement))
+      throw new ReferenceError
+    this.el_ = ref
   }
 
   /**
@@ -75,11 +81,16 @@ export default class Collapse {
 
     /* Remove state on end of transition */
     const end = ev => {
-      ev.target.removeAttribute("data-md-state")
-      ev.target.style.maxHeight = ""
+      const target = ev.target
+      if (!(target instanceof HTMLElement))
+        throw new ReferenceError
+
+      /* Reset height and state */
+      target.removeAttribute("data-md-state")
+      target.style.maxHeight = ""
 
       /* Only fire once, so directly remove event listener */
-      ev.target.removeEventListener("transitionend", end)
+      target.removeEventListener("transitionend", end)
     }
     this.el_.addEventListener("transitionend", end, false)
   }

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

@@ -30,12 +30,18 @@ export default class Scrolling {
    * Set overflow scrolling on the current active pane (for iOS)
    *
    * @constructor
+   *
+   * @property {HTMLElement} el_ - Primary navigation
+   *
    * @param {(string|HTMLElement)} el - Selector or HTML element
    */
   constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
       ? document.querySelector(el)
       : el
+    if (!(ref instanceof HTMLElement))
+      throw new ReferenceError
+    this.el_ = ref
   }
 
   /**
@@ -49,13 +55,22 @@ export default class Scrolling {
     /* Find all toggles and check which one is active */
     const toggles = this.el_.querySelectorAll("[data-md-toggle]")
     Array.prototype.forEach.call(toggles, toggle => {
+      if (!(toggle instanceof HTMLInputElement))
+        throw new ReferenceError
       if (toggle.checked) {
 
         /* Find corresponding navigational pane */
         let pane = toggle.nextElementSibling
-        while (pane.tagName !== "NAV")
+        if (!(pane instanceof HTMLElement))
+          throw new ReferenceError
+        while (pane.tagName !== "NAV" && pane.nextElementSibling)
           pane = pane.nextElementSibling
 
+        /* Check references */
+        if (!(toggle.parentNode instanceof HTMLElement) ||
+            !(toggle.parentNode.parentNode instanceof HTMLElement))
+          throw new ReferenceError
+
         /* Find current and parent list elements */
         const parent = toggle.parentNode.parentNode
         const target = pane.children[pane.children.length - 1]
@@ -73,34 +88,48 @@ export default class Scrolling {
    * @param {Event} ev - Change event
    */
   update(ev) {
+    const target = ev.target
+    if (!(target instanceof HTMLElement))
+      throw new ReferenceError
 
     /* Find corresponding navigational pane */
-    let pane = ev.target.nextElementSibling
-    while (pane.tagName !== "NAV")
+    let pane = target.nextElementSibling
+    if (!(pane instanceof HTMLElement))
+      throw new ReferenceError
+    while (pane.tagName !== "NAV" && pane.nextElementSibling)
       pane = pane.nextElementSibling
 
-    /* Find current and parent list elements */
-    const parent = ev.target.parentNode.parentNode
-    const target = pane.children[pane.children.length - 1]
+    /* Check references */
+    if (!(target.parentNode instanceof HTMLElement) ||
+        !(target.parentNode.parentNode instanceof HTMLElement))
+      throw new ReferenceError
+
+    /* Find parent and active panes */
+    const parent = target.parentNode.parentNode
+    const active = pane.children[pane.children.length - 1]
 
     /* Always reset all lists when transitioning */
     parent.style.webkitOverflowScrolling = ""
-    target.style.webkitOverflowScrolling = ""
+    active.style.webkitOverflowScrolling = ""
 
-    /* Set overflow scrolling on parent */
-    if (!ev.target.checked) {
+    /* Set overflow scrolling on parent pane */
+    if (!target.checked) {
       const end = () => {
-        parent.style.webkitOverflowScrolling = "touch"
-        pane.removeEventListener("transitionend", end)
+        if (pane instanceof HTMLElement) {
+          parent.style.webkitOverflowScrolling = "touch"
+          pane.removeEventListener("transitionend", end)
+        }
       }
       pane.addEventListener("transitionend", end, false)
     }
 
-    /* Set overflow scrolling on target */
-    if (ev.target.checked) {
+    /* Set overflow scrolling on active pane */
+    if (target.checked) {
       const end = () => {
-        target.style.webkitOverflowScrolling = "touch"
-        pane.removeEventListener("transitionend", end, false)
+        if (pane instanceof HTMLElement) {
+          active.style.webkitOverflowScrolling = "touch"
+          pane.removeEventListener("transitionend", end)
+        }
       }
       pane.addEventListener("transitionend", end, false)
     }
@@ -117,20 +146,29 @@ export default class Scrolling {
     /* Find all toggles and check which one is active */
     const toggles = this.el_.querySelectorAll("[data-md-toggle]")
     Array.prototype.forEach.call(toggles, toggle => {
+      if (!(toggle instanceof HTMLInputElement))
+        throw new ReferenceError
       if (toggle.checked) {
 
         /* Find corresponding navigational pane */
         let pane = toggle.nextElementSibling
-        while (pane.tagName !== "NAV")
+        if (!(pane instanceof HTMLElement))
+          throw new ReferenceError
+        while (pane.tagName !== "NAV" && pane.nextElementSibling)
           pane = pane.nextElementSibling
 
-        /* Find current and parent list elements */
+        /* Check references */
+        if (!(toggle.parentNode instanceof HTMLElement) ||
+            !(toggle.parentNode.parentNode instanceof HTMLElement))
+          throw new ReferenceError
+
+        /* Find parent and active panes */
         const parent = toggle.parentNode.parentNode
-        const target = pane.children[pane.children.length - 1]
+        const active = pane.children[pane.children.length - 1]
 
         /* Always reset all lists when transitioning */
         parent.style.webkitOverflowScrolling = ""
-        target.style.webkitOverflowScrolling = ""
+        active.style.webkitOverflowScrolling = ""
       }
     })
   }

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

@@ -30,12 +30,25 @@ export default class Lock {
    * Lock body for full-screen search modal
    *
    * @constructor
+   *
+   * @property {HTMLInputElement} el_ - Lock toggle
+   * @property {HTMLElement} lock_ - Element to lock (document body)
+   * @property {number} offset_ - Current page y-offset
+   *
    * @param {(string|HTMLElement)} el - Selector or HTML element
    */
   constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
       ? document.querySelector(el)
       : el
+    if (!(ref instanceof HTMLInputElement))
+      throw new ReferenceError
+    this.el_ = ref
+
+    /* Retrieve element to lock (= body) */
+    if (!document.body)
+      throw new ReferenceError
+    this.lock_ = document.body
   }
 
   /**
@@ -60,13 +73,13 @@ export default class Lock {
 
         /* Lock body after finishing transition */
         if (this.el_.checked) {
-          document.body.dataset.mdState = "lock"
+          this.lock_.dataset.mdState = "lock"
         }
       }, 400)
 
     /* Exiting search mode */
     } else {
-      document.body.dataset.mdState = ""
+      this.lock_.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 +94,8 @@ export default class Lock {
    * Reset locked state and page y-offset
    */
   reset() {
-    if (document.body.dataset.mdState === "lock")
+    if (this.lock_.dataset.mdState === "lock")
       window.scrollTo(0, this.offset_)
-    document.body.dataset.mdState = ""
+    this.lock_.dataset.mdState = ""
   }
 }

src/assets/javascripts/components/Material/Search/Result.jsx

@@ -32,13 +32,24 @@ export default class Result {
    * Perform search and update results on keyboard events
    *
    * @constructor
+   *
+   * @property {HTMLElement} el_ - Search result container
+   * @property {(Array<Object>|Function)} data_ - Raw document data
+   * @property {Object} docs_ - Indexed documents
+   * @property {HTMLElement} meta_ - Search meta information
+   * @property {HTMLElement} list_ - Search result list
+   * @property {Object} index_ - Search index
+   *
    * @param {(string|HTMLElement)} el - Selector or HTML element
-   * @param {(Array.<object>|Function)} data - Promise or array providing data
+   * @param {(Array<Object>|Function)} data - Function providing data or array
    */
   constructor(el, data) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
       ? document.querySelector(el)
       : el
+    if (!(ref instanceof HTMLElement))
+      throw new ReferenceError
+    this.el_ = ref
 
     /* Set data and create metadata and list elements */
     this.data_ = data
@@ -54,19 +65,26 @@ export default class Result {
     /* Inject created elements */
     this.el_.appendChild(this.meta_)
     this.el_.appendChild(this.list_)
+  }
 
-    /* Truncate a string after the given number of characters - this is not
-       a reasonable approach, since the summaries kind of suck. It would be
-       better to create something more intelligent, highlighting the search
-       occurrences and making a better summary out of it */
-    this.truncate_ = function(string, n) {
-      let i = n
-      if (string.length > i) {
-        while (string[i] !== " " && --i > 0);
-        return `${string.substring(0, i)}...`
-      }
-      return string
+  /**
+   * Truncate a string after the given number of character
+   *
+   * This is not a reasonable approach, since the summaries kind of suck. It
+   * would be better to create something more intelligent, highlighting the
+   * search occurrences and making a better summary out of it
+   *
+   * @param {string} string - String to be truncated
+   * @param {number} n - Number of characters
+   * @return {string} Truncated string
+   */
+  truncate_(string, n) {
+    let i = n
+    if (string.length > i) {
+      while (string[i] !== " " && --i > 0);
+      return `${string.substring(0, i)}...`
     }
+    return string
   }
 
   /**
@@ -90,7 +108,7 @@ export default class Result {
         })
 
         /* Index documents */
-        this.data_ = data.reduce((docs, doc) => {
+        this.docs_ = data.reduce((docs, doc) => {
           this.index_.add(doc)
           docs[doc.location] = doc
           return docs
@@ -104,15 +122,20 @@ export default class Result {
           : init(this.data_)
       }, 250)
 
-    /* Execute search on new input event after clearing current list */
+    /* Execute search on new input event */
     } else if (ev.type === "keyup") {
+      const target = ev.target
+      if (!(target instanceof HTMLInputElement))
+        throw new ReferenceError
+
+      /* Clear current list */
       while (this.list_.firstChild)
         this.list_.removeChild(this.list_.firstChild)
 
       /* Perform search on index and render documents */
-      const result = this.index_.search(ev.target.value)
+      const result = this.index_.search(target.value)
       result.forEach(item => {
-        const doc = this.data_[item.ref]
+        const doc = this.docs_[item.ref]
 
         /* Check if it's a anchor link on the current page */
         let [pathname] = doc.location.split("#")
@@ -143,6 +166,8 @@ export default class Result {
       Array.prototype.forEach.call(anchors, anchor => {
         anchor.addEventListener("click", ev2 => {
           const toggle = document.querySelector("[data-md-toggle=search]")
+          if (!(toggle instanceof HTMLInputElement))
+            throw new ReferenceError
           if (toggle.checked) {
             toggle.checked = false
             toggle.dispatchEvent(new CustomEvent("change"))

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

@@ -20,7 +20,6 @@
  * IN THE SOFTWARE.
  */
 
-import Container from "./Sidebar/Container"
 import Position from "./Sidebar/Position"
 
 /* ----------------------------------------------------------------------------
@@ -28,6 +27,5 @@ import Position from "./Sidebar/Position"
  * ------------------------------------------------------------------------- */
 
 export default {
-  Container,
   Position
 }

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

@@ -1,65 +0,0 @@
-/*
- * 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 Container {
-
-  /**
-   * Monitor window height to stretch sidebar container to viewport
-   *
-   * @constructor
-   * @param {(string|HTMLElement)} el - Selector or HTML element
-   */
-  constructor(el) {
-    this.el_ = (typeof el === "string")
-      ? document.querySelector(el)
-      : el
-
-    /* Retrieve parent node */
-    this.parent_ = this.el_.parentNode
-  }
-
-  /**
-   * Initialize container state
-   */
-  setup() {
-    this.update()
-  }
-
-  /**
-   * Update minimum height
-   */
-  update() {
-    const height = this.parent_.offsetHeight - this.el_.offsetTop
-    this.el_.style.minHeight = `${height}px`
-  }
-
-  /**
-   * Reset minimum height
-   */
-  reset() {
-    this.el_.style.minHeight = ""
-  }
-}

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

@@ -30,15 +30,25 @@ export default class Position {
    * Set sidebars to locked state and limit height to parent node
    *
    * @constructor
+   *
+   * @property {HTMLElement} el_ - Sidebar
+   * @property {HTMLElement} parent_ - Sidebar container
+   * @property {number} height_ - Current sidebar height
+   * @property {number} offset_ - Current page y-offset
+   *
    * @param {(string|HTMLElement)} el - Selector or HTML element
    */
   constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
       ? document.querySelector(el)
       : el
+    if (!(ref instanceof HTMLElement) ||
+        !(ref.parentNode instanceof HTMLElement))
+      throw new ReferenceError
+    this.el_ = ref
 
     /* Initialize parent container and current height */
-    this.parent_ = this.el_.parentNode
+    this.parent_ = ref.parentNode
     this.height_ = 0
   }
 
@@ -65,15 +75,15 @@ export default class Position {
 
     /* Set bounds of sidebar container - must be calculated on every run, as
        the height of the content might change due to loading images etc. */
-    this.bounds_ = {
+    const bounds = {
       top: 56,
       bottom: this.parent_.offsetTop + this.parent_.offsetHeight
     }
 
     /* Calculate new offset and height */
-    const height = visible - this.bounds_.top
+    const height = visible - bounds.top
                  - Math.max(0, this.offset_ - offset)
-                 - Math.max(0, offset + visible - this.bounds_.bottom)
+                 - Math.max(0, offset + visible - bounds.bottom)
 
     /* If height changed, update element */
     if (height !== this.height_)

src/assets/javascripts/components/Material/Source/Adapter/Abstract.js

@@ -29,16 +29,25 @@ import Cookies from "js-cookie"
 export default class Abstract {
 
   /**
-   * Retrieve source information
+   * Retrieve repository information
    *
    * @constructor
-   * @param {(string|HTMLElement)} el - Selector or HTML element
+   *
+   * @property {HTMLAnchorElement} el_ - Link to repository
+   * @property {string} base_ - API base URL
+   * @property {number} salt_ - Unique identifier
+   *
+   * @param {(string|HTMLAnchorElement)} el - Selector or HTML element
    */
   constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
       ? document.querySelector(el)
       : el
 
+    if (!(ref instanceof HTMLAnchorElement))
+      throw new ReferenceError
+    this.el_ = ref
+
     /* Retrieve base URL */
     this.base_ = this.el_.href
     this.salt_ = this.hash_(this.base_)
@@ -47,7 +56,7 @@ export default class Abstract {
   /**
    * Retrieve data from Cookie or fetch from respective API
    *
-   * @return {Promise} Promise that returns an array of facts
+   * @return {Promise<Array<string>>} Promise that returns an array of facts
    */
   fetch() {
     return new Promise(resolve => {
@@ -70,7 +79,6 @@ export default class Abstract {
    * Abstract private function that fetches relevant repository information
    *
    * @abstract
-   * @return {Promise} Promise that provides the facts in an array
    */
   fetch_() {
     throw new Error("fetch_(): Not implemented")
@@ -79,15 +87,15 @@ export default class Abstract {
   /**
    * Format a number with suffix
    *
-   * @param {Number} number - Number to format
-   * @return {Number} Formatted number
+   * @param {number} number - Number to format
+   * @return {string} Formatted number
    */
   format_(number) {
     if (number > 10000)
       return `${(number / 1000).toFixed(0)}k`
     else if (number > 1000)
       return `${(number / 1000).toFixed(1)}k`
-    return number
+    return `${number}`
   }
 
   /**
@@ -96,7 +104,7 @@ export default class Abstract {
    * Taken from http://stackoverflow.com/a/7616484/1065584
    *
    * @param {string} str - Input string
-   * @return {string} Hashed string
+   * @return {number} Hashed string
    */
   hash_(str) {
     let hash = 0

src/assets/javascripts/components/Material/Source/Adapter/GitHub.js

@@ -29,10 +29,10 @@ import Abstract from "./Abstract"
 export default class GitHub extends Abstract {
 
   /**
-   * Retrieve source information from GitHub
+   * Retrieve repository information from GitHub
    *
    * @constructor
-   * @param {(string|HTMLElement)} el - Selector or HTML element
+   * @param {(string|HTMLAnchorElement)} el - Selector or HTML element
    */
   constructor(el) {
     super(el)
@@ -42,9 +42,9 @@ export default class GitHub extends Abstract {
   }
 
   /**
-   * Fetch relevant source information from GitHub
+   * Fetch relevant repository information from GitHub
    *
-   * @return {function} Promise returning an array of facts
+   * @return {Promise<Array<string>>} Promise returning an array of facts
    */
   fetch_() {
     return fetch(this.base_)

src/assets/javascripts/components/Material/Source/Repository.jsx

@@ -30,21 +30,27 @@ export default class Repository {
    * Render repository information
    *
    * @constructor
+   *
+   * @property {HTMLElement} el_ - Repository information
+   *
    * @param {(string|HTMLElement)} el - Selector or HTML element
    */
   constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
       ? document.querySelector(el)
       : el
+    if (!(ref instanceof HTMLElement))
+      throw new ReferenceError
+    this.el_ = ref
   }
 
   /**
-   * Initialize the source repository
+   * Initialize the repository
    *
-   * @param {Array.<string>} facts - Facts to be rendered
+   * @param {Array<string>} facts - Facts to be rendered
    */
   initialize(facts) {
-    if (facts.length)
+    if (facts.length && this.el_.children.length)
       this.el_.children[this.el_.children.length - 1].appendChild(
         <ul class="md-source__facts">
           {facts.map(fact => <li class="md-source__fact">{fact}</li>)}

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

@@ -27,18 +27,26 @@
 export default class Toggle {
 
   /**
-   * Show tabs depending on scroll offset
+   * Toggle tabs visibility depending on page y-offset
    *
    * @constructor
+   *
+   * @property {HTMLElement} el_ - Content container
+   * @property {number} offset_ - Toggle page-y offset
+   * @property {boolean} active_ - Tabs visibility
+   *
    * @param {(string|HTMLElement)} el - Selector or HTML element
    */
   constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
       ? document.querySelector(el)
       : el
+    if (!(ref instanceof Node))
+      throw new ReferenceError
+    this.el_ = ref
 
-    /* Initialize height and state */
-    this.height_ = 5
+    /* Initialize offset and state */
+    this.offset_ = 5
     this.active_ = false
   }
 
@@ -46,7 +54,7 @@ export default class Toggle {
    * Update visibility
    */
   update() {
-    const active = window.pageYOffset >= this.height_
+    const active = window.pageYOffset >= this.offset_
     if (active !== this.active_)
       this.el_.dataset.mdState = (this.active_ = active) ? "hidden" : ""
   }