new clipboard js file, added clipboard css, added link to clipboardJS…

… cdn to template

_javascripts/clipboard.js

@@ -0,0 +1,43 @@
+// This file runs the Clipboard.js functionality
+document.querySelectorAll('div.listingblock').forEach((codeblock, index) => {
+  codeblock.getElementsByTagName('pre')[0].insertAdjacentHTML("beforebegin", "<p class='clipboard-button-container'><span class='clipboard-button fa fa-clipboard'></span></p>");
+  document.getElementsByTagName('pre')[index].setAttribute('id',`clipboard-${index}`);
+});
+
+document.querySelectorAll('span.clipboard-button').forEach((copybutton, index) => {
+  copybutton.setAttribute('data-clipboard-target',`#clipboard-${index}`);
+});
+
+var clipboard = new ClipboardJS('.clipboard-button', {
+    text: function(target) {
+      const targetId = target.getAttribute('data-clipboard-target').substr(1);
+      const clipboardText = document.getElementById(targetId).innerText.replace(/\$\s/g, "");
+
+      if (clipboardText.slice(0, 2) === "# ") {
+        return clipboardText.substr(2);
+      }
+
+      return clipboardText;
+    }
+});
+
+clipboard.on("success", function (e) {
+  const triggerId = e.trigger.getAttribute("data-clipboard-target").substr(1);
+  const triggerNode = document.getElementById(triggerId);
+
+  const selection = window.getSelection();
+  selection.removeAllRanges();
+
+  const range = document.createRange();
+  range.selectNodeContents(triggerNode);
+  selection.addRange(range);
+
+  e.trigger.classList.toggle("fa-clipboard");
+  e.trigger.classList.toggle("fa-check");
+
+  setTimeout(function () {
+    e.clearSelection();
+    e.trigger.classList.toggle("fa-clipboard");
+    e.trigger.classList.toggle("fa-check");
+  }, 2000);
+});

_stylesheets/docs.css

@@ -141,6 +141,38 @@ License: https://creativecommons.org/licenses/by/2.0/
 
 /* End footer edits */
 
+/* ClipboardJS */
+p.clipboard-button-container {
+  position: relative;
+}
+
+span.clipboard-button {
+  position: absolute;
+  right: 0px;
+  bottom: -28px;
+  z-index: 1;
+  display: block;
+  width: 30px;
+  padding: 5px;
+  text-align: center;
+}
+
+span.clipboard-button:hover {
+  cursor: pointer;
+}
+
+.fa-clipboard {
+  color: #404040;
+}
+
+.fa-clipboard:hover {
+  color: #AAAAAA;
+}
+
+.fa-check {
+  color: #73804E;
+}
+/* End ClipboardJS edits */
 
 .fa-inverse:hover {
   color: #ccc;

_templates/_page_openshift.html.erb

@@ -10,7 +10,8 @@
   <meta content="width=device-width, initial-scale=1.0" name="viewport">
   <title><%= [topic_title, subgroup_title].compact.join(' - ') %> | <%= group_title %> | <%= distro %> <%= version %></title>
   <link href="https://assets.openshift.net/content/subdomain.css" rel="stylesheet" type="text/css">
-  <link href="https://docs.openshift.com/container-platform/4.1/_stylesheets/docs.css" rel="stylesheet" />
+  <!--<link href="https://docs.openshift.com/container-platform/4.1/_stylesheets/docs.css" rel="stylesheet" />-->
+  <link href="../../_stylesheets/docs.css" rel="stylesheet" />
   <link href="https://docs.openshift.com/container-platform/4.1/_stylesheets/search.css" rel="stylesheet" />
   <link href="https://assets.openshift.net/content/subdomain/touch-icon-precomposed.png" rel="apple-touch-icon-precomposed" type="image/png">
   <link href="https://assets.openshift.net/content/subdomain/favicon32x32.png" rel="shortcut icon" type="text/css">
@@ -146,6 +147,9 @@
   <script src="https://docs.openshift.com/container-platform/4.1/_javascripts/reformat-html.js" type="text/javascript"></script>
   <script src="https://docs.openshift.com/container-platform/4.1/_javascripts/hc-search.js" type="text/javascript"></script>
   <script src="https://docs.openshift.com/container-platform/4.1/_javascripts/page-loader.js" type="text/javascript"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" type="text/javascript"></script>
+  <!--<script src="https://docs.openshift.com/container-platform/4.1/_javascripts/clipboard.js" type="text/javascript"></script>-->
+  <script src="../../_javascripts/clipboard.js" type="text/javascript"></script>
 
   <script>
   var dk = '<%= distro_key %>';