Restyle regex script toggles

This commit is contained in:
Cohee 2023-11-05 23:40:43 +02:00
parent 5e88edf22d
commit 4af6955588
3 changed files with 48 additions and 14 deletions

View File

@ -77,17 +77,20 @@ async function loadRegexScripts() {
scriptHtml.attr('id', uuidv4());
scriptHtml.find('.regex_script_name').text(script.scriptName);
scriptHtml.find('.disable_regex').prop("checked", script.disabled ?? false)
.each(function() {
$(this).closest('.checkbox').find('span').toggle(this.checked);
})
.on('click', function() {
script.disabled = !script.disabled;
$(this).closest('.checkbox').find('span').toggle(this.checked);
.on('input', function () {
script.disabled = !!$(this).prop("checked");
saveSettingsDebounced();
});
scriptHtml.find('.edit_existing_regex').on('click', async function() {
scriptHtml.find('.regex-toggle-on').on('click', function () {
scriptHtml.find('.disable_regex').prop("checked", true).trigger('input');
});
scriptHtml.find('.regex-toggle-off').on('click', function () {
scriptHtml.find('.disable_regex').prop("checked", false).trigger('input');
});
scriptHtml.find('.edit_existing_regex').on('click', async function () {
await onRegexEditorOpenClick(scriptHtml.attr("id"));
});
scriptHtml.find('.delete_regex').on('click', async function() {
scriptHtml.find('.delete_regex').on('click', async function () {
await deleteRegexScript({ existingId: scriptHtml.attr("id") });
});
@ -165,7 +168,7 @@ async function onRegexEditorOpenClick(existingId) {
editorHtml
.find(`input[name="replace_position"]`)
.filter(":checked")
.map(function() { return parseInt($(this).val()) })
.map(function () { return parseInt($(this).val()) })
.get()
.filter((e) => e !== NaN) || [],
disabled:
@ -247,7 +250,7 @@ jQuery(async () => {
const settingsHtml = await $.get("scripts/extensions/regex/dropdown.html");
$("#extensions_settings2").append(settingsHtml);
$("#open_regex_editor").on("click", function() {
$("#open_regex_editor").on("click", function () {
onRegexEditorOpenClick(false);
});

View File

@ -2,9 +2,10 @@
<span class="drag-handle menu-handle">&#9776;</span>
<div class="regex_script_name flexGrow overflow-hidden"></div>
<div class="flex-container flexnowrap">
<label class="checkbox flex-container">
<span data-i18n="Disabled">Disabled</span>
<input id="disabled" type="checkbox" name="disabled" class="disable_regex" />
<label class="checkbox flex-container" for="regex_disable">
<input type="checkbox" name="regex_disable" class="disable_regex" />
<span class="regex-toggle-on fa-solid fa-toggle-on" title="Disable script"></span>
<span class="regex-toggle-off fa-solid fa-toggle-off" title="Enable script"></span>
</label>
<div class="edit_existing_regex menu_button">
<i class="fa-solid fa-pencil"></i>

View File

@ -21,4 +21,34 @@
padding: 0 5px;
margin-top: 1px;
margin-bottom: 1px;
}
}
input.disable_regex {
display: none !important;
}
.regex-toggle-off {
cursor: pointer;
opacity: 0.5;
filter: grayscale(0.5);
}
.regex-toggle-on {
cursor: pointer;
}
.disable_regex:checked ~ .regex-toggle-off {
display: block;
}
.disable_regex:checked ~ .regex-toggle-on {
display: none;
}
.disable_regex:not(:checked) ~ .regex-toggle-off {
display: none;
}
.disable_regex:not(:checked) ~ .regex-toggle-on {
display: block;
}