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.

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()