diff --git a/assets/js/settings.ts b/assets/js/settings.ts index a272b5e4..9bad96c8 100644 --- a/assets/js/settings.ts +++ b/assets/js/settings.ts @@ -28,17 +28,41 @@ function setupThemeSettings() { 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($('.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($('.autocomplete-search-history-settings')); + + assertNotNull($('#user_autocomplete_search_history_hidden')).addEventListener('change', event => { + hideIf(autocompleteSearchHistorySettings, (event.target as HTMLInputElement).checked); + }); +} + export function setupSettings() { if (!$('#js-setting-table')) return; - const localCheckboxes = $$('[data-tab="local"] input[type="checkbox"]'); - // Local settings - localCheckboxes.forEach(checkbox => { - checkbox.addEventListener('change', () => { - store.set(checkbox.id.replace('user_', ''), checkbox.checked); + for (const input of $$('[data-tab="local"] input')) { + input.addEventListener('change', () => { + const newValue = input.type === 'checkbox' ? input.checked : input.value; + + store.set(input.id.replace('user_', ''), newValue); }); - }); + } setupThemeSettings(); + setupAutocompleteSettings(); } diff --git a/lib/philomena_web/templates/setting/edit.html.slime b/lib/philomena_web/templates/setting/edit.html.slime index 829c3cd2..fdba84fc 100644 --- a/lib/philomena_web/templates/setting/edit.html.slime +++ b/lib/philomena_web/templates/setting/edit.html.slime @@ -183,8 +183,32 @@ h1 Content Settings .fieldlabel: i Show streams marked as NSFW on the channels page. .field => label f, :enable_search_ac, "Enable search auto-completion" - => checkbox f, :enable_search_ac, checked: @conn.cookies["enable_search_ac"] === "true" - .fieldlabel: i Enable the auto-completion of tags in search fields. + => checkbox f, :enable_search_ac, checked: @conn.cookies["enable_search_ac"] == "true" + + .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 .field => label f, :hide_staff_tools