Add "copy" command to code blocks

polychromatic · Oct 29, 2024 · 2bed758 · 2bed758
1 parent dacfc39
commit 2bed758
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 0 deletions.
diff --git a/_sass/buttons.scss b/_sass/buttons.scss
@@ -79,3 +79,61 @@
         filter: grayscale(0);
     }
 }
+
+/* Copy button for code blocks */
+pre {
+    position: relative;
+
+    &.copied {
+        animation: pre-block-copied 0.75s ease-in-out forwards;
+        border-image-slice: 1;
+
+        .copy-btn {
+            background: $bg-colour;
+            border-color: transparent;
+        }
+    }
+
+    &:hover .copy-btn,
+    &:focus .copy-btn {
+        opacity: 1;
+    }
+}
+
+.copy-btn {
+    appearance: none;
+    -webkit-appearance: none;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+    opacity: 0;
+    padding: 0.35em;
+    margin: 0;
+
+    &:hover,
+    &:focus {
+        background: $bg-button;
+        color: #fff;
+    }
+
+    img {
+        height: 1em;
+        width: 1em;
+        margin: auto;
+    }
+}
+
+@keyframes pre-block-copied {
+    0% { border-image: linear-gradient(315deg, $bg-colour, $bg-colour, $bg-colour, $bg-colour) 1; }
+    10% { border-image: linear-gradient(315deg, $secondary, $bg-colour, $bg-colour, $bg-colour) 1; }
+    20% { border-image: linear-gradient(315deg, $secondary, $secondary, $bg-colour, $bg-colour) 1; }
+    30% { border-image: linear-gradient(315deg, $secondary, $secondary, $secondary, $bg-colour) 1; }
+    40% { border-image: linear-gradient(315deg, $secondary, $secondary, $secondary, $secondary) 1; }
+    50% {
+        border-color: $secondary;
+    }
+    100% {
+        border-color: $bg-colour;
+    }
+}
diff --git a/assets/img/copy-ok.svg b/assets/img/copy-ok.svg
diff --git a/assets/img/copy.svg b/assets/img/copy.svg
diff --git a/assets/polychromatic.js b/assets/polychromatic.js
@@ -48,6 +48,11 @@ function pageEnter() {
     // Downloads page only
     if (window.location.pathname == "/download/")
         downloadPage();
+
+    // Add copy button to code blocks
+    document.querySelectorAll("pre code").forEach(function(code) {
+        makeCopyButton(code);
+    });
 }
 
 function downloadPage() {
@@ -141,5 +146,33 @@ function loadDeviceList(backend_id, devices_url, version_url) {
     requestVersion.send();
 }
 
+function makeCopyButton(code) {
+    const pre = code.parentNode;
+    const btn = document.createElement("button");
+    const img = document.createElement("img");
+
+    const iconCopy = "/assets/img/copy.svg";
+    const iconOK = "/assets/img/copy-ok.svg";
+
+    btn.className = "btn copy-btn";
+    btn.title = "Copy";
+    img.src = iconCopy;
+    btn.appendChild(img);
+    btn.addEventListener("click", function() {
+        navigator.clipboard.writeText(code.innerText).then(function() {
+            img.src = iconOK;
+            pre.classList.add("copied");
+            setTimeout(function() {
+                img.src = iconCopy;
+                pre.classList.remove("copied");
+            }, 2000);
+        }, function() {
+            window.alert("Unable to copy text to clipboard.");
+        });
+    });
+
+    pre.appendChild(btn);
+}
+
 // Initial site load
 pageEnter();