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

refactor: simplify css and ts layout

Browse Source
This commit is contained in:
mkelvers
2026-04-14 23:49:07 +02:00
parent dd6f49b1c9
commit bbd876d981
17 changed files with 1877 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
static/js/search.js
View File

@@ -1,109 +1,104 @@
"use strict";
// static/js/search.ts
(() => {
const globalWindow = window;
if (globalWindow.searchInitialized) {
return;
const globalWindow = window;
if (globalWindow.searchInitialized) {
return;
}
globalWindow.searchInitialized = true;
let searchTimeout;
const searchInput = document.getElementById("search-input");
const searchDropdown = document.getElementById("search-dropdown");
if (!searchInput || !searchDropdown) {
return;
}
searchInput.addEventListener("input", (event) => {
if (searchTimeout) {
window.clearTimeout(searchTimeout);
}
globalWindow.searchInitialized = true;
let searchTimeout;
const searchInput = document.getElementById('search-input');
const searchDropdown = document.getElementById('search-dropdown');
if (!searchInput || !searchDropdown) {
return;
const target = event.target;
if (!(target instanceof HTMLInputElement)) {
return;
}
searchInput.addEventListener('input', (event) => {
if (searchTimeout) {
window.clearTimeout(searchTimeout);
}
const target = event.target;
if (!(target instanceof HTMLInputElement)) {
return;
}
const query = target.value.trim();
if (query.length < 2) {
searchDropdown.replaceChildren();
return;
}
searchTimeout = window.setTimeout(() => {
fetch('/api/search-quick?q=' + encodeURIComponent(query))
.then((res) => res.json())
.then((results) => {
if (!results || results.length === 0) {
searchDropdown.replaceChildren();
return;
}
const searchResults = document.createElement('div');
searchResults.className = 'search-results';
const title = document.createElement('div');
title.className = 'search-results-title';
title.textContent = 'Anime';
searchResults.appendChild(title);
results.forEach((result) => {
const item = document.createElement('a');
item.className = 'search-result-item';
item.setAttribute('href', '/anime/' + encodeURIComponent(String(result.id || '')));
if (isSafeImageUrl(result.image)) {
const img = document.createElement('img');
img.className = 'search-result-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.textContent = 'no image';
item.appendChild(noImage);
}
const info = document.createElement('div');
info.className = 'search-result-info';
const itemTitle = document.createElement('div');
itemTitle.className = 'search-result-title';
itemTitle.textContent = String(result.title || '');
info.appendChild(itemTitle);
const itemType = document.createElement('div');
itemType.className = 'search-result-type';
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.setAttribute('href', '/search?q=' + encodeURIComponent(query));
viewAll.textContent = 'View all results for ' + query;
searchResults.appendChild(viewAll);
searchDropdown.replaceChildren(searchResults);
})
.catch((err) => {
console.error('Search error:', err);
});
}, 300);
});
searchInput.addEventListener('blur', () => {
window.setTimeout(() => {
searchDropdown.replaceChildren();
}, 200);
});
document.addEventListener('click', (event) => {
const target = event.target;
if (!(target instanceof Element)) {
return;
}
if (!target.closest('.header-search-wrapper')) {
searchDropdown.replaceChildren();
}
});
function isSafeImageUrl(rawUrl) {
if (!rawUrl || typeof rawUrl !== 'string') {
return false;
}
try {
const parsed = new URL(rawUrl, window.location.origin);
return parsed.protocol === 'https:' || parsed.protocol === 'http:';
}
catch {
return false;
}
const query = target.value.trim();
if (query.length < 2) {
searchDropdown.replaceChildren();
return;
}
searchTimeout = window.setTimeout(() => {
fetch("/api/search-quick?q=" + encodeURIComponent(query)).then((res) => res.json()).then((results) => {
if (!results || results.length === 0) {
searchDropdown.replaceChildren();
return;
}
const searchResults = document.createElement("div");
searchResults.className = "search-results";
const title = document.createElement("div");
title.className = "search-results-title";
title.textContent = "Anime";
searchResults.appendChild(title);
results.forEach((result) => {
const item = document.createElement("a");
item.className = "search-result-item";
item.setAttribute("href", "/anime/" + encodeURIComponent(String(result.id || "")));
if (isSafeImageUrl(result.image)) {
const img = document.createElement("img");
img.className = "search-result-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.textContent = "no image";
item.appendChild(noImage);
}
const info = document.createElement("div");
info.className = "search-result-info";
const itemTitle = document.createElement("div");
itemTitle.className = "search-result-title";
itemTitle.textContent = String(result.title || "");
info.appendChild(itemTitle);
const itemType = document.createElement("div");
itemType.className = "search-result-type";
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.setAttribute("href", "/search?q=" + encodeURIComponent(query));
viewAll.textContent = "View all results for " + query;
searchResults.appendChild(viewAll);
searchDropdown.replaceChildren(searchResults);
}).catch((err) => {
console.error("Search error:", err);
});
}, 300);
});
searchInput.addEventListener("blur", () => {
window.setTimeout(() => {
searchDropdown.replaceChildren();
}, 200);
});
document.addEventListener("click", (event) => {
const target = event.target;
if (!(target instanceof Element)) {
return;
}
if (!target.closest(".header-search-wrapper")) {
searchDropdown.replaceChildren();
}
});
function isSafeImageUrl(rawUrl) {
if (!rawUrl || typeof rawUrl !== "string") {
return false;
}
try {
const parsed = new URL(rawUrl, window.location.origin);
return parsed.protocol === "https:" || parsed.protocol === "http:";
} catch {
return false;
}
}
})();