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

refactor: switch ui scripts to data hooks

Browse Source
This commit is contained in:
mkelvers
2026-04-15 00:10:20 +02:00
parent 0a5f64c604
commit 29e49b9fcc
9 changed files with 111 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
static/js/search.js
View File

@@ -7,7 +7,7 @@
globalWindow.searchInitialized = true;
let searchTimeout;
const searchInput = document.getElementById("search-input");
const searchDropdown = document.getElementById("search-dropdown");
const searchDropdown = document.querySelector("[data-search-results-container]");
if (!searchInput || !searchDropdown) {
return;
}
@@ -31,42 +31,42 @@
return;
}
const searchResults = document.createElement("div");
searchResults.className = "search-results";
searchResults.className = "grid";
const title = document.createElement("div");
title.className = "search-results-title";
title.className = "px-3 py-2 text-[0.68rem] text-[var(--text-faint)]";
title.textContent = "Anime";
searchResults.appendChild(title);
results.forEach((result) => {
const item = document.createElement("a");
item.className = "search-result-item";
item.className = "flex items-start gap-3 px-3 py-2 text-inherit no-underline hover:bg-[var(--panel-soft)] hover:no-underline";
item.setAttribute("href", "/anime/" + encodeURIComponent(String(result.id || "")));
if (isSafeImageUrl(result.image)) {
const img = document.createElement("img");
img.className = "search-result-thumb";
img.className = "aspect-[2/3] w-[42px] shrink-0 object-cover bg-[var(--surface-thumb)]";
img.setAttribute("src", result.image || "");
img.setAttribute("alt", String(result.title || ""));
item.appendChild(img);
} else {
const noImage = document.createElement("div");
noImage.className = "search-result-no-image";
noImage.className = "aspect-[2/3] w-[42px] shrink-0 bg-[var(--surface-thumb)] text-[0] text-transparent";
noImage.textContent = "no image";
item.appendChild(noImage);
}
const info = document.createElement("div");
info.className = "search-result-info";
info.className = "grid min-w-0 gap-px";
const itemTitle = document.createElement("div");
itemTitle.className = "search-result-title";
itemTitle.className = "line-clamp-1 text-[0.86rem] leading-[1.3] text-[var(--text)]";
itemTitle.textContent = String(result.title || "");
info.appendChild(itemTitle);
const itemType = document.createElement("div");
itemType.className = "search-result-type";
itemType.className = "text-[0.67rem] text-[var(--text-faint)]";
itemType.textContent = String(result.type || "");
info.appendChild(itemType);
item.appendChild(info);
searchResults.appendChild(item);
});
const viewAll = document.createElement("a");
viewAll.className = "search-result-view-all";
viewAll.className = "bg-[var(--surface-search-view-all)] px-3 py-2 text-center text-[0.8rem] text-[var(--text-muted)] no-underline hover:bg-[var(--panel-soft)] hover:text-[var(--text)] hover:no-underline";
viewAll.setAttribute("href", "/search?q=" + encodeURIComponent(query));
viewAll.textContent = "View all results for " + query;
searchResults.appendChild(viewAll);