You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.2 KiB
45 lines
1.2 KiB
import { debounce } from './helpers';
|
|
|
|
// Attach listener to database "Name" and "Username" fields to update their hints
|
|
export default function handleDatabaseHints() {
|
|
const usernameInput = document.querySelector('.js-db-hint-username');
|
|
const databaseNameInput = document.querySelector('.js-db-hint-database-name');
|
|
|
|
if (!usernameInput || !databaseNameInput) {
|
|
return;
|
|
}
|
|
|
|
removeUserPrefix(databaseNameInput);
|
|
attachUpdateHintListener(usernameInput);
|
|
attachUpdateHintListener(databaseNameInput);
|
|
}
|
|
|
|
// Remove prefix from "Database" input if it exists during initial load (for editing)
|
|
function removeUserPrefix(input) {
|
|
const prefixIndex = input.value.indexOf(Alpine.store('globals').USER_PREFIX);
|
|
if (prefixIndex === 0) {
|
|
input.value = input.value.slice(Alpine.store('globals').USER_PREFIX.length);
|
|
}
|
|
}
|
|
|
|
function attachUpdateHintListener(input) {
|
|
if (input.value.trim() !== '') {
|
|
updateHint(input);
|
|
}
|
|
|
|
input.addEventListener(
|
|
'input',
|
|
debounce((evt) => updateHint(evt.target))
|
|
);
|
|
}
|
|
|
|
function updateHint(input) {
|
|
const hintElement = input.parentElement.querySelector('.hint');
|
|
|
|
if (input.value.trim() === '') {
|
|
hintElement.textContent = '';
|
|
}
|
|
|
|
hintElement.textContent = Alpine.store('globals').USER_PREFIX + input.value;
|
|
}
|