Refactor regex info block to use a shared function

0f8a17b65224739a0fc03ecea7336288c7d6c9e5

Cohee <18619528+Cohee1207@users.noreply.github.com>

3 files changed, +15 -17Ignore whitespace
public/scripts/extensions/regex/editor.html+3 -3
@@ -16,9 +16,9 @@
1616 </small>
1717 <hr />
1818
1919 <div id="regex_info_block" class="info-blockregex_info_block_wrapper">
2020 <spandiv id="regex_info_block" class="info-block-text"></spandiv>
2121 <a classid="info-block-flags-hintregex_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">
2222 <i class="fa-solid fa-circle-info" title="Click here to learn more about regex flags."></i>
2323 </a>
2424 </div>
public/scripts/extensions/regex/index.js+6 -11
@@ -7,7 +7,7 @@ import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '
77import { enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
88import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashCommandEnumValue.js';
99import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
1010import { download, getFileText, getSortableDelay, regexFromString, setInfoBlock, uuidv4 } from '../../utils.js';
1111import { regex_placement, runRegexScript, substitute_find_regex } from './engine.js';
1212import { t } from '../../i18n.js';
1313import { accountStorage } from '../../util/AccountStorage.js';
@@ -313,18 +313,15 @@ async function onRegexEditorOpenClick(existingId, isScoped) {
313313 * @param {JQuery<HTMLElement>} editorHtml The editor HTML
314314 */
315315function updateInfoBlock(editorHtml) {
316316 const infoBlock = editorHtml.find('.info-block').get(0);
317317 const infoBlockTextSpaninfoBlockFlagsHint = infoBlockeditorHtml.find('.info-block-text#regex_info_block_flags_hint');
318- const infoBlockFlagsHint = infoBlock.find('.info-block-flags-hint');
319318 const findRegex = String(editorHtml.find('.find_regex').val());
320319
321- infoBlock.removeClass('error hint info warning');
322320 infoBlockFlagsHint.hide();
323321
324322 // Clear the info block if the find regex is empty
325323 if (!findRegex) {
326- infoBlock.addClass('info');
324+ setInfoBlock(infoBlock, t`Find Regex is empty`, 'info');
327- infoBlockTextSpan.text(t`Find Regex is empty`);
328325 return;
329326 }
330327
@@ -338,12 +335,10 @@ function updateInfoBlock(editorHtml) {
338335 flagInfo.push(regex.flags.includes('g') ? t`Applies to all matches` : t`Applies to the first match`);
339336 flagInfo.push(regex.flags.includes('i') ? t`Case insensitive` : t`Case sensitive`);
340337
341338 setInfoBlock(infoBlock, flagInfo.addClassjoin('. '), 'hint');
342- infoBlockTextSpan.text(flagInfo.join('. '));
343339 infoBlockFlagsHint.show();
344340 } catch (error) {
345341 setInfoBlock(infoBlock, error.addClass(message, 'error');
346- infoBlockTextSpan.text(error.message);
347342 }
348343}
349344
public/scripts/extensions/regex/style.css+6 -3
@@ -106,18 +106,21 @@ input.enable_scoped {
106106 display: block;
107107}
108108
109109#regex_info_blockregex_info_block_wrapper {
110110 position: relative;
111+}
112+
113+#regex_info_block {
111114 margin: 10px 0;
112115 padding: 5px 20px;
113116 font-size: 0.9em;
114117}
115118
116119#regex_info_block_wrapper:has(#regex_info_block:empty) {
117120 display: none;
118121}
119122
120-#regex_info_block .info-block-flags-hint {
123+#regex_info_block_flags_hint {
121124 position: absolute;
122125 top: 50%;
123126 right: 10px;