Add user-facing autocomplete settings

This commit is contained in:
MareStare 2025-03-04 04:45:28 +00:00
parent 84b6ef74df
commit 671e9deda2
2 changed files with 56 additions and 8 deletions

View file

@ -28,17 +28,41 @@ function setupThemeSettings() {
themeColorSelect.addEventListener('change', themePreviewCallback); themeColorSelect.addEventListener('change', themePreviewCallback);
} }
function hideIf(element: HTMLElement, condition: boolean) {
if (condition) {
element.classList.add('hidden');
} else {
element.classList.remove('hidden');
}
}
function setupAutocompleteSettings() {
const autocompleteSettings = assertNotNull($<HTMLElement>('.autocomplete-settings'));
// Don't show search history settings if autocomplete is entirely disabled.
assertNotNull($('#user_enable_search_ac')).addEventListener('change', event => {
hideIf(autocompleteSettings, !(event.target as HTMLInputElement).checked);
});
const autocompleteSearchHistorySettings = assertNotNull($<HTMLElement>('.autocomplete-search-history-settings'));
assertNotNull($('#user_autocomplete_search_history_hidden')).addEventListener('change', event => {
hideIf(autocompleteSearchHistorySettings, (event.target as HTMLInputElement).checked);
});
}
export function setupSettings() { export function setupSettings() {
if (!$('#js-setting-table')) return; if (!$('#js-setting-table')) return;
const localCheckboxes = $$<HTMLInputElement>('[data-tab="local"] input[type="checkbox"]');
// Local settings // Local settings
localCheckboxes.forEach(checkbox => { for (const input of $$<HTMLInputElement>('[data-tab="local"] input')) {
checkbox.addEventListener('change', () => { input.addEventListener('change', () => {
store.set(checkbox.id.replace('user_', ''), checkbox.checked); const newValue = input.type === 'checkbox' ? input.checked : input.value;
store.set(input.id.replace('user_', ''), newValue);
}); });
}); }
setupThemeSettings(); setupThemeSettings();
setupAutocompleteSettings();
} }

View file

@ -183,8 +183,32 @@ h1 Content Settings
.fieldlabel: i Show streams marked as NSFW on the channels page. .fieldlabel: i Show streams marked as NSFW on the channels page.
.field .field
=> label f, :enable_search_ac, "Enable search auto-completion" => label f, :enable_search_ac, "Enable search auto-completion"
=> checkbox f, :enable_search_ac, checked: @conn.cookies["enable_search_ac"] === "true" => checkbox f, :enable_search_ac, checked: @conn.cookies["enable_search_ac"] == "true"
.fieldlabel: i Enable the auto-completion of tags in search fields.
.autocomplete-settings class=if(@conn.cookies["enable_search_ac"] != "true", do: "hidden", else: "")
.field
=> label f,
:autocomplete_search_history_hidden,
"Hide search history in auto-completion"
=> checkbox f,
:autocomplete_search_history_hidden,
checked: @conn.cookies["autocomplete_search_history_hidden"] == "true"
.autocomplete-search-history-settings[
class=if(@conn.cookies["autocomplete_search_history_hidden"] == "true", do: "hidden", else: "")
]
.field
=> label f,
:autocomplete_search_history_max_suggestions_when_typing,
"Maximum number of search history suggestions in autocompletion when typing"
=> number_input f,
:autocomplete_search_history_max_suggestions_when_typing,
min: 0,
max: 10,
step: 1,
value: @conn.cookies["autocomplete_search_history_max_suggestions_when_typing"] || 3,
class: "input"
= if staff?(@conn.assigns.current_user) do = if staff?(@conn.assigns.current_user) do
.field .field
=> label f, :hide_staff_tools => label f, :hide_staff_tools