104 lines
2.4 KiB
Cheetah
104 lines
2.4 KiB
Cheetah
{{/* anchor props */}}
|
|
{{/* required: .AnchorTag, .AnchorID, .AnchorClickedEventName, .AnchorContent */}}
|
|
{{/* optional: .AnchorClass, .AnchorStyle */}}
|
|
{{/* popover props */}}
|
|
{{/* required: .PopoverID, PopoverContentIDPrefix, .PopoverContents: [](string|HTML) */}}
|
|
{{/* optional: .PopoverStyle */}}
|
|
|
|
{{- $dot := . }}
|
|
{{- $anchorTag := or .AnchorTag "div" }}
|
|
{{printf "<%s" $anchorTag | rawHTML}}
|
|
{{if .AnchorID}}id="{{.AnchorID}}"{{end}}
|
|
{{if .AnchorClass}}class="{{.AnchorClass}}"{{end}}
|
|
style="anchor-name: --{{.AnchorID}}; {{.AnchorStyle}}"
|
|
_="
|
|
on click
|
|
set popover to the #{{.PopoverID}}
|
|
send {{.AnchorClickedEventName}} to #{{.PopoverID}}
|
|
"
|
|
{{ rawHTML ">" }}
|
|
{{ .AnchorContent }}
|
|
{{printf "</%s>" $anchorTag | rawHTML}}
|
|
<div
|
|
popover="manual"
|
|
id={{.PopoverID}}
|
|
class="
|
|
max-w-[80vw]
|
|
p-[1em]
|
|
mt-[1.5em]
|
|
|
|
bg-card
|
|
animate-pulse
|
|
border-[1px] border-sidebar-border rounded-lg
|
|
cursor-default
|
|
|
|
open:grid
|
|
|
|
{{.AnchorClass}}
|
|
"
|
|
{{/* TODO: move this style into the class, if possible */}}
|
|
style="
|
|
position: fixed;
|
|
position-anchor: --{{.AnchorID}};
|
|
position-area: bottom;
|
|
|
|
grid-template-columns: 1fr max-content;
|
|
grid-template-rows: max-content;
|
|
gap: 1em;
|
|
|
|
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
|
|
|
|
{{.PopoverStyle}}
|
|
"
|
|
hx-preserve
|
|
_="
|
|
init
|
|
call me.showPopover()
|
|
set :anchorClicks to 0
|
|
|
|
on click
|
|
event.preventDefault()
|
|
|
|
on {{.AnchorClickedEventName}}
|
|
set :anchorClicks to :anchorClicks + 1
|
|
{{- range $i, $content := .PopoverContents }}
|
|
{{- $numClicks := addInt $i 1 }}
|
|
{{- $idToHide := printf "%s-%d" $dot.PopoverContentIDPrefix $i }}
|
|
{{- $idToShow := printf "%s-%d" $dot.PopoverContentIDPrefix (addInt $i 1) }}
|
|
{{- $maxIndex := subInt (len $dot.PopoverContents) 1 }}
|
|
|
|
{{- if lt $i $maxIndex }}
|
|
if :anchorClicks is {{$numClicks}} then
|
|
hide #{{$idToHide}}
|
|
show #{{$idToShow}}
|
|
else
|
|
{{- else if eq $i $maxIndex }}
|
|
if :anchorClicks is {{$numClicks}} then
|
|
call me.hidePopover()
|
|
end
|
|
{{- end }}
|
|
{{- end }}
|
|
"
|
|
>
|
|
{{- range $i, $content := .PopoverContents }}
|
|
<span id="{{$dot.PopoverContentIDPrefix}}-{{$i}}" style="grid-column: 1; {{if gt $i 0}}display: none;{{end}}">
|
|
{{$content}}
|
|
</span>
|
|
{{- end }}
|
|
<button
|
|
class="cursor-pointer"
|
|
style="
|
|
grid-column: 2;
|
|
font-size: 2em;
|
|
line-height: 0.5em;
|
|
"
|
|
_="
|
|
on click
|
|
set parent to the closest #{{.PopoverID}}
|
|
call parent.hidePopover()
|
|
"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|