click-to-copy.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. let codeListings = document.querySelectorAll('.highlight > pre');
  2. for (let index = 0; index < codeListings.length; index++) {
  3. const codeSample = codeListings[index].querySelector('code');
  4. const copyButton = document.createElement('button');
  5. const buttonAttributes = {
  6. type: 'button',
  7. title: 'Copy to clipboard',
  8. 'data-bs-toggle': 'tooltip',
  9. 'data-bs-placement': 'top',
  10. 'data-bs-container': 'body',
  11. };
  12. Object.keys(buttonAttributes).forEach((key) => {
  13. copyButton.setAttribute(key, buttonAttributes[key]);
  14. });
  15. copyButton.classList.add(
  16. 'fas',
  17. 'fa-copy',
  18. 'btn',
  19. 'btn-sm',
  20. 'td-click-to-copy'
  21. );
  22. const tooltip = new bootstrap.Tooltip(copyButton);
  23. copyButton.onclick = () => {
  24. copyCode(codeSample);
  25. copyButton.setAttribute('data-bs-original-title', 'Copied!');
  26. tooltip.show();
  27. };
  28. copyButton.onmouseout = () => {
  29. copyButton.setAttribute('data-bs-original-title', 'Copy to clipboard');
  30. tooltip.hide();
  31. };
  32. const buttonDiv = document.createElement('div');
  33. buttonDiv.classList.add('click-to-copy');
  34. buttonDiv.append(copyButton);
  35. codeListings[index].insertBefore(buttonDiv, codeSample);
  36. }
  37. const copyCode = (codeSample) => {
  38. navigator.clipboard.writeText(codeSample.textContent.trim() + '\n');
  39. };