arimelody.me/admin/components/credits/addcredit.html

48 lines
1.5 KiB
HTML
Raw Normal View History

<dialog id="addcredit">
<header>
<h2>Add artist credit</h2>
</header>
<ul>
{{range $Artist := .Artists}}
<li class="new-artist"
data-id="{{$Artist.ID}}"
hx-get="/admin/release/{{$.ReleaseID}}/newcredit/{{$Artist.ID}}"
hx-target="#editcredits ul"
hx-swap="beforeend"
>
<img src="{{$Artist.GetAvatar}}" alt="" width="16" loading="lazy" class="artist-avatar">
<span class="artist-name">{{$Artist.Name}} <span class="artist-id">({{$Artist.ID}})</span></span>
</li>
{{end}}
</ul>
{{if not .Artists}}
<p class="empty">There are no more artists to add.</p>
{{end}}
<div class="dialog-actions">
<button id="cancel" type="button">Cancel</button>
</div>
<script type="text/javascript">
(() => {
const newCreditModal = document.getElementById("addcredit")
const editCreditsModal = document.getElementById("editcredits")
const cancelBtn = newCreditModal.querySelector("#cancel");
editCreditsModal.addEventListener("htmx:afterSwap", () => {
newCreditModal.close();
newCreditModal.remove();
});
cancelBtn.addEventListener("click", () => {
newCreditModal.close();
newCreditModal.remove();
});
newCreditModal.showModal();
})();
</script>
</dialog>