|
1 |
| -import ClipboardJS from 'clipboard/dist/clipboard'; |
| 1 | +import ClipboardJS from 'clipboard/dist/clipboard' |
2 | 2 |
|
3 |
| -document.querySelectorAll('pre').forEach((pre, key) => { |
| 3 | +document.querySelectorAll('pre').forEach(pre => { |
| 4 | + if ('nocopy' in pre.dataset) { |
| 5 | + return |
| 6 | + } |
4 | 7 |
|
5 |
| - if (("nocopy" in pre.dataset)) { |
6 |
| - return; |
7 |
| - } |
| 8 | + const codeBlock = pre.querySelector('code') |
| 9 | + const btn = document.createElement('button') |
8 | 10 |
|
9 |
| - let codeBlock = pre.querySelector('code'); |
10 |
| - let btn = document.createElement('button'); |
| 11 | + const codeId = `code${ Math.random().toString(36).slice(2) }` |
| 12 | + codeBlock.setAttribute('id', codeId) |
11 | 13 |
|
| 14 | + pre.setAttribute('style', 'position:relative;') |
12 | 15 |
|
13 |
| - var codeId = 'code' + Math.random().toString(36).slice(2); |
14 |
| - codeBlock.setAttribute('id', codeId); |
| 16 | + btn.innerHTML = 'copy' |
| 17 | + btn.setAttribute('title', 'copy') |
| 18 | + btn.setAttribute('class', 'rounded overflow-visible absolute top-1 right-1 p-3 text-white px-1 py-1 font-mono text-sm text-gray-900 bg-teal-100 rounded-md') |
| 19 | + btn.setAttribute('data-copybutton', '') |
| 20 | + btn.dataset.clipboardTarget = `#${ codeBlock.id }` |
| 21 | + pre.appendChild(btn) |
| 22 | +}) |
15 | 23 |
|
16 |
| - pre.setAttribute('style', 'position:relative;'); |
17 |
| - |
18 |
| - btn.innerHTML = "copy"; |
19 |
| - btn.setAttribute('title', 'copy'); |
20 |
| - btn.setAttribute('class', 'rounded overflow-visible absolute top-1 right-1 p-3 text-white px-1 py-1 font-mono text-sm text-gray-900 bg-teal-100 rounded-md'); |
21 |
| - btn.setAttribute("data-copybutton", ""); |
22 |
| - btn.dataset.clipboardTarget = `#${codeBlock.id}`; |
23 |
| - pre.appendChild(btn); |
24 |
| - |
25 |
| -}); |
26 |
| - |
27 |
| -var clipboard = new ClipboardJS('[data-copybutton]'); |
| 24 | +const clipboard = new ClipboardJS('[data-copybutton]') |
28 | 25 |
|
29 | 26 | clipboard.on('success', (element) => {
|
30 |
| - element.clearSelection(); |
31 |
| - |
32 |
| - let btn = element.trigger; |
33 |
| - |
34 |
| - btn.innerHTML = 'copied!'; |
35 |
| - |
36 |
| - setTimeout(() => { |
37 |
| - btn.innerHTML = 'copy'; |
38 |
| - }, 1000); |
39 |
| -}); |
| 27 | + element.clearSelection() |
| 28 | + |
| 29 | + const btn = element.trigger |
| 30 | + |
| 31 | + btn.innerHTML = 'copied!' |
| 32 | + |
| 33 | + setTimeout(() => { |
| 34 | + btn.innerHTML = 'copy' |
| 35 | + }, 1000) |
| 36 | +}) |
0 commit comments