Merge pull request #4170 from imesha10/staging Regex bulkedit select all toggle button add

c9d8a0ad449e7a5b4133c07d17ae1ee1fdb44498

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

Signed
2 files changed, +34 -0Ignore whitespace
public/scripts/extensions/regex/dropdown.html+3 -0
@@ -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>
public/scripts/extensions/regex/index.js+31 -0
@@ -28,6 +28,18 @@ export function getRegexScripts() {
28}28}
2929
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 */
36function 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} regexScript44 * @param {import('../../char-data.js').RegexScriptData} regexScript
33 * @param {number} existingScriptIndex Index of the existing script45 * @param {number} existingScriptIndex Index of the existing script
@@ -103,6 +115,7 @@ async function deleteRegexScript({ id, isScoped }) {
103async function loadRegexScripts() {115async 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);
106119
107 const scriptTemplate = $(await renderExtensionTemplateAsync('regex', 'scriptTemplate'));120 const scriptTemplate = $(await renderExtensionTemplateAsync('regex', 'scriptTemplate'));
108121
@@ -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 });
186204
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 }
616634
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) {