From c8cb286fe70386a2eb1427719345de18ec8c9b07 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 5 Dec 2017 11:37:23 +0100
Subject: [PATCH] clipboard functionality for all guide code snippets

---
 _config.yml                             |  1 +
 _src/_assets/javascripts/page-guides.js | 32 ++++++++++++++++++
 _src/_assets/styles/bigchain/_code.scss | 44 +++++++++++++++++++++++++
 package.json                            |  1 +
 4 files changed, 78 insertions(+)
 create mode 100644 _src/_assets/javascripts/page-guides.js

diff --git a/_config.yml b/_config.yml
index 5ab4abc..685b7bd 100644
--- a/_config.yml
+++ b/_config.yml
@@ -101,6 +101,7 @@ defaults:
       values:
         toc: true
         image: share-image-guides.png
+        js: page-guides.min.js
 
 # Plugins
 # --------------------
diff --git a/_src/_assets/javascripts/page-guides.js b/_src/_assets/javascripts/page-guides.js
new file mode 100644
index 0000000..af116cf
--- /dev/null
+++ b/_src/_assets/javascripts/page-guides.js
@@ -0,0 +1,32 @@
+
+//=include clipboard/dist/clipboard.js
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    // Clipboard button
+    const clipboardImage = '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><path d="M16 8v8H8v4h12V8h-4zm0-2h6v16H6v-6H0V0h16v6zM2 2v12h12V2H2z"></path></svg>'
+    const successImage = '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M2.12132034,39.4786797 C0.949747468,38.3071068 -0.949747468,38.3071068 -2.12132034,39.4786797 C-3.29289322,40.6502525 -3.29289322,42.5497475 -2.12132034,43.7213203 L14.2786797,60.1213203 C15.5878487,61.4304894 17.7587151,61.2529588 18.8377878,59.7484823 L60.4377878,1.74848232 C61.403448,0.402129267 61.0948354,-1.47212773 59.7484823,-2.43778785 C58.4021293,-3.40344797 56.5278723,-3.09483537 55.5622122,-1.74848232 L16.0221415,53.3795008 L2.12132034,39.4786797 Z" transform="translate(3 3)"/></svg>'
+    const clipboardButton = `<button class="btn btn--clipboard" title="Copy to clipboard">${clipboardImage}</button>`
+
+    const codeBlocks = document.querySelectorAll('.highlight')
+
+    codeBlocks.forEach(codeBlock => {
+        codeBlock.insertAdjacentHTML('afterbegin', clipboardButton)
+    })
+
+    const buttons = document.querySelectorAll('.highlight .btn--clipboard')
+
+    buttons.forEach(button => {
+        const clipboard = new Clipboard(button, {
+            target: (trigger) => {
+                return trigger.nextElementSibling;
+            }
+        })
+
+        clipboard.on('success', e => {
+            e.trigger.classList.add('success')
+            e.trigger.innerHTML = successImage
+            e.trigger.insertAdjacentHTML('afterend', '<span class="success__text">Copied to clipboard</span>')
+            e.clearSelection()
+        })
+    })
+})
diff --git a/_src/_assets/styles/bigchain/_code.scss b/_src/_assets/styles/bigchain/_code.scss
index e61bce4..4cc9ed1 100644
--- a/_src/_assets/styles/bigchain/_code.scss
+++ b/_src/_assets/styles/bigchain/_code.scss
@@ -67,3 +67,47 @@ pre {
         border-radius: 0;
     }
 }
+
+//
+// Clipboard button
+//
+.highlight {
+    position: relative;
+
+    .btn--clipboard,
+    .success__text {
+        position: absolute;
+        top: .1rem;
+        right: .1rem;
+    }
+
+    .success__text {
+        top: 2rem;
+        right: -1.5rem;
+        font-size: $font-size-xs;
+    }
+}
+
+.btn--clipboard {
+    padding: 0 $spacer / 2;
+    box-shadow: none;
+    background: $brand-main-gray;
+    color: $brand-main-gray-light;
+    outline: 0;
+
+    svg {
+        fill: currentColor;
+        width: $font-size-sm;
+        height: $font-size-sm;
+    }
+
+    &:hover,
+    &:focus {
+        transform: none;
+        background: lighten($brand-main-gray, 5%);
+    }
+
+    &.success {
+        background: $brand-success;
+    }
+}
diff --git a/package.json b/package.json
index 9a63d56..094f792 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
   ],
   "dependencies": {
     "bigchaindb-driver": "^0.3.0",
+    "clipboard": "^1.7.1",
     "gumshoe": "github:cferdinandi/gumshoe",
     "is-in-viewport": "^3.0.0",
     "jquery": "^3.2.1",