Refactor regex info block to use a shared function

This commit is contained in:
Cohee
2025-03-09 23:29:00 +02:00
parent 34b2ef0fd7
commit 0f8a17b652
3 changed files with 15 additions and 17 deletions

View File

@ -16,9 +16,9 @@
</small> </small>
<hr /> <hr />
<div id="regex_info_block" class="info-block"> <div id="regex_info_block_wrapper">
<span class="info-block-text"></span> <div id="regex_info_block" class="info-block"></div>
<a class="info-block-flags-hint" href="http://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags" target="_blank" rel="noopener noreferrer"> <a id="regex_info_block_flags_hint" href="http://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags" target="_blank" rel="noopener noreferrer">
<i class="fa-solid fa-circle-info" title="Click here to learn more about regex flags."></i> <i class="fa-solid fa-circle-info" title="Click here to learn more about regex flags."></i>
</a> </a>
</div> </div>

View File

@ -7,7 +7,7 @@ import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '
import { enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js'; import { enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashCommandEnumValue.js'; import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashCommandEnumValue.js';
import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js'; import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
import { download, getFileText, getSortableDelay, regexFromString, uuidv4 } from '../../utils.js'; import { download, getFileText, getSortableDelay, regexFromString, setInfoBlock, uuidv4 } from '../../utils.js';
import { regex_placement, runRegexScript, substitute_find_regex } from './engine.js'; import { regex_placement, runRegexScript, substitute_find_regex } from './engine.js';
import { t } from '../../i18n.js'; import { t } from '../../i18n.js';
import { accountStorage } from '../../util/AccountStorage.js'; import { accountStorage } from '../../util/AccountStorage.js';
@ -313,18 +313,15 @@ async function onRegexEditorOpenClick(existingId, isScoped) {
* @param {JQuery<HTMLElement>} editorHtml The editor HTML * @param {JQuery<HTMLElement>} editorHtml The editor HTML
*/ */
function updateInfoBlock(editorHtml) { function updateInfoBlock(editorHtml) {
const infoBlock = editorHtml.find('.info-block'); const infoBlock = editorHtml.find('.info-block').get(0);
const infoBlockTextSpan = infoBlock.find('.info-block-text'); const infoBlockFlagsHint = editorHtml.find('#regex_info_block_flags_hint');
const infoBlockFlagsHint = infoBlock.find('.info-block-flags-hint');
const findRegex = String(editorHtml.find('.find_regex').val()); const findRegex = String(editorHtml.find('.find_regex').val());
infoBlock.removeClass('error hint info warning');
infoBlockFlagsHint.hide(); infoBlockFlagsHint.hide();
// Clear the info block if the find regex is empty // Clear the info block if the find regex is empty
if (!findRegex) { if (!findRegex) {
infoBlock.addClass('info'); setInfoBlock(infoBlock, t`Find Regex is empty`, 'info');
infoBlockTextSpan.text(t`Find Regex is empty`);
return; return;
} }
@ -338,12 +335,10 @@ function updateInfoBlock(editorHtml) {
flagInfo.push(regex.flags.includes('g') ? t`Applies to all matches` : t`Applies to the first match`); flagInfo.push(regex.flags.includes('g') ? t`Applies to all matches` : t`Applies to the first match`);
flagInfo.push(regex.flags.includes('i') ? t`Case insensitive` : t`Case sensitive`); flagInfo.push(regex.flags.includes('i') ? t`Case insensitive` : t`Case sensitive`);
infoBlock.addClass('hint'); setInfoBlock(infoBlock, flagInfo.join('. '), 'hint');
infoBlockTextSpan.text(flagInfo.join('. '));
infoBlockFlagsHint.show(); infoBlockFlagsHint.show();
} catch (error) { } catch (error) {
infoBlock.addClass('error'); setInfoBlock(infoBlock, error.message, 'error');
infoBlockTextSpan.text(error.message);
} }
} }

View File

@ -106,18 +106,21 @@ input.enable_scoped {
display: block; display: block;
} }
#regex_info_block { #regex_info_block_wrapper {
position: relative; position: relative;
}
#regex_info_block {
margin: 10px 0; margin: 10px 0;
padding: 5px 20px; padding: 5px 20px;
font-size: 0.9em; font-size: 0.9em;
} }
#regex_info_block:empty { #regex_info_block_wrapper:has(#regex_info_block:empty) {
display: none; display: none;
} }
#regex_info_block .info-block-flags-hint { #regex_info_block_flags_hint {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 10px; right: 10px;