[Part 15] Add autocomplete history settings UI

assets/js/settings.ts

@@ -3,7 +3,7 @@
  */
 
 import { assertNotNull, assertNotUndefined } from './utils/assert';
-import { $, $$ } from './utils/dom';
+import { $, $$, hideIf } from './utils/dom';
 import store from './utils/store';
 
 function setupThemeSettings() {
@@ -28,17 +28,34 @@ function setupThemeSettings() {
   themeColorSelect.addEventListener('change', themePreviewCallback);
 }
 
+function setupAutocompleteSettings() {
+  const autocompleteSettings = assertNotNull($<HTMLElement>('.autocomplete-settings'));
+  const autocompleteSearchHistorySettings = assertNotNull($<HTMLElement>('.autocomplete-search-history-settings'));
+  const enableSearchAutocomplete = assertNotNull($<HTMLInputElement>('#user_enable_search_ac'));
+  const userSearchHistoryHidden = assertNotNull($<HTMLInputElement>('#user_autocomplete_search_history_hidden'));
+
+  // Don't show search history settings if autocomplete is entirely disabled.
+  enableSearchAutocomplete.addEventListener('change', () => {
+    hideIf(!enableSearchAutocomplete.checked, autocompleteSettings);
+  });
+
+  userSearchHistoryHidden.addEventListener('change', () => {
+    hideIf(userSearchHistoryHidden.checked, autocompleteSearchHistorySettings);
+  });
+}
+
 export function setupSettings() {
   if (!$('#js-setting-table')) return;
 
-  const localCheckboxes = $$<HTMLInputElement>('[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 $$<HTMLInputElement>('[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();
 }

assets/js/utils/__tests__/dom.spec.ts

@@ -14,6 +14,7 @@ import {
   findFirstTextNode,
   disableEl,
   enableEl,
+  hideIf,
 } from '../dom';
 import { getRandomArrayItem, getRandomIntBetween } from '../../../test/randomness';
 import { fireEvent } from '@testing-library/dom';
@@ -444,4 +445,18 @@ describe('DOM Utilities', () => {
       expect(result).toBe(undefined);
     });
   });
+
+  describe('hideIf', () => {
+    it('should add "hidden" class if condition is true', () => {
+      const element = document.createElement('div');
+      hideIf(true, element);
+      expect(element).toHaveClass('hidden');
+    });
+    it('should remove "hidden" class if condition is false', () => {
+      const element = document.createElement('div');
+      element.classList.add('hidden');
+      hideIf(false, element);
+      expect(element).not.toHaveClass('hidden');
+    });
+  });
 });

assets/js/utils/dom.ts

@@ -108,3 +108,11 @@ export function escapeCss(css: string): string {
 export function findFirstTextNode<N extends Node>(of: Node): N {
   return Array.prototype.filter.call(of.childNodes, el => el.nodeType === Node.TEXT_NODE)[0];
 }
+
+export function hideIf(condition: boolean, element: HTMLElement) {
+  if (condition) {
+    element.classList.add('hidden');
+  } else {
+    element.classList.remove('hidden');
+  }
+}

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