Discard AlertSingleton

igvteam · Jan 23, 2025 · 0cca4d9 · 0cca4d9
1 parent f95d539
commit 0cca4d9
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 53 deletions.
diff --git a/css/_igv-ui-alert-dialog.scss b/css/_igv-ui-alert-dialog.scss
@@ -11,12 +11,15 @@ $igv-alert-dialog-body-copy-margin: 16px;
 
 .igv-ui-alert-dialog-container {
 
-  box-sizing: content-box;
+  position: fixed;
+
+  top: 20%;
+  left: 50%;
+  transform: translateX(-50%);
 
-  position: absolute;
   z-index: 2048;
-  top:50%;
-  left:50%;
+
+  box-sizing: content-box;
 
   width:$igv-alert-dialog-width;
   height:$igv-alert-dialog-height;

diff --git a/css/igv.css b/css/igv.css
diff --git a/js/embedCss.js b/js/embedCss.js
diff --git a/js/ui/alertSingleton.js b/js/ui/alertSingleton.js
diff --git a/js/ui/components/alertDialog.js b/js/ui/components/alertDialog.js
@@ -1,6 +1,5 @@
-import * as DOMUtils from "../utils/dom-utils.js"
-import makeDraggable from "../utils/draggable.js"
 import DOMPurify from "../../../node_modules/dompurify/dist/purify.es.mjs"
+import makeDraggable from "../utils/draggable.js"
 
 const httpMessages =
     {
@@ -9,7 +8,6 @@ const httpMessages =
         "404": "Not found"
     };
 
-
 class AlertDialog {
     /**
      * Initialize a new alert dialog
@@ -25,32 +23,35 @@ class AlertDialog {
         }, alertProps);
 
         // container
-        this.container = DOMUtils.div({class: "igv-ui-alert-dialog-container"});
+        this.container = document.createElement('div');
+        this.container.className = "igv-ui-alert-dialog-container";
         parent.appendChild(this.container);
-        this.container.setAttribute('tabIndex', '-1')
+        this.container.setAttribute('tabIndex', '-1');
 
         // header
-        const header = DOMUtils.div();
+        const header = document.createElement('div');
         this.container.appendChild(header);
 
-        this.errorHeadline = DOMUtils.div();
+        this.errorHeadline = document.createElement('div');
         header.appendChild(this.errorHeadline);
         this.errorHeadline.textContent = '';
 
         // body container
-        let bodyContainer = DOMUtils.div({class: 'igv-ui-alert-dialog-body'});
+        let bodyContainer = document.createElement('div');
+        bodyContainer.className = 'igv-ui-alert-dialog-body';
         this.container.appendChild(bodyContainer);
 
         // body copy
-        this.body = DOMUtils.div({class: 'igv-ui-alert-dialog-body-copy'});
+        this.body = document.createElement('div');
+        this.body.className = 'igv-ui-alert-dialog-body-copy';
         bodyContainer.appendChild(this.body);
 
         // ok container
-        let ok_container = DOMUtils.div();
+        let ok_container = document.createElement('div');
         this.container.appendChild(ok_container);
 
         // ok
-        this.ok = DOMUtils.div();
+        this.ok = document.createElement('div');
         ok_container.appendChild(this.ok);
         this.ok.textContent = 'OK';
 
@@ -61,28 +62,24 @@ class AlertDialog {
                 this.callback = undefined;
             }
             this.body.innerHTML = '';
-            DOMUtils.hide(this.container);
+            this.container.style.display = 'none'
         }
 
         this.ok.addEventListener('click', event => {
-
             event.stopPropagation()
-
             okHandler()
         });
 
         this.container.addEventListener('keypress', event => {
-
             event.stopPropagation()
-
             if ('Enter' === event.key) {
                 okHandler()
             }
         });
 
         makeDraggable(this.container, header);
 
-        DOMUtils.hide(this.container);
+        this.container.style.display = 'none'
     }
 
     present(alert, callback) {
@@ -94,15 +91,12 @@ class AlertDialog {
             string = httpMessages[string];
         }
 
-        const clean = DOMPurify.sanitize(string)
+        this.body.innerHTML = DOMPurify.sanitize(string)
 
-        this.body.innerHTML = clean
         this.callback = callback
-        DOMUtils.show(this.container, "flex")
+        this.container.style.display = 'flex'
         if (this.alertProps.shouldFocus) {
-            this.container.focus(
-                { preventScroll: this.alertProps.preventScroll }
-            )
+            this.container.focus({ preventScroll: this.alertProps.preventScroll })
         }
     }
 }