Added clipboard integration

src/assets/javascripts/index.ts

@@ -23,6 +23,7 @@
 // TODO: remove this after we finished refactoring
 // tslint:disable
 
+import * as Clipboard from "clipboard"
 import { identity, values } from "ramda"
 import {
   EMPTY,
@@ -88,6 +89,7 @@ import {
 } from "./workers"
 import { renderSource } from "templates"
 import { switchMapIf, not, takeIf } from "extensions"
+import { renderClipboard } from "templates/clipboard"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -557,7 +559,7 @@ export function initialize(config: unknown) {
     fromEvent(window, "beforeprint") // IE, FF
   )
     .subscribe(() => {
-      const details = document.querySelectorAll("details")
+      const details = getElements("details")
       Array.prototype.forEach.call(details, detail => {
         detail.setAttribute("open", "")
       })
@@ -566,11 +568,39 @@ export function initialize(config: unknown) {
   // Close drawer and search on hash change
   agent.location.hash$.subscribe(() => {
     setToggle(drawer, false)
-    setToggle(search, false)
+    setToggle(search, false) // we probably need to delay the anchor jump for search
   })
 
   /* ----------------------------------------------------------------------- */
 
+  /* Clipboard integration */
+  if (Clipboard.isSupported()) {
+    const blocks = getElements(".codehilite > pre, .highlight> pre, pre > code")
+    Array.prototype.forEach.call(blocks, (block, index) => {
+      const id = `__code_${index}`
+
+      /* Create button with message container */
+      const button = renderClipboard(id)
+
+      /* 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 */
+    copy.on("success", action => {
+      alert("Copied to clipboard") // TODO: integrate snackbar
+      // TODO: add a snackbar/notification
+
+    })
+  }
+
+  /* ----------------------------------------------------------------------- */
+
   const state = {
     search: {
       query$,

src/assets/javascripts/templates/clipboard/index.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2016-2019 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 { h } from "extensions"
+import { translate } from "utilities"
+
+/* ----------------------------------------------------------------------------
+ * Data
+ * ------------------------------------------------------------------------- */
+
+/**
+ * CSS classes
+ */
+const css = {
+  container: "md-clipboard md-icon"
+}
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Render clipboard
+ *
+ * @param id - Unique identifier
+ *
+ * @return HTML element
+ */
+export function renderClipboard(
+  id: string
+): HTMLElement {
+  return (
+    <button
+      class={css.container}
+      title={translate("clipboard.copy")}
+      data-clipboard-target={`#${id} pre, #${id} code`}
+    >&#xE14D;</button>
+  )
+}