${smallFolderSVG}
${folderName}
${parentPath ? ` — ${parentPath}` : ''}
`;
}).join('');
autocompleteDropdown.classList.add('visible');
// Add click handlers to items
autocompleteDropdown.querySelectorAll('.kiko-autocomplete-item').forEach(item => {
item.addEventListener('mousedown', (e) => {
e.preventDefault(); // Prevent blur from hiding dropdown before click registers
const path = item.dataset.path;
selectAutocompleteSuggestion(path);
});
});
}
function hideAutocomplete() {
autocompleteDropdown.classList.remove('visible');
autocompleteDropdown.innerHTML = '';
autocompleteSuggestions = [];
autocompleteSelectedIndex = -1;
}
function selectAutocompleteSuggestion(path) {
pathInput.value = path + '/';
hideAutocomplete();
// Trigger another fetch to show contents of selected directory
debouncedAutocomplete(path + '/');
}
function updateAutocompleteSelection() {
const items = autocompleteDropdown.querySelectorAll('.kiko-autocomplete-item');
items.forEach((item, index) => {
if (index === autocompleteSelectedIndex) {
item.classList.add('selected');
item.scrollIntoView({ block: 'nearest' });
} else {
item.classList.remove('selected');
}
});
}
const debouncedAutocomplete = debounce(async (value) => {
const suggestions = await fetchDirectorySuggestions(value);
renderAutocompleteSuggestions(suggestions);
}, 150);
// Path input event handlers for autocomplete
pathInput.addEventListener('input', (e) => {
const value = e.target.value;
if (value.length > 0) {
debouncedAutocomplete(value);
} else {
hideAutocomplete();
}
});
pathInput.addEventListener('focus', () => {
const value = pathInput.value;
if (value.length > 0) {
debouncedAutocomplete(value);
}
});
pathInput.addEventListener('blur', () => {
// Delay hiding to allow click events to register
setTimeout(hideAutocomplete, 150);
});
pathInput.addEventListener('keydown', (e) => {
if (!autocompleteDropdown.classList.contains('visible')) {
if (e.key === 'Enter') {
loadImages(pathInput.value);
e.preventDefault();
}
return;
}
switch (e.key) {
case 'ArrowDown':
e.preventDefault();
autocompleteSelectedIndex = Math.min(autocompleteSelectedIndex + 1, autocompleteSuggestions.length - 1);
updateAutocompleteSelection();
break;
case 'ArrowUp':
e.preventDefault();
autocompleteSelectedIndex = Math.max(autocompleteSelectedIndex - 1, -1);
updateAutocompleteSelection();
break;
case 'Enter':
e.preventDefault();
if (autocompleteSelectedIndex >= 0 && autocompleteSelectedIndex < autocompleteSuggestions.length) {
selectAutocompleteSuggestion(autocompleteSuggestions[autocompleteSelectedIndex]);
} else {
hideAutocomplete();
loadImages(pathInput.value);
}
break;
case 'Escape':
hideAutocomplete();
break;
case 'Tab':
if (autocompleteSelectedIndex >= 0) {
e.preventDefault();
selectAutocompleteSuggestion(autocompleteSuggestions[autocompleteSelectedIndex]);
} else if (autocompleteSuggestions.length === 1) {
e.preventDefault();
selectAutocompleteSuggestion(autocompleteSuggestions[0]);
}
break;
}
});
// Load saved paths
async function loadSavedPaths() {
try {
const response = await api.fetchApi('/kiko_local_image_loader/get_saved_paths');
const data = await response.json();
pathPresets.innerHTML = '