-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathui.html
50 lines (47 loc) · 1.24 KB
/
ui.html
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
48
49
50
<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>
<script>
function selectElementContents(el) {
const range = document.createRange();
range.selectNodeContents(el);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range)
}
window.onmessage = async event => {
const data = event.data.pluginMessage.data;
if (event.data.pluginMessage.type === 'show') {
const codeEl = document.querySelector('#code');
new ClipboardJS('.copy');
codeEl.textContent = data;
selectElementContents(codeEl);
}
}
</script>
<html>
<style>
.copy {
border: 1px solid #e5e5e5;
background: white;
padding: 8px 12px;
font-weight: 600;
width: 100%;
transition: border 0.2s ease, background 0.3s ease-in-out;
}
.copy:hover {
background: #efefef;
}
.copy:focus {
outline: none;
}
.copy:active {
border: 1px solid #666;
}
</style>
<div>
<p>The svg code below contains unique id's</p>
<button class="copy" data-clipboard-target="#code">
Copy to clipboard
</button>
<pre><code id="code" style="white-space:pre-wrap;">There will be printed svg code</code></pre>
</div>
</html>