63 lines
2.2 KiB
JavaScript
63 lines
2.2 KiB
JavaScript
const quickSearchID = 'ea-quickSearch';
|
|
const quickSearchLink = 'ea-quickSearchLink';
|
|
|
|
runAfterLoad(() => {
|
|
initSearch();
|
|
}, ".*");
|
|
|
|
function initSearch() {
|
|
let entry = document.createElement('li');
|
|
entry.setAttribute('ng-repeat', 'item in navbar');
|
|
entry.setAttribute('ng-class', '{\'anime-indicator\': item[\'@attributes\'].title==\'Anime\'}');
|
|
|
|
let quickSearchElement = document.createElement('input');
|
|
quickSearchElement.setAttribute('aria-label', 'Quick Search Input');
|
|
quickSearchElement.setAttribute('ng-model-options', '{debounce: 500}');
|
|
quickSearchElement.type = 'text';
|
|
quickSearchElement.classList.add('ng-pristine', 'ng-valid', 'ng-empty', 'ng-touched');
|
|
quickSearchElement.placeholder = 'Quick Search (Shift + F)';
|
|
quickSearchElement.id = quickSearchID;
|
|
// register Enter keybinding
|
|
quickSearchElement.addEventListener('keypress', event => handleQuickSearch(event));
|
|
|
|
entry.appendChild(quickSearchElement);
|
|
|
|
// Aniwatch CSS requires the search input to be in some kind of known menu container
|
|
let linkElement = document.createElement('a');
|
|
linkElement.appendChild(quickSearchElement);
|
|
linkElement.id = quickSearchLink;
|
|
entry.appendChild(linkElement);
|
|
|
|
let menu = document.getElementById('materialize-menu-dropdown');
|
|
menu.insertAdjacentElement('beforeend', entry);
|
|
|
|
// register focus hotkey
|
|
document.addEventListener('keypress', event => handleSearchForShiftF(event));
|
|
}
|
|
|
|
function handleQuickSearch(event) {
|
|
if (event.key === 'Enter') {
|
|
let quickSearchElement = document.getElementById(quickSearchID);
|
|
let linkElement = document.getElementById(quickSearchLink);
|
|
|
|
let url = new URL(window.location.origin)
|
|
url.pathname = '/search';
|
|
url.searchParams.append('q', quickSearchElement.value);
|
|
|
|
linkElement.href = `${url.pathname}${url.search}`;
|
|
linkElement.click();
|
|
|
|
// clean up afterwards
|
|
linkElement.href = '';
|
|
quickSearchElement.value = '';
|
|
}
|
|
}
|
|
|
|
function handleSearchForShiftF(event) {
|
|
if (isShiftPressed) {
|
|
if (event.key === 'F') {
|
|
event.preventDefault();
|
|
document.getElementById(quickSearchID).focus();
|
|
}
|
|
}
|
|
} |