add minimum requirement of 2 [A-za-z] for slashcommand autocomplete to show up (#4080) * add minimum requirement of 2 [A-za-z] for slashcommand autocomplete to show up * Migrate to dedicated AC toggle * Replace state checkbox with select --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>
Signed| @@ -5041,6 +5041,14 @@ | ||
| 5041 | 5041 | <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div> |
| 5042 | 5042 | </div> |
| 5043 | 5043 | <div class="inline-drawer-content"> |
| 5044 | + <label for="stscript_autocomplete_state"> | |
| 5045 | + <small data-i18n="Visibility">Visibility</small> | |
| 5046 | + </label> | |
| 5047 | + <select id="stscript_autocomplete_state"> | |
| 5048 | + <option value="0" data-i18n="Don't show">Don't show</option> | |
| 5049 | + <option value="1" data-i18n="Input length > 1">Input length > 1</option> | |
| 5050 | + <option value="2" data-i18n="Always show">Always show</option> | |
| 5051 | + </select> | |
| 5044 | 5052 | <label class="checkbox_label" for="stscript_autocomplete_autoHide"> |
| 5045 | 5053 | <input id="stscript_autocomplete_autoHide" type="checkbox" /> |
| 5046 | 5054 | <small data-i18n="Automatically hide details"> |
| @@ -21,6 +21,14 @@ export const AUTOCOMPLETE_SELECT_KEY = { | ||
| 21 | 21 | 'ENTER': 2, // 2^1 |
| 22 | 22 | }; |
| 23 | 23 | |
| 24 | +/** @readonly */ | |
| 25 | +/** @enum {Number} */ | |
| 26 | +export const AUTOCOMPLETE_STATE = { | |
| 27 | + DISABLED: 0, | |
| 28 | + MIN_LENGTH: 1, | |
| 29 | + ALWAYS: 2, | |
| 30 | +}; | |
| 31 | + | |
| 24 | 32 | export class AutoComplete { |
| 25 | 33 | /**@type {HTMLTextAreaElement|HTMLInputElement}*/ textarea; |
| 26 | 34 | /**@type {boolean}*/ isFloating = false; |
| @@ -254,8 +262,7 @@ export class AutoComplete { | ||
| 254 | 262 | + this.parserResult.name.length |
| 255 | 263 | + (this.startQuote ? 1 : 0) |
| 256 | 264 | + (this.endQuote ? 1 : 0) |
| 257 | 265 | + 1; |
| 258 | - ; | |
| 259 | 266 | } |
| 260 | 267 | |
| 261 | 268 | /** |
| @@ -387,8 +394,7 @@ export class AutoComplete { | ||
| 387 | 394 | return option; |
| 388 | 395 | }) |
| 389 | 396 | // sort by fuzzy score or alphabetical |
| 390 | 397 | .toSorted(this.matchType == 'fuzzy' ? this.fuzzyScoreCompare : (a, b) => a.name.localeCompare(b.name)); |
| 391 | - ; | |
| 392 | 398 | |
| 393 | 399 | |
| 394 | 400 | |
| @@ -49,7 +49,7 @@ import { FILTER_TYPES } from './filters.js'; | ||
| 49 | 49 | import { PARSER_FLAG, SlashCommandParser } from './slash-commands/SlashCommandParser.js'; |
| 50 | 50 | import { SlashCommand } from './slash-commands/SlashCommand.js'; |
| 51 | 51 | import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from './slash-commands/SlashCommandArgument.js'; |
| 52 | 52 | import { AUTOCOMPLETE_SELECT_KEY, AUTOCOMPLETE_STATE, AUTOCOMPLETE_WIDTH } from './autocomplete/AutoComplete.js'; |
| 53 | 53 | import { SlashCommandEnumValue, enumTypes } from './slash-commands/SlashCommandEnumValue.js'; |
| 54 | 54 | import { commonEnumProviders, enumIcons } from './slash-commands/SlashCommandCommonEnumsProvider.js'; |
| 55 | 55 | import { POPUP_TYPE, callGenericPopup, fixToastrForDialogs } from './popup.js'; |
| @@ -306,6 +306,7 @@ let power_user = { | ||
| 306 | 306 | stscript: { |
| 307 | 307 | matching: 'fuzzy', |
| 308 | 308 | autocomplete: { |
| 309 | + state: AUTOCOMPLETE_STATE.ALWAYS, | |
| 309 | 310 | autoHide: false, |
| 310 | 311 | style: 'theme', |
| 311 | 312 | font: { |
| @@ -1505,6 +1506,9 @@ async function loadPowerUserSettings(settings, data) { | ||
| 1505 | 1506 | if (power_user.stscript.autocomplete === undefined) { |
| 1506 | 1507 | power_user.stscript.autocomplete = defaultStscript.autocomplete; |
| 1507 | 1508 | } else { |
| 1509 | + if (power_user.stscript.autocomplete.state === undefined) { | |
| 1510 | + power_user.stscript.autocomplete.state = defaultStscript.autocomplete.state; | |
| 1511 | + } | |
| 1508 | 1512 | if (power_user.stscript.autocomplete.width === undefined) { |
| 1509 | 1513 | power_user.stscript.autocomplete.width = defaultStscript.autocomplete.width; |
| 1510 | 1514 | } |
| @@ -1642,6 +1646,7 @@ async function loadPowerUserSettings(settings, data) { | ||
| 1642 | 1646 | $('#aux_field').val(power_user.aux_field); |
| 1643 | 1647 | $('#tag_import_setting').val(power_user.tag_import_setting); |
| 1644 | 1648 | |
| 1649 | + $('#stscript_autocomplete_state').val(power_user.stscript.autocomplete.state).trigger('input'); | |
| 1645 | 1650 | $('#stscript_autocomplete_autoHide').prop('checked', power_user.stscript.autocomplete.autoHide ?? false).trigger('input'); |
| 1646 | 1651 | $('#stscript_matching').val(power_user.stscript.matching ?? 'fuzzy'); |
| 1647 | 1652 | $('#stscript_autocomplete_style').val(power_user.stscript.autocomplete.style ?? 'theme'); |
| @@ -3871,6 +3876,11 @@ $(document).ready(() => { | ||
| 3871 | 3876 | saveSettingsDebounced(); |
| 3872 | 3877 | }); |
| 3873 | 3878 | |
| 3879 | + $('#stscript_autocomplete_state').on('input', function () { | |
| 3880 | + power_user.stscript.autocomplete.state = Number($(this).val()); | |
| 3881 | + saveSettingsDebounced(); | |
| 3882 | + }); | |
| 3883 | + | |
| 3874 | 3884 | $('#stscript_autocomplete_autoHide').on('input', function () { |
| 3875 | 3885 | power_user.stscript.autocomplete.autoHide = !!$(this).prop('checked'); |
| 3876 | 3886 | saveSettingsDebounced(); |
| @@ -67,7 +67,7 @@ import { background_settings } from './backgrounds.js'; | ||
| 67 | 67 | import { SlashCommandClosure } from './slash-commands/SlashCommandClosure.js'; |
| 68 | 68 | import { SlashCommandClosureResult } from './slash-commands/SlashCommandClosureResult.js'; |
| 69 | 69 | import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from './slash-commands/SlashCommandArgument.js'; |
| 70 | 70 | import { AutoComplete, AUTOCOMPLETE_STATE } from './autocomplete/AutoComplete.js'; |
| 71 | 71 | import { SlashCommand } from './slash-commands/SlashCommand.js'; |
| 72 | 72 | import { SlashCommandAbortController } from './slash-commands/SlashCommandAbortController.js'; |
| 73 | 73 | import { SlashCommandNamedArgumentAssignment } from './slash-commands/SlashCommandNamedArgumentAssignment.js'; |
| @@ -4927,7 +4927,7 @@ export async function setSlashCommandAutoComplete(textarea, isFloating = false) | ||
| 4927 | 4927 | const parser = new SlashCommandParser(); |
| 4928 | 4928 | const ac = new AutoComplete( |
| 4929 | 4929 | textarea, |
| 4930 | - () => ac.text[0] == '/', | |
| 4930 | + () => ac.text[0] == '/' && (power_user.stscript.autocomplete.state === AUTOCOMPLETE_STATE.ALWAYS || power_user.stscript.autocomplete.state === AUTOCOMPLETE_STATE.MIN_LENGTH && ac.text.length > 2), | |
| 4931 | 4931 | async (text, index) => await parser.getNameAt(text, index), |
| 4932 | 4932 | isFloating, |
| 4933 | 4933 | ); |