Add temporary check mark icon on copy to clipboard

Blake Gearin

10.29.2022 65b76042967afe1c7d092b08e0a3cf571d3dedef

Add temporary check mark icon on copy to clipboard

 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 @@
    icon: 'order',
    id: 'lines',
    title: 'Toggle Line Numbers',
    show: true 
    show: true
  },
  {
    icon: 'carly',
@@ -21,7 +21,7 @@
    icon: 'expand',
    id: 'expand',
    title: 'Toggle code block expand',
    show: false 
    show: false
  }
];

@@ -175,7 +175,13 @@
}

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 @@
    });
  }

  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 @@
    const wrapIcon = elem(`.${wrapId}`, panel);
    codeBlockFits(block) ? false : deleteClass(wrapIcon, panelHide);

    // append buttons 
    // append buttons
    highlightWrapper.appendChild(panel);
  });

@@ -264,11 +274,7 @@
        }
      }

      if(isCopyIcon) {
        // clone code element
        const codeElementClone = codeElement.cloneNode(true);
        copyCode(codeElementClone);
      }
      if(isCopyIcon) copyCode(codeElement);
    }
  });


 assets/js/index.js

@@ -217,9 +217,13 @@
    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);
    }
  }

 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
    fill: var(--theme) !important

 static/icons/check.svg

New file
@@ -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>