static/scripts/copy-to-clipboard.js

   1 /* luflow.net web site */
   2 /* Public domain 2025. All rights waived */
   3
   4 // copy code button:
   5 let copyButtonLabel = 'Copy';
   6 let codeBlocks = Array.from(document.querySelectorAll('pre'));
   7
   8 for (let codeBlock of codeBlocks) {
   9     let wrapper = document.createElement('div');
  10     wrapper.style.position = 'relative';
  11
  12     let copyButton = document.createElement('button');
  13     copyButton.className = 'copy-code';
  14     copyButton.innerHTML = copyButtonLabel;
  15
  16     codeBlock.setAttribute('tabindex', '0');
  17     codeBlock.appendChild(copyButton);
  18     // wrap codebock with relative parent element:
  19     codeBlock.parentNode.insertBefore(wrapper, codeBlock);
  20     wrapper.appendChild(codeBlock);
  21
  22     copyButton.addEventListener('click', async () => {
  23         await copyCode(codeBlock, copyButton);
  24     });
  25 }
  26
  27 async function copyCode(block, button) {
  28     let code = block.querySelector('code');
  29     let text = code.innerText;
  30
  31     await navigator.clipboard.writeText(text);
  32
  33     // visual feedback that task is completed:
  34     button.innerText = 'Copied!';
  35
  36     setTimeout(() => {
  37         button.innerText = copyButtonLabel;
  38     }, 700);
  39 }