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 {
|
for _, anime := range animes {
|
||||||
<div class="catalog-item" data-id={ fmt.Sprintf("%d", anime.MalID) }>
|
<div class="catalog-item" data-id={ fmt.Sprintf("%d", anime.MalID) }>
|
||||||
@CatalogItem(anime)
|
@CatalogItem(anime)
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
if hasNext {
|
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>
|
<script>
|
||||||
(function() {
|
(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();
|
const seen = new Set();
|
||||||
items.forEach(item => {
|
items.forEach(item => {
|
||||||
const id = item.getAttribute('data-id');
|
const id = item.getAttribute('data-id');
|
||||||
@@ -45,6 +48,10 @@ templ CatalogItems(animes []jikan.Anime, nextPage int, hasNext bool) {
|
|||||||
</script>
|
</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) {
|
templ CatalogItem(anime jikan.Anime) {
|
||||||
<a href={ templ.URL(fmt.Sprintf("/anime/%d", anime.MalID)) }>
|
<a href={ templ.URL(fmt.Sprintf("/anime/%d", anime.MalID)) }>
|
||||||
if anime.ImageURL() != "" {
|
if anime.ImageURL() != "" {
|
||||||
|
|||||||
@@ -39,28 +39,5 @@ templ Discover() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
templ DiscoverItems(animes []jikan.Anime, listType string, nextPage int, hasNext bool) {
|
templ DiscoverItems(animes []jikan.Anime, listType string, nextPage int, hasNext bool) {
|
||||||
for _, anime := range animes {
|
@InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/discover/%s?page=%d", listType, nextPage))), "discover-content")
|
||||||
<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/discover/%s?page=%d", listType, nextPage))) } hx-trigger="revealed" hx-swap="outerHTML"></div>
|
|
||||||
}
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
const items = document.querySelectorAll('#discover-content .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>
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -39,28 +39,5 @@ templ SearchResultsWrapper(query string, animes []jikan.Anime, nextPage int, has
|
|||||||
}
|
}
|
||||||
|
|
||||||
templ SearchItems(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
|
templ SearchItems(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
|
||||||
for _, anime := range animes {
|
@InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/search?q=%s&page=%d", url.QueryEscape(query), nextPage))), "results")
|
||||||
<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/search?q=%s&page=%d", url.QueryEscape(query), nextPage))) } hx-trigger="revealed" hx-swap="outerHTML"></div>
|
|
||||||
}
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
const items = document.querySelectorAll('#results .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>
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user