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

@@ -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){
@@ -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)

 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>