Merge pull request #4170 from imesha10/staging Regex bulkedit select all toggle button add
Signed| @@ -28,6 +28,9 @@ | |||
| 28 | </label> | 28 | </label> |
| 29 | </div> | 29 | </div> |
| 30 | <div class="regex_bulk_operations flex-container justifyCenter"> | 30 | <div class="regex_bulk_operations flex-container justifyCenter"> |
| 31 | <div id="bulk_select_all_toggle" class="menu_button menu_button_icon" title="Toggle Select All"> | ||
| 32 | <i class="fa-solid fa-check-double"></i> | ||
| 33 | </div> | ||
| 31 | <div id="bulk_enable_regex" class="menu_button menu_button_icon"> | 34 | <div id="bulk_enable_regex" class="menu_button menu_button_icon"> |
| 32 | <i class="fa-solid fa-toggle-on"></i> | 35 | <i class="fa-solid fa-toggle-on"></i> |
| 33 | <small data-i18n="Enable">Enable</small> | 36 | <small data-i18n="Enable">Enable</small> |
| @@ -28,6 +28,18 @@ export function getRegexScripts() { | |||
| 28 | } | 28 | } |
| 29 | 29 | ||
| 30 | /** | 30 | /** |
| 31 | * Toggle the icon for the "select all" checkbox in the regex settings. | ||
| 32 | * - Use `fa-check-double` when the checkbox is unchecked (indicating all scripts are not selected). | ||
| 33 | * - Use `fa-minus` when the checkbox is checked (indicating all scripts are selected). | ||
| 34 | * @param {boolean} allAreChecked Should the "select all" icon be in the checked state? | ||
| 35 | */ | ||
| 36 | function setToggleAllIcon(allAreChecked) { | ||
| 37 | const selectAllIcon = $('#bulk_select_all_toggle').find('i'); | ||
| 38 | selectAllIcon.toggleClass('fa-check-double', !allAreChecked); | ||
| 39 | selectAllIcon.toggleClass('fa-minus', allAreChecked); | ||
| 40 | } | ||
| 41 | |||
| 42 | /** | ||
| 31 | * Saves a regex script to the extension settings or character data. | 43 | * Saves a regex script to the extension settings or character data. |
| 32 | * @param {import('../../char-data.js').RegexScriptData} regexScript | 44 | * @param {import('../../char-data.js').RegexScriptData} regexScript |
| 33 | * @param {number} existingScriptIndex Index of the existing script | 45 | * @param {number} existingScriptIndex Index of the existing script |
| @@ -103,6 +115,7 @@ async function deleteRegexScript({ id, isScoped }) { | |||
| 103 | async function loadRegexScripts() { | 115 | async function loadRegexScripts() { |
| 104 | $('#saved_regex_scripts').empty(); | 116 | $('#saved_regex_scripts').empty(); |
| 105 | $('#saved_scoped_scripts').empty(); | 117 | $('#saved_scoped_scripts').empty(); |
| 118 | setToggleAllIcon(false); | ||
| 106 | 119 | ||
| 107 | const scriptTemplate = $(await renderExtensionTemplateAsync('regex', 'scriptTemplate')); | 120 | const scriptTemplate = $(await renderExtensionTemplateAsync('regex', 'scriptTemplate')); |
| 108 | 121 | ||
| @@ -183,6 +196,11 @@ async function loadRegexScripts() { | |||
| 183 | await deleteRegexScript({ id: script.id, isScoped }); | 196 | await deleteRegexScript({ id: script.id, isScoped }); |
| 184 | await reloadCurrentChat(); | 197 | await reloadCurrentChat(); |
| 185 | }); | 198 | }); |
| 199 | scriptHtml.find('.regex_bulk_checkbox').on('change', function () { | ||
| 200 | const checkboxes = $('#regex_container .regex_bulk_checkbox'); | ||
| 201 | const allAreChecked = checkboxes.length === checkboxes.filter(':checked').length; | ||
| 202 | setToggleAllIcon(allAreChecked); | ||
| 203 | }); | ||
| 186 | 204 | ||
| 187 | $(container).append(scriptHtml); | 205 | $(container).append(scriptHtml); |
| 188 | } | 206 | } |
| @@ -614,6 +632,19 @@ jQuery(async () => { | |||
| 614 | return scripts.filter(script => selectedIds.includes(script.id)); | 632 | return scripts.filter(script => selectedIds.includes(script.id)); |
| 615 | } | 633 | } |
| 616 | 634 | ||
| 635 | $('#bulk_select_all_toggle').on('click', async function () { | ||
| 636 | const checkboxes = $('#regex_container .regex_bulk_checkbox'); | ||
| 637 | if (checkboxes.length === 0) { | ||
| 638 | return; | ||
| 639 | } | ||
| 640 | |||
| 641 | const allAreChecked = checkboxes.length === checkboxes.filter(':checked').length; | ||
| 642 | const newState = !allAreChecked; // true if we just checked all, false if we just unchecked all | ||
| 643 | |||
| 644 | checkboxes.prop('checked', newState); | ||
| 645 | setToggleAllIcon(newState); | ||
| 646 | }); | ||
| 647 | |||
| 617 | $('#bulk_enable_regex').on('click', async function () { | 648 | $('#bulk_enable_regex').on('click', async function () { |
| 618 | const scripts = getSelectedScripts().filter(script => script.disabled); | 649 | const scripts = getSelectedScripts().filter(script => script.disabled); |
| 619 | if (scripts.length === 0) { | 650 | if (scripts.length === 0) { |