Monorepo for Tangled
tangled.org
wip: rework copy button
Signed-off-by: oppiliappan <me@oppi.li>
author
oppiliappan
date
(Jun 10, 2026, 3:44 PM +0100)
commit
fd1880d1
fd1880d14760a4f72c827690d4ad08fb950d0d29
parent
23d7de0d
23d7de0db09817c3eccfc2b93bed0601eb19600a
change-id
vskknvmm
vskknvmmrvynzvtpvtzrwmmxusupyloy
+14
-13
+4
-4
appview/pages/templates/repo/fragments/copyFileButton.html
+4
-4
appview/pages/templates/repo/fragments/copyFileButton.html
···
1
1
{{ define "repo/fragments/copyFileButton" }}
2
2
<button type="button"
3
-
class="btn-flat gap-1.5"
3
+
class="btn-flat"
4
4
onclick="copyRawFile(this, '{{ .Url }}')">
5
-
<span class="copy-check hidden">{{ i "check" "size-3.5" }}</span>
6
-
<span class="copy-label">copy to clipboard</span>
7
-
<span class="copy-spinner hidden">{{ i "loader-circle" "size-3.5 animate-spin" }}</span>
5
+
<span class="copy-icon">{{ i "copy" "size-4" }}</span>
6
+
<span class="copy-spinner hidden">{{ i "loader-circle" "size-4 animate-spin" }}</span>
7
+
<span class="copy-check hidden">{{ i "check" "size-4" }}</span>
8
8
</button>
9
9
{{ end }}
+10
-9
appview/pages/templates/repo/fragments/copyFileScript.html
+10
-9
appview/pages/templates/repo/fragments/copyFileScript.html
···
1
1
{{ define "repo/fragments/copyFileScript" }}
2
2
<script>
3
3
async function copyRawFile(btn, url) {
4
-
const label = btn.querySelector('.copy-label');
4
+
const icon = btn.querySelector('.copy-icon');
5
5
const spinner = btn.querySelector('.copy-spinner');
6
-
label.textContent = 'copying';
6
+
const check = btn.querySelector('.copy-check');
7
+
8
+
icon.classList.add('hidden');
7
9
spinner.classList.remove('hidden');
8
10
btn.disabled = true;
11
+
9
12
try {
10
13
const res = await fetch(url);
11
14
if (!res.ok) throw new Error();
···
20
23
await navigator.clipboard.writeText(text);
21
24
}
22
25
spinner.classList.add('hidden');
23
-
label.textContent = 'copied';
24
-
btn.querySelector('.copy-check').classList.remove('hidden');
26
+
check.classList.remove('hidden');
25
27
btn.disabled = false;
26
28
setTimeout(() => {
27
-
label.textContent = 'copy to clipboard';
28
-
btn.querySelector('.copy-check').classList.add('hidden');
29
-
}, 2500);
29
+
check.classList.add('hidden');
30
+
icon.classList.remove('hidden');
31
+
}, 2000);
30
32
} catch {
31
33
spinner.classList.add('hidden');
32
-
label.textContent = 'error';
34
+
icon.classList.remove('hidden');
33
35
btn.disabled = false;
34
-
setTimeout(() => { label.textContent = 'copy to clipboard'; }, 2500);
35
36
}
36
37
}
37
38
</script>