Merge pull request #2167 from segmentio/copy-code-samples

one click code-sample copy

Author: markzegarelli

js/code-copy/index.js

@@ -0,0 +1,70 @@
+import tippy from 'tippy.js'
+
+export default function () {
+
+  // get the list of all highlight code blocks
+  const highlights = document.querySelectorAll("div.highlighter-rouge")
+
+
+
+
+  highlights.forEach(div => {
+    // create the copy button
+    const copy = document.createElement("button")
+    copy.innerHTML = "<img src='/docs/images/duplicate.svg' />"
+    // add the event listener to each click
+    copy.addEventListener("click", handleCopyClick)
+    // append the copy button to each code block
+    div.append(copy)
+    
+  })
+
+
+
+
+
+  const copyToClipboard = str => {
+    const el = document.createElement("textarea") // Create a <textarea> element
+    el.value = str // Set its value to the string that you want copied
+    el.setAttribute("readonly", "") // Make it readonly to be tamper-proof
+    el.style.position = "absolute"
+    el.style.left = "-9999px" // Move outside the screen to make it invisible
+    document.body.appendChild(el) // Append the <textarea> element to the HTML document
+    const selected =
+      document.getSelection().rangeCount > 0 // Check if there is any content selected previously
+      ?
+      document.getSelection().getRangeAt(0) // Store selection if found
+      :
+      false // Mark as false to know no selection existed before
+    el.select() // Select the <textarea> content
+    document.execCommand("copy") // Copy - only works as a result of a user action (e.g. click events)
+    document.body.removeChild(el) // Remove the <textarea> element
+    if (selected) {
+      // If a selection existed before copying
+      document.getSelection().removeAllRanges() // Unselect everything on the HTML document
+      document.getSelection().addRange(selected) // Restore the original selection
+    }
+  }
+
+
+
+  function handleCopyClick(evt) {
+    // get the children of the parent element
+    const {
+      children
+    } = evt.target.parentElement.parentElement
+    // grab the first element (we append the copy button on afterwards, so the first will be the code element)
+    // destructure the innerText from the code block
+    const {
+      innerText
+    } = Array.from(children)[0]
+    // copy all of the code to the clipboard
+    copyToClipboard(innerText)
+    // alert to show it worked, but you can put any kind of tooltip/popup to notify it worked
+    const alert = children[1]
+    alert.classList.add("green")
+    setTimeout(() => {
+      alert.classList.remove("green")
+    }, 700)
+  }
+}

js/index.js

@@ -22,6 +22,7 @@ import glightbox from './glightbox'
 import autocomplete from './algolia'
 import mapTable from './map-table'
 import expando from './expando'
+import codeCopy from './code-copy'
 feedback()
 accordion()
 accordionGroup()
@@ -44,4 +45,5 @@ tracking()
 searchBar()
 glightbox()
 mapTable()
-expando()
+expando()
+codeCopy()

src/_includes/content/snippet-helper.md

@@ -1,6 +1,6 @@
 {% codeexample %}
 {% codeexampletab Minified %}
-```js
+```html
 <script>
   !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="YOUR_WRITE_KEY";analytics.SNIPPET_VERSION="4.15.2";
   analytics.load("YOUR_WRITE_KEY");

src/_sass/components/_markdown.scss

@@ -146,6 +146,7 @@
       }
       div.highlighter-rouge {
         margin: 15px auto;
+        position: relative;
       }
       table {
         margin: 15px auto;
@@ -378,4 +379,43 @@ tr.show {
     max-height: 100%;
     transition: max-height .5s ease-in-out;
   }
+
 }
+
+div.highlighter-rouge {
+  position: relative;
+
+  button {
+    color: #adb5bd;
+    box-sizing: border-box;
+    transition: 0.2s ease-out;
+    cursor: pointer;
+    user-select: none;
+    padding: 8px 10px;
+    font-size: 0.8em;
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-radius: 0 0.15rem;
+    width: 40px;
+    img {
+      width: 16px;
+      margin: 0;
+      border: none;
+      border-radius: 0px;
+    }
+    img:hover {
+      filter: invert(65%) sepia(9%) saturate(784%) hue-rotate(192deg) brightness(91%) contrast(87%);
+      transition: 0.2s ease-out;
+    }
+
+    img:active {
+      filter: invert(65%) sepia(9%) saturate(784%) hue-rotate(192deg) brightness(91%) contrast(87%);
+    }
+  }
+
+  .green{
+    background-color: #BAE5D5;
+    content: "copied!";
+  }
+}