summaryrefslogtreecommitdiff
path: root/sysret.org/themes/tabi-lean/static/js/copyCodeToClipboard.js
blob: 805eb59a4aae504cea0f2dda951b1926590ac0d8 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
const copiedText = document.getElementById('copy-success').textContent;
const initCopyText = document.getElementById('copy-init').textContent;

const changeIcon = (copyDiv, className) => {
    copyDiv.classList.add(className);
    copyDiv.setAttribute('aria-label', copiedText);
    setTimeout(() => {
        copyDiv.classList.remove(className);
        copyDiv.setAttribute('aria-label', initCopyText);
    }, 2500);
};

const addCopyEventListenerToDiv = (copyDiv, block) => {
    copyDiv.addEventListener('click', () => copyCodeAndChangeIcon(copyDiv, block));
};

const copyCodeAndChangeIcon = async (copyDiv, block) => {
    const code = block.querySelector('table')
        ? getTableCode(block)
        : getNonTableCode(block);
    try {
        await navigator.clipboard.writeText(code);
        changeIcon(copyDiv, 'checked');
    } catch (error) {
        changeIcon(copyDiv, 'error');
    }
};

const getNonTableCode = (block) => {
    return [...block.querySelectorAll('code')].map((code) => code.textContent).join('');
};

const getTableCode = (block) => {
    return [...block.querySelectorAll('tr')]
        .map((row) => row.querySelector('td:last-child')?.innerText ?? '')
        .join('');
};

document.querySelectorAll('pre:not(.mermaid)').forEach((block) => {
    const copyDiv = document.createElement('div');
    copyDiv.setAttribute('role', 'button');
    copyDiv.setAttribute('aria-label', initCopyText);
    copyDiv.setAttribute('title', initCopyText);
    copyDiv.className = 'copy-code';
    block.prepend(copyDiv);
    addCopyEventListenerToDiv(copyDiv, block);
});