50 lines
1.3 KiB
Plaintext
50 lines
1.3 KiB
Plaintext
package ui
|
|
|
|
import (
|
|
"fmt"
|
|
"mal/internal/jikan"
|
|
)
|
|
|
|
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={ nextURL } hx-trigger="revealed" hx-swap="outerHTML"></div>
|
|
}
|
|
<script>
|
|
(function() {
|
|
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');
|
|
if (id) {
|
|
if (seen.has(id)) {
|
|
item.remove();
|
|
} else {
|
|
seen.add(id);
|
|
}
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
}
|
|
|
|
templ CatalogItem(anime jikan.Anime) {
|
|
<a href={ templ.URL(fmt.Sprintf("/anime/%d", anime.MalID)) }>
|
|
if anime.ImageURL() != "" {
|
|
<img src={ anime.ImageURL() } alt={ anime.DisplayTitle() } class="catalog-thumb" loading="lazy"/>
|
|
} else {
|
|
<div class="no-image">No image</div>
|
|
}
|
|
</a>
|
|
<div class="catalog-title">
|
|
{ anime.DisplayTitle() }
|
|
</div>
|
|
}
|