Add temporary check mark icon on copy to clipboard

4 files changed, 27 insertions, 16 deletions

diff --git a/assets/js/code.js b/assets/js/code.js
index fdb10f3..6a66f89 100644
--- a/assets/js/code.js
+++ b/assets/js/code.js
@@ -1,6 +1,6 @@
 const codeActionButtons = [
   {
-    icon: 'copy', 
+    icon: 'copy',
     id: 'copy',
     title: 'Copy Code',
     show: true
@@ -9,7 +9,7 @@ const codeActionButtons = [
     icon: 'order',
     id: 'lines',
     title: 'Toggle Line Numbers',
-    show: true 
+    show: true
   },
   {
     icon: 'carly',
@@ -21,7 +21,7 @@ const codeActionButtons = [
     icon: 'expand',
     id: 'expand',
     title: 'Toggle code block expand',
-    show: false 
+    show: false
   }
 ];
 
@@ -175,7 +175,13 @@ function toggleLineWrap(elem) {
 }
 
 function copyCode(codeElement) {
-  lineNumbers = elems('.ln', codeElement);
+  const codeElementClone = codeElement.cloneNode(true);
+  const copyBtn = codeElement.parentNode.parentNode.querySelector(`.${copyId}`);
+  const originalTitle = copyBtn.title;
+  loadSvg('check', copyBtn);
+  copyBtn.title = 'Code Copied';
+
+  lineNumbers = elems('.ln', codeElementClone);
   // remove line numbers before copying
   if(lineNumbers.length) {
     lineNumbers.forEach(function(line){
@@ -183,9 +189,13 @@ function copyCode(codeElement) {
     });
   }
 
-  const codeToCopy = codeElement.textContent;
   // copy code
-  copyToClipboard(codeToCopy);
+  copyToClipboard(codeElementClone.textContent);
+
+  setTimeout(function() {
+    copyBtn.title = originalTitle;
+    loadSvg('copy', copyBtn);
+  }, 2250);
 }
 
 function disableCodeLineNumbers(block){
@@ -213,7 +223,7 @@ function disableCodeLineNumbers(block){
     const wrapIcon = elem(`.${wrapId}`, panel);
     codeBlockFits(block) ? false : deleteClass(wrapIcon, panelHide);
 
-    // append buttons 
+    // append buttons
     highlightWrapper.appendChild(panel);
   });
 
@@ -264,11 +274,7 @@ function disableCodeLineNumbers(block){
         }
       }
 
-      if(isCopyIcon) {
-        // clone code element
-        const codeElementClone = codeElement.cloneNode(true);
-        copyCode(codeElementClone);
-      }
+      if(isCopyIcon) copyCode(codeElement);
     }
   });
 
diff --git a/assets/js/index.js b/assets/js/index.js
index 28411e4..4cae091 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -217,9 +217,13 @@ function loadActions() {
     copyText.classList.add(yanked);
     copyText.innerText = 'Link Copied';
     if(!elem(`.${yanked}`, parent)) {
+      const icon = parent.getElementsByTagName('img')[0];
+      const originalSrc = icon.src;
+      icon.src = '{{ absURL "icons/check.svg" }}';
       parent.appendChild(copyText);
       setTimeout(function() {
         parent.removeChild(copyText)
+        icon.src = originalSrc;
       }, 2250);
     }
   }
diff --git a/assets/sass/_components.sass b/assets/sass/_components.sass
index 9e8f30d..8f1e815 100644
--- a/assets/sass/_components.sass
+++ b/assets/sass/_components.sass
@@ -129,7 +129,7 @@
     opacity: 1
     &ed
       position: absolute
-      right: -1rem
+      right: -2.2rem
       top: -2rem
       background-color: var(--theme)
       color: var(--light)
@@ -273,7 +273,7 @@
       background-image: var(--sunIcon)
       background-size: 60%
       background-repeat: no-repeat
-      background-position: center 
+      background-position: center
 
   &_icon
     height: 1rem
@@ -297,7 +297,7 @@
     border: none
     &::before
       display: none
-  p 
+  p
     &:first-child, ~ p
       padding-top: 0
     &:last-child
@@ -336,4 +336,4 @@
     stroke: var(--text) !important
   .messageLine0, .loopLine
     stroke: var(--theme) !important
-    fill: var(--theme) !important
\ No newline at end of file
+    fill: var(--theme) !important
diff --git a/static/icons/check.svg b/static/icons/check.svg
new file mode 100644
index 0000000..d4ab455
--- /dev/null
+++ b/static/icons/check.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#666"><path d="M99.941 293.748a21.78 21.78 0 0 1-7.175-16.153c0-11.938 9.823-21.765 21.764-21.765a21.772 21.772 0 0 1 15.737 6.733l85.958 83.825 164.42-194.504c18.463-21.833 51.574 6.326 33.213 28.125L234.276 392.324l-1.032 1.135c-8.327 8.55-22.218 8.74-30.773.412L99.941 293.748z"/></svg>