From 1fda12640fc41d84abcb78d521a80865975a74e1 Mon Sep 17 00:00:00 2001
From: patriceac <48073125+patriceac@users.noreply.github.com>
Date: Mon, 13 Mar 2023 22:07:21 -0700
Subject: [PATCH] Custom Image Modifiers dialog tweaks (#935)

* Custom Image Modifiers dialog tweaks

Couple minor usability improvements for the custom image modifiers dialog:
- set the focus to the textbox when opening the dialog
- pressing the Escape key closes the dialog

* Adding keyboard shortcuts

Escape to cancel the changes, Ctrl+Enter to confirm the changes. No change to the existing UI behavior using the mouse.

* Make the overlay focusable

Allows the keyboard shortcuts to work if user clicks on the main window rather than the textbox itself.

* Disable spell and grammar correction
---
 ui/index.html                  |  4 ++--
 ui/media/js/image-modifiers.js | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index d49e1f4d..38ff4852 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -392,12 +392,12 @@
         </div>
     </div>
 
-    <div id="modifier-settings-config" class="popup">
+    <div id="modifier-settings-config" class="popup" tabindex="0">
         <div>
             <i class="close-button fa-solid fa-xmark"></i>
             <h1>Modifier Settings</h1>
             <p>Set your custom modifiers (one per line)</p>
-            <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line"></textarea>
+            <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line" spellcheck="false"></textarea>
             <p><small><b>Tip:</b> You can include special characters like {} () [] and |. You can also put multiple comma-separated phrases in a single line, to make a single modifier that combines all of those.</small></p>
         </div>
     </div>
diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js
index b8282782..e52ad45e 100644
--- a/ui/media/js/image-modifiers.js
+++ b/ui/media/js/image-modifiers.js
@@ -1,6 +1,7 @@
 let activeTags = []
 let modifiers = []
 let customModifiersGroupElement = undefined
+let customModifiersInitialContent
 
 let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
 let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
@@ -347,9 +348,28 @@ previewImageField.onchange = () => changePreviewImages(previewImageField.value)
 
 modifierSettingsBtn.addEventListener('click', function(e) {
     modifierSettingsOverlay.classList.add("active")
+    customModifiersTextBox.setSelectionRange(0, 0)
+    customModifiersTextBox.focus()
+    customModifiersInitialContent = customModifiersTextBox.value // preserve the initial content
     e.stopPropagation()
 })
 
+modifierSettingsOverlay.addEventListener('keydown', function(e) {
+    switch (e.key) {
+        case "Escape": // Escape to cancel
+            customModifiersTextBox.value = customModifiersInitialContent // undo the changes
+            modifierSettingsOverlay.classList.remove("active")
+            e.stopPropagation()
+            break
+        case "Enter":
+            if (e.ctrlKey) { // Ctrl+Enter to confirm
+                modifierSettingsOverlay.classList.remove("active")
+                e.stopPropagation()
+                break
+            }
+    }
+})
+
 function saveCustomModifiers() {
     localStorage.setItem(CUSTOM_MODIFIERS_KEY, customModifiersTextBox.value.trim())