refactor: deduplicate list templates
This commit is contained in:
@@ -18,18 +18,21 @@ templ Catalog() {
|
||||
}
|
||||
}
|
||||
|
||||
templ CatalogItems(animes []jikan.Anime, nextPage int, hasNext bool) {
|
||||
templ InfiniteAnimeList(animes []jikan.Anime, hasNext bool, nextURL string, containerID string) {
|
||||
for _, anime := range animes {
|
||||
<div class="catalog-item" data-id={ fmt.Sprintf("%d", anime.MalID) }>
|
||||
@CatalogItem(anime)
|
||||
</div>
|
||||
}
|
||||
if hasNext {
|
||||
<div class="scroll-trigger" style="grid-column: 1 / -1; height: 20px;" hx-get={ string(templ.URL(fmt.Sprintf("/api/catalog?page=%d", nextPage))) } hx-trigger="revealed" hx-swap="outerHTML"></div>
|
||||
<div class="scroll-trigger" style="grid-column: 1 / -1; height: 20px;" hx-get={ nextURL } hx-trigger="revealed" hx-swap="outerHTML"></div>
|
||||
}
|
||||
<script>
|
||||
(function() {
|
||||
const items = document.querySelectorAll('#catalog-content .catalog-item[data-id]');
|
||||
const containerID = "{" + containerID + "}"; // fallback for string concat in JS
|
||||
const actualID = containerID.replace(/[{}]/g, '');
|
||||
const container = document.getElementById(actualID) || document;
|
||||
const items = container.querySelectorAll('.catalog-item[data-id]');
|
||||
const seen = new Set();
|
||||
items.forEach(item => {
|
||||
const id = item.getAttribute('data-id');
|
||||
@@ -45,6 +48,10 @@ templ CatalogItems(animes []jikan.Anime, nextPage int, hasNext bool) {
|
||||
</script>
|
||||
}
|
||||
|
||||
templ CatalogItems(animes []jikan.Anime, nextPage int, hasNext bool) {
|
||||
@InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/catalog?page=%d", nextPage))), "catalog-content")
|
||||
}
|
||||
|
||||
templ CatalogItem(anime jikan.Anime) {
|
||||
<a href={ templ.URL(fmt.Sprintf("/anime/%d", anime.MalID)) }>
|
||||
if anime.ImageURL() != "" {
|
||||
|
||||
Reference in New Issue
Block a user