Improved dialog styling and made dialogs draggable

1 files changed, 68 insertions, 0 deletions

diff --git a/wwwroot/js/dialog.js b/wwwroot/js/dialog.js
new file mode 100644
index 0000000..065014a
--- /dev/null
+++ b/wwwroot/js/dialog.js
@@ -0,0 +1,68 @@
+function dialogMouseDown(e) {
+    bumpDialog(e.currentTarget);
+}
+
+function dialogTitleMouseDown(e) {
+    e = e || window.event;
+    e.preventDefault();
+    var element = e.currentTarget.parentElement;
+    var ds = element.dataset;
+    ds.lastX  = e.clientX;
+    ds.lastY  = e.clientY;
+
+    window.dragDialog    = element;
+    document.onmouseup   = dragMouseUp;
+    document.onmousemove = dragMouseMove;
+}
+
+function dragMouseUp() {
+    window.dragDialog    = null;
+    document.onmouseup   = null;
+    document.onmousemove = null;
+}
+
+function dragMouseMove(e) {
+    e = e || window.event;
+    e.preventDefault();
+    var element = window.dragDialog;
+    var ds = element.dataset;
+    deltaX = ds.lastX - e.clientX;
+    deltaY = ds.lastY - e.clientY;
+    ds.lastX = e.clientX;
+    ds.lastY = e.clientY;
+    element.style.left = (element.offsetLeft - deltaX) + 'px';
+    element.style.top  = (element.offsetTop  - deltaY) + 'px';
+}
+
+function setDialogVisibility(element, visible) {
+    if(visible) {
+        element.style.left       = null;
+        element.style.top        = null;
+        element.style.opacity    = 1;
+        element.style.visibility = 'visible';
+        bumpDialog(element);
+
+        var input = element.querySelector('input[type="text"]');
+        if(input) {
+            setTimeout(() => input.focus(), 100);
+        }
+    } else {
+        element.style.opacity    = 0;
+        element.style.visibility = 'hidden';
+    }
+}
+
+function bumpDialog(element) {
+    var dialogs = Array
+        .from(document.querySelectorAll('div.dialog'))
+        .map(e => ({ zIndex: parseInt(e.style.zIndex), element: e }))
+        .sort((a, b) => a.zIndex - b.zIndex)
+        .map(d => d.element)
+        .filter(e => e != element);
+
+    dialogs.push(element);
+
+    var z = 900;
+    for(var d of dialogs)
+        d.style.zIndex = z++;
+}