mirror of
https://github.com/stancl/tenancy-docs.git
synced 2025-12-12 18:24:03 +00:00
53 lines
No EOL
2.2 KiB
JavaScript
53 lines
No EOL
2.2 KiB
JavaScript
import ClipboardJS from 'clipboard/dist/clipboard';
|
|
|
|
// These icons must be inline to avoid rendering bugs.
|
|
const clipboardIcon = `<svg class="fill-current h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path><path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path></svg>`;
|
|
const clipboardCopiedIcon = `<svg fill="currentColor" class="fill-current text-white h-5 w-5" viewBox="0 0 20 20"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>`;
|
|
|
|
// Copy to Clipboard.
|
|
let codeBlocks = document.querySelectorAll('.markdown pre');
|
|
|
|
codeBlocks.forEach((element, key) => {
|
|
// Add wrapper to code block.
|
|
var wrapper = document.createElement('div');
|
|
|
|
['relative', 'code-block-wrapper'].forEach((value) => {
|
|
wrapper.classList.add(value);
|
|
});
|
|
|
|
element.parentNode.insertBefore(wrapper, element);
|
|
|
|
wrapper.appendChild(element);
|
|
|
|
// Copy to clipboard button.
|
|
let copyToClipboardBtn = document.createElement('button');
|
|
|
|
copyToClipboardBtn.innerHTML = clipboardIcon;
|
|
copyToClipboardBtn.id = `clipButton-${key}`;
|
|
|
|
['md:block', 'hidden'].forEach((value) => {
|
|
copyToClipboardBtn.classList.add(value);
|
|
});
|
|
|
|
copyToClipboardBtn.setAttribute('aria-label', 'Copy to Clipboard');
|
|
copyToClipboardBtn.setAttribute('title', 'Copy to Clipboard');
|
|
copyToClipboardBtn.classList.add('copyBtn');
|
|
|
|
wrapper.appendChild(copyToClipboardBtn);
|
|
|
|
let copyToClipboard = new ClipboardJS(`#${copyToClipboardBtn.id}`);
|
|
|
|
copyToClipboard.on('success', (element) => {
|
|
copyToClipboardBtn.innerHTML = clipboardCopiedIcon;
|
|
element.clearSelection();
|
|
setTimeout(() => {
|
|
copyToClipboardBtn.innerHTML = clipboardIcon;
|
|
}, 1500);
|
|
});
|
|
|
|
// Code Element.
|
|
let codeElement = element.querySelector('code');
|
|
|
|
codeElement.id = `clipText-${key}`;
|
|
copyToClipboardBtn.dataset.clipboardTarget = `#${codeElement.id}`;
|
|
}); |