Confirm 'Clear All' and 'Stop Task'

Ask for a confimation before clearing the results pane or stopping a render task. The dialog can be skipped by holding down the shift key while clicking on the button.

3rd-PARTY-LICENSES

@@ -0,0 +1,27 @@
+jquery-confirm
+==============
+https://craftpip.github.io/jquery-confirm/
+
+jquery-confirm is licensed under the MIT license:
+
+  The MIT License (MIT)
+
+  Copyright (c) 2019 Boniface Pereira
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

CHANGES.md

@@ -19,8 +19,10 @@
 - Configuration to prevent the browser from opening on startup
 - Lots of minor bug fixes
 - A `What's New?` tab in the UI
+- Ask for a confimation before clearing the results pane or stopping a render task. The dialog can be skipped by holding down the shift key while clicking on the button.
 
 ### Detailed changelog
+* 2.4.13 - 22 Nov 2022 - shiftOrConfirm for red buttons
 * 2.4.13 - 21 Nov 2022 - Change the modifier weight via mouse wheel, drag to reorder selected modifiers, and some more modifier-related fixes. Thanks @patriceac
 * 2.4.12 - 21 Nov 2022 - Another fix for improving how long images take to generate. Reduces the time taken for an enqueued task to start processing.
 * 2.4.11 - 21 Nov 2022 - Installer improvements: avoid crashing if the username contains a space or special characters, allow moving/renaming the folder after installation on Windows, whitespace fix on git apply

ui/index.html

@@ -12,7 +12,9 @@
     <link rel="stylesheet" href="/media/css/modifier-thumbnails.css">
     <link rel="stylesheet" href="/media/css/fontawesome-all.min.css">
     <link rel="stylesheet" href="/media/css/drawingboard.min.css">
+    <link rel="stylesheet" href="/media/css//jquery-confirm.min.css">
     <script src="/media/js/jquery-3.6.1.min.js"></script>
+    <script src="/media/js/jquery-confirm.min.js"></script>
     <script src="/media/js/drawingboard.min.js"></script>
     <script src="/media/js/marked.min.js"></script>
 </head>

ui/media/js/main.js

@@ -138,6 +138,31 @@ function isServerAvailable() {
     }
 }
 
+// shiftOrConfirm(e, prompt, fn)
+//   e      : MouseEvent
+//   prompt : Text to be shown as prompt. Should be a question to which "yes" is a good answer.
+//   fn     : function to be called if the user confirms the dialog or has the shift key pressed
+//
+// If the user had the shift key pressed while clicking, the function fn will be executed.
+// Otherwise, a confirmation dialog is shown. If the user confirms, the function fn will also
+// be executed.
+function shiftOrConfirm(e, prompt, fn) {
+    e.stopPropagation()
+    if (e.shiftKey) {
+         fn(e)
+    } else {
+        $.confirm({ theme: 'supervan',
+            title: prompt,
+            content: 'Tip: Use shift-click to skip this dialog.',
+            buttons: {
+                yes: () => { fn(e) },
+                cancel: () => {}
+            }
+        }); 
+    }
+}
+
+
 function logMsg(msg, level, outputMsg) {
     if (outputMsg.hasChildNodes()) {
         outputMsg.appendChild(document.createElement('br'))
@@ -887,8 +912,7 @@ function createTask(task) {
     task['progressBar'] = taskEntry.querySelector('.progress-bar')
     task['stopTask'] = taskEntry.querySelector('.stopTask')
 
-    task['stopTask'].addEventListener('click', async function(e) {
-        e.stopPropagation()
+    task['stopTask'].addEventListener('click', (e) => { shiftOrConfirm(e, "Shall this task be stopped?", async function(e) {
         if (task['isProcessing']) {
             task.isProcessing = false
             task.progressBar.classList.remove("active")
@@ -905,7 +929,7 @@ function createTask(task) {
 
             taskEntry.remove()
         }
-    })
+    })})
 
     task['useSettings'] = taskEntry.querySelector('.useSettings')
     task['useSettings'].addEventListener('click', function(e) {
@@ -1047,7 +1071,7 @@ async function stopAllTasks() {
     }
 }
 
-clearAllPreviewsBtn.addEventListener('click', async function() {
+clearAllPreviewsBtn.addEventListener('click', (e) => { shiftOrConfirm(e, "Remove all results and tasks from the results pane?", async function() {
     await stopAllTasks()
 
     let taskEntries = document.querySelectorAll('.imageTaskContainer')
@@ -1057,7 +1081,7 @@ clearAllPreviewsBtn.addEventListener('click', async function() {
 
     previewTools.style.display = 'none'
     initialText.style.display = 'block'
-})
+})})
 
 stopImageBtn.addEventListener('click', async function() {
     await stopAllTasks()