Refactor regex info block to use a shared function

0f8a17b65224739a0fc03ecea7336288c7d6c9e5

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

Parents: 34b2ef0fd7e582e2dccae04e9ee1c9d7ef0aaed1
3 files changed, +15 -17Showing whitespace changes
public/scripts/extensions/regex/editor.html+3 -3
@@ -16,9 +16,9 @@
16 </small>16 </small>
17 <hr />17 <hr />
1818
19 <div id="regex_info_block" class="info-block">19 <div id="regex_info_block_wrapper">
20 <span class="info-block-text"></span>20 <div id="regex_info_block" class="info-block"></div>
21 <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">21 <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">
22 <i class="fa-solid fa-circle-info" title="Click here to learn more about regex flags."></i>22 <i class="fa-solid fa-circle-info" title="Click here to learn more about regex flags."></i>
23 </a>23 </a>
24 </div>24 </div>
public/scripts/extensions/regex/index.js+6 -11
@@ -7,7 +7,7 @@ import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '
7import { enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';7import { enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
8import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashCommandEnumValue.js';8import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashCommandEnumValue.js';
9import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';9import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
10import { download, getFileText, getSortableDelay, regexFromString, uuidv4 } from '../../utils.js';10import { download, getFileText, getSortableDelay, regexFromString, setInfoBlock, uuidv4 } from '../../utils.js';
11import { regex_placement, runRegexScript, substitute_find_regex } from './engine.js';11import { regex_placement, runRegexScript, substitute_find_regex } from './engine.js';
12import { t } from '../../i18n.js';12import { t } from '../../i18n.js';
13import { accountStorage } from '../../util/AccountStorage.js';13import { accountStorage } from '../../util/AccountStorage.js';
@@ -313,18 +313,15 @@ async function onRegexEditorOpenClick(existingId, isScoped) {
313 * @param {JQuery<HTMLElement>} editorHtml The editor HTML313 * @param {JQuery<HTMLElement>} editorHtml The editor HTML
314 */314 */
315function updateInfoBlock(editorHtml) {315function updateInfoBlock(editorHtml) {
316 const infoBlock = editorHtml.find('.info-block');316 const infoBlock = editorHtml.find('.info-block').get(0);
317 const infoBlockTextSpan = infoBlock.find('.info-block-text');317 const infoBlockFlagsHint = editorHtml.find('#regex_info_block_flags_hint');
318 const infoBlockFlagsHint = infoBlock.find('.info-block-flags-hint');
319 const findRegex = String(editorHtml.find('.find_regex').val());318 const findRegex = String(editorHtml.find('.find_regex').val());
320319
321 infoBlock.removeClass('error hint info warning');
322 infoBlockFlagsHint.hide();320 infoBlockFlagsHint.hide();
323321
324 // Clear the info block if the find regex is empty322 // Clear the info block if the find regex is empty
325 if (!findRegex) {323 if (!findRegex) {
326 infoBlock.addClass('info');324 setInfoBlock(infoBlock, t`Find Regex is empty`, 'info');
327 infoBlockTextSpan.text(t`Find Regex is empty`);
328 return;325 return;
329 }326 }
330327
@@ -338,12 +335,10 @@ function updateInfoBlock(editorHtml) {
338 flagInfo.push(regex.flags.includes('g') ? t`Applies to all matches` : t`Applies to the first match`);335 flagInfo.push(regex.flags.includes('g') ? t`Applies to all matches` : t`Applies to the first match`);
339 flagInfo.push(regex.flags.includes('i') ? t`Case insensitive` : t`Case sensitive`);336 flagInfo.push(regex.flags.includes('i') ? t`Case insensitive` : t`Case sensitive`);
340337
341 infoBlock.addClass('hint');338 setInfoBlock(infoBlock, flagInfo.join('. '), 'hint');
342 infoBlockTextSpan.text(flagInfo.join('. '));
343 infoBlockFlagsHint.show();339 infoBlockFlagsHint.show();
344 } catch (error) {340 } catch (error) {
345 infoBlock.addClass('error');341 setInfoBlock(infoBlock, error.message, 'error');
346 infoBlockTextSpan.text(error.message);
347 }342 }
348}343}
349344
public/scripts/extensions/regex/style.css+6 -3
@@ -106,18 +106,21 @@ input.enable_scoped {
106 display: block;106 display: block;
107}107}
108108
109#regex_info_block {109#regex_info_block_wrapper {
110 position: relative;110 position: relative;
111}
112
113#regex_info_block {
111 margin: 10px 0;114 margin: 10px 0;
112 padding: 5px 20px;115 padding: 5px 20px;
113 font-size: 0.9em;116 font-size: 0.9em;
114}117}
115118
116#regex_info_block:empty {119#regex_info_block_wrapper:has(#regex_info_block:empty) {
117 display: none;120 display: none;
118}121}
119122
120#regex_info_block .info-block-flags-hint {123#regex_info_block_flags_hint {
121 position: absolute;124 position: absolute;
122 top: 50%;125 top: 50%;
123 right: 10px;126 right: 10px;