philomena/assets/js/settings.ts

62 lines
2.3 KiB
TypeScript
Raw Normal View History

2019-10-04 20:09:52 -04:00
/**
* Settings.
*/
import { assertNotNull, assertNotUndefined } from './utils/assert';
import { $, $$, hideIf } from './utils/dom';
2019-10-04 20:09:52 -04:00
import store from './utils/store';
function setupThemeSettings() {
const themeSelect = $<HTMLSelectElement>('#user_theme_name');
if (!themeSelect) return;
2019-10-04 20:09:52 -04:00
2024-12-17 17:49:05 +01:00
const themeColorSelect = assertNotNull($<HTMLSelectElement>('#user_theme_color'));
const themePaths: Record<string, string> = JSON.parse(
assertNotUndefined(assertNotNull($<HTMLDivElement>('#js-theme-paths')).dataset.themePaths),
);
const styleSheet = assertNotNull($<HTMLLinkElement>('#js-theme-stylesheet'));
2019-10-04 20:09:52 -04:00
// Theme preview
2024-12-17 17:49:05 +01:00
const themePreviewCallback = () => {
const themeName = assertNotUndefined(themeSelect.options[themeSelect.selectedIndex].value);
const themeColor = assertNotUndefined(themeColorSelect.options[themeColorSelect.selectedIndex].value);
styleSheet.href = themePaths[`${themeName}-${themeColor}`];
};
themeSelect.addEventListener('change', themePreviewCallback);
themeColorSelect.addEventListener('change', themePreviewCallback);
2019-10-04 20:09:52 -04:00
}
2025-03-04 04:45:28 +00:00
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'));
2025-03-04 04:45:28 +00:00
// Don't show search history settings if autocomplete is entirely disabled.
enableSearchAutocomplete.addEventListener('change', () => {
hideIf(!enableSearchAutocomplete.checked, autocompleteSettings);
2025-03-04 04:45:28 +00:00
});
userSearchHistoryHidden.addEventListener('change', () => {
hideIf(userSearchHistoryHidden.checked, autocompleteSearchHistorySettings);
2025-03-04 04:45:28 +00:00
});
}
export function setupSettings() {
if (!$('#js-setting-table')) return;
// Local settings
2025-03-04 04:45:28 +00:00
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);
});
2025-03-04 04:45:28 +00:00
}
setupThemeSettings();
2025-03-04 04:45:28 +00:00
setupAutocompleteSettings();
}