melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: extract inline scripts to dedupe and sort_filter modules

Browse Source
This commit is contained in:
mkelvers
2026-04-21 01:22:09 +02:00
parent bece1a970a
commit 28cacdd7c5
5 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
static/dedupe.ts Normal file
View File

@@ -0,0 +1,18 @@
const dedupe = (): void => {
const script = document.currentScript as HTMLScriptElement | null
if (!script) return
const containerId = script.getAttribute('data-container')
const container = containerId ? document.getElementById(containerId) : document
if (!container) return
const seen = new Set<string>()
container.querySelectorAll('[data-id]').forEach((item) => {
const id = item.getAttribute('data-id')
if (id && seen.has(id)) {
item.remove()
} else if (id) {
seen.add(id)
}
})
}
dedupe()

23
static/sort_filter.ts Normal file
View File

@@ -0,0 +1,23 @@
const initSortFilter = (): void => {
const sortSelect = document.getElementById('sort-select') as HTMLSelectElement | null
const orderSelect = document.getElementById('order-select') as HTMLSelectElement | null
const submitForm = (): void => {
const form = document.getElementById('sort-form') as HTMLFormElement | null
if (form) form.submit()
}
sortSelect?.addEventListener('change', () => {
const input = document.getElementById('sort-input') as HTMLInputElement | null
if (input) input.value = sortSelect.value
submitForm()
})
orderSelect?.addEventListener('change', () => {
const input = document.getElementById('order-input') as HTMLInputElement | null
if (input) input.value = orderSelect.value
submitForm()
})
}
document.addEventListener('DOMContentLoaded', initSortFilter)

14
web/components/anime_list.templ
View File

@@ -14,19 +14,7 @@ templ InfiniteAnimeList(animes []jikan.Anime, watchlistStatuses map[int]string,
if hasNext {
<div class="col-span-full h-px w-full" hx-get={ nextURL } hx-trigger="revealed" hx-swap="outerHTML"></div>
}
<script data-container={ containerID }>
const containerId = document.currentScript.getAttribute('data-container');
const container = document.getElementById(containerId) || document;
const seen = new Set();
container.querySelectorAll('[data-id]').forEach(item => {
const id = item.getAttribute('data-id');
if (id && seen.has(id)) {
item.remove();
} else if (id) {
seen.add(id);
}
});
</script>
<script src="/dist/dedupe.js" data-container={ containerID } defer></script>
}
templ CatalogItem(anime jikan.Anime, watchlistStatus string) {

5
web/components/sort_filter.templ
View File

@@ -11,14 +11,14 @@ templ SortFilter(opts SortFilterOptions) {
<div class="mb-4 flex flex-wrap items-center gap-3 bg-(--panel) p-3 max-lg:flex-col max-lg:items-start max-lg:gap-2">
<div class="flex items-center gap-2">
<label for="sort-select" class="text-xs text-(--text-muted)">Sort by</label>
<select id="sort-select" class="h-8 bg-(--surface-select) px-2 text-xs text-(--text)" onchange="document.getElementById('sort-input').value = this.value; document.getElementById('sort-form').submit()">
<select id="sort-select" class="h-8 bg-(--surface-select) px-2 text-xs text-(--text)">
<option value="date" selected?={ opts.Sort == "date" }>Date added</option>
<option value="title" selected?={ opts.Sort == "title" }>Title</option>
</select>
</div>
<div class="flex items-center gap-2">
<label for="order-select" class="text-xs text-(--text-muted)">Order</label>
<select id="order-select" class="h-8 bg-(--surface-select) px-2 text-xs text-(--text)" onchange="document.getElementById('order-input').value = this.value; document.getElementById('sort-form').submit()">
<select id="order-select" class="h-8 bg-(--surface-select) px-2 text-xs text-(--text)">
<option value="desc" selected?={ opts.Order == "desc" }>Descending</option>
<option value="asc" selected?={ opts.Order == "asc" }>Ascending</option>
</select>
@@ -34,4 +34,5 @@ templ SortFilter(opts SortFilterOptions) {
<input type="hidden" name="status" value={ opts.Status }/>
}
</form>
<script src="/dist/sort_filter.js" defer></script>
}

14
web/templates/studio.templ
View File

@@ -90,17 +90,5 @@ templ StudioAnimeItems(animes []jikan.Anime, watchlistStatuses map[int]string, h
if hasNext {
@StudioLoadMore(studioID, nextPage)
}
<script data-container="studio-anime-content">
const containerId = document.currentScript.getAttribute('data-container');
const container = document.getElementById(containerId) || document;
const seen = new Set();
container.querySelectorAll('[data-id]').forEach(item => {
const id = item.getAttribute('data-id');
if (id && seen.has(id)) {
item.remove();
} else if (id) {
seen.add(id);
}
});
</script>
<script src="/dist/dedupe.js" data-container="studio-anime-content" defer></script>
}