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

refactor: migrate browser scripts to ts

Browse Source
This commit is contained in:
mkelvers
2026-04-14 23:43:50 +02:00
parent 93cb99fd94
commit b5bc9c23cc
10 changed files with 819 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
static/js/search.js
View File

@@ -1,108 +1,109 @@
(function() {
if (window.searchInitialized) return
window.searchInitialized = true
let searchTimeout
const searchInput = document.getElementById('search-input')
const searchDropdown = document.getElementById('search-dropdown')
if (searchInput) {
searchInput.addEventListener('input', function(e) {
clearTimeout(searchTimeout)
const query = e.target.value.trim()
if (query.length < 2) {
searchDropdown.replaceChildren()
return
}
searchTimeout = 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(r => {
const item = document.createElement('a')
item.className = 'search-result-item'
item.setAttribute('href', '/anime/' + encodeURIComponent(String(r.id || '')))
if (isSafeImageUrl(r.image)) {
const img = document.createElement('img')
img.className = 'search-result-thumb'
img.setAttribute('src', r.image)
img.setAttribute('alt', String(r.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(r.title || '')
info.appendChild(itemTitle)
const itemType = document.createElement('div')
itemType.className = 'search-result-type'
itemType.textContent = String(r.type || '')
info.appendChild(itemType)
item.appendChild(info)
searchResults.appendChild(item)
"use strict";
(() => {
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);
}
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);
})
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)
})
.catch((err) => {
console.error('Search error:', err);
});
}, 300);
});
searchInput.addEventListener('blur', () => {
setTimeout(() => {
searchDropdown.replaceChildren()
}, 200)
})
document.addEventListener('click', (e) => {
if (!e.target.closest('.header-search-wrapper')) {
searchDropdown.replaceChildren()
}
})
}
function isSafeImageUrl(rawUrl) {
if (!rawUrl || typeof rawUrl !== 'string') {
return false
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;
}
}
try {
const parsed = new URL(rawUrl, window.location.origin)
return parsed.protocol === 'https:' || parsed.protocol === 'http:'
} catch {
return false
}
}
})()
})();