feat(#202): Implement copy success / failure popup notifications

src/parser/copycode.ts

@@ -2,6 +2,8 @@ import MarkdownIt from 'markdown-it';
 import octicons from '@primer/octicons';
 
 const copyIcon = octicons['copy'].toSVG({ class: 'icon-copy' });
+const checkIcon = octicons['check'].toSVG({ class: 'icon-check' });
+const xIcon = octicons['x'].toSVG({ class: 'icon-x' });
 
 export default function copycode(md: MarkdownIt) {
     const defaultRender = md.renderer.rules.fence!;
@@ -11,7 +13,11 @@ export default function copycode(md: MarkdownIt) {
 <div class="pre-wrapper" style="position: relative">
     ${renderedPreBlock}
     <div class="copy-wrapper">
-        <button class="copy-button" data-clipboard-text="TODO: Implement proper copy content">${copyIcon}</button>
+        <button class="copy-button" data-clipboard-text="TODO: Implement proper copy content">
+            ${copyIcon}
+            ${checkIcon}
+            ${xIcon}
+        </button>
     </div>
 </div>
 `;

static/colors.css

@@ -19,6 +19,16 @@
     --icon-file: var(--text-secondary);
     --icon-back: var(--text-secondary);
 
+    /* Code Copy Icons */
+    --icon-copy-fg: #aaa;
+    --icon-copy-bg: #333;
+    --icon-check-fg: #ddffcc;
+    --icon-check-bg: #5c993d;
+    --icon-x-fg: #ffcccc;
+    --icon-x-bg: #993d3d;
+    --copy-button-fg: var(--icon-copy-fg)
+    --copy-button-bg: var(--icon-copy-bg)
+
     --syntax-text: var(--text-primary);
     --syntax-keyword: #aed7ff;
     --syntax-entity: #aeafff;
@@ -69,6 +79,16 @@
         --icon-file: #636c76;
         --icon-back: var(--text-secondary);
 
+        /* Code Copy Icons */
+        --icon-copy-fg: #1f2328;
+        --icon-copy-bg: #e7e9eb;
+        --icon-check-fg: #154000;
+        --icon-check-bg: #c7e6b8;
+        --icon-x-fg: #400000;
+        --icon-x-bg: #e6b8b8;
+        --copy-button-fg: var(--icon-copy-fg)
+        --copy-button-bg: var(--icon-copy-bg)
+
         /* source for light mode syntax theme:
          * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css
          * */

static/copycode/client.js

@@ -1,5 +1,72 @@
-var clipboard = new ClipboardJS('.copy-button');
+let clipboard = new ClipboardJS('.copy-button');
+
+// Setup copy button icons
+const Icons = {
+    Copy: {
+        Class: 'icon-copy',
+        ForegroundColor: '',
+        BackgroundColor: '',
+    },
+    Success: {
+        Class: 'icon-check',
+        ForegroundColor: '',
+        BackgroundColor: '',
+    },
+    Fail: {
+        Class: 'icon-x',
+        ForegroundColor: '',
+        BackgroundColor: '',
+    },
+};
+resetButtons();
+window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', resetButtons);
+
+function resetButtons() {
+    getIconColors();
+    document.querySelectorAll('.copy-button').forEach((btn) => {
+        setIcon(btn, Icons.Copy);
+    });
+}
+
+// Get icon color values from css
+function getIconColors() {
+    console.log('getting colors');
+    let element = window.getComputedStyle(document.documentElement);
+    Object.entries(Icons).forEach(([, icon]) => {
+        icon.ForegroundColor = element.getPropertyValue(`--${icon.Class}-fg`);
+        icon.BackgroundColor = element.getPropertyValue(`--${icon.Class}-bg`);
+    });
+}
+
+function setIcon(btn, icon) {
+    for (let child of btn.children) {
+        console.log(child.classList.contains(icon.Class));
+        if (child.classList.contains(icon.Class)) {
+            child.style.display = 'inline-block';
+            btn.style.setProperty('--copy-button-fg', icon.ForegroundColor);
+            btn.style.setProperty('--copy-button-bg', icon.BackgroundColor);
+        } else {
+            child.style.display = 'none';
+        }
+    }
+}
 
 //TODO: Implement success callback
+clipboard.on('success', function (e) {
+    console.info('Trigger:', e.trigger);
+    const btn = e.trigger;
+
+    console.info(Icons);
+
+    setIcon(btn, Icons.Success);
+
+    setTimeout(() => {
+        setIcon(btn, Icons.Copy);
+    }, 2000);
+});
 
 //TODO: Implement failure callback
+clipboard.on('error', function (e) {
+    console.log('Copy failed!');
+    console.error('Trigger:', e.trigger);
+});

static/markdown.css

@@ -193,6 +193,7 @@ blockquote {
     border: 0;
     border-radius: 0.4rem;
     background: none;
+    fill: var(--copy-button-fg);
     opacity: 0;
     outline: none;
     cursor: pointer;
@@ -203,10 +204,7 @@ pre:hover + .copy-wrapper .copy-button {
 }
 .copy-button:hover {
     opacity: 1;
-    background-color: var(--border-regular);
-}
-.copy-button {
-    fill: var(--text-primary);
+    background-color: var(--copy-button-bg);
 }
 
 /* --------------------------------------------------------------------------