add a Copy code to clipboard button

only for java for now. maybe more later.

Signed-off-by: Christoph Rueger <[email protected]>

Author: chrisrueger

_includes/footer.htm

@@ -27,4 +27,42 @@
     $( document ).ready(function() {
         $(document).foundation();
     });
+
+// copy to clipboard buttons
+
+const copyButtonLabel = "Copy Code";
+
+// use a class selector if available
+// TODO only java for now. maybe more later
+let blocks = document.querySelectorAll(".language-java");
+
+blocks.forEach((block) => {
+  // only add button if browser supports Clipboard API
+  if (navigator.clipboard) {
+    let button = document.createElement("button");
+    button.classList.add("copycodebtn");
+    
+    button.innerText = copyButtonLabel;
+    block.appendChild(button);
+
+    button.addEventListener("click", async () => {
+      await copyCode(block, button);
+    });
+    
+  }
+});
+
+async function copyCode(block, button) {
+  let code = block.querySelector("code");
+  let text = code.innerText;
+
+  await navigator.clipboard.writeText(text);
+
+  button.innerText = "Code Copied";
+
+    setTimeout(()=> {
+        button.innerText = copyButtonLabel;
+    },2000)
+}
+
 </script>

css/style.scss

@@ -91,4 +91,20 @@ signature {
 
 code {
   all: revert !important;
-}
+}
+
+div[class*="language-"] {
+  position: relative;
+  margin: 5px 0 ;
+  padding: 1.75rem 0 1.75rem 1rem;
+}
+
+div[class*="language-"] button{
+  position: absolute;
+  top: 35px;
+  right: 5px;
+  border-radius: 8px;
+  background-color: grey;
+  padding: 5px;
+}
+