Make dialogs draggable

ui/media/js/image-modifiers.js

@@ -566,4 +566,5 @@ modifierSettingsCloseBtn.addEventListener("click", (e) => {
 })
 
 modalDialogCloseOnBackdropClick(modifierSettingsDialog)
+makeDialogDraggable(modifierSettingsDialog)
 

ui/media/js/main.js

@@ -1507,6 +1507,7 @@ clearAllPreviewsBtn.addEventListener("click", (e) => {
 showDownloadDialogBtn.addEventListener("click", (e) => { saveAllImagesDialog.showModal() }) 
 saveAllImagesCloseBtn.addEventListener("click", (e) => { saveAllImagesDialog.close() })
 modalDialogCloseOnBackdropClick(saveAllImagesDialog)
+makeDialogDraggable(saveAllImagesDialog)
 
 saveAllZipToggle.addEventListener("change", (e) => {
     if (saveAllZipToggle.checked) {

ui/media/js/utils.js

@@ -1066,3 +1066,48 @@ function modalDialogCloseOnBackdropClick(dialog) {
         }
     })
 }
+
+function makeDialogDraggable(element) {
+    element.querySelector(".dialog-header").addEventListener('mousedown', (function() {
+        let deltaX=0
+        let deltaY=0
+        let dragStartX=0
+        let dragStartY=0
+        let oldTop=0
+        let oldLeft=0
+
+        function dlgDragStart(e) {
+            e = e || window.event;
+            const d = e.target.closest("dialog")
+            e.preventDefault();
+            dragStartX = e.clientX;
+            dragStartY = e.clientY;
+            oldTop = parseInt(d.style.top)
+            oldLeft = parseInt(d.style.left)
+            if (isNaN(oldTop)) { oldTop=0 }
+            if (isNaN(oldLeft)) { oldLeft=0 }
+            console.log(oldTop, oldLeft)
+            document.addEventListener('mouseup', dlgDragClose);
+            document.addEventListener('mousemove', dlgDrag);
+        }
+
+        function dlgDragClose(e) {
+            document.removeEventListener('mouseup', dlgDragClose);
+            document.removeEventListener('mousemove', dlgDrag);
+        }
+
+        function dlgDrag(e) {
+            e = e || window.event;
+            const d = e.target.closest("dialog")
+            e.preventDefault();
+            deltaX = dragStartX - e.clientX;
+            deltaY = dragStartY - e.clientY;
+            d.style.left = `${oldLeft-2*deltaX}px`
+            d.style.top  = `${oldTop-2*deltaY}px`
+        }
+
+        return dlgDragStart
+    })() )
+}
+
+

ui/plugins/ui/tiled-image-download.plugin.js

@@ -140,6 +140,7 @@
     document.getElementById("dti-cancel").addEventListener("click", (e) => downloadTiledImageDialog.close())
     document.getElementById("downnload-tiled-close-button").addEventListener("click", (e) => downloadTiledImageDialog.close())
     modalDialogCloseOnBackdropClick(downloadTiledImageDialog)
+    makeDialogDraggable(downloadTiledImageDialog)
 
     // ---- Stylesheet
     const styleSheet = document.createElement("style")