add autocomplete style selector

This commit is contained in:
LenAnderson
2024-04-12 17:26:39 -04:00
parent dd4c7a2521
commit e0801176ac
3 changed files with 35 additions and 2 deletions

View File

@ -3748,6 +3748,14 @@
<option data-i18n="Fuzzy" value="fuzzy">Fuzzy</option> <option data-i18n="Fuzzy" value="fuzzy">Fuzzy</option>
</select> </select>
</div> </div>
<div title="Sets the style of the autocomplete for STscript." data-i18n="[title]Sets the style of the autocomplete for STscript.">
<label for="stscript_autocomplete_style" data-i18n="STscript Autocomplete Style">STscript Autocomplete Style</label>
<select id="stscript_autocomplete_style">
<option data-i18n="Follow Theme" value="theme">Follow Theme</option>
<option data-i18n="Dark" value="dark">Dark</option>
<option data-i18n="Light" value="light">Light</option>
</select>
</div>
<div title="If set in the advanced character definitions, this field will be displayed in the characters list." data-i18n="[title]If set in the advanced character definitions, this field will be displayed in the characters list."> <div title="If set in the advanced character definitions, this field will be displayed in the characters list." data-i18n="[title]If set in the advanced character definitions, this field will be displayed in the characters list.">
<label for="aux_field" data-i18n="Aux List Field">Aux List Field</label> <label for="aux_field" data-i18n="Aux List Field">Aux List Field</label>
<select id="aux_field"> <select id="aux_field">

View File

@ -251,6 +251,7 @@ let power_user = {
aux_field: 'character_version', aux_field: 'character_version',
stscript: { stscript: {
matching: 'fuzzy', matching: 'fuzzy',
autocomplete_style: 'theme',
}, },
restore_user_input: true, restore_user_input: true,
reduced_motion: false, reduced_motion: false,
@ -1544,7 +1545,8 @@ function loadPowerUserSettings(settings, data) {
$('#chat_width_slider').val(power_user.chat_width); $('#chat_width_slider').val(power_user.chat_width);
$('#token_padding').val(power_user.token_padding); $('#token_padding').val(power_user.token_padding);
$('#aux_field').val(power_user.aux_field); $('#aux_field').val(power_user.aux_field);
$('#stscript_matching').val(power_user.stscript.matching); $('#stscript_matching').val(power_user.stscript.matching ?? 'fuzzy');
$('#stscript_autocomplete_style').val(power_user.stscript.autocomplete_style ?? 'theme');
$('#restore_user_input').prop('checked', power_user.restore_user_input); $('#restore_user_input').prop('checked', power_user.restore_user_input);
$('#chat_truncation').val(power_user.chat_truncation); $('#chat_truncation').val(power_user.chat_truncation);
@ -3426,6 +3428,12 @@ $(document).ready(() => {
saveSettingsDebounced(); saveSettingsDebounced();
}); });
$('#stscript_autocomplete_style').on('change', function () {
const value = $(this).find(':selected').val();
power_user.stscript.autocomplete_style = String(value);
saveSettingsDebounced();
});
$('#restore_user_input').on('input', function () { $('#restore_user_input').on('input', function () {
power_user.restore_user_input = !!$(this).prop('checked'); power_user.restore_user_input = !!$(this).prop('checked');
saveSettingsDebounced(); saveSettingsDebounced();

View File

@ -1797,7 +1797,6 @@ async function executeSlashCommands(text, handleParserErrors = true, scope = nul
export function setSlashCommandAutoComplete(textarea, isFloating = false) { export function setSlashCommandAutoComplete(textarea, isFloating = false) {
const dom = document.createElement('ul'); { const dom = document.createElement('ul'); {
dom.classList.add('slashCommandAutoComplete'); dom.classList.add('slashCommandAutoComplete');
dom.classList.add('defaultThemed');
} }
let isReplacable = false; let isReplacable = false;
let result = []; let result = [];
@ -1956,6 +1955,24 @@ export function setSlashCommandAutoComplete(textarea, isFloating = false) {
// render autocomplete list // render autocomplete list
dom.innerHTML = ''; dom.innerHTML = '';
dom.classList.remove('defaultDark');
dom.classList.remove('defaultLight');
dom.classList.remove('defaultThemed');
switch (power_user.stscript.autocomplete_style ?? 'theme') {
case 'dark': {
dom.classList.add('defaultDark');
break;
}
case 'light': {
dom.classList.add('defaultLight');
break;
}
case 'theme':
default: {
dom.classList.add('defaultThemed');
break;
}
}
for (const item of result) { for (const item of result) {
const li = document.createElement('li'); { const li = document.createElement('li'); {
li.classList.add('item'); li.classList.add('item');