Repair AlertDialog css usage

igvteam · Jan 23, 2025 · 3a795a3 · 3a795a3
1 parent f136bd5
commit 3a795a3
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 71 deletions.
diff --git a/css/_igv-widgets-alert-dialog.scss → css/_igv-ui-alert-dialog.scss b/css/_igv-widgets-alert-dialog.scss → css/_igv-ui-alert-dialog.scss
@@ -9,14 +9,17 @@ $igv-alert-dialog-ok-container-height: 64px;
 $igv-alert-dialog-ok-button-height: 30px;
 $igv-alert-dialog-body-copy-margin: 16px;
 
-.igv-widgets-alert-dialog-container {
+.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;
@@ -69,26 +72,28 @@ $igv-alert-dialog-body-copy-margin: 16px;
   }
 
   // body container
-  #igv-widgets-alert-dialog-body {
+  .igv-ui-alert-dialog-body {
+
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+
     color: $igv-dark-grey-color;
 
     width: 100%;
     height: calc(100% - #{$igv-alert-dialog-header-height} - #{$igv-alert-dialog-ok-container-height});
 
     overflow-y: scroll;
 
-    #igv-widgets-alert-dialog-body-copy {
-      cursor: pointer;
-      //user-select: none;
+    .igv-ui-alert-dialog-body-copy {
+      //cursor: pointer;
 
       margin: $igv-alert-dialog-body-copy-margin;
 
       width: auto;
       height: auto;
 
-      //overflow-x: hidden;
-      //overflow-y: scroll;
-
       overflow-wrap: break-word;
       word-break: break-word;
 

diff --git a/css/app.css b/css/app.css
diff --git a/css/app.css.map b/css/app.css.map
diff --git a/css/app.scss b/css/app.scss
@@ -19,7 +19,7 @@ $igv-app-footer-height: 48px;
 $igv-app-logo-container-width: 20%;
 $igv-header-height: 48px;
 
-@import "igv-widgets-alert-dialog";
+@import "igv-ui-alert-dialog";
 @import "file-load-widget";
 
 html, body {

diff --git a/index.html b/index.html
@@ -40,9 +40,9 @@
   <!-- Google GSI -->
   <script src="https://accounts.google.com/gsi/client"></script>
 
-  <script src="./igvwebConfig.js"></script>
+  <script src="./igvwebConfig-private.js"></script>
 
-  <script type="module" src="js/app.js"></script>
+  <script type="module" src="./js/app.js"></script>
 
 
 </head>

diff --git a/js/app.js b/js/app.js
@@ -63,7 +63,10 @@ let pngSaveImageModal
 
 async function main(container, config) {
 
-    AlertSingleton.init(container)
+    const parent = document.getElementById('igv-main')
+    AlertSingleton.init(parent)
+
+    AlertSingleton.present(`igv webapp is good to go`)
 
     $('#igv-app-version').text(`IGV-Web app version ${version()}`)
     $('#igv-igvjs-version').text(`igv.js version ${igv.version()}`)
@@ -205,6 +208,7 @@ async function main(container, config) {
     if (browser) {
         Globals.browser = browser
         await initializationHelper(browser, container, config)
+        browser.alert.present(`browser ${ browser.guid } is good to go`)
     }
 }
 

diff --git a/js/widgets/alertDialog.js b/js/widgets/alertDialog.js
@@ -1,76 +1,85 @@
-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 =
     {
         "401": "Access unauthorized",
         "403": "Access forbidden",
         "404": "Not found"
-    }
-
+    };
 
 class AlertDialog {
-    constructor(parent) {
+    /**
+     * Initialize a new alert dialog
+     * @param parent
+     * @param alertProps - Optional - properties such as scroll to error
+     */
+    constructor(parent, alertProps) {
+        this.alertProps = Object.assign({
+            /** When an alert is presented - focus occur */
+            shouldFocus: true,
+            /** When focus occur - scroll into that element in the view */
+            preventScroll: false
+        }, alertProps);
 
         // container
-        this.container = DOMUtils.div({class: "igv-widgets-alert-dialog-container"})
-        parent.appendChild(this.container)
-        this.container.setAttribute('tabIndex', '-1')
+        this.container = document.createElement('div');
+        this.container.className = "igv-ui-alert-dialog-container";
+        parent.appendChild(this.container);
+        this.container.setAttribute('tabIndex', '-1');
 
         // header
-        const header = DOMUtils.div()
-        this.container.appendChild(header)
+        const header = document.createElement('div');
+        this.container.appendChild(header);
 
-        this.errorHeadline = DOMUtils.div()
-        header.appendChild(this.errorHeadline)
-        this.errorHeadline.textContent = ''
+        this.errorHeadline = document.createElement('div');
+        header.appendChild(this.errorHeadline);
+        this.errorHeadline.textContent = '';
 
         // body container
-        let bodyContainer = DOMUtils.div({id: 'igv-widgets-alert-dialog-body'})
-        this.container.appendChild(bodyContainer)
+        let bodyContainer = document.createElement('div');
+        bodyContainer.className = 'igv-ui-alert-dialog-body';
+        this.container.appendChild(bodyContainer);
 
         // body copy
-        this.body = DOMUtils.div({id: 'igv-widgets-alert-dialog-body-copy'})
-        bodyContainer.appendChild(this.body)
+        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()
-        this.container.appendChild(ok_container)
+        let ok_container = document.createElement('div');
+        this.container.appendChild(ok_container);
 
         // ok
-        this.ok = DOMUtils.div()
-        ok_container.appendChild(this.ok)
-        this.ok.textContent = 'OK'
+        this.ok = document.createElement('div');
+        ok_container.appendChild(this.ok);
+        this.ok.textContent = 'OK';
 
         const okHandler = () => {
 
             if (typeof this.callback === 'function') {
-                this.callback("OK")
-                this.callback = undefined
+                this.callback("OK");
+                this.callback = undefined;
             }
-            this.body.innerHTML = ''
-            DOMUtils.hide(this.container)
+            this.body.innerHTML = '';
+            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)
+        makeDraggable(this.container, header);
 
-        DOMUtils.hide(this.container)
+        this.container.style.display = 'none'
     }
 
     present(alert, callback) {
@@ -79,14 +88,18 @@ class AlertDialog {
         let string = alert.message || alert
 
         if (httpMessages.hasOwnProperty(string)) {
-            string = httpMessages[string]
+            string = httpMessages[string];
         }
 
+        // this.body.innerHTML = DOMPurify.sanitize(string)
         this.body.innerHTML = string
+
         this.callback = callback
-        DOMUtils.show(this.container, "flex")
-        this.container.focus()
+        this.container.style.display = 'flex'
+        if (this.alertProps.shouldFocus) {
+            this.container.focus({ preventScroll: this.alertProps.preventScroll })
+        }
     }
 }
 
-export default AlertDialog
+export default AlertDialog;
diff --git a/js/widgets/alertSingleton.js b/js/widgets/alertSingleton.js
@@ -1,4 +1,4 @@
-import AlertDialog from './alertDialog.js'
+import igv from '../../node_modules/igv/dist/igv.esm.js'
 
 class AlertSingleton {
     constructor(root) {
@@ -9,7 +9,7 @@ class AlertSingleton {
     }
 
     init(root) {
-        this.alertDialog = new AlertDialog(root)
+        this.alertDialog = new igv.AlertDialog(root)
     }
 
     present(alert, callback) {

diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "data-modal": "github:igvteam/data-modal#v1.6.1",
     "igv-utils": "github:igvteam/igv-utils#v1.5.8",
     "google-utils": "github:igvteam/google-utils#v1.0.2",
+    "dompurify": "^3.0.9",
     "rollup": "^2.28.1",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-strip": "^1.2.2",