Refactored clipboard initialization

material/base.html

@@ -38,7 +38,7 @@
       <script src="{{ base_url }}/assets/javascripts/modernizr-1df76c4e58.js"></script>
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-9749f36cad.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-135a50555d.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-0a3e9e1c07.palette.css">
       {% endif %}
@@ -149,7 +149,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-3f3f3473e5.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-91b82fceca.js"></script>
       <script>app.initialize({url:{base:"{{ base_url }}"}})</script>
       {% for path in extra_javascript %}
         <script src="{{ path }}"></script>

src/assets/javascripts/application.js

@@ -50,7 +50,7 @@ function initialize(config) { // eslint-disable-line func-style
     })
 
     /* Wrap all data tables for better overflow scrolling */
-    const tables = document.querySelectorAll("table:not([class])")              // TODO: this is JSX
+    const tables = document.querySelectorAll("table:not([class])")              // TODO: this is JSX, we should rename the file
     Array.prototype.forEach.call(tables, table => {
       const wrap = (
         <div class="md-typeset__scrollwrap">
@@ -65,6 +65,52 @@ function initialize(config) { // eslint-disable-line func-style
       wrap.children[0].appendChild(table)
     })
 
+    /* Clipboard integration */
+    if (Clipboard.isSupported()) {
+      const blocks = document.querySelectorAll("div > pre, pre > code")
+      Array.prototype.forEach.call(blocks, (block, index) => {
+        const id = `__code_${index}`
+
+        /* Create button with message container */
+        const button = (
+          <button class="md-clipboard" title="Copy to clipboard"
+              data-clipboard-target={`#${id} pre, #${id} code`}>
+            <span class="md-clipboard__message"></span>
+          </button>
+        )
+
+        /* Link to block and insert button */
+        const parent = block.parentNode
+        parent.id = id
+        parent.insertBefore(button, block)
+      })
+
+      /* Initialize Clipboard listener */
+      const copy = new Clipboard(".md-clipboard")
+
+      /* Success handler */
+      let timer = null
+      copy.on("success", action => {
+        const message = action.trigger.querySelector(".md-clipboard__message")
+        if (!(message instanceof HTMLElement))
+          throw new ReferenceError
+
+        /* Clear selection and reset debounce logic */
+        action.clearSelection()
+        if (timer)
+          clearTimeout(timer)
+
+        /* Set message indicating success and show it */
+        message.classList.add("md-clipboard__message--active")
+        message.innerHTML = "Copied to clipboard"
+
+        /* Hide message after two seconds */
+        timer = setTimeout(() => {
+          message.classList.remove("md-clipboard__message--active")
+        }, 2000)
+      })
+    }
+
     /* Force 1px scroll offset to trigger overflow scrolling */
     if (Modernizr.ios) {
       const scrollable = document.querySelectorAll("[data-md-scrollfix]")
@@ -83,50 +129,6 @@ function initialize(config) { // eslint-disable-line func-style
         })
       })
     }
-
-    /* If Clipboard.js is available, inject "copy to clipboard" overlays
-       and attach Clipboard to copy the code.
-       Handle both div.codehilite>pre and pre>code. */
-    if (typeof Clipboard !== "undefined" &&
-        Clipboard.isSupported()) { // eslint-disable-line no-undef
-      const blocks = document.querySelectorAll(
-        "div.codehilite>pre,pre.codehilite>code")
-      let i = 0
-      Array.prototype.forEach.call(blocks, code => {
-        const parent = code.parentNode
-        const codeId = `hl_code${i}`
-        const btn = document.createElement("button")
-        // const icon = document.createElement("i")
-        parent.id = codeId
-        // icon.setAttribute("class", "md-icon md-icon--clipboard")
-        // btn.appendChild(icon)
-        btn.setAttribute("class", "md-clipboard")
-        btn.setAttribute("data-clipboard-target",
-          `#${codeId} pre, #${codeId} code`)
-        btn.setAttribute("aria-label", "Copy to Clipboard.")
-        // new Material.Event.Listener(btn, "mouseleave", e => {
-        //   e.currentTarget.classList.remove("md-clipboard__snackbar")
-        //   e.currentTarget.setAttribute("aria-label", "Copy to Clipboard.")
-        // }).listen()
-        parent.insertBefore(btn, parent.childNodes[0])
-        i += 1
-      })
-      const cBoard = new Clipboard(".md-clipboard")
-      cBoard.on("success", e => {
-        e.clearSelection()
-        const foo = document.createElement("span")
-        foo.classList.add("md-clipboard__message")
-        // foo.textContent = "Copied to clipboard"
-        foo.setAttribute("aria-label", "Copied to clipboard")
-        e.trigger.appendChild(foo)
-        // e.trigger.classList.add("md-clipboard--tip")
-      })
-      cBoard.on("error", e => {
-        e.clearSelection()
-        e.trigger.setAttribute("aria-label", "Copy Failed!")
-        // e.trigger.classList.add("md-clipboard--tip")
-      })
-    }
   }).listen()
 
   /* Component: header shadow toggle */

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

@@ -1,31 +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.
- */
-
-import Clipboard from "./Code/Clipboard"
-
-/* ----------------------------------------------------------------------------
- * Module
- * ------------------------------------------------------------------------- */
-
-export default {
-  Clipboard
-}

src/assets/javascripts/components/Material/Code/Clipboard.js

@@ -1,67 +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 Clipboard {
-
-  /**
-   * 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) {
-    this.els_ = (typeof els === "string")
-      ? document.querySelectorAll(els)
-      : els
-
-    /* Initialize index and page y-offset */
-    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_ = [].reduce.call(this.els_, (anchors, el) => {
-      return anchors.concat(
-        document.getElementById(el.hash.substring(1)) || [])
-    }, [])
-  }
-
-  /**
-   * Initialize copy buttons on all elements
-   */
-  update() {
-
-  }
-}

src/assets/stylesheets/layout/_clipboard.scss

@@ -24,8 +24,8 @@
 // Keyframes
 // ----------------------------------------------------------------------------
 
-// Show snackbar
+// Show message
-@keyframes md-clipboard__snackbar--appear {
+@keyframes md-clipboard__message--appear {
   0% {
     transform: translateX(0.8rem);
     opacity: 0;
@@ -86,15 +86,27 @@
     top: 0;
     right: 3.4rem;
     padding: 0.6rem 1rem;
-    animation:
+    transform: translateX(0.8rem);
-      md-clipboard__snackbar--appear
+    transition:
-      0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+      opacity   0.175s;
     border-radius: 0.2rem;
     background: $md-color-black--light;
     color: $md-color-white;
     font-size: ms(-1);
     white-space: nowrap;
-    opacity: 1;
+    opacity: 0;
+    pointer-events: none;
+
+    // Active message
+    &--active {
+      transform: translateX(0);
+      transition:
+        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+        opacity   0.175s 0.075s;
+      opacity: 1;
+      pointer-events: initial;
+    }
 
     // Inject content from ARIA label
     &::before {