kot.pink
1{{ define "repo/fragments/externalLinkPanel" }}
2 <div id="at-uri-panel" class="px-2 md:px-0">
3 <div class="flex justify-between items-center gap-2">
4 <span class="text-sm py-1 font-bold text-gray-500 dark:text-gray-400 capitalize">AT URI</span>
5 <div class="flex items-center gap-2">
6 <button
7 onclick="copyToClipboard(this)"
8 class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
9 title="Copy to clipboard">
10 {{ i "copy" "w-4 h-4" }}
11 </button>
12 <a
13 href="https://pdsls.dev/{{.}}"
14 class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
15 title="View in PDSls">
16 {{ i "arrow-up-right" "w-4 h-4" }}
17 </a>
18 </div>
19 </div>
20 <span
21 class="font-mono text-sm select-all cursor-pointer block max-w-full overflow-x-auto whitespace-nowrap scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600"
22 onclick="window.getSelection().selectAllChildren(this)"
23 title="{{.}}"
24 data-aturi="{{ . | string | safeUrl }}"
25 >{{.}}</span>
26
27
28 </div>
29
30 <script>
31 function copyToClipboard(button) {
32 const container = document.getElementById("at-uri-panel");
33 const urlSpan = container?.querySelector('[data-aturi]');
34 const text = urlSpan?.getAttribute('data-aturi');
35 console.log("copying to clipboard", text)
36 if (!text) return;
37
38 navigator.clipboard.writeText(text).then(() => {
39 const originalContent = button.innerHTML;
40 button.innerHTML = `{{ i "check" "w-4 h-4" }}`;
41 setTimeout(() => {
42 button.innerHTML = originalContent;
43 }, 2000);
44 });
45 }
46 </script>
47{{ end }}
48