Monorepo for Tangled
tangled.org
1{{ define "user/fragments/picLink" }}
2 {{ $did := index . 0 }}
3 {{ $classes := index . 1 }}
4 {{ $handle := resolve $did }}
5 {{ $vr := false }}
6 {{ if ge (len .) 3 }}
7 {{ $vr = index . 2 }}
8 {{ end }}
9 <div class="relative inline-block"
10 {{ if $vr }}
11 hx-get="/profile/popover?did={{ $did }}"
12 hx-trigger="mouseenter once"
13 hx-target="find [data-profile-popover-content]"
14 hx-swap="innerHTML"
15 onmouseenter="(function(el){
16 clearTimeout(el._pht);
17 el._pht = setTimeout(function(){
18 var r=el.getBoundingClientRect(),p=el.querySelector('[data-profile-popover]');
19 if(p){p.style.top=r.bottom+'px';p.style.left=r.left+'px';p.classList.remove('hidden');}
20 }, 500);
21 })(this)"
22 onmouseleave="(function(el){
23 clearTimeout(el._pht);
24 var p=el.querySelector('[data-profile-popover]');
25 if(!p)return;
26 var modal=document.getElementById('vouch-modal-'+p.dataset.vouchModalId);
27 if(modal&&modal.matches(':popover-open'))return;
28 p.classList.add('hidden');
29 })(this)"
30 {{ end }}>
31 <a href="/{{ $handle }}" title="{{ $handle }}">
32 <img
33 src="{{ tinyAvatar $did }}"
34 alt=""
35 class="rounded-full border border-gray-300 dark:border-gray-700 {{ $classes }}"
36 />
37 </a>
38 {{ if $vr }}
39 {{ if ne $did $vr.ViewerDid }}
40 <button
41 type="button"
42 popovertarget="vouch-modal-{{ normalizeForHtmlId $vr.SubjectDid.String }}"
43 popovertargetaction="toggle"
44 class="absolute -bottom-0.5 -right-0.5 w-1/2 h-1/2 cursor-pointer">
45 {{ if $vr.IsDirectVouch }}
46 {{ template "fragments/icons/shield-direct-vouch" "w-full h-full" }}
47 {{ else if $vr.IsDirectDenounce }}
48 {{ template "fragments/icons/shield-direct-denounce" "w-full h-full" }}
49 {{ else if $vr.IsMixed }}
50 {{ template "fragments/icons/shield-mixed" "w-full h-full" }}
51 {{ else if $vr.IsIndirectVouch }}
52 {{ template "fragments/icons/shield-indirect-vouch" "w-full h-full text-white dark:text-gray-900" }}
53 {{ else if $vr.IsIndirectDenounce }}
54 {{ template "fragments/icons/shield-indirect-denounce" "w-full h-full text-white dark:text-gray-900" }}
55 {{ end }}
56 </button>
57 {{ end }}
58 {{ end }}
59 {{ if $vr }}
60 <div data-profile-popover
61 data-vouch-modal-id="{{ normalizeForHtmlId $did }}"
62 class="hidden z-[9999] pt-1 w-80"
63 style="position:fixed;">
64 <div data-profile-popover-content
65 class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded shadow-sm p-3">
66 <div class="flex items-center justify-center py-4">
67 {{ i "loader-circle" "w-5 h-5 animate-spin text-gray-400" }}
68 </div>
69 </div>
70 </div>
71 {{ end }}
72 </div>
73 {{ if $vr }}
74 {{ if ne $did $vr.ViewerDid }}
75 {{ template "user/fragments/vouchPopover" (dict "VouchRelationship" $vr) }}
76 {{ end }}
77 {{ end }}
78{{ end }}